Styles
Default
Use the default style when the category doesn’t need attention called to it and when the page does not need any other accent colors or decoration. Default is the most used tag style.
Accent
Use the accent style to bring a pop color to the content. Only use the accent style when there aren’t many tags on the page or when the page is not already overloaded with color or decoration.
Assertive
Use the assertive style to highlight the content category. Only use the assertive style when there aren’t many tags on the page.
Featured
Only use the featured tag style to show new or featured content or products. The text “Featured” is not editable in this style. Don’t overuse the featured tag or use the featured tag for non-featured content.
Subtle
Use the subtle tag style when the tag contains a supporting piece of information, such as metadata, or appears within a group of tags. Subtle tags are commonly used in search results and download components.
Usage
Use a tag when content can be grouped into recognizable categories.
Tags can increase the visual noise on a page, especially when other decorative elements are combined on the page. Use tags in moderation, especially accent and assertive tags.
Do:
- Group related content under one umbrella tag
- Create separate and distinct categories
- Use the featured tag style for new or featured content
Don't:
- Create categories that are too specific and can’t be shared across content
- Add multiple tags to a single piece of content
- Overuse assertive or accent tag styles
- Overuse the featured tag style or use the featured tag style for non-featured content
- Create categories or force content into groups just to use the tag component
- Mix styles of tags
- Use tags in place of headings
- Use any other tag style for metadata other than subtle tag
Content guidelines
Do:
- Keep category names simple and succinct, try to use three words at most
Don't:
- Write in capital letters; the component’s CSS will automatically transform the text to uppercase for the styles that show text as uppercase
- Add punctuation, such as periods or exclamation marks, to tag text
Accessibility
This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards and content guidelines to ensure that this component is fully accessible.