List elements

Definition list

Definition list title 1
Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Definition list title 2
Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonumm.
Definition list title 3
Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
<!-- START definition_list component -->
<dl>
  <dt>Definition list title 1</dt>
  <dd>Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</dd>
  <dt>Definition list title 2</dt>
  <dd>Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonumm.</dd>
  <dt>Definition list title 3</dt>
  <dd>Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</dd>
</dl>
<!-- END definition_list component -->

Definition list: grid

Works best when the dt contains a lot of text.

Definition list title 1
Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Definition list title 2
Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonumm.
Definition list title 3
Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
<!-- START definition-list-grid component -->
<dl class="grid grid--padding grid--max-h3">
  <div class="grid__item">
    <dt>Definition list title 1</dt>
    <dd>Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</dd>
  </div>
  <div class="grid__item">
    <dt>Definition list title 2</dt>
    <dd>Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonumm.</dd>
  </div>
  <div class="grid__item">
    <dt>Definition list title 3</dt>
    <dd>Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</dd>
  </div>
</dl>
<!-- END definition-list-grid component -->

Definition list: list--inline

Lorem ipsum title 1
Mauris a ante.
Dolor title 2
Maecenas ornare tortor.
Sit list title 3
Aliquam libero nisi.
<!-- START definition-list-inline component -->
<dl class="list list--inline">
  <div>
    <dt>Lorem ipsum title 1</dt>
    <dd>Mauris a ante.</dd>
  </div>
  <div>
    <dt>Dolor title 2</dt>
    <dd>Maecenas ornare tortor.</dd>
  </div>
  <div>
    <dt>Sit list title 3</dt>
    <dd>Aliquam libero nisi.</dd>
  </div>
</dl>
<!-- END definition-list-inline component -->

Definition list: list--inline-block

Lorem ipsum title 1
Mauris a ante.
Dolor title 2
Maecenas ornare tortor.
Sit list title 3
Aliquam libero nisi.
<!-- START definition-list-inline-block component -->
<dl class="list list--inline-block">
  <div>
    <dt>Lorem ipsum title 1</dt>
    <dd>Mauris a ante.</dd>
  </div>
  <div>
    <dt>Dolor title 2</dt>
    <dd>Maecenas ornare tortor.</dd>
  </div>
  <div>
    <dt>Sit list title 3</dt>
    <dd>Aliquam libero nisi.</dd>
  </div>
</dl>
<!-- END definition-list-inline-block component -->

Definition list: list--table

Definition list title 1
Mauris a ante.
Definition list title 2
Maecenas ornare tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit title 3
Aliquam libero nisi.
<!-- START definition-list-table component -->
<dl class="list list--table">
  <div>
    <dt>Definition list title 1</dt>
    <dd>Mauris a ante.</dd>
  </div>
  <div>
    <dt>Definition list title 2</dt>
    <dd>Maecenas ornare tortor.</dd>
  </div>
  <div>
    <dt>Lorem ipsum dolor sit amet, consectetur adipiscing elit title 3</dt>
    <dd>Aliquam libero nisi.</dd>
  </div>
</dl>
<!-- END definition-list-table component -->

Definition list: vertical

Definition list title 1
Mauris a ante.
Definition list title 2
Maecenas ornare tortor.
Definition list title 3
Aliquam libero nisi.
<!-- START definition-list-vertical component -->
<dl class="list list--vertical-group">
  <div>
    <dt>Definition list title 1</dt>
    <dd>Mauris a ante.</dd>
  </div>
  <div>
    <dt>Definition list title 2</dt>
    <dd>Maecenas ornare tortor.</dd>
  </div>
  <div>
    <dt>Definition list title 3</dt>
    <dd>Aliquam libero nisi.</dd>
  </div>
</dl>
<!-- END definition-list-vertical component -->

Definition list: vertical group with inline flow

Works best when the dt contains limited text.

Definition list title 1
Mauris a ante.
Definition list title 2
Maecenas ornare tortor.
Definition list title 3
Aliquam libero nisi.
<!-- START definition-list-inline-vertical component -->
<dl class="list list--inline list--vertical-group">
  <div>
    <dt>Definition list title 1</dt>
    <dd>Mauris a ante.</dd>
  </div>
  <div>
    <dt>Definition list title 2</dt>
    <dd>Maecenas ornare tortor.</dd>
  </div>
  <div>
    <dt>Definition list title 3</dt>
    <dd>Aliquam libero nisi.</dd>
  </div>
</dl>
<!-- END definition-list-inline-vertical component -->

Ordered list

  1. Quia tempore tenetur dolore rerum eos necessitatibus tempora ad perspiciatis asperiores ut reprehenderit libero velit suscipit rerum rem impedit libero
  2. Magnam officia rerum nam dolorem repudiandae qui aut dolore qui voluptates modi dolorem modi nisi non neque doloremque quidem est
    1. Excepturi temporibus ratione quod architecto qui velit tempora nobis et accusantium reiciendis placeat soluta ipsum debitis neque quas qui voluptas
    2. Assumenda officiis libero quam rerum tenetur vel excepturi quis mollitia numquam accusantium et velit nesciunt consectetur ab nesciunt aliquid aut
    3. Occaecati repellat quos sunt possimus
  3. Consequatur quis soluta laborum aut neque repellendus amet perferendis nisi corrupti porro culpa libero totam amet ut aliquam ad libero

Unordered list

  • Ea laboriosam voluptates adipisci quis possimus voluptatem consequatur nam eum sed consequatur hic commodi qui qui accusamus laborum architecto labore dolor eveniet sed enim vitae
  • Temporibus quis voluptas aut qui ut suscipit suscipit temporibus sequi labore distinctio quasi dolorum sit
  • Culpa rerum consequatur ut non unde eum deleniti suscipit voluptatem consequatur eos similique dignissimos architecto

Vertically ordered list, max three columns

  • Applying for courses
  • Agriculture, horticulture and veterinary studies
  • Area studies, languages and literature
  • Arts and crafts
  • Business and management
  • Construction
  • Education
  • Engineering and production
  • Environment
  • Family and personal care services
  • Food, leisure and hospitality
  • Humanities
  • Information technology
  • Librarianship
  • Media studies
  • Medicine and health studies
  • Science
  • Social sciences
  • Teaching
  • Transport
  • Applying for courses
  • Agriculture, horticulture and veterinary studies
  • Area studies, languages and literature
  • Arts and crafts
  • Business and management

  • Applying for courses
  • Agriculture, horticulture and veterinary studies
  • Area studies, languages and literature
  • Arts and crafts

  • Applying
  • Agriculture
  • Area
  • Arts

  • one perferendis culpa ad repellendus
  • two officiis voluptates
  • three corporis asperiores voluptas delectus voluptatem architecto

  • Applying for courses
  • Agriculture, horticulture and veterinary studies

  • one laboriosam ipsum ipsa dolorum
  • two quia dolores