Tag

View in Github

Tags can be used to label or categorize items. They're designed to scale according to their inherited font size using ems.

.c-tag


<div class="has-b-btm-marg">
  <span class="c-tag has-bg-gray-dark has-text-white">
    <span class="c-tag__inner">simple tag</span>
  </span>
</div>
<p class="has-b-btm-marg t-links-underlined">
  This is a paragraph of text, which includes a <span class="c-tag has-bg-white-off is-rounded-b"><span class="c-tag__inner t-weight-bold">tag</span></span>.
</p>
<p class="has-b-btm-marg t-links-underlined">
  Use tags to highlight topics like <span class="c-tag has-bg-white-off is-rounded-b"><span class="c-tag__inner t-weight-bold">politics</span></span> or <a class="c-tag has-border is-rounded-b t-links-unset" href="#"><span class="c-tag__inner t-weight-bold">#txlege</a></span>.
<p>
<p class="has-b-btm-marg">You can also use them to list topics:</p>
<p>
  <span class="c-tag has-bg-white-off is-rounded-b"><span class="c-tag__inner t-weight-bold">higher education</span></span>&nbsp;
  <span class="c-tag has-bg-white-off is-rounded-b"><span class="c-tag__inner t-weight-bold">energy</span></span>&nbsp;
  <span class="c-tag has-bg-white-off is-rounded-b"><span class="c-tag__inner t-weight-bold">immigration</span></span>&nbsp;
</p>

This class isn't referenced anywhere

.c-tag--fixed

Has a set height and width, which responds to font-size. Use with is-rounded-full to create a circle. A11y note: Pay particular attention to the use of .is-sr-only, aria-hidden, and title= to convey meaning to obscure, one letter tags in the HTML of the example.


<p class="has-b-btm-marg t-size-s">
  Jerry Seinfeld <span class="is-sr-only">Libertarian party</span><span class="c-tag c-tag--fixed has-bg-lib is-rounded-full" title="Libertarian party" aria-hidden="true"><span class="c-tag__inner">L</span></span>
</p>
<p class="has-b-btm-marg t-size-s">
  <strong>
  Cosmo Kramer <span class="is-sr-only">Independent party</span><span class="c-tag c-tag--fixed has-bg-ind has-text-white is-rounded-full" title="Independent party" aria-hidden="true"><span class="c-tag__inner">I</span></span>
  </strong>
</p>

Append <code>.t-size-&lt;any-size&gt;</code> to vary the tag size.
<span class="t-size-m c-tag c-tag--fixed has-bg-rep has-text-white is-rounded-full" aria-hidden="true"><span class="c-tag__inner"><strong>R</strong></span></span>

This class isn't referenced anywhere