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
  1. List item 1
  2. List item 2
  3. 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="list-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
  1. List item 1
  2. List item 2
    1. List item 2a
    2. List item 2b
  3. 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
  1. List item 1
  2. List item 2
    1. List item 2a
    2. List item 2b
  3. 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
  1. List item 1
  2. List item 2
    1. List item 2a
    2. List item 2b
  3. 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
  1. List item 1
  2. List item 2
    1. List item 2a
    2. List item 2b
  3. 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:

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):

Incorrect use

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: