Content Label
A leading visual, a label with an optional sub-label and a line of description: the row you use for settings, integrations and list items. As a Content Card it becomes a bordered card with a close button.
Preview#
Label(Sublabel)
Insert the content description here.
Component
Type
Size
Sub-label
Badge
Toggle
When to use#
- For a settings row that names a thing and explains it, with a switch on the right.
- For an integration, a payment method or a person in a list, led by a logo, card or avatar.
- As a Content Card for a dismissible item, such as a connected account or a suggestion.
When not to use
- Use a Data Table when rows need to be compared column by column.
Anatomy#
PartDescription
1Leading visual
None, an icon chip, an avatar, a brand or company logo, or (as a card) a payment card. 40px, or 48px at Large.
2Label and sub-label
Satoshi Medium 14 (16 at Large) with a Regular sub-label in #8f8f8f.
3Description
14px (16 at Large) in #6d6d6d, wrapping as needed.
4Trailing
An optional badge and switch on a row; a badge in the title line and a close button on a card.
States#
StateBehaviour
Medium (40)
The default size.
Large (48)
Larger visual and type, for roomier settings pages.
Content Card
360px wide, 16px inset, 12px radius, with a hairline and a soft shadow.
Accessibility#
- The row is a group named by its label, so the switch and close button are announced with context.
- The switch is a native button with role="switch" and aria-checked; the close button has an aria-label.
- Leading images are decorative (alt=""), because the label already names the item.
Source#
Preview – final code pending
The Content Label is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.
Get notified when the source is publishedGet notified when the source is published
Used in these blocks