Overview

Content is used to display typography and media.

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 compliment the content it contains.

Don't

• Use additional <div> tags to wrap content as this 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 between 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>	Anonymous slot for 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 specification will break the styling and will be susceptible to breaking when the component is updated in future releases.

Spacing options

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