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