Skip to content




Think of this page as the shop window. It is the primary display point of the brand. It needs to capture attention, and peak interest. It is also the starting point for many users to navigate into specific product journeys, or learn before they purchase. The homepage has to work hard and wear many hats without being an overwhelming barrage of information.


  • An introduction to the brand, leaving a lasting first impression.
  • Promote specific products or services offered.
  • Drive traffic to strategically important products and services.
  • Provide a starting point for customers to easily find what they need.
  • Promote the latest offers.


Content guidance

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 with the logo.
Image of skylinePositioned directly beneath the global navigation and above any content, <ns-skyline> displays high level messages to the user. The purpose of ns-skyline is to notify the user of important site-wide, or non-page specific events, that may affect their experience of using the website.
Image of Panel 1This <ns-landmark> consists of a heading, an introductory paragraph and a CTA. Landmarks are used to introduce the page, informing users of their current location and its primary purpose. They contain the most compelling and important message, emphasising the key points in bold text, accompanied with a relevant ‘hero’ image.
Image of Panel 2Next, this <ns-panel> consists of a heading, an introductory paragraph and 3 <ns-card> components (section type), with CTAs for the most common reasons a user would be visiting the website.
Image of Panel 3Next is a <ns-lockup> describing some information such as latest news or a promotion combined with an image and a CTA.
Image of Panel 4Following on, are 3 more <ns-card> components with text CTAs, combined with a heading. These offer links to other services that may also be of interest, but are of less importance than the 3 cards above.
Image of Panel 5Next is an <ns-lockup> with decoration which is used to grab attention to another product or service lower down in the order.
Image of Panel 6Following is an <ns-lockup> but without decoration, so of less importance than the lockup above.
Image of Panel 7Then there is an <ns-lockup> with decoration…
Image of Panel 8…and then, if it’s really necessary another type of <ns-lockup> can be used. Be mindful of putting too many lockups on one page.
Image of Panel 9Now 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 text CTAs, and with a decoration that is sympathetic to the end of the page caveat or footer section.
Image of CaveatIf required, include <ns-caveat> to provide additional information and legal details to the content.
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: