Get started

Get the tools and building blocks to design and develop consistent and accessible experiences.

Start developing Start designing

Tags

Tags label items with metadata so users can filter and navigate content by categories.

Guidance

The tag component is used to represent a label or category. Tags can be used in various contexts where making taxonomy visible can help users, such as search results, filters and content categorization.

Taxonomies are metadata used to describe the content and make connections to similar content, like page type (news release, campaign page, service initiation page), Government departments, and topics.

Do

  • Use tags when making taxonomy visible helps your users, like filtering search results.
  • Only link tags to a collection of similar content that shares the same tag.

Don’t

  • Put random terms in a tag.
  • Use the tag component instead of a button.

Tag

Tag

HTML

<a class="gnb-tag" href="#">Tag</a>

Removable tag

HTML

<button class="gnb-tag-removable">Removable tag</button>
<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-tags-1.0.0.js"></script>