Skip to main contentCarbon Design System

Structured list

Color

ElementPropertyColor token
Headertext color$text-primary
Row texttext color$text-secondary
Header row dividerborder-bottom$border-subtle *
Row dividerborder-bottom$border-subtle *

* Denotes a contextual color token that will change values based on the layer it is placed on.

Interactive states

ElementPropertyColor token
Row:selectedbackground-colorlayer-selected
Checkmarkfill$icon-primary
Row:hoverbackground-color$layer-hover
Row:focusborder$focus

Typography

Structured list headings should be set in title case, while all other text is set in sentence case. All typography is left aligned.

ElementFont-size (px/rem)Font-weightType token
Heading14 / 0.875SemiBold / 600$heading-compact-01
List text14 / 0.875Regular / 400$body-01

Structure

ElementPropertypx / remSpacing token
Structured listmin-width500 / 31.25
Headerpadding-top16 / 1$spacing-05
padding-bottom8 / 0.5$spacing-03
padding-left, padding-right16 / 1$spacing-05
Row textpadding-top16 / 1$spacing-05
padding-bottom24 / 1.5$spacing-06
padding-left, padding-right16 / 1$spacing-05
Iconheight, width16 / 1
Spacing and measurements for Structured List

The width of structured list varies based on content and layout.

Spacing and measurements for structured list with selection

Spacing and measurements for default spacing with hang alignment and flush alignment| px / rem

Spacing and measurements for structured list with selection

Spacing and measurements for condensed spacing with hang alignment and flush alignment | px / rem