Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.8)

Note

This page is archived under version 1.8 and is available for reference purposes only. The latest version of Pattern Library is 2.

Lists

Unordered lists

Example unordered list:

  • This is list item 1
  • This is list item 2
  • This is list item 3
    • This is nested item 1
    • This is nested item 2
    • This is nested item 3
  • This is list item 4
  • This is list item 1
  • This is list item 2
  • This is list item 3
    • This is nested item 1
    • This is nested item 2
    • This is nested item 3
  • This is list item 4

Code 


<ul class="{{ list-style-dot | list-style-square }}">
    <li>{{ List item }}</li>
    <li>{{ List item }}
        <ul>
            <li>{{ Nested list item }}</li>
            <li>{{ Nested list item }}</li>
        </ul>
    </li>
    <li>{{ List item }}</li>
</ul>

Usage

Use unordered lists when there is no particular order to your items.

The dot is the standard bullet and should be used for unordered lists.

Nesting can help break up volumes of related content. To maintain readability in digital formats it is not recommended that that you use more than 3 levels of bullets.

Ordered lists

Example ordered list:

  1. This is a list item
  2. This is a list item
  3. This is a list item
  4. This is a list item
  1. This is a list item
  2. This is a list item
  3. This is a list item
  4. This is a list item
  1. This is a list item
  2. This is a list item
  3. This is a list item
  4. This is a list item

Code 


<ol class="{{ list-style-decimal | list-style-lower-alpha | list-style-upper-roman }}">
    <li>{{ List item }}</li>
    <li>{{ List item }}</li>
    <li>{{ List item }}</li>
    <li>{{ List item }}</li>
</ol>

Usage

Use ordered lists when there is a set order to your items. For example, an ordered list would be used to structure a set of steps that need to be performed in a specific order.

Unstyled lists

For unstyled lists without bullets or numbers, use the class list-unstyled. This can be useful when it is semantically correct to structure content as list items but custom visuals are used for the bullets, like icons.

Code 


<ul class="list-unstyled">
	<li>
		<a href="{{ URL }}" class="cui icon-link-text">
    		<span class="{{ Icon class (e.g. cicon-file-pdf-o) }} left" aria-hidden="true"></span><span class="link-text">{{ Link text }}</span>
		</a>
	</li>
	<li>
		<a href="{{ URL }}" class="cui icon-link-text">
    		<span class="{{ Icon class (e.g. cicon-file-pdf-o) }} left" aria-hidden="true"></span><span class="link-text">{{ Link text }}</span>
		</a>
	</li>
	<li>
		<a href="{{ URL }}" class="cui icon-link-text">
    		<span class="{{ Icon class (e.g. cicon-file-pdf-o) }} left" aria-hidden="true"></span><span class="link-text">{{ Link text }}</span>
		</a>
	</li>
</ul>

Description lists

Read about description lists on MDN.

Example description list:

Subdivision by Instrument
A property that consists of more than one original surveyed lot held under one title (i.e.: title reads “Lots 1 and 2, Block 1, Plan 991 9999”) and are being separated exactly along the original lot lines (i.e.: Lot 1, Block 1, Plan 991 9999 and Lot 2, Block 1, Plan 991 9999).
Bareland Condominium
Subdivision of a parcel into Bareland Condominium Units and/or Common Property pursuant to the Condominium Property Act.
Strata Subdivision
Subdivision of a parcel into titled volumetric units of space pursuant to the Land Titles Act.

Code 


<dl>
    <dt>{{ Definition term }}</dt>
    <dd>{{ Definition description }}</dd>
</dl>

Applying a max-width

By default, <p> tags have a standard max-width applied to them via CSS to ensure an optimal line-length which allows for a better user experience, particularly on larger screens. Description lists have this same max-width applied. For unordered and ordered lists, this max-width is not applied by default as these tags are fundamental tags for several other kinds of patterns and components.

To apply a max-width to unordered and ordered lists used for content purposes, the class set-max-width can be applied to the <ul> or <ol> tags.

Demo

Example unordered list with the standard max-width

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id consequat dui.
  • Etiam dapibus, mi consectetur cursus porttitor, nisl ipsum porta ante, nec volutpat tellus erat at eros. Mauris pretium ultrices ante vitae iaculis.
    • Nunc eros lectus, convallis eget ultricies in, condimentum eget sem. Maecenas eu ipsum ullamcorper, pellentesque ex vitae, pulvinar enim.
  • Morbi semper justo vel sapien pharetra bibendum. Nam ultrices pulvinar lacus sagittis vestibulum.

Example unordered list without a max-width applied

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id consequat dui.
  • Etiam dapibus, mi consectetur cursus porttitor, nisl ipsum porta ante, nec volutpat tellus erat at eros. Mauris pretium ultrices ante vitae iaculis.
    • Nunc eros lectus, convallis eget ultricies in, condimentum eget sem. Maecenas eu ipsum ullamcorper, pellentesque ex vitae, pulvinar enim.
  • Morbi semper justo vel sapien pharetra bibendum. Nam ultrices pulvinar lacus sagittis vestibulum.

Code 


<ul class="set-max-width">
    <li>{{ List item }}</li>
    <li>{{ List item }}</li>
</ul>

Columns

Lists can be visually stylized and separated into columns while still retaining the semantic markup of the list HTML.

Note: The column count sets the ideal number of columns the list will be split into. In some cases, the columns will not be displayed exactly as specified if there is not enough content to fill each column.

Below are the currently available configurations. Contact us if you require additional configurations created.

Normal list

  • This is list item 1 in a default list
  • This is list item 2 in a default list
  • This is list item 3 in a default list
  • This is list item 4 in a default list

Two columns

For 2 columns, use the class col-count-2. The list will be split into 2 columns for all breakpoints.

  • This is list item 1 in a 2-column list
  • This is list item 2 in a 2-column list
  • This is list item 3 in a 2-column list
  • This is list item 4 in a 2-column list

Code 


<ul class="col-count-2">
    <li>{{ List item }}</li>
    <li>{{ List item }}</li>
    <li>{{ List item }}</li>
    <li>{{ List item }}</li>
</ul>

Two columns for medium screens

For 2 columns on medium (768px wide and up) screens, use the class col-count-md-2.

  • This is list item 1 in a 2-column list (for medium breakpoints).
  • This is list item 2 in a 2-column list (for medium breakpoints).
  • This is list item 3 in a 2-column list (for medium breakpoints).
  • This is list item 4 in a 2-column list (for medium breakpoints).

Code 


<ul class="col-count-md-2">
    <li>{{ List item }}</li>
    <li>{{ List item }}</li>
    <li>{{ List item }}</li>
    <li>{{ List item }}</li>
</ul>

Three columns for medium screens

For 3 columns on medium (768px wide and up) screens, use the class col-count-md-3.

  • This is list item 1 in a 3-column list
  • This is list item 2 in a 3-column list
  • This is list item 3 in a 3-column list
  • This is list item 4 in a 3-column list
  • This is list item 5 in a 3-column list
  • This is list item 6 in a 3-column list

Code 


<ul class="col-count-md-3">
    <li>{{ List item }}</li>
    <li>{{ List item }}</li>
    <li>{{ List item }}</li>
    <li>{{ List item }}</li>
    <li>{{ List item }}</li>
    <li>{{ List item }}</li>
</ul>