Skip to main contentCarbon Design System

List

Color

AttributePropertyColor token
.bx--list__itemcolor$text-01
Example of ordered and unordered lists

Ordered list (left) and unordered list (right).

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.

ClassFont-size (px/rem)Font-weightType token
.bx--list__item14 / 0.875Regular / 400$body-long-01
.bx--list--nested14 / 0.875Regular / 400$body-long-01
.bx--list--lg--item16 / 1Regular / 400$body-long-02
.bx--list--lg--nested16 / 1Regular / 400$body-long-02

Structure

There are two types of lists, ordered and unordered. Level 1 ordered list points are marked numerically while level 2 points are marked with letters. Level 1 unordered list points are dashed while level 2 points are marked with a dot.

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

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