ns-landmark

Organism | Landmark component.

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

Landmark - Summit

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

CTA text

Keep the text ‘short, relevant, and actionable’ It should not exceed more than 24 characters.

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.

Hillside Landmark

Landmark - Hillside

NOTE: There is no CTA in the hillside landmark as the objective is to consume the content within the page.

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.

Lakeside Landmark

Landmark - Lakeside

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

CTA text

Keep the text ‘short, relevant, and actionable’ It should not exceed more than 24 characters.

Image guidance

Component

Variant

Ratio

Dimensions

Size

Type

Placeholder

ns-landmark

summit

16:9

1440x810px

< 200kb

jpeg

ns-landmark_summit_1440x810px

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.

Best practice for summit

💚 Do

💔 Don'ts

Capture the moment.

Allow the card to cover important content.

do-father-child

dont-child-lady-eng

Set focus of the photo correctly.

Obstruct people's faces with the card.

do-warehouse-eng

dont-ice-cream

Convey activity related to topic.

Use images with a white background.

do-couple-mobile

dont-wilbur

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.

do-use-same-colour-for-themed-pages

dont-use-arc-decoration

Keep the content concise.

Add a CTA. The aim is to encourage the user to discover more on the page.

do-keep-content-concise

dont-use-direct-cta

Use only the light font weight. If there's one weight, use bold.

dont-use-only-light-font

Best practice for lakeside

💚 Do

💔 Don'ts

Use more than one paragraph.

Use more than three paragraphs.

do-use-more-than-one-paragraph

dont-use-more-than-three-paragraphs

Display 400 and 500 error pages.

Even think about building a page with it.

display-400-and-500-error-pages

dont-even-this-about-building-a-page-with-it

Get to the point, in this scenario the Sub heading and CTA have been omitted.

do-get-to-the-point

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

To see examples of the Summit Landmark visit Storybook.

To see examples of the Hillside Landmark visit Storybook.

To see examples of the Lakeside Landmark visit Storybook.

Summit

<ns-landmark type="summit" image="/my-images/my-image.png">
<h1 slot="heading">
<span class="h5">Our product and services.</span>
<span class="h1 enlighten">When things break down, <b>we've got you covered</b></span>
</h1>
<p slot="paragraph">Protect your boiler, heating, drains and more. And call on our friendly engineers whenever you need them. </p>
<a slot="cta" href="#!">
<ns-cta type="direct">View our products</ns-cta>
</a>
</ns-landmark>

Hillside

<ns-landmark type="hillside">
<h1 slot="heading">
<span class="h5">Boiler replacement.</span>
<span class="h1 enlighten">What's the <b> right boiler for me? </b></span>
</h1>
<p slot="paragraph"> With so many types of boiler, <b>finding the right one</b> for you can feel like a daunting task. Here's the difference between the three main boiler types </p>
</ns-landmark>

Lakeside

<ns-landmark type="lakeside">
<h1 slot="heading">
<span class="h1">Sorry, we’re having technical problems at the moment</span>
</h1>
<p slot="paragraph">We’re unable to process your request right now. Please try again later.</p>
<p slot="paragraph">Alternatively you can get in touch directly. <a href="#caveat">1</a></p>
<a slot="cta" href="#!">
<ns-cta type="direct">Contact customer services</ns-cta>
</a>
</ns-landmark>

Component relationship

Relationship

Does it live in a panel?

❌ No

Does it live inside other components?

❌ No

What layout classes can be used?

None

Specification

Attribute

Type

Default

Options

Description

type

string

summit

summit, hillside, lakeside

The variant of the landmark.

image

string

Background image used summit 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.

Slots

Type

heading

<h1>

paragraph

<p> <div>

cta

ns-cta <a>

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.

  • 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

Image

  • 16x9

  • 1440 x 810px

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.

landmark-16x9-testcard-1440

Using Photoshop

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

image

Using Sketch

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

Screenshot 2019-06-20 at 12 30 08

Find it under 'Guides' in the Nucleus Sketch Library.

Landmark focal area guide - insert menu

💚 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

landmark-16x9-testcard-1440-01

landmark-16x9-testcard-1440-00

Capture the story within. This photo is about the lady and her phone

Unfortunately, this photo is completely unsuitable for a Landmark

landmark-16x9-testcard-1440-02

landmark-16x9-testcard-1440-04

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!