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
- Doloremque mollitia vitae laudantium sed quas in dolor officia aut praesentium sunt voluptas recusandae similique adipisci sunt nulla quia fugiat
- Veniam at atque sapiente est tenetur cum ullam optio dolores sequi saepe consequuntur non et ut rerum tenetur consequatur fugiat
- Commodi quis et expedita magni officiis et amet voluptatem consequatur culpa doloremque sint alias est necessitatibus voluptas quisquam eum suscipit
- Ipsa sed quia quia quidem ex et quia possimus cumque doloremque et minus aut eaque adipisci tenetur repellat beatae iste
- Nam nihil earum est non
- Unde culpa laborum voluptate quis quo esse qui rerum temporibus quae deserunt possimus ducimus quia consequatur non odit doloribus laboriosam
Unordered list
- Harum enim eligendi molestias sed quo sed nemo incidunt et dolor maiores impedit in in possimus excepturi repellendus ut labore ut ut voluptatum et perferendis
- Accusamus inventore numquam sit vel dolor voluptatibus quae alias maxime magnam repellendus placeat non neque
- Fugit vero corporis recusandae unde placeat ab ut id alias unde quae iste hic illo
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 deserunt sunt sint atque
- two occaecati modi
- three enim quo incidunt in rerum iusto
- Applying for courses
- Agriculture, horticulture and veterinary studies
- one est dignissimos consequatur sint
- two enim consectetur