Skip to main content

ns-content

Introduction#

ns-content is used to display typography and media.

Note: This component is currently being considered for deprecation.

ns-content is used inside other components and has been created to help add consistency to typography styling, and to improve how typography interacts with other components.

Content guidance#

We do not currently have content guidance as this will change depending on the context in which it's being used.

Best practice#

๐Ÿ’š Do's๐Ÿ’” Dont's
Use clean htmlUse additional <div> tags to wrap content as this will break the styling
Set the spacing attribute to compliment the content it containsUse expanders outside of ns-accordion

Usage#

View example on Storybook

Using ns-image and ns-video#

Both ns-image and ns-video need to be wrapped in a <figure> element

<ns-content>
<figure>
<ns-image src="image/url.png" ratio="16:9" alt="Description about the image"></ns-image>
<figcaption>Further information about the image e.g. source</figcaption>
</figure>
</ns-content>

Component placement#

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

Specification#

AttributePropertyTypeDefaultOptionsDescription
spacingspacingstringnormalcompact, cosy, normal, looseThe space between the elements.
SlotsType
anonymoush1 - h6, p, ul, ol, figure, ns-accordion, ns-cta, ns-table, ns-standout

Specification notes#

Anonymous children#

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 valueSpace between elements
compact0.25em
cozy0.5em
normal1em
compact1.5em

Feedback#

  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.

Related links#