Lists

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use to display a number of connected items in a consecutive manner. Typically list items appear one below the other.

Design and coding

Basic use

Unordered lists

Use to list items when the order does not explicitly matter.

Appearance

List item 1
List item 2
List item 3

Correct use

Compliance point(s):

Use an unordered list ( <ul>) when the list item order does not explicitly matter
Use similar text and list types consistently within the same document
Understand and implement the related supporting principles

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<ul>
  <li>...</li>
</ul>

Ordered lists

Use to list of items when the order does explicitly matter.

Appearance

List item 1
List item 2
List item 3

Correct use

Compliance point(s):

Use an ordered list (<ol>) when the list item order explicitly matters
Use similar text and list types consistently within the same document
Understand and implement the related supporting principles

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<ol>
  <li>...</li>
</ol>

Definition lists

Use to list data terms with their associated definitions.

Appearance

Term 1: Definition of term 1
Term 2: Definition of term 2

Correct use

Compliance point(s):

Use datalists (<dl>) for terms (<dt>) and the associated definitions (<dd>) that follow them
Use similar text and list types consistently within the same document
Understand and implement the related supporting principles
Ensure all compliance points are adhered to in definition lists − horizontal layout

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

// Data list
<dl>

// Data term:
  <dt>...</dt>

// Data definition:
  <dd>...</dd>
</dl>

Enhanced use

Unstyled lists

Use to remove the bullets or numbers from a list.

Appearance

Unstyled list:

List item 1
List item 2
- List item 2a
- List item 2b
List item 3

Unstyled nested list:

List item 1
List item 2
- List item 2a
- List item 2b
List item 3

Correct use

Compliance point(s):

Use .list-unstyled to remove the bullets or numbers from a list
Use .lst-none to remove the bullets or numbers from a nested listed (maintains indenting)
Add .lst-spcd to increase the white space between the items, and make them visually separate and distinct
Use similar text and list types consistently within the same document

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

Unstyled list:

<ul class="list-unstyled">
  <li>...</li>
</ul>

Unstyled nested list:

<ul>
  <li>List item 1
    <ul class="lst-none">
      <li>List item 1a</li>
      <li>List item 1b</li>
    </ul>
  </li>
</ul>

ab Alpha lists − Lower alpha

Use to modify an <ol> to display letters instead of numbers. This applies only to immediate children list items. This means you also need to add the CSS class for any nested lists.

Appearance

List item 1
List item 2
1. List item 2a
2. List item 2b
List item 3

Correct use

Compliance point(s):

Use .lst-lwr-alph to apply lower case alphabet letters to a an ordered list
Use mainly as a nested second level list
Use similar text and list types consistently within the same document
Ensure all compliance points are adhered to in ordered lists

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<ol>
  <li>...
    <ol class="lst-lwr-alph">
      <li>...</li>
    </ol>
  </li>
  <li>...</li>
</ol>

AB Alpha lists − Upper alpha

Use to modify an <ol> to display letters instead of numbers. This applies only to immediate children list items. This means you also need to add the CSS class for any nested lists.

Appearance

List item 1
List item 2
1. List item 2a
2. List item 2b
List item 3

Correct use

Compliance point(s):

Use .lst-upr-alph to apply upper case alphabet letters to a an ordered list
Use mainly in legal documents
Use similar text and list types consistently within the same document
Ensure all compliance points are adhered to in ordered lists

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<ol class="lst-upr-alph">
  <li>...</li>
</ol>

vii Roman numeral − Lower Roman

Use to modify an <ol> to display Roman (I, II, III, IV or i, ii, iii, iv…) instead of Arabic (1, 2, 3, 4…) numerals. This applies only to immediate children list items. This means you also need to add the CSS class for any nested lists.

Appearance

List item 1
List item 2
1. List item 2a
2. List item 2b
List item 3

Correct use

Compliance point(s):

Use .lst-lwr-rmn to apply lower case Roman numerals to an ordered list
Use mainly as a nested second level list
Use similar text and list types consistently within the same document
Ensure all compliance points are adhered to in ordered lists

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<ol>
  <li>...
    <ol class="lst-lwr-rmn">
      <li>...</li>
    </ol>
  </li>
  <li>...</li>
