Tags

Standalone active

Interactive standalone tag, used to denote something has been filtered by this tag but can be removed by the user.

<a href="#" class="tag tag--active">Active tag</a>

Toggle tags

These tags are for styling purposes only, any interactivity will need to be made in local code. Designed to be independent toggles.

• Inactive tag
• Active tag
• The application process
• Apprenticeships and jobs

<ul class="tags">
  <li class="tags__tag"><a href="#">Inactive tag</a></li>
  <li class="tags__tag tag--active"><a href="#">Active tag</a></li>
  <li class="tags__tag"><a href="#">The application process</a></li>
  <li class="tags__tag"><a href="#">Apprenticeships and jobs</a></li>
</ul>

Scheme tags

Scheme tags can be used as a variant, markup is not limited to unordered lists and can contain nested links for developer ergonomics.

<div class="tag tag--scheme--conservatoires">Conservatoires</div>
<span class="tag tag--scheme--undergraduate"><a href="#">Undergraduate</a></span>
<a class="tag tag--scheme--postgraduate">Postgraduate</a>
<span class="tag tag--scheme--teacher-training"><a href="#">Teacher Training</a></span>

Small variant

This can be used in combination with any of the above.

<span class="tag tag--small tag--scheme--conservatoires"><a href="#">Conservatoires</a></span>
<span class="tag tag--small tag--scheme--undergraduate"><a href="#">Undergraduate</a></span>
<span class="tag tag--small tag--scheme--postgraduate"><a href="#">Postgraduates</a></span>
<span class="tag tag--small tag--scheme--teacher-training"><a href="#">Teacher Training</a></span>