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.
The recommended length is between 4 and 12 words, not exceeding 50 characters in total.
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.
The content in
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
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
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
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>
Does it live in a panel?
Does it live inside other components?
What layout classes can be used?
Url of the image.
Switches the image and content position. Default is text on the left and image on the right.
This should be a heading level 2.
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