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

Spacing and measurements for structured list | px / rem

Spacing and measurements for structured list with selection

Spacing and measurements for structured list with selection | px / rem