Lists

Use lists to make blocks of text easier to read, and to break information into manageable chunks.

¶Unordered lists

Open this Unordered list with markers in a new tab

HTML:

<ul>
	<li>Level 1 list item 1</li>
	<li>Level 1 list item 2</li>
	<li>Level 1 list item 3
		<ul>
			<li>Level 2 list item 1</li>
			<li>Level 2 list item 2</li>
			<li>Level 2 list item 3</li>
		</ul>
	</li>
	<li>Level 1 list item 4</li>
	<li>Level 1 list item 5</li>
	<li>Level 1 list item 6</li>
</ul>

¶Ordered lists

Open this Ordered list with markers in a new tab

HTML:

<ol>
	<li>Level 1 list item 1</li>
	<li>Level 1 list item 2</li>
	<li>Level 1 list item 3
		<ol type="a">
			<li>Level 2 list item 1</li>
			<li>Level 2 list item 2</li>
			<li>Level 2 list item 3</li>
		</ol>
	</li>
	<li>Level 1 list item 4</li>
	<li>Level 1 list item 5</li>
	<li>Level 1 list item 6</li>
</ol>

¶Using a counter for decimal numbering

Adding the .counter class to an ordered list will ensure that any nested ordered lists are displayed as decimals, with the first digit corresponding to the number of the parent list item:

Open this Ordered list with a counter in a new tab

HTML:

<ol class="counter">
    <li>Level 1 list item 1</li>
    <li>Level 1 list item 2</li>
    <li>Level 1 list item 3
        <ol>
            <li>Level 2 list item 1</li>
            <li>Level 2 list item 2</li>
            <li>Level 2 list item 3</li>
        </ol>
    </li>
    <li>Level 1 list item 4</li>
    <li>Level 1 list item 5</li>
    <li>Level 1 list item 6</li>
</ol>

¶Considerations

The counter supports the "start" and "reversed" attributes on the ordered list, but does not support the "type" attribute, e.g. for roman numerals. Ordered lists with the .counter class will always use decimal numbers for the markers.

¶Clean list

Adding the .clean-list class to an unordered or ordered list will remove the list markers and all padding:

Open this Unordered list without bullets in a new tab

HTML:

<ul class="clean-list">
	<li>Level 1 list item 1</li>
	<li>Level 1 list item 2</li>
	<li>Level 1 list item 3</li>
	<li>Level 1 list item 4</li>
	<li>Level 1 list item 5</li>
	<li>Level 1 list item 6</li>
</ul>

¶Considerations

As noted by Scott O'Hara, the CSS used for the .clean-list class to remove the markers also removes the list semantics in Webkit browsers. If the list semantics are important for your users, add role="list" to restore them.

¶Description lists

Open this Description list in a new tab

HTML:

<dl>
	<dt>Term</dt>
	<dd>Description</dd>
	<dt>Term</dt>
	<dd>Description</dd>
	<dt>Term</dt>
	<dd>Description</dd>
	<dt>Term</dt>
	<dd>Description</dd>
</dl>

¶Tabulated description lists

For a more tabulated style, add the .grid class to the <dl> element:

Open this Description list with grid styling in a new tab

HTML:

<dl class="grid">
	<dt>Term</dt>
	<dd>Description</dd>
	<dt>Term</dt>
	<dd>Description</dd>
	<dt>Term</dt>
	<dd>Description</dd>
	<dt>Term</dt>
	<dd>Description</dd>
</dl>

¶Inline description lists

To align the terms and the descriptions separated with a comma, add the .inline class to the <dl> element and a <div> around the <dt>/<dd>:

Open this Inline description list in a new tab

HTML:

<dl class="inline">
	<div>
		<dt>Term</dt>
		<dd>Description</dd>
		<dd>Other description</dd>
	</div>
	<div>
		<dt>Term</dt>
		<dd>Description</dd>
		<dd>Other description</dd>
	</div>
	<div>
		<dt>Term</dt>
		<dd>Description</dd>
		<dd>Other description</dd>
	</div>
	<div>
		<dt>Term</dt>
		<dd>Description</dd>
		<dd>Other description</dd>
	</div>
</dl>