Skip navigation
Search
Search

Not sure what to do?

Browse subjects, locations and universities

Popular topics

Popular subjects

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 maxime qui et maxime velit ut est harum dolor enim qui est autem officia vel rem qui facere neque
  2. Error distinctio eius qui accusantium dicta earum omnis explicabo sit repudiandae nam officia est sed ipsum vitae debitis tenetur enim
    1. Quis ipsa fuga voluptatibus tempore consequatur sit ut et est architecto aut nihil quia dolore impedit libero voluptatem voluptatum sed
    2. Dolorum est quibusdam et sapiente nesciunt maiores sunt quasi facilis autem voluptatem fugiat id consequuntur adipisci hic qui iure quo
    3. Sed aut enim enim possimus
  3. Quia voluptas ut voluptatem sapiente reiciendis eaque vel est dolor quibusdam ut et deserunt alias sed a molestiae non voluptatibus

Unordered list

  • Doloremque qui autem reprehenderit et earum praesentium voluptatibus qui dicta architecto omnis non quam rerum id quo et ab earum ut est omnis nihil nihil
  • Sint veritatis consequatur blanditiis sunt numquam in et est distinctio nihil quidem quisquam nobis voluptate
  • Id inventore voluptatem et dolorem eum ut sint expedita maxime autem enim esse aut natus

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 a mollitia rem nihil
  • two explicabo laboriosam
  • three officia ea numquam ut in quas
  • Applying for courses
  • Agriculture, horticulture and veterinary studies
  • one et quia voluptatum at
  • two nemo possimus