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

Key	Field type	Guidelines
A	Heading	The recommended length is between 4 and 12 words, not exceeding 50 characters in total.
B	Image	This 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.
C	Content	The 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

Component	Variant	Ratio	Dimensions	Size	Type	Placeholder
ns-editorial	n/a	4:3	480x360px	< 50kb	jpeg	ns-editorial-480x360px

Best practice

💚 Do's	💔 Dont's
Use Sub-headings to split large paragraphs	Add images to the editorial content
Use a 4:3 ratio for imagery	Include a text or direct CTA
Include contextual text links with content	Use imagery with white backgrounds
	Use imagery with copy embedded

Content best practice

💚 Do's	💔 Dont's
Add lists	Start without a heading
Break up long paragraphs with sub-headings	Add a CTA
Add contextual text links into copy	Have a long piece of content without any breaks
Use without an image
Reverse the editorial

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

Attribute	Type	Default	Options	Description
image	string			Url of the image.
reverse	boolean	false	true,false	Switches the image and content position. Default is text on the left and image on the right.

Slots	Type
heading	h tag
anonymous	html 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"
  },
  "image": {
    "spacer": {
      "outside-bottom": "1.25rem",
      "basketball-court": {
        "outside-left": "3rem"
      },
      "hockey-pitch": {
        "outside-bottom": "1.5rem",
        "outside-left": "4rem"
      }
    }
  },
  "reverse": {
    "image": {
      "spacer": {
        "hockey-pitch": {
          "outside-left": "0"
        }
      }
    },
    "content": {
      "spacer": {
        "hockey-pitch": {
          "outside-left": "4rem"
        }
      }
    }
  },
  "content": {
    "spacer": {
      "outside-bottom": "0"
    }
  }
}

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!