Skip to main contentCarbon Design System

Structured list

Color

ClassPropertyColor token
.bx--structured-list-thtext color$text-primary
.bx--structured-list-tdtext color$text-secondary
.bx--structured-list-row--header-rowborder-bottom$border-subtle *
.bx--structured-list-rowborder-bottom$border-subtle *

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

Interactive states

ClassPropertyColor token
.bx--structured-list-row--selectedbackground-color$background-selected
.bx--structured-list-svg:checkedfill$icon-primary
.bx--structured-list-row:hoverbackground-color$background-hover
.bx--structured-list-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

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