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.

  • Tag four
  • Tag five
  • Tag six
<div class="c-tags">
  <span class="c-tags__container">
    <button type="button" class="c-button c-button--primary c-tag">Tag one
      <span class="c-tag__close">×</span>
    </button>
    <button type="button" class="c-button c-button--primary c-tag">Tag two
      <span class="c-tag__close">×</span>
    </button>
    <button type="button" class="c-button c-button--primary c-tag">Tag three
      <span class="c-tag__close">×</span>
    </button>
  </span>
  <div class="c-tags__field-container">
    <input class="c-field">
    <ul class="c-menu c-menu--high c-menu--visible">
      <li class="c-menu__item">Tag four</li>
      <li class="c-menu__item">Tag five</li>
      <li class="c-menu__item">Tag six</li>
    </ul>
  </div>
</div>