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
      
    </button>
  </li>
  <li>
    <button class="a-tag-filter">
      Option 2
      
    </button>
  </li>
  <li>
    <button class="a-tag-filter">
      Option 3
      
    </button>
  </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