Tags
Tags can be used to accentuate content & help items standout from the crowd. Their default shape is rounded but have a square variant .Tag--square.
Default ($c-b300)
Red ($c-r300)
Teal ($c-t300)
Yellow ($c-y300)
Default ($c-b300)
Red ($c-r300)
Teal ($c-t300)
Yellow ($c-y300)
<!-- Default -->
<span class="Tag">Default ($c-b300)</span>
<span class="Tag Tag--red">Red ($c-r300)</span>
<span class="Tag Tag--teal">Teal ($c-t300)</span>
<span class="Tag Tag--yellow">Yellow ($c-y300)</span>
<!-- Square -->
<span class="Tag Tag--square">Default ($c-b300)</span>
<span class="Tag Tag--square Tag--red">Red ($c-r300)</span>
<span class="Tag Tag--square Tag--teal">Teal ($c-t300)</span>
<span class="Tag Tag--square Tag--yellow">Yellow ($c-y300)</span>