Skip to main content



ns-content is used to display typography and media.

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


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-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>

Component placement#

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


spacingstring'normal''compact','cosy','normal','loose'The space between the elements
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


  • 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#