Tag
Use Tags to help describe and differentiate an entity or object. Think of them as “adjectives” in your UI toolbox that make navigating and parsing content easier.
# Anatomy
Tag UI is simple. It consists of typography and spacing within a neutral container. Color, weight, and spacing help distinguish it from Button.
# Usage
Tags are a great way for users to contextualize and understand the content they are looking at. They’re also helpful at organizing content across multiple experiences.
As stated above, Tags are for describing an entity or object, not representing one. You may associate one or many tags with an entity.
For example, "Shuttle" may be an individual type of spaceship that has the Tags "Winged", "Reusable", and "NASA".
- Winged
- Reusable
- NASA
# Describe an object, don’t be the object
Use Tags as descriptors paired with a particular object. These descriptors may be adjectives, categories, or other associations including proper nouns.
Do
| Operational Spacecraft | Constructed |
|---|---|
Soyuz
| 1966 |
Saturn V
| 1967 |
CZ-2F
| 1999 |
Don't
| Agency | Formed |
|---|---|
| 1958 |
| 1992 |
| 1993 |
# Basic example
- Tag 1
- Tag 2
- Tag 3
<ul class="ods-tag--list">
<li class="ods-tag">Tag 1</li>
<li class="ods-tag">Tag 2</li>
<li class="ods-tag">Tag 3</li>
</ul>