badge of honour

Badges

Badges a simple way to let the users know that a particular item has a different status from the rest. Badges scale to match the size of the immediate parent element by using relative font sizing and em units..

Accessibility

To ensure accessibility at all times use a high contrast BOG100 #344734 for the badges background followed with a NGNW for body text NGNW for body text

Usage

We mainly use badges in the card section to highlight a relatively new project.

Example

This is a badge

Card title New

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Code


<h2>
 <span class="badge badge-secondary">This is a badge</span>
</h2>