Skip to main contentCarbon Design System

List

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

Color

Both the unordered and ordered list variants share the same color properties.

ElementPropertyColor token
Itemtext-color
$text-primary
Example of unordered and ordered list color

Example of unordered and ordered list color

Typography

List items should use sentence case, that is, only the first word and any proper nouns are capitalized. In IBM product, use the 14px options below. For IBM.com, use the larger expressive 16px options.

ElementFont-size (px/rem)Font-weightType token
Item14 / 0.875Regular / 400
$body-01
Item: nested14 / 0.875Regular / 400
$body-01
Item (expressive)16 / 1Regular / 400
$body-02
Item: nested (expressive)16 / 1Regular / 400
$body-02

Structure

There are two types of lists: unordered and ordered. In unordered lists, level 1 markers are en dashes, while level 2 markers are squares. In ordered lists, level 1 markers are numbers, and level 2 markers are letters. Both variants follow the same structural properties.

ElementPropertypx / remSpacing token
Item: Level 1margin-bottom0–
Item: Level 2margin-bottom0–
padding-left16 / 1
$spacing-05
Structure and spacing measurements for ordered and unordered lists

Structure and spacing measurements for an unordered and an ordered list | px / rem

Feedback

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