Lists

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

Similar to list--inline, but there is a minimum width for the title.

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

Uses table-row, so the title will wrap rather than expand.

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. Est itaque explicabo neque magni asperiores architecto nostrum dolor nihil illo voluptatum animi nostrum quo pariatur pariatur autem qui voluptates
  2. Quia suscipit officia corporis consequuntur quod aliquam quia voluptatem qui non laborum est qui sint repudiandae sit quos odio dolores
    1. Illum aliquid voluptas esse autem atque reiciendis qui eos nihil soluta maiores doloremque numquam voluptatem voluptate enim eos ea odio
    2. Qui ratione dolorem natus ut aliquid qui at occaecati ab ut et esse sed similique nulla praesentium id et iure
    3. Sit modi et aliquam amet
  3. Consequatur similique quia quam nisi qui inventore sed commodi amet commodi id architecto non debitis laudantium ipsam eum eum a

Unordered list

  • Et at temporibus qui rerum delectus quaerat sunt occaecati iste et et voluptatem ratione earum sed dolor voluptatem laborum dolor voluptatibus omnis optio itaque consequatur
  • Quas non nihil rerum possimus beatae consequatur totam vel non repellendus atque tempore ducimus vitae
  • Autem iure dolorem delectus autem et aut eius dicta tenetur qui cupiditate dignissimos nisi aut

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 tempore doloremque magnam repudiandae
  • two in qui
  • three fugit aliquid assumenda aut tempora nihil

  • Applying for courses
  • Agriculture, horticulture and veterinary studies

  • one repudiandae architecto sit fugit
  • two non rerum