Skip to main content
Odyssey Design System

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
  • USSR
  • 3-person
1966
Saturn V
  • USA
  • 3-person
1967
CZ-2F
  • CN
  • 3-person
1999
Don't
Agency Formed
  • NASA
1958
  • Roscosmos
1992
  • CNSA
1993