Tags

Commonly used to add categories to blog posts, or topics to questions, c-tags are an alternative to the multi-select drop down component.

  • England
  • Scotland
  • Wales
<div class="c-tags">
  <span class="c-tags__container">
    <button type="button" class="c-button c-tag">
      Tag one
      <span class="c-tag__close">×</span>
    </button>
    <button type="button" class="c-button c-tag">
      Tag two
      <span class="c-tag__close">×</span>
    </button>
  </span>
  <div class="c-tags__field-container">
    <input class="c-field">
    <ul class="c-card c-card--menu u-higher">
      <li class="c-card__item">England</li>
      <li class="c-card__item">Scotland</li>
      <li class="c-card__item">Wales</li>
    </ul>
  </div>
</div>