Skip to main content

Editorial

Introduction#

Editorial pages are 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.

Purpose#

  • To reassure the user with well organised details.
  • Anticipate frequently asked questions and provide the answers.
  • Help the user find everything they need to make informed decisions.
  • Provide access to other subsequent and related information.

Principles to follow#

CreativeTone of voiceKeywords
Modern and dynamicWelcoming, Be helpfulDetailed, Informative

Example#

Content guidance#

Editorial pages can contain lock-ups, images, links, lists and CTAs for a rich experience. Consider the hierarchy of information you want to show and group it under relative headings. Use images that help tell the story or help explain a complex concept.

Page compositionDescription
Image of headerThis page will always start with nsx-header providing the primary navigation for the website, whilst also being our main brand presence.
Image of landmark-hillsideNext is ns-landmark (hillside) showing a clear, concise and descriptive headline, paired with a line of text that elaborates on the title.
Image of Editorial 1Then there is content in the form of ns-editorial which 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. It also contains a supporting ns-image that should have an aspect ratio of 4:3. Don't use imagery with white backgrounds.
Image of Editorial 2Folllowing that is another ns-editorial component that has a reversed orientation.
Image of lockup decNext is an ns-lockup with decoration, highlighting some key information such as a related product or service combined with an image and a CTA.
Image of Editorial 3Next are 2 more ns-editorial components that show bullet point lists to help summarise important points such as benefits. These are useful to a user who may be scanning through the page for the details they want to know.
Image of lockupFollowing that is another ns-lockup but without decoration, so of less importance than the lockup above.
Image of Supplementary PIC cardsFolllowing that, towards the end of the page, we can 'mop-up' any users that have scrolled this far. Ask, 'What else might they be looking for that's not already been mentioned above?' It consists of 3 more ns-card components with images and text CTAs, and a decoration that is sympathetic to the end of the page caveat or footer section.
Image of FooterFinally, there is nsx-footer which holds all required links and copyright information for the website. It is also an important SEO tool as it includes links to social channels and our mobile apps.

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#