Skip to main contentCarbon Design System

Structured list

The following page documents visual specifications such as color, typography, structure, and size.

Color

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

Default color

ElementPropertyColor token
Headerbackground-colortransparent
Header: texttext color
$text-primary
Rowbackground-colortransparent
Row: texttext color
$text-secondary
Dividerborder-bottom
$border-subtle
*

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

Default structured list color

Default structured list color

Selectable color

Selectable structured list has an available feature flag.

ElementPropertyColor token
Headerbackground-colortransparent
Header: texttext color
$text-primary
Rowbackground-colortransparent
Row: texttext color
$text-secondary
Dividerborder-bottom
$border-subtle
*
Iconsvg
$icon-primary

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

Selectable structured list color with the feature flag enabled
Selectable interactive state color
StateElementPropertyColor 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
FocusRowborder
$focus
Focus (selected)Rowbackground-color
$layer-selected
*
Row: texttext color
$text-primary
Borderborder
$focus
Disabled
Row: texttext color
$text-disabled
Iconsvg
$icon-disabled
Disabled (selected)Rowbackground-color
$layer-selected
*
Row: texttext color
$text-disabled
Iconsvg
$icon-disabled

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

Selectable structured list interactive states with the feature flag enabled

With background color

ElementPropertyColor token
Headerbackground-color
$layer
*
Rowbackground-color
$layer
*

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

Selectable structured list color with the feature flag enabled
With background interactive state color
Selectable structured list interactive states with the feature flag enabled

Typography

Structured list header and row text should use sentence-case capitalization. All typography is left aligned.

ElementFont-size (px/rem)Font-weightType token
Header text14 / 0.875SemiBold / 600
$heading-compact-01
Row text14 / 0.875Regular / 400
$body-01

Structure

Default structure

ElementPropertypx / remSpacing token
Containermin-width500 / 31.25–
Header: textpadding-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)0px–
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)0px–
Spacing and measurements for default structured list with hang and flush alignment | px / rem.

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

Selectable structure

ElementPropertypx / remSpacing token
Containermin-width500 / 31.25–
Header: textpadding-top16 / 1
$spacing-05
padding-bottom8 / 0.5
$spacing-03
padding-right16 / 1
$spacing-05
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, width16px–
padding-left, padding-right16 / 1
$spacing-05
Structure and spacing measurements for selectable structured list with a feature flag | px / rem.

Structure and spacing measurements for selectable structured list with a feature flag | px / rem.

Size

There are two structured list height sizes: default and condensed.

ElementSizeHeight (px/rem)
RowDefault60 / 3.75
Condensed36 / 2.25
Structured list sizes | px / rem

Structured list sizes | px / rem

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.