Overview

To visually draw attention to content.

✨ This is an auto-generated AI summary of the ns-standout's documentation. It may not be accurate. ✨

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

Updated

4th April 2025

Additional decoration membership has been added.

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 it with too many paragraphs.
• Overuse it - it dilutes the impact.
• Use it instead of <ns-alert> or <ns-card> – they have different purposes.
• Add icons, images or illustrations.
• Use the direct type <ns-cta>.
• Nest a <ns-standout> component within another.
• Use in a form where helper text is more appropriate.
• Use for warning or error messages.

Standard

Key

Key	Field type	Guidelines
A	Decoration	The colour of the border. See decoration for the list of options.
B	Anonymous slot	Introduce content with a heading. Add a few short paragraphs. Include emphasis with <strong>, inline links <a>, lists <ul> <ol>. Add a caveat link if required.

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 decorative border colour to draw attention to the content of the standout.

Type

string

Options

cyan lime navy blue forest membership slate orange red yellow

Default

cyan

type

Property

type

Type

Default

subtle

Slots

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

Specification notes

membership decoration is used to highlight membership related information, such as exclusive offers or benefits for members.

Figma

Please note: The ns-standout Figma component configuration instructions are available only to members of the British Gas workspace who have access to the Nucleus Figma UI Kit.

Configuration instructions

(Opens in Figma).