Skip to main contentCarbon Design System

Structured list

Color

By default, structured lists have a transparent background layer. Optionally, you can apply a colored background layer to a structured list. Structured lists with a colored background layer are only available in the hang alignment.

ElementPropertyColor token
Header texttext-color
$text-primary
Header row dividerborder-bottom
$border-subtle
*
Header (transparent)background-colortransparent
Header (background)background-color
$layer
*
Row texttext-color
$text-secondary
Row dividerborder-bottom
$border-subtle
*
Row (transparent)background-colortransparent
Row (background)background-color
$layer
*
Iconicon-color
$icon-primary

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

Color of the interactive structured list

Interactive states

The structured list interactive states are shown below with its default transparent background layer and its optional color background layer.

StateElementPropteryColor token
Enabled (selected)Rowbackground-color
$layer-selected
*
Row texttext-color
$text-primary
HoverRowbackground-color
$layer-hover
*
Row texttext-color
$text-primary
Hover (selected)Rowbackground-color
$layer-selected-hover
*
Row texttext-color
$text-primary
FocusRow (transparent)background-colortransparent
Row (background)background-color
$layer
*
Borderborder
$focus
Focus (selected)Rowbackground-color
$layer-selected
*
Row texttext-color
$text-primary
Borderborder
$focus
DisabledRow (transparent)background-colortransparent
Row (background)background-color
$layer
*
Row texttext-color
$text-disabled
Iconinner fill
$icon-disabled
Disabled (selected)Rowbackground-color
$layer-selected
*
Row texttext-color
$text-disabled
Iconinner fill
$icon-disabled

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

State of the interactive structured list

Typography

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

Elementpx / remFont-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-right16 / 1
$spacing-05
padding-left (hang)16 / 1
$spacing-05
padding-left (flush)0–
Row textpadding-top16 / 1
$spacing-05
padding-bottom24 / 1.5
$spacing-06
padding-right16 / 1
$spacing-05
padding-left (hang)16 / 1
$spacing-05
padding-left (flush)0–
Iconheight, width16px–
padding-left, padding-right16 / 1
$spacing-05

Default structure

Spacing and measurements for default structured list

Spacing and measurements for default structured list with hang and flush alignment | px / rem.

Selectable structure

Spacing and measurements for selectable structured list

Spacing and measurements for selectable structured list with hang alignment | px / rem.

Size

There are two structured list sizes: default and condensed.

ElementSizepx / rem
Row itemDefault60 / 3.75
Condensed36 / 2.25
Sizes of structured list with selection

Default and condensed sizes for structured lists