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

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