Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Structured list

Color

ClassPropertyColor token
.bx--structured-list-thtext color$text-01
.bx--structured-list-tdtext color$text-02
.bx--structured-list-row--header-rowborder-bottom$ui-03
.bx--structured-list-rowborder-bottom$ui-03

Interactive states

ClassPropertyColor token
.bx--structured-list-row--selectedbackground-color$selected-ui
.bx--structured-list-svg:checkedfill$ui-05
.bx--structured-list-row:hoverbackground-color$hover-row
.bx--structured-list-svg:hoverfill$ui-04
.bx--structured-list-row:focusborder$focus

Typography

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

PropertyFont-size (px/rem)Font-weightType token
.bx--structured-list-th14 / 0.875Semi-Bold / 600$heading-01
.bx--structured-list14 / 0.875Regular / 400$body-long-01

Structure

PropertyPropertypx / remSpacing token
.bx--structured-listmin-width500 / 31.25
.bx--structured-listmin-width500 / 36
.bx--structured-list-thpadding-top16 / 1$spacing-05
.bx--structured-list-thpadding-bottom8 / 0.5$spacing-03
.bx--structured-list-thpadding-left, padding-right16 / 1$spacing-05
.bx--structured-list-tdpadding-top16 / 1$spacing-05
.bx--structured-list-tdpadding-bottom24 / 1.5$spacing-06
.bx--structured-list-tdpadding-left, padding-right16 / 1$spacing-05
.bx--structured-list-svgheight, 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