ns-editorial

Organism | Editorial component.

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

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

image

image

Break up long paragraphs with sub-headings

Add a CTA

image

image

Add contextual text links into copy

Have a long piece of content without any breaks

image

image

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

To see examples visit Storybook

<ns-editorial image="/my-images/my-image.png">
<h2 slot="heading">Typewriter seitan chartreuse musta</h2>
<p>Polaroid actually neutra readymade. Glossier hot chicken literally vegan, hoodie artisan sustainable forage lyft gentrify bespoke vinyl.</p>
<p>Edison bulb church-key flannel fingerstache live-edge fixie fashion axe slow-carb stumptown locavore ethical knausgaard activated charcoal mixtape pork belly.</p>
<h3>Wayfarers taxidermy shabby chic heirloom</h3>
<p>Woke sartorial truffaut bespoke pinterest fingerstache hexagon lyft green juice bushwick sustainable you probably haven't heard of them irony.</p>
<p>Cardigan single-origin coffee jean shorts, blue bottle poke subway tile farm-to-table.</p>
<h3>Helvetica fingerstache</h3>
<ul class="ul-bullet">
<li>Edison bulb</li>
<li>Ethical knausgaard</li>
<li>Activated</li>
<li>Charcoal mixtape</li>
</ul>
</ns-editorial>

Component relationship

Relationship

Does it live in a panel?

❌ No

Does it live inside other components?

❌ No

What layout classes can be used?

None

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.

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!