Skip to content




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.


  • 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.


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.

Last updated: