Skip to main content

ns-article

Introduction#

ns-article is used to display long-form content

ns-article has been designed to be used to house content for a variety of long-form content such as blogs, editorials and support articles. Each use of the ns-article should be split into easy to consume chapters or sections.

Content Guidance#

Article - Content Guidance

KeyField typeGuidelines
AHeadingThe recommended length is between 4 and 12 words, not exceeding 50 characters in total.
BMediaThis is the video or image that will be used inside ns-content. Videos should be hosted on YouTube and have an aspect ratio of 16:9. Images can have an aspect ratio of 16:9 or 4:3, their file type should be jpg, and the file size should be no more than 100kb. Don't use imagery with white backgrounds.
CCaptionShort contextual description of the video or image content.
DContentThe content in ns-content can accommodate multiple sub headings, lists and paragraphs. The content should be concise and use sub headings to introduce each piece. Divide content into short paragraphs as it is easier to consume, and aids effective page scanning. Content can contain bold copy <b> <strong>, inline links <a>, lists <ul> <ol>, and a caveat at the end of the relevant paragraph if required <a href="#caveat">1</a>.
ECall to actionKeep the text ‘short, relevant, and actionable’. It should not exceed more than 10 characters.

Best practice#

💚 Do's💔 Don'ts
Split ns-article into multiple easy to consume sectionsUse to for non long form content
Place all images and videos in figureUse to create layouts
Prefer to use a 16:9 ratio for images and videos
Include contextual text links with content

Usage#

View example on Storybook

Article split into sections#

View example on Storybook

Component placement#

The ns-article component can only be used in the ns-panel component.

Specification#

SlotsType
anonymoushtml content

Specification notes#

Anonymous#

  • First children can only be a single <ns-content> or multiple <section> elements
  • Each <section> can only contain a single <ns-content>

Design Tokens

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

Read more about design tokens in our getting started guide.

{
  "separator-color": "#111518"
}

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#