Overview

Content is used to display typography and media.

Summarise it!

✨ This is an auto-generated AI summary of the ns-content's documentation. It may not be accurate. ✨

The ns-content component’s placement is inside other components. It helps to add consistency to the styling of typography, improving how it interacts with the other components.

Examples

Configure

Guidance

Do

• Use clean HTML.
• Set the spacing attribute to complement the content it contains.

Don't

• Use additional <div> tags to wrap content - it will break the spacing.

Implementation

Placement

The ns-content component can be used in the following components:

• <ns-article>
• <ns-column>
• <ns-expander>
• <ns-form>
• <ns-panel>
• <nsx-product-card-overview>

Specification

Attributes

spacing

Property

spacing

Description

The spacing strategy for the content.

Type

string

Options

compact cosy normal loose

Default

normal

type

Property

type

Type

string

Default

standard

Slots

Slot	Permitted tags	Description
Anonymous slot	<h1> <h2> <h3> <h4> <h5> <p> <ul> <ol> <figure> <ns-accordion> <ns-cta> <ns-table> <ns-standout>	The anonymous slot for the content.

Specification notes

Anonymous slot

To display correctly, <ns-content> relies on clean HTML in the anonymous slot. Using additional components or HTML elements not listed in the permitted tags will break the styling and will be susceptible to breaking when the component is updated in future releases.

spacing options

Spacing	Space value
compact	0.25em
cozy	0.5em
normal	1.0em
loose	1.5em

Figma

Please note: The ns-content Figma component configuration instructions are available only to members of the British Gas workspace who have access to the Nucleus Figma UI Kit.

Configuration instructions

(Opens in Figma).