Skip to main contentCarbon Design System

Contained list

Color

ElementPropertyColor token
Title: on pagetext color$text-primary
background-color$background
Title: disclosedtext color$text-secondary
background-color$layer*
Itemtext color$text-primary
background-colortransparent
Icon (optional)svg$icon-primary
Row dividerborder-bottom$border-subtle*

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

Enabled states for contained list variants

Example of enabled states for contained list variants.

Interactive states

ElementPropertyColor token
Hoverbackground-color$layer-hover*
Focusborder$focus
Activebackground-color$layer-active*
Disabledtext color$text-disabled
border$border-disabled

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

States for contained list item rows

Example of states for contained list item rows.


States for contained list inline actions

Example of states for contained list inline actions.

Typography

All contained list text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.

ElementFont-size (px/rem)Font-weightType token
Title: on page14 / 0.875SemiBold / 600$heading-compact-01
Title: disclosed12 / 0.75Regular / 400$label-01
Item14 / 0.875Regular / 400$body-01

Structure

ElementPropertypx / remSpacing token
Header: on pageheight32 / 2$spacing-07
padding-left, padding-right16 / 1$spacing-05
Header: disclosedheight48 / 3$spacing-09
padding-left, padding-right16 / 1$spacing-05
Itempadding-left, padding-right16 / 1$spacing-05
Icon (optional)height, width16 / 1
Structure and spacing measurements for the on page list variant.

Structure and spacing measurements for the on page list variant. | px / rem


Structure and spacing measurements for the disclosed list variant.

Structure and spacing measurements for the disclosed list variant. | px / rem


Structure and spacing measurements for height and width of row content.

Structure and spacing measurements for height and width of row content. | px / rem


Structure and spacing measurements for padding and rule alignment.

Structure and spacing measurements for padding and rule alignment. | px / rem


Structure and spacing measurements for inline actions.

Structure and spacing measurements for inline actions. | px / rem