Overview

To visually draw attention to content.

Use the ns-standout component to make information stand out from a page and to visually differentiate a concise block of text from the content that surrounds it, for example:

• Quotes (as in prices)
• Call-outs
• Examples
• Additional information about the page
• Emergency information

Examples

Configure

Guidance

Do

• Keep concise and to the point.
• Limit use to 1 or 2 per page.
• Use it to make information stand out.
• Select a colour border decoration that works with your design.
• Use a relevant, single text link if it is necessary.
• Use without an <h2> - <h6>.
• Use without a link.
• Ensure the information is relevant and important enough to stand out from the rest of the content.

Don't

• Fill with many paragraphs.
• Overuse it everywhere - it dilutes the impact.
• Use it in place of ns-alert or ns-card – they have a different purpose.
• Add icons, images or illustrations.
• Use the direct ns-cta (you should consider using ns-card instead for that purpose).
• Nest another ns-standout component within it.
• Use in a form where helper text is more appropriate.
• Use for warning or error messages.

Standard

Key

Key	Field type	Guidelines
A	Decoration	You can choose to change the border colour from the default cyan to any of the colour options defined in the specifications.
B	Content	The content can accommodate a heading and multiple paragraphs, these should be concise. Can contain bold copy <b>, inline links <a>, lists <ul> <ol>, and a caveat at the end of the relevant paragraph if required <a href="#caveat">1</a>.

Implementation

Placement

The ns-standout component can be used in the following components:

• <ns-column>
• <ns-content>
• <ns-editorial>
• <ns-form>

Specification

Attributes

decoration

Property

decoration

Description

The decoration colour of the standout.

Type

string

Options

cyan lime navy blue forest slate orange red yellow

Default

cyan

type

Property

type

Type

Default

subtle

Slots

Slot	Permitted tags	Description
Anonymous slot	<ns-content> <ns-column>	Anonymous slot for content.