</ol>

VII Roman numeral − Upper Roman

Use to modify an <ol> element to display Roman (I, II, III, IV or i, ii, iii, iv…) instead of Arabic (1, 2, 3, 4…) numerals. This applies only to immediate children list items. This means you also need to add the CSS class for any nested lists. This applies only to immediate children list items. This means you also need to add the CSS class for any nested lists.

Appearance

List item 1
List item 2
1. List item 2a
2. List item 2b
List item 3

Correct use

Compliance point(s):

Use.lst-upr-rmn to apply upper case Roman numerals to an ordered list
Use mainly in legal documents
Use similar text and list types consistently within the same document
Ensure all compliance points are adhered to in ordered lists

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<ol class="lst-upr-rmn">
  <li>...</li>
</ol>

List inline

Use to horizontally align list items.

Appearance

List item 1
List item 2
List item 3

Correct use

Compliance point(s):

Use .list-inline to horizontally align list items
Use similar text and list types consistently within the same document

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<ol class="list-inline">
  <li>...</li>
</ol>

Spacing lists

Use to add space between list items.

Appearance

Default:

List item 1
List item 2
List item 3

Added spacing:

List item 1
List item 2
List item 3

Correct use

Compliance point(s):

Use .lst-spcd to separate list items, and increase the white space between them
Use similar text and list types consistently within the same document

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

// Default list:
<ol>
  <li>...</li>
</ol>

// Spaced list:
<ul class="lst-spcd">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Definition lists − horizontal layout

Use to make terms and definitions in a <dl> element line up side-by-side. It starts off stacked like the default <dl>, but when the navbar expands, so do these.

Appearance

Term 1: Definition of term 1
Term 2: Definition of term 2

With no border

Term 1: Definition of term 1
Term 2: Definition of term 2

Correct use

Compliance point(s):

Use .dl-horizontal to align definitions in the same horizontal line as their their definition term
Use similar text and list types consistently within the same document
Ensure all compliance points are adhered to in definition lists

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

<dl class="dl-horizontal brdr-0">
  <dt>...</dt>
  <dd>...</dd>
</dl>

List columns

Use to make a list spread over 2, 3 or 4 columns with the CSS attribute .column-count. Since columns are similar to grids, they adhere to the same breakpoints as grids. Therefore, the classes available are:

.colcount-xxs-2, .colcount-xs-2, .colcount-sm-2, .colcount-md-2, .colcount-lg-2, .colcount-xl-2
.colcount-xxs-3, .colcount-xs-3, .colcount-sm-3, .colcount-md-3, .colcount-lg-3, .colcount-xl-3
.colcount-xxs-4, .colcount-xs-4, .colcount-sm-4, .colcount-md-4, .colcount-lg-4, .colcount-xl-4

Cross-browser compatibility

Internet Explorer 9 and below does not support the .column-count attribute. In those browsers the list becomes linear as one list in one column.

Appearance − Two columns

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

Code

<ul class="colcount-sm-2">
  <li>Item 1</li>
  ...
  <li>Item 8</li>
</ul>

Appearance − Three columns

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

<ul class="colcount-sm-3">
  <li>Item 1</li>
  ...
  <li>Item 8</li>
</ul>

Appearance − Four columns

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

<ul class="colcount-sm-4">
  <li>Item 1</li>
  ...
  <li>Item 8</li>
</ul>

Appearance − Multi-class

You can also multi-class the columns so they adapt to the resolution:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

<ul class="colcount-sm-2 colcount-md-3 colcount-lg-4">
  <li>Item 1</li>
  ...
  <li>Item 8</li>
</ul>

Correct use

Compliance point(s):

Apply to <ul> or <ol> elements
Check the viewport, and multi-class the list to optimize the number of columns for each resolution
Use similar text and list types consistently within the same document

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)

Add-on features

Additional add-on features and behaviours are available.

Supporting principles

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified:: 2019-04-11