When to use
Variants and states
Tags for desktop come in two variants - default and selected. Each of the tag variants come in a default and a hover state.
|
|
|
|
|
Default |
Default (hover) |
Selected |
Selected (hover) |
|
Use on blog pages to label and categorise content. |
Use when hovering over the 'Default’ tag. |
Use when a user selects one of the default tags. |
Use when hovering over the ‘Selected’ tag. |
Tags for mobile come in two variants - default and selected. Hover state is not present on mobile.
|
|
|
Default |
Selected |
|
Use on blog pages to label and categorise content. |
Use when a user selects one of the default tags. |
Best practice
Placement
Default
The ‘Default’ tag is usually placed at the bottom of a blog page.
Desktop
Desktop - Wrap
Tags should wrap to the next line when they exceed the available space.
Mobile
Mobile - Wrap
Tags should wrap to the next line when they exceed the available space.
Selected
The ‘Selected’ tag is usually placed under the page heading.
Desktop
Mobile
Behaviour
- Pressing the Default tag brings the user to a page with filtered content.
- Dismissing the Selected tag shows user all the content without filtering.
Content
Labels should be short and concise as described in the Best practices section.
Accessibility
All variants and states comply with the AA accessibility guidelines.