Skip to main content

ns-content

Introduction#

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

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#

AttributeTypeDefaultOptionsDescription
spacingstring'normal''compact','cosy','normal','loose'The space between the elements
SlotsType
anonymoush1 - h6, p, ul, ol, figure, ns-cta, ns-table, ns-accordion

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

Design Tokens

You can change the branded look and feel of the ns-content by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

{
  "figure-color": "#767775",
  "figcaption": {
    "typography": "p-caption"
  },
  "font-size": {
    "small": {
      "typography": "p-small"
    },
    "normal": {
      "typography": "p-normal"
    }
  }
}

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.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ You can also contact the team on Slack on the #product-nucleus channel!

Related links#