1. Design System
  2. Base
  3. Typography
  4. Lists

Lists

List items and paragraphs have a max width of 858px to maintain readability.

Unordered list

A list of items in which the order does not explicitly matter.

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3
        <ul>
            <li>Nested list item 1 </li>
            <li>Nested list item 2 </li>
        </ul>
    </li>
    <li>List item 4</li>
</ul>

Bulleted, or unordered , lists show a loose association with no sequential meaning.

Mark up lists correctly, using unordered lists. Do not use line breaks ( <br> ).

Ordered list

A list of items in which the order does explicitly matter.

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3
        <ol>
            <li>Nested list item 1 </li>
            <li>Nested list item 2 </li>
        </ol>
    </li>
    <li>List item 4</li>
</ol>

Ordered lists show a sequentially-based association between items.

Mark up lists correctly, using ordered lists. Do not use line breaks ( <br> ).

Ordered list with different types

Ordered lists <ol> support different types of items markers. To modify them, use either:

  • the corresponding HTML attribute value
  • one of the following CSS modifier classes: is-lower-alpha, is-lower-roman, is-upper-alpha or is-upper-roman
<div class="content">
    <ol type="1">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="A">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="a">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="I">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="i">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
</div>
<div class="content">
    <ol class="is-lower-alpha">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol class="is-lower-roman">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol class="is-upper-alpha">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol class="is-upper-roman">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
</div>

Ordered lists show a sequentially-based association between items.

Mark up lists correctly, using ordered lists. Do not use line breaks ( <br> ).

Definition lists

A list of terms with their associated definitions.

<dl>
    <dt>Definition lists</dt>
    <dd>A definition list is perfect for defining terms.</dd>
    <dt>Euismod</dt>
    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
    <dt>Malesuada porta</dt>
    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

Use a defintion list to mark up pairs of related items. The pairs themselves are a logically related list.

Mark up lists correctly. Do not use line breaks ( <br> ).

List with icons

<ul class="fa-ul">
    <li><span class="fa-li"><span class="fas fa-check" aria-hidden="true"></span></span> List item 1</li>
    <li><span class="fa-li"><span class="fas fa-check" aria-hidden="true"></span></span> List item 2</li>
    <li><span class="fa-li"><span class="fas fa-check" aria-hidden="true"></span></span> List item 3</li>
    <li><span class="fa-li"><span class="fas fa-check" aria-hidden="true"></span></span> List item 4</li>
    <li><span class="fa-li"><span class="fas fa-check" aria-hidden="true"></span></span> List item 5</li>
</ul>

Use fa-ul and fa-li to replace default bullets in unordered lists.

Use aria-hidden="true to hide decorative icons.

Column count

<ul class="count-column">
    <li><a href="#">International courses</a></li>
    <li><a href="#">Study abroad and exchanges</a></li>
    <li><a href="#">Why international students choose Oxford Brookes</a></li>
    <li><a href="#">Meet our students</a></li>
    <li><a href="#">Your country</a></li>
    <li><a href="#">Applying to arriving</a></li>
    <li><a href="#">Fees and funding</a></li>
    <li><a href="#">Student support</a></li>
    <li><a href="#">Contact the International team</a></li>
</ul>

Use column-count to divide lists into a column of three.

Mark up lists correctly. Do not use line breaks ( <br> ).

Unstyled lists

<ul class="list-unstyled">
	<li>List item 1</li>
	<li>List item 2</li>
	<li>List item 3</li>
</ul>

Use the class list-unstyled to remove the default left margin.

Mark up lists correctly. Do not use line breaks ( <br> ).

Inline lists

<ul class="list-inline">
	<li>List item 1</li>
	<li>List item 2</li>
	<li>List item 3</li>
</ul>

Use the class list-inline to place all list items on a single line.

Mark up lists correctly. Do not use line breaks ( <br> ).

Usage

  • Bulleted, or unordered, lists show a loose association with no sequential meaning.
  • Ordered lists show a sequentially-based association between items.
  • Use a defintion list to mark up pairs of related items. The pairs themselves are a logically related list.

Accessibility

Mark up lists correctly. Do not use line breaks ( <br> ).