Carbon Design System

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

Color
Typography
Structure
Size
Feedback

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 structured list

Element	Property	Color token
Header	background-color	transparent
	background-color	$layer *
Header: text	text color	$text-primary
Row	background-color	transparent
	background-color	$layer *
Row: text	text color	$text-secondary
Divider	border-bottom	$border-subtle *

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

Default structured list transparent background

Default structured list background color

Selectable structured list color

Selectable structured list has an available feature flag.

Element	Property	Color token
Header	background-color	transparent
	background-color	$layer *
Header: text	text color	$text-primary
Row	background-color	transparent
	background-color	$layer *
Row: text	text color	$text-secondary
Divider	border-bottom	$border-subtle *
Icon	svg	$icon-primary

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

Selectable structured list color feature flag enabled

Selectable structured list background color option with a feature flag

Selectable structured list background color with a feature flag

Selectable structured list interactive color

State	Element	Property	Color token
Enabled (selected)	Row	background-color	$layer-selected *
	Row: text	text color	$text-primary
Hover	Row	background-color	$layer-hover *
	Row: text	text color	$text-primary
Hover (selected)	Row	background-color	$layer-selected-hover *
	Row: text	text color	$text-primary
Focus	Row	background-color	transparent
	Row	background-color	$layer *
	Border	border	$focus
Focus (selected)	Row	background-color	$layer-selected *
	Row: text	text color	$text-primary
	Border	border	$focus
Disabled	Row	background-color	transparent
	Row	background-color	$layer *
	Row: text	text color	$text-disabled
	Icon	svg	$icon-disabled
Disabled (selected)	Row	background-color	$layer-selected *
	Row: text	text color	$text-disabled
	Icon	svg	$icon-disabled

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

Selectable structured list interactive states feature flag enabled

Selectable structured list interactive state background color option with a feature flag

Selectable structured list interactive state background color with a feature flag

Typography

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

Element	Font-size (px/rem)	Font-weight	Type token
Header text	14 / 0.875	SemiBold / 600	$heading-compact-01
Row text	14 / 0.875	Regular / 400	$body-01

Structure

Default structured list structure

Element	Property	px / rem	Spacing token
Container	min-width	500 / 31.25	–
Header: text	padding-top	16 / 1	$spacing-05
	padding-bottom	8 / 0.5	$spacing-03
	padding-right	16 / 1	$spacing-05
	padding-left (hang)	16 / 1	$spacing-05
	padding-left (flush)	0	–
Row: text	padding-top	16 / 1	$spacing-05
	padding-bottom	24 / 1.5	$spacing-06
	padding-right	16 / 1	$spacing-05
	padding-left (hang)	16 / 1	$spacing-05
	padding-left (flush)	0	–

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

Selectable structured list structure

Element	Property	px / rem	Spacing token
Container	min-width	500 / 31.25	–
Header: text	padding-top	16 / 1	$spacing-05
	padding-bottom	8 / 0.5	$spacing-03
	padding-right	16 / 1	$spacing-05
	padding-left, padding-right	16 / 1	$spacing-05
Row: text	padding-top	16 / 1	$spacing-05
	padding-bottom	24 / 1.5	$spacing-06
	padding-left, padding-right	16 / 1	$spacing-05
Icon	height, width	16px	–
	padding-left, padding-right	16 / 1	$spacing-05

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.

Element	Size	Height (px/rem)
Row	Default	60 / 3.75
	Condensed	36 / 2.25

Structured list sizes | px / rem

Feedback

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

Edit this page on GitHub

Structured list: Usage

Structured list: Code