Tags

Tags are used to label, organize, or categorize content. Tags can be used as a method of filtering data or to show items within a particular category.

Types

Topic tag

Topic tags appear with content such as blog posts and press releases to display associated topics. When clicked, a topic tag takes a user to a filtered view of other items tagged with the same topic tag. In this filtered view, a topic tag appears as a filter tag.

HTML code snippet

<ul class="m-tag-group">
  <li>
    <a href="#" class="a-tag-topic">
      <span class="a-tag-topic__bullet" aria-hidden="true">•</span>
      <span class="a-tag-topic__text">Access to credit</span>
    </a>
  </li>

  <li>
    <a href="#" class="a-tag-topic">
      <span class="a-tag-topic__bullet" aria-hidden="true">•</span>
      <span class="a-tag-topic__text">Mortgages</span>
    </a>
  </li>
</ul>

Topic tag (stacked)

A topic tags group can be stacked at all screen sizes by adding the `m-tag-group–stacked` modifier to the tag group.

HTML code snippet

<ul class="m-tag-group m-tag-group--stacked">
  <li>
    <a href="#" class="a-tag-topic">
      <span class="a-tag-topic__bullet" aria-hidden="true">•</span>
      <span class="a-tag-topic__text">Open government</span>
    </a>
  </li>

  <li>
    <a href="#" class="a-tag-topic">
      <span class="a-tag-topic__bullet" aria-hidden="true">•</span>
      <span class="a-tag-topic__text">Banking</span>
    </a>
  </li>
</ul>

Non-link topic tags

A group of topic tags that are not links.

  • Open government
  • Banking

Filter tag

Filter tags are used as a part of multiselects to display categories, topics, and languages selected in a filterable list control panel.

HTML code snippet

<ul class="m-tag-group">
  <li>
    <button class="a-tag-filter">
      Option 1
      <svg
      xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg
      cf-icon-svg__error" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03
      1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1
      1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6
      8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455
      9.716z"></path>
      </svg>
    </button>
  </li><li>
    <button class="a-tag-filter">
      Option 4
      <svg
      xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg
      cf-icon-svg__error" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03
      1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1
      1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6
      8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455
      9.716z"></path>
      </svg>
    </button>
  </li>
  <li>
    <button class="a-tag-filter">
      A filter tag with very long words like supercalifragilisticexpialidocious
      <svg
      xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg
      cf-icon-svg__error" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03
      1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1
      1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6
      8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455
      9.716z"></path>
      </svg>
    </button>
  </li>
  <li>
    <a href="#" class="a-tag-filter">
      A filter tag using an anchor element
      <svg
      xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg
      cf-icon-svg__error" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03
      1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1
      1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6
      8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455
      9.716z"></path>
      </svg>
    </a>
  </li>
</ul>

Non-clickable filter tag

There can be elements that have the appearance of a filter tag, but are not clickable. This is used like an inline notification.

Note

HTML code snippet

<div class="a-tag-filter">
  Note
</div>

Behavior

To clear a filter tag selection, click the “x” icon inside of the filter tag.

Latest Updates

Page last edited:
Show all details
Edit page