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

Level 1 and 2 of any list type should be set in bold and sentence case, with only the first word in a phrase and any proper noun capitalized. Line height for lists should be set at 24px / 1.5rem.

ClassFont-size (px/rem)Font-weightType token
.bx--list__item14 / 0.875Regular / 400$body-short-01
.bx--list--nested14 / 0.875Regular / 400$body-short-01

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