Badges

Badges are used to incdicate status of item eg new or updated item and follow the notification colours to indicate levels of importance.

Example - large badge notification

Fully booked

Code example

<p>
    <span class="c-badge c-badge--large c-badge--alert">Fully booked</span>
</p>

Example - regular badge notification

Resource and support guide: looking ahead to 2021 New

Code example

<p>
    Resource and support guide: looking ahead to 2021<span class="c-badge c-badge--light-new">New</span>
</p>

Example - circular badge

13

Code example

<p> 
    <span class="c-badge c-badge--circle c-badge--circle--large bg-brand-red">13</span>
</p>