Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

List

Color

AttributePropertyColor token
.bx--list__itemcolor$text-01

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 a dash. Level 1 unordered list points are bulleted while Level 2 points are marked with a dash.

ItemPropertypx / remSpacing token
Level 1margin-bottom4 / 0.25$spacing-02
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