Badge

Badges are small visually-strong colourful boxes that communicate states of things.

They are based on Bootstrap’s .badge class, but this relationship has been DEPRECATED and will be removed in a future major version. You can start using .g-badge instead.

HINT George’s Badges come in one-size-fits-all and they do not change font-size depending on the context.

Regular Badges

Open in Figma

There are five flavours of regular, rounded Badges. They extend the base class using .g-badge-* subclasses:

Loading demo…

Rules For Designers

Badges have no margins, but adding a white space character between two badges prevents them from touching each other.
Badges with an outline use the text colour also for the border.
Badges without an outline use a lighter shade of the text colour for the background.

Icon

Badges can contain an icon.

Loading demo…

Pills

Open in Figma

Pills are also round and used for counters. George’s flavours are triggered using the .g-pill-* variants:

.g-pill-unread for use in PrimaryNavigation to indicate new items
.g-pill-default for all other counters

Loading demo…

Similar to regular badges, the relationship to Bootstrap’s .badge-pill class has been DEPRECATED and will be removed in a future major version. You can start using .g-pill instead.

HINT While you can put any text into pills, they are used for numbers only.

Rules For Designers

Compared to Badges, Pills are even smaller in height, 16px instead of 20px.
Pills have a horizontal padding of 5px and no margins.
Text colour is $color-white (#ffffff).
Background colours are $color-ui-red (#cf2a1e) / $color-blue-400 (#0a285c).
Values greater than 99 are truncated by default