Introduction#
Landmarks are used to introduce the page, informing users of their current location and its primary purpose.
Landmarks are used to set the scene for what the page is for, what offers might be available and give helpful best next actions for users. This is where the main heading for the page will sit and give the overarching context to the rest of the page.
Content guidance#
Summit Landmark#

Key | Field type | Guidelines |
---|
A | Sub heading | Sub headings are used to indicate the primary section or to reinforce a brand message. Short and simple words tend to work better and it is recommended to keep the length between 1 and 5 words. Include a full stop at the end of the sub-heading. |
B | Main Heading | The recommended length is between 4 and 12 words, not exceeding 50 characters in total. Headings contain light and bold font weight to highlight key messaging. |
C | Content | A single, short paragraph works best. Can contain bold copy <b> , inline links <a> and a caveat at the end of the relevant paragraph if required <a href="#caveat">1</a> . |
D | Action | See action guidance below |
E | Image path | This is the image that will be used inside ns-landmark . Ensure the important focus area of your image remains within the safe-area. It should have an aspect ratio of 16:9, the dimensions should be 1440x810 px, the file type should be jpg, and the file size should be no more than 150kb. Please make sure you work with a designer when selecting this image as finding the right one with the correct focus area can be challenging. Note: The image shouldn't hold any meaning and be only used as a decoration. This is why it doesn't have an alt="" attribute to avoid adding unnecessary content for users using assistive technology. |
Hillside Landmark#

Key | Field type | Guidelines |
---|
A | Sub heading | Sub headings are used to indicate the primary section or to reinforce a brand message. Short and simple words tend to work better and it is recommended to keep the length between 1 and 5 words. Include a full stop at the end of the sub-heading. Note: For guide pages (non-product pages produced with strong SEO focus) a Sub heading is not required. |
B | Main Heading | The recommended length is between 4 and 12 words, not exceeding 50 characters in total. Headings contain light and bold font weight to highlight key messaging. |
C | Content | A single, short paragraph works best. Can contain bold copy <b> , inline links <a> and a caveat at the end of the relevant paragraph if required <a href="#caveat">1</a> . |
D | Decoration | Apply a colourful gradient decoration to the landmark. The specification table has a list of options. |
E | Action | See action guidance below |
Valley Landmark#

NOTE: The purpose of the valley landmark is to present an overview of a product or service as a user moves down the funnel of their purchase journey. A CTA may be used, but is not recommended in scenarios where the objective is to encourage further on-page browsing.
Key | Field type | Guidelines |
---|
A | Sub heading | Sub headings are used to indicate the primary section or to reinforce a brand message. Short and simple words tend to work better and it is recommended to keep the length between 1 and 5 words. Include a full stop at the end of the sub-heading. |
B | Main Heading | The recommended length is between 4 and 12 words, not exceeding 50 characters in total. Headings contain light and bold font weight to highlight key messaging. |
C | Content | Valley can accommodate multiple paragraph slots. However, be mindful of keeping it concise. To introduce a product or service we recommend 1 shot paragraph and three or four bullet point in a ticked list to showcase your key product benefits. It can contain bold copy <b> , inline links <a> and a caveat at the end of the relevant paragraph if required <a href="#caveat">1</a> . |
D | Action | See action guidance below |
E | Image path | This is the image that will be used inside ns-landmark . It should have an aspect ratio of 4:3, the dimensions should be 720x540px, the file type should be jpg, and the file size should be no more than 100kb. To see which image you can use - please see the Image Guidance section below. Don't use imagery with white backgrounds. Please make sure you work with a designer when selecting any imagery for the ns-landmark. Note: The image shouldn't hold any meaning and be only used as a decoration. This is why it doesn't have an alt="" attribute to avoid adding unnecessary content for users using assistive technology. |
Lakeside Landmark#

