Close

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.

  • List item 1
  • List item 2
  • List item 3
    • Nested list item 1
    • Nested list item 2
  • List item 4
<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.

  1. List item 1
  2. List item 2
  3. List item 3
    1. Nested list item 1
    2. Nested list item 2
  4. List item 4
<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
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
<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.

HTML
HyperText Markup Language: The standard language for creating web pages.
CSS
Cascading Style Sheets: A stylesheet language used for describing the look and formatting of a document written in HTML.
JavaScript
A programming language commonly used in web development to add interactive features.
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language: The standard language for creating web pages.</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets: A stylesheet language used for describing the look and formatting of a document written in HTML.</dd>
    <dt>JavaScript</dt>
    <dd>A programming language commonly used in web development to add interactive features.</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, using ordered lists. Do not use line breaks ( <br> ).

List with icons

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
<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

  • List item 1
  • List item 2
  • List item 3
<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

  • List item 1
  • List item 2
  • List item 3
<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> ).

If you have any questions or suggestions for improvements, please contact the Web Team.