Overview

Tags are used to represent and categorise items or content, typically with keywords, labels or topics. They highlight notable attributes, draw users’ attention, and provide a clear and efficient way to organise and filter information.

Tags in SWE are built upon the underpinning Bootstrap 4 framework and will scale to match the size of the immediate parent element by using relative font sizing and em units, for example, inside headings.

Various colours are available to help distinguish between tags and to visually support their function of drawing the user’s attention, particularly if it’s important. For example, it would make sense to use qg-tag-red for a tag that reads ‘Urgent’. The colours also provide flexibility to publishers who may use a certain colour theme within their content.

Usage guidance

• Tag text should consist of concise keywords, not phrases or sentences - one-word or two-word tags work best.
• If the same tag is used in more than one place across your content, make sure to keep the colour consistent, to avoid confusing users.
• Tags are visually styled to differentiate them from buttons. In general, try to avoid tags appearing alongside buttons as it may cause confusion.
• Don’t overdo it. When tags are used excessively, especially in close proximity, they can create visual noise that makes it challenging for users to read and understand the main content.

Code

<p>
    <span class="badge badge-pill qg-tag qg-tag-grey">Grey</span>
    <span class="badge badge-pill qg-tag qg-tag-green">Green</span>
    <span class="badge badge-pill qg-tag qg-tag-blue">Blue</span>
    <span class="badge badge-pill qg-tag qg-tag-purple">Purple</span>
    <span class="badge badge-pill qg-tag qg-tag-pink">Pink</span>
    <span class="badge badge-pill qg-tag qg-tag-red">Red</span>
    <span class="badge badge-pill qg-tag qg-tag-orange">Orange</span>
    <span class="badge badge-pill qg-tag qg-tag-yellow">Yellow</span>
</p>