Overview

A small coloured highlight which can be used to visually draw a customer's attention to a piece of information.

Summarise it!

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

The component is a small coloured highlight. Use ns-pill to highlight a small item of information to a customer. Within the British Gas experience, they are often used to attract attention to a promotional message or a notification. Only display a small detail of the content. The ns-pill component should not contain lengthy or complex information.

Pills can help to create a subtle sense of urgency or to draw a customer’s attention to the value of a product or service. For example, use them to highlight the date a promotional offer expires or to feature a gift offer.

Examples

Standard

Configure

Icon

Configure

Caveat

Configure

Guidance

Do

• Use solid versions of icons.
• Use <ns-pill> sparingly, ideally one or two per journey maximum. (Less is more).
• Keep your copy short and simple for maximum impact.
• Use <ns-pill> in a component with a direct CTA (Call To Action).
• Choose colours that are consistent and relevant.

Don't

• Use as validation messages.
• Create distraction or put undue pressure on customers to purchase unwanted or irrelevant products by overusing urgency elements.
• Use pills near a text CTA. Pills should not detract the user’s attention from their next action.
• Use in the middle of a sentence.
• Use the <ns-pill> as a link or button. (Caveat link excepted).
• Use icons that can make <ns-pill> visually appear like an interactive component, for example, an <ns-cta> or drop-down <ns-inputter> select.
• Use <ns-pill> as a heading.

Standard

Key

Key	Field type	Guidelines
A	Icon	Optional. To draw additional attention, provide clarity and to aid recognition.
B	Anonymous slot	Be concise and catchy, ideally between 1 and 4 words. Content should not run over more than one line on a squash-court viewport.
C	Caveat	Use a link to <ns-caveat>.

Implementation

Placement

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

• <ns-card>
• <ns-selector>
• <ns-landmark>

Specification

Attributes

colour

Property

colour

Description

The decorative background colour of the pill.

Type

string

Options

cyan lime navy forest slate orange red yellow

Default

slate

icon

Property

icon

Description

The decorative icon to provide visual aid to the content of the pill.

Type

string

Options

Refer to our icons.

Default

type

Property

type

Type

string

Default

standard

Slots

Slot	Permitted tags	Description
Anonymous slot		The anonymous slot for pill text.

Figma

Please note: The ns-pill 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).