Tags

Evolved from a label, is a tag. Meant to be linked and used in sequence.

A linked tag A linked tag A not-so-important linked tag A linked tag A linked tag

Tags don't have to be links, but should never be alone (and maybe non-links should be less colourful)

Tags HTML

<p>
  <a href="#" class="tag">A linked tag</a>
  <a href="#" class="tag">A linked tag</a>
  <a href="#" class="tag secondary-background">A not-so-important linked tag</a>
  <a href="#" class="tag">A linked tag</a>
  <a href="#" class="tag">A linked tag</a>
</p>

<p>
  <span class="tag">Tags</span>
  <span class="tag">don't</span>
  <span class="tag">have to be</span>
  <span class="tag">links, but</span>
  <span class="tag">should never be alone</span>
  <span class="tag secondary-background">(and maybe non-links should be less colourful)</span>
</p>

Tags Style

You can find the original source of the CSS as .scss

Tags

  • Last updated: 28 Jul 2016
  • Source

Have a use case that's not covered?

Please open an issue in the tracker. We'll update this living pattern library with your feedback.

All patterns

See also

These resources will help you engage and understand the EBI Framework.