<aside> <img src="https://img.icons8.com/ios/250/000000/info.png" alt="https://img.icons8.com/ios/250/000000/info.png" width="40px" /> Small label above another component

</aside>

Badge guidance

Badges have many possible uses:

1. Emphasise—Call attention to a small amount of information related to text beneath it. For example, the date associated with an event listing.
2. Categorise or tag—Badges can act as tags and inform users what type of content they can expect to see after clicking on the associated link.
3. Flag—Using a badge with text such as "new" can highlight your new content to repeat users.

Content best practices

• When multiple badges can be seen at once, the badges should all fulfil the same purpose and the text within should be formatted in the same way. For example, if badges associated with events contain dates, all dates should follow the same format. If badges associated with content contain a tag like "video" or "report", then all text should be a singular noun that categorizes content or media.
• Badges work best when the text within is 1-2 words.
• A badge should never be so long that it wraps to the next line (on any size screen).

Badge structure

Badges have two structural variations: contained and floating.

1. Badge text—Keep as short as possible without losing meaning. Badge text can be any GS1 colour that is accessible at small sizes against its background.
2. Container—The contained badge's container has a size determined by the text inside and can be any GS1 accessible colour or GS1 Blue. The floating badge has no left or right padding, however the top and bottom padding should remain the same as the contained badge.

Colour variation