Tags are a way of showing related items in similar categories. Tags can be used to follow a news or eventlisting, for example, to show other events in the same category, or in the research paghes to link research articles in the same field..

Culture and communication 
<a class="c-tag" href="#">Culture and communication</a>

You can add a little icon to the front, if you're feeling daring

Culture and communication 
<a class="c-tag" href="#"><i class="c-tag__icon c-icon c-icon--apple"></i>Culture and communication</a>

If you have a bunch of them, put them in a list:

<ul class="c-tag-list">
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Creativity</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Culture and communication</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Environmental sustainability and resilience</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Health and wellbeing</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Justice and equality</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Risk, evidence and decision-making</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Technologies for the future</a>
  </li>
</ul>

Which can be centered or right-aligned in addition to the default left-alignment:

<ul class="c-tag-list c-tag-list--center">
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Creativity</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Culture and communication</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Environmental sustainability and resilience</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Health and wellbeing</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Justice and equality</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Risk, evidence and decision-making</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Technologies for the future</a>
  </li>
</ul>

<ul class="c-tag-list c-tag-list--right">
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Creativity</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Culture and communication</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Environmental sustainability and resilience</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Health and wellbeing</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Justice and equality</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Risk, evidence and decision-making</a>
  </li>
  <li class="c-tag-list__item">
    <a class="c-tag" href="#">Technologies for the future</a>
  </li>
</ul>

Options

Atoms

  • tag
    • content - the stuff to go in the tag (required)
    • link - the URL the tag should point to
    • icon - an icon to represent it

Molecules

  • tag-list
    • atoms: an array of tags