Overview

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

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

Configure

Guidance

Do

• Use solid versions of icons.
• Use ns-pill very sparingly, ideally one or two per journey maximum. Less is more.
• Use a yellow pill to draw attention to an offer or promotional message.
• Use red and lime pills for dashboard notifications.
• Keep your copy short and simple for maximum impact.
• Use ns-pill in a component with a direct CTA.
• Choose colours that are consistent and relevant.

Don't

• Use as validation messages.
• Create a shouty experience by using ns-pill in multiple places. It dilutes the impact.
• Create distraction or put undue pressure on customers to purchase unwanted or irrelevant products by overusing urgency elements.
• Don’t use pills near a text CTA. Pills should not detract attention from your users’ 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	Use an icon to support your description.
B	Content	Content should be very concise and catchy, ideally between 1 and 4 words. Your content should not run over 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 colour of the pill.

Type

string

Options

cyan lime navy forest slate orange red yellow

Default

slate

icon

Property

icon

Description

The name of the icon to be displayed.

Type

string

Options

Refer to our icons.

Default

type

Property

type

Type

string

Default

standard

Slots

Slot	Permitted tags	Description
Anonymous slot		Anonymous slot for content.