Skip to main content

Tag

A Tag is a component made up of a text label, container, and color. Tags help users quickly identify important information related to an item and categorize items by keywords.

Anatomy
Anatomy Image
  1. Container
  2. Text

Default
Attribute Token Value
Container
Padding (Top and Bottom) tag-padding-y- N/A
Padding (Left and Right) tag-padding-x 0.75rem
Border Radius tag-radius 4px
Background Color tag-color-background-unknown #292a2d
Border Color tag-color-border-unknown #292a2d
Box Shadow tag-shadow-inner-unknown inset 0px 0px 5px 0px rgb(164, 171, 182)
Text
Text Color tag-color-text #ffffff
Font Size font-body-2-bold-font-size 0.875rem
Font Family font-body-2-bold-font-family 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
Font Weight font-body-2-bold-font-weight 700
Line Height font-body-2-bold-line-height calc(20 / 14)
Letter Spacing font-body-2-bold-letter-spacing 0.005em

Status
Pass Tag
Fail Tag
Unknown Tag

Pass
Attribute Token Value
Container
Background Color tag-color-background-pass #005a00
Border Color tag-color-border-pass #007a33
Box Shadow tag-shadow-inner-pass inset 0px 0px 5px 0px rgb(86, 240, 0)

Fail
Attribute Token Value
Container
Background Color tag-color-background-fail #661102
Border Color tag-color-border-fail #8b1703
Box Shadow tag-shadow-inner-fail inset 0px 0px 5px 0px rgb(255, 56, 56)

Unknown
Attribute Token Value
Container
Background Color tag-color-background-unknown #292a2d
Border Color tag-color-border-unknown #292a2d
Box Shadow tag-shadow-inner-unknown inset 0px 0px 5px 0px rgb(164, 171, 182)
Feedback

Help us improve Astro

Please rate your present experience with Astro:

Cancel