ns-pill

Introduction

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

Pills can be used to highlight a small item of key information to a customer. Within the British Gas experience, they should be used to attract attention to a promotional message or a notification. They should only be used to display a small detail of content and are not intended to 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, they can be used to highlight the date that a promotional offer expires, or to feature a gift offer.

Content guidance

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 a caveat. (See ns-caveat)

Tip: Short and snappy content that can be quickly absorbed at a glance has been shown to perform better than longer promotional content.

Best practice

💚 Do's	💔 Don'ts
Use solid versions of icons	Use as validation messages
Use ns-pill very sparingly, ideally one or two per journey maximum. Less is more.	Create a shouty experience by using ns-pill in multiple places. It dilutes the impact.
Use a yellow pill to draw attention to an offer or promotional message.	Create distraction or put undue pressure on customers to purchase unwanted or irrelevant products by overusing urgency elements.
Use red and lime pills for dashboard notifications.	Don’t use pills near a text CTA. Pills should not detract attention from your users’ next action.
Keep your copy short and simple for maximum impact.	Use in the middle of a sentence
Use ns-pill in a component with a direct CTA	Use the ns-pill as a link or button. (Caveat link excepted).
Choose colours that are consistent and relevant	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

Considerations of best practice

Multiple pills

Multiple pills within a journey will create a distracting and overwhelming experience for users. Please read our guidelines below carefully and use this component sparingly.

Colour usage

Colour should be used consistently with pills throughout the customer journey.

A yellow pill is used to draw attention to an offer of promotional message.

A red or lime pill can be used to drawing attention to important customer information or notification. For example, within a dashboard context, red can be used to indicate an ‘expired’ item and lime to indicate a ‘new’ item or forest for ‘success’.

There are a range of colours to choose from (see the specifications below). Try to use those that are consistent with existing usage, and relevant to subject (eg. Orange for Hive products).

Usage

View example on Storybook

Component placement

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

• ns-card
• ns-selector
• ns-landmark

Specification

Attribute	Type	Default	Options	Description
colour	string	slate	cyan, lime, navy, forest, slate, orange, red, yellow	The colour of the pill
icon	string		See ns-icon component icon types	The icons to show inside the pill

Specification notes

When an icon is supplied the pill will use the media object pattern.

Design Tokens

You can change the branded look and feel of the ns-pill by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

{
  "spacer": {
    "inside-top": "0.25rem",
    "inside-right": "1rem",
    "inside-bottom": "0.25rem",
    "inside-left": "1rem"
  },
  "icon": {
    "spacer": {
      "outside-right": "0.5rem"
    }
  },
  "caveat": {
    "spacer": {
      "outside-left": "0.25rem"
    }
  },
  "themes": [
    "cyan",
    "lime",
    "navy",
    "forest",
    "slate",
    "orange",
    "red",
    "yellow"
  ],
  "typography": "p-small",
  "themes-deprecated": [
    "green-light",
    "red-dark",
    "green-dark",
    "blue-dark",
    "blue"
  ],
  "themes-mapping": [
    "lime",
    "red",
    "forest",
    "navy",
    "navy"
  ]
}

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.

💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.

Related links

• ns-card
• ns-selector
• ns-landmark