Landmark
<ns-landmark>
Overview
Landmarks are used to introduce the page, informing users of their current location and its primary purpose.
✨ This is an auto-generated AI summary of the ns-landmark's documentation.
It may not be accurate. ✨
Use landmarks to set the scene for what the page is for, what offers might be available and give helpful actions for users. It contains the main heading for the page and provides overarching context to the rest of the page.
Examples
type="summit"
type="hillside"
type="valley"
type="lakeside"
Guidance
Summit
Key
Key | Field type | Guidelines |
---|---|---|
A | Heading | The recommended length is between 4 and 12 words, not exceeding 50 characters in total. |
B | Paragraph | A single, short paragraph works best. The text length should not exceed two paragraphs of 3 lines. Include emphasis with <strong> , inline links <a> , lists <ul> <ol> . Add a caveat link if required. |
C | CTA | Keep the text short, relevant, and actionable. It should not exceed 24 characters. |
D | Image | Ensure the important focus area of your image remains within the safe-area. Use an image size of 1440 x 810px. Images should be WebP file type, the file size should be no more than 100kb. Note: The image shouldn’t hold any meaning and be only used as a decoration. It doesn’t have an alt="" attribute. This avoids adding unnecessary content for users using assistive technology. |
Hillside
Key
Key | Field type | Guidelines |
---|---|---|
A | Heading | The recommended length is between 4 and 12 words, not exceeding 50 characters in total. |
B | Paragraph | A single, short paragraph works best. The text length should not exceed two paragraphs of 3 lines. Include emphasis with <strong> , inline links <a> , lists <ul> <ol> . Add a caveat link if required. |
C | CTA | Keep the text short, relevant, and actionable. It should not exceed 24 characters. |
D | Decoration | Apply a colour background. See decoration for the list of options. |
Valley
Key
Key | Field type | Guidelines |
---|---|---|
A | Heading | The recommended length is between 4 and 12 words, not exceeding 50 characters in total. |
B | Paragraph | A single, short paragraph followed by an unordered list work best. The text length should not exceed one paragraph and a ticked list of 3 to 5 items. Include emphasis with <strong> , inline links <a> , lists <ul> <ol> . Add a caveat link if required. |
C | CTA | Keep the text short, relevant, and actionable. It should not exceed 24 characters. |
D | Image | There is a choice of 2 image sizes: 720 x 405px and 720 x 540px. Images should be WebP file type, the file size should be no more than 50kb. Note: The image shouldn’t hold any meaning and be only used as a decoration. It doesn’t have an alt="" attribute. This avoids adding unnecessary content for users using assistive technology. |
E | Decoration | Apply a colour background. See decoration for the list of options. |
Lakeside
Key
Key | Field type | Guidelines |
---|---|---|
A | Heading | The recommended length is between 4 and 12 words, not exceeding 50 characters in total. |
B | Paragraph | A single, short paragraph works best. The text length should not exceed two paragraphs of 3 lines. Include emphasis with <strong> , inline links <a> , lists <ul> <ol> . Add a caveat link if required. |
C | CTA | Keep the text short, relevant, and actionable. It should not exceed 24 characters. |
Considerations
- 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
.
- If the page purpose is promotional we recommend using
Implementation
Placement
The ns-landmark
component can only be used as a child of the <main>
element.
Specification
Attributes
image
- Property
image
- Description
- The link to the decorative image. The visual in the image needs to be related to the content.
- Type
string
- Default
pill-over-image
- Property
pillOverImage
- Description
- The toggle to display the pill over the image.
- Type
boolean
- Default
false
decoration
- Property
decoration
- Description
- The decorative background colour for the landmark.
- Type
string
- Options
cyan
lime
navy
blue
forest
orange
red
yellow
- Default
cyan
ratio
- Property
ratio
- Description
- The aspect ratio of the image.
- Type
string
- Options
16 / 9
4 / 3
- Default
4 / 3
type
- Property
type
- Description
- The type of the landmark.
- Type
string
- Options
summit
hillside
lakeside
valley
- Default
summit
Slots
Slot | Permitted tags | Description |
---|---|---|
heading | <h1> | The heading of the landmark and needs to be related to the content. |
paragraph | <p> | The content of the landmark. |
cta | <ns-cta> <a> | The interactive content for the landmark. |
pill | <ns-pill> | The pill to attract attention to key information in the content. |
Specification notes
<ns-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
, ornsx-marketing-consent
as these require more space than is available in the landmark. - Keep forms short in
hillside
to avoid distorting and stretching the background decoration colour.
Last updated: