Tags

A tag can be used to assign a status or label to an associated content block.

Rules for tags

  • Limit the use of tags to only convey what is essential, to maximise their impact.
  • Try to only use one tag per associated content block.
  • Colours can be used to help differentiate tags but shouldn't be used alone to convey meaning as this is not accessible.
  • Use consistent colour and naming conventions.

Options available

Tags

This example shows all possible tag colours and their example context.

Example
No status Success Information Warning Danger
Code 
<!-- Begin pattern: tags //-->
<span class="sta-tag">No status</span>
<span class="sta-tag sta-tag--success font-scale-reset">Success</span>
<span class="sta-tag sta-tag--info font-scale-reset">Information</span>
<span class="sta-tag sta-tag--warning font-scale-reset">Warning</span>
<span class="sta-tag sta-tag--danger font-scale-reset">Danger</span>
<!-- End pattern: tags //-->

Tag sizes

The size of the tag can be adjusted to match its associated content.

Example
No status Success Information Warning Danger
Code 
<!-- Begin pattern: tags //-->
<span class="sta-tag font-scale-0">No status</span>
<span class="sta-tag sta-tag--success font-scale-1">Success</span>
<span class="sta-tag sta-tag--info font-scale-2">Information</span>
<span class="sta-tag sta-tag--warning font-scale-3">Warning</span>
<span class="sta-tag sta-tag--danger font-scale-4">Danger</span>
<!-- End pattern: tags //-->