Key | Field type | Guidelines |
---|
A | Sub heading | Sub headings are used to indicate the primary section or to reinforce a brand message. Short and simple words tend to work better and it is recommended to keep the length between 1 and 5 words. Include a full stop at the end of the sub-heading. |
B | Main Heading | The recommended length is between 4 and 12 words, not exceeding 50 characters in total. Headings contain light and bold font weight to highlight key messaging. |
C | Content | Lakeside can accommodate multiple paragraph slots. However, be mindful of keeping it concise. Our guidance is a minimum of 1 and a maximum of 3. Can contain bold copy <b> , inline links <a> and a caveat at the end of the relevant paragraph if required <a href="#caveat">1</a> . |
D | Action | See action guidance below |
Image guidance#
Action guidance#
CTA#
- A CTA is optional and not recommended in scenarios where you want to encourage your user to explore content further down the page.
- If you need to include a CTA keep the text βshort, relevant, and actionableβ. It should not exceed more than 24 characters.
Form#
- A form is optional and recommended in scenarios where you need some information from the user to start a journey or dynamically change the content on the rest of the page.
- Don't use
ns-selector
, ns-datepicker
, nsx-address-selector
, or nsx-marketing-consent
as these require more space than is available in the landmark. - Keep forms short in
hillside
to avoid distorting and stretching the gradient.
Best practice#
π Do's | π Don'ts |
---|
Use it at the top of the page. | Use it in the middle or end of a page. |
Communicate the primary purpose in a clear and concise way. | Always add a cta (It'll drive traffic away). |
Content must be relevant to the page. | Use it to hold random content - ns-editorial may be better use for this. |
Use decoration/lifestyle photography only. | Don't hold any meaning in the image. |
Best practice for summit
#
π Do | π Don'ts |
---|
Capture the moment. | Allow the card to cover important content. |
 |  |
Set focus of the photo correctly. | Obstruct people's faces with the card. |
 |  |
Convey activity related to topic. | Use images with a white background. |
 |  |
Best practice for hillside
#
π Do's | π Don'ts |
---|
Use the same colour for a set of pages on the same topic, e.g. Guide pages related to boilers. | Use the 'invert-bridge' decoration. |
 |  |
Keep the content concise. | Use only the light font weight. If there's one weight, use bold. |
 |  |
Best practice for lakeside
#
π Do | π Don'ts |
---|
Use more than one paragraph. | Use more than three paragraphs. |
 |  |
Display 400 and 500 error pages. | Use to build a page. |
 |  |
Get to the point, in this scenario the Sub heading and CTA have been omitted. | |
 | |
Best practice for valley
#
π Do's | π Don'ts |
---|
Use checked list to highlight your key product benefits | Add a CTA if the purpose of the page is for users to consume the content. |
 |  |
Use a complementary image to add context to your product or service | Use long, verbose content. Keep the user interested with a snappy overview and draw them down the page |
 |  |
| Forget to use an image |
|  |
Considerations of best practice#
- Shorter and simpler words tend to work better in the heading.
- The recommended copy length is between 1 and 5 words for the Sub heading.
- The message must be in plain English, and help the user out of the situation by providing an actionable link if possible.
- If the purpose of the page is to understand more about a product or service, then it is considered bad practice to include a CTA within the landmark, as users are likely to drop out. This is because users believe the next step is to click the CTA, rather than reading the page to get a better understanding of how they should proceed.
- Let the page type define the type of landmark you use.
- If the page purpose is to be informative / educational then we recommend using
hillside
. - If the page purpose is promotional we recommend using
summit
. - If the page purpose is a 400 or 500 error page, use
lakeside
. - If the page purpose is to showcase features and products, use
valley
.
- If you are designing a series of informative / educational pages that all follow a similar theme, it would be considered best practice to use the same coloured decoration within the
hillside
.
Usage#
Summit#
View example on Storybook
Hillside#
View example on Storybook
Lakeside#
View example on Storybook
Valley#
View example on Storybook
Component placement#
The ns-landmark component can only be used as a child of the <main>
element
Specification#
Attribute | Type | Default | Options | Description |
---|
type | string | summit | summit , hillside , lakeside , valley | The variant of the landmark. |
image | string | | | Background image used for summit variant or image used for valley variant |
gradient | string | invert-ramp-cyan | invert-ramp-cyan , invert-ramp-grey-light , invert-ramp-green-light , invert-ramp-yellow , invert-ramp-blue | Background gradient and colour used for hillside variant. |
pillOverImage | boolean | | | Used to put the pill in the bottom left of the image when using type="valley" and an image |
Slots | Type |
---|
heading | <h1> |
paragraph | <p> <div> |
cta | ns-cta <a> |
pill | ns-pill |
Specification notes#
Heading#
- This needs to be a
h1
heading - The Sub heading is part of the heading to allow screen readers to read the heading properly.
- Sub heading is a
<span>
tag with a h5
class. - Main heading is a
<span>
tag with a h1
class. enlighten
class in the main heading <span>
to make the heading light.- Use
<b>
tag to embolden specific text.
Paragraph#
- Include an optional link to
#caveat
by placing <a href="#caveat">1</a>
at the end
Summit Variant - Image#
Summit Variant - Image template#
This provides the safe-area to the position of the focal point of the image.
Download the 1440x810px Landmark testcard image and place over your Landmark photos in your image editing software.

Using Photoshop#
Using Photoshop to overlay the Landmark focus template to check alignment.

Using Sketch#
Using Sketch to overlay the Landmark focus template to check alignment.

π Do's | π Don'ts |
---|
Here, the focus of the photo is located within the safe-area | The subject fills the entire photo, and the lady on the left will be obscured |
 |  |
Capture the story within. This photo is about the lady and her phone | Unfortunately, this photo is completely unsuitable for a Landmark |
 |  |
Design Tokens
You can change the branded look and feel of the ns-landmark by modifying these options in the design tokens.
Read more about design tokens in our getting started guide.
{
"card": {
"paragraph": {
"typography": "p-feature",
"spacer": {
"outside-top": "0.75rem"
},
"p": {
"spacer": {
"outside-bottom": "0.5rem"
},
"next": {
"spacer": {
"outside-top": "0.5rem"
}
}
},
"last-child": {
"spacer": {
"outside-bottom": "0"
}
}
},
"heading": {
"spacer": {
"outside-top": "0",
"outside-bottom": "0"
},
"last-child": {
"spacer": {
"outside-bottom": "0"
}
}
},
"pill": {
"spacer": {
"outside-top": "0.75rem",
"outside-bottom": "0.75rem",
"outside-right": "0",
"outside-left": "0"
}
}
},
"summit": {
"card": {
"heading": {
"spacer": {
"outside-top": "0",
"outside-bottom": "0"
}
}
},
"spacer": {
"basketball-court": {
"outside-top": "3rem"
},
"hockey-pitch": {
"outside-top": "4rem"
}
}
},
"valley": {
"spacer": {
"rugby-pitch": {
"inside-left": "9rem"
}
},
"card": {
"spacer": {
"inside-top": "1.5rem",
"outside-right": "5%",
"outside-left": "5%",
"basketball-court": {
"inside-top": "3rem",
"outside-right": "12.5%",
"outside-left": "12.5%"
},
"hockey-pitch": {
"outside-right": "4rem",
"outside-left": "0"
}
}
},
"image": {
"spacer": {
"outside-left": "5%",
"basketball-court": {
"outside-right": "12.5%",
"outside-left": "12.5%"
},
"hockey-pitch": {
"outside-right": "0",
"outside-left": "0"
}
}
},
"pill": {
"spcer": {
"outside-top": "0",
"outside-bottom": "0",
"outside-right": "0",
"outside-left": "0"
}
}
},
"lakeside": {
"panel": {
"spacer": {
"outside-top": "2rem",
"basketball-court": {
"outside-top": "3rem"
},
"hockey-pitch": {
"outside-top": "4rem"
}
}
}
}
}
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!
Related links#