Skip to main content

ns-editorial

Introduction#

The editorial component is a self-contained or supporting piece of content that is more informative than promotional in nature. In some cases, it is necessary to explain something in more detail without the user needing to take an immediate action.

Content guidance#

Editorial

KeyField typeGuidelines
AHeadingThe recommended length is between 4 and 12 words, not exceeding 50 characters in total.
BImageThis is the image that will be used inside ns-editorial. It should have an aspect ratio of 4:3, the dimensions should be 480x360px, the file type should be jpg, and the file size should be no more than 50kb. Don't use imagery with white backgrounds.
CContentThe content in ns-editorial 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's 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>.

Image guidance#

ComponentVariantRatioDimensionsSizeTypePlaceholder
ns-editorialn/a4:3480x360px< 50kbjpegns-editorial-480x360px

Best practice#

๐Ÿ’š Do's๐Ÿ’” Dont's
Use Sub-headings to split large paragraphsAdd images to the editorial content
Use a 4:3 ratio for imageryInclude a text or direct CTA
Include contextual text links with contentUse imagery with white backgrounds
Use imagery with copy embedded

Content best practice#

๐Ÿ’š Do's๐Ÿ’” Dont's
Add listsStart without a heading
imageimage
Break up long paragraphs with sub-headingsAdd a CTA
imageimage
Add contextual text links into copyHave a long piece of content without any breaks
imageimage
Use without an image
image
Reverse the editorial
image

Considerations of best practice#

  • When starting a page using ns-editorial, start with the text on the left and image on the right
  • Break up long paragraphs with sub-headings to make content more readable
  • Keep each editorial focused on one subject

Usage#

View example on Storybook

Component placement#

The ns-editorial component can only be used as a child of the <main> element

Specification#

AttributeTypeDefaultOptionsDescription
imagestringUrl of the image.
reversebooleanfalsetrue,falseSwitches the image and content position. Default is text on the left and image on the right.
SlotsType
headingh tag
anonymoushtml elements

Specification notes#

Heading#

  • This should be a heading level 2.

Design Tokens

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

Read more about design tokens in our getting started guide.

{
  "heading": {
    "typography": "heading-2"
  },
  "subheadings": {
    "typography": "heading-4"
  }
}

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!