List

Ordered, unordered, and icon lists for presenting collections of items with consistent styling and proper semantic structure.

Live Preview

Unordered

Premium ingredients
Natural formulation
Ayurvedic tradition

Ordered

Apply to clean skin
Massage gently
Leave for 10 minutes

Icon List

✓Free shipping
✓30-day returns
✓100% natural

Code

1<!-- Unordered List -->
2<ul class="list list--unordered">
3  <li>First item in the list</li>
4  <li>Second item with more detail</li>
5  <li>Third item
6    <ul>
7      <li>Nested item one</li>
8      <li>Nested item two</li>
9    </ul>
10  </li>
11</ul>
12
13<!-- Ordered List -->
14<ol class="list list--ordered">
15  <li>Step one of the process</li>
16  <li>Step two of the process</li>
17  <li>Step three of the process</li>
18</ol>
19
20<!-- Icon List -->
21<ul class="list list--icon">
22  <li>
23    <span class="list-icon">✓</span>
24    Feature included
25  </li>
26  <li>
27    <span class="list-icon">✓</span>
28    Another benefit
29  </li>
30</ul>

Brand Properties

List Item Icon

Property	Type	Brand Default	HoB Value	TAE Value
Margins	Mixed	Top: 0, Right: 5, Left: 15, Bottom: 0 px	Top: 0, Right: 5, Left: 15, Bottom: 0 px	Top: 0, Right: 5, Left: 15, Bottom: 0 px
Padding	Input (px)	0	0	0
Corner Radius	Input (px)	0	0	0
Border Style	Dropdown	none	none	none
Border Width	Input	0px	0px	0px
Border Color	Color picker	rgb(0, 0, 0)	rgb(0, 0, 0)	rgb(0, 0, 0)
Opacity	Slider	100%	100%	100%
Shadow	Toggle	Off	Off	Off
Select an Icon	Text input	FaCircle	FaCircle	FaCircle
Icon Size	Slider	10px	10px	10px
Icon Color	Color picker	rgb(0, 0, 0)	#038012	#1A5129

List Item Text

Property	Type	Brand Default	HoB Value	TAE Value
Font	Dropdown	Open Sans	Open Sans	Open Sans
Weight	Dropdown	normal (400)	normal (400)	normal (400)
Size	Dropdown	14px	20px	20px
Text Alignment	4 options	left	left	left
Line Height	Slider	Auto	Auto	Auto
Letter Spacing	Slider	0px	0px	0px
Text Case	2 options	none	none	none
Margins	Input (px)	0	0	0
Padding	Input (px)	0	0	0
Background Color	Color picker	rgb(255, 255, 255)	rgb(255, 255, 255)	rgb(255, 255, 255)
Border Style	Dropdown	none	none	none
Opacity	Slider	100%	100%	100%
Shadow	Toggle	Off	Off	Off

Variants

Marker Styles (Unordered)

Disc (default)

Item one
Item two

Circle

Item one
Item two

Square

Item one
Item two

Marker Styles (Ordered)

Decimal (1, 2, 3)

Item
Item
Item

Alpha (a, b, c)

Item
Item
Item

Roman (i, ii, iii)

Item
Item
Item

Upper (A, B, C)

Item
Item
Item

Icon List Variants

Checkmarks

✓Included feature
✓Another feature

Bullets

Key point
Key point

Mixed Icons

✓Available
✗Not included

Nested Lists

Parent item one
- Nested child item
- Another nested item
Parent item two
Parent item three
- Nested item with more nesting
  - Deeply nested

Spacing Options

Compact

Item one
Item two
Item three

Normal

Item one
Item two
Item three

Relaxed

Item one
Item two
Item three

Accessibility

Use <ul> for unordered lists and <ol> for ordered lists
Screen readers announce the number of items in a list
Nested lists maintain proper hierarchy for assistive technology
Icon lists should still use <ul> with list-style: none
Ensure icons are decorative or have proper aria-labels if meaningful

Do's and Don'ts

Do

Use ordered lists for sequential steps
Use unordered lists for non-sequential items
Keep list items concise when possible
Use consistent punctuation within a list
Use icon lists for feature highlights

Don't

Use lists for single items
Nest lists more than 3 levels deep
Mix ordered and unordered styles randomly
Use custom bullets that lack meaning
Create lists with inconsistent item lengths

Unmapped Brand Values

The following brand values are available but not currently mapped to List element properties:

Brand	Property	Value	Potential Use
HoB	Text Primary	#038012	List item text color
TAE	Text Primary	#101010	List item text color

Related Elements

Paragraph - For prose text content
Table - For tabular data with rows and columns
Accordion - For expandable list-like content