​
Contact us

Lists

List are both used visually, for textual listing of item, and to group user interface elements like navigation items.

Textual lists

For textual lists, only utilise a list when there is more than one list item to display, even though a list with one item is semantically a list.

Textual unordered list

  • List item one
  • List item two
  • List item three
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores temporibus numquam excepturi minima doloremque quos deserunt maxime voluptatibus exercitationem quasi maiores laborum atque, impedit a hic, dolore est? Earum, tempora?
  • list item five

HTML code snippet

<ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores temporibus numquam excepturi minima doloremque quos deserunt maxime voluptatibus exercitationem quasi maiores laborum atque, impedit a hic, dolore est? Earum, tempora?</li> <li>list item five</li> </ul>

Textual unordered with nested unordered list

  • List item one
  • List item two
  • List item three
    • Nested unordered list item one
    • Nested unordered list item two
    • Nested unordered list item three
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores temporibus numquam excepturi minima doloremque quos deserunt maxime voluptatibus exercitationem quasi maiores laborum atque, impedit a hic, dolore est? Earum, tempora?
  • list item five

HTML code snippet

<ul> <li>List item one</li> <li>List item two</li> <li> List item three <ul> <li>Nested unordered list item one</li> <li>Nested unordered list item two</li> <li>Nested unordered list item three</li> </ul> </li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores temporibus numquam excepturi minima doloremque quos deserunt maxime voluptatibus exercitationem quasi maiores laborum atque, impedit a hic, dolore est? Earum, tempora?</li> <li>list item five</li> </ul>

Textual unordered with nested ordered list

  • List item one
  • List item two
  • List item three
    1. Nested ordered list item one
    2. Nested ordered list item two
    3. Nested ordered list item three
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores temporibus numquam excepturi minima doloremque quos deserunt maxime voluptatibus exercitationem quasi maiores laborum atque, impedit a hic, dolore est? Earum, tempora?
  • list item five

HTML code snippet

<ul> <li>List item one</li> <li>List item two</li> <li> List item three <ol> <li>Nested ordered list item one</li> <li>Nested ordered list item two</li> <li>Nested ordered list item three</li> </ol> </li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores temporibus numquam excepturi minima doloremque quos deserunt maxime voluptatibus exercitationem quasi maiores laborum atque, impedit a hic, dolore est? Earum, tempora?</li> <li>list item five</li> </ul>

Textual ordered list

  1. List item one
  2. List item two
  3. List item three
  4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores temporibus numquam excepturi minima doloremque quos deserunt maxime voluptatibus exercitationem quasi maiores laborum atque, impedit a hic, dolore est? Earum, tempora?
  5. list item five

HTML code snippet

<ol> <li>List item one</li> <li>List item two</li> <li>List item three</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores temporibus numquam excepturi minima doloremque quos deserunt maxime voluptatibus exercitationem quasi maiores laborum atque, impedit a hic, dolore est? Earum, tempora?</li> <li>list item five</li> </ol>

Textual ordered list with nested unordered list

  1. List item one
  2. List item two
  3. List item three
    • Nested unordered list item one
    • Nested unordered list item two
    • Nested unordered list item three
  4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores temporibus numquam excepturi minima doloremque quos deserunt maxime voluptatibus exercitationem quasi maiores laborum atque, impedit a hic, dolore est? Earum, tempora?
  5. list item five

HTML code snippet

<ol> <li>List item one</li> <li>List item two</li> <li> List item three <ul> <li>Nested unordered list item one</li> <li>Nested unordered list item two</li> <li>Nested unordered list item three</li> </ul> </li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores temporibus numquam excepturi minima doloremque quos deserunt maxime voluptatibus exercitationem quasi maiores laborum atque, impedit a hic, dolore est? Earum, tempora?</li> <li>list item five</li> </ol>

Textual ordered list with nested ordered list

  1. List item one
  2. List item two
  3. List item three
    1. Nested unordered list item one
    2. Nested unordered list item two
    3. Nested unordered list item three
  4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores temporibus numquam excepturi minima doloremque quos deserunt maxime voluptatibus exercitationem quasi maiores laborum atque, impedit a hic, dolore est? Earum, tempora?
  5. list item five

HTML code snippet

<ol> <li>List item one</li> <li>List item two</li> <li> List item three <ol> <li>Nested unordered list item one</li> <li>Nested unordered list item two</li> <li>Nested unordered list item three</li> </ol> </li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores temporibus numquam excepturi minima doloremque quos deserunt maxime voluptatibus exercitationem quasi maiores laborum atque, impedit a hic, dolore est? Earum, tempora?</li> <li>list item five</li> </ol>

Description list

Description term
Definition of term.
Voluptas vero amet, unde dolorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cupiditate, corporis, obcaecati delectus mollitia animi quas maxime vero amet molestias quos. Tempora assumenda, totam maiores officiis voluptates et nesciunt iusto!

HTML code snippet

<dl class="def-list"> <dt>Description term</dt> <dd>Definition of term.</dd> <dt>Voluptas vero amet, unde dolorem</dt> <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cupiditate, corporis, obcaecati delectus mollitia animi quas maxime vero amet molestias quos. Tempora assumenda, totam maiores officiis voluptates et nesciunt iusto!</dd> </dl>