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.6)

Note

This page is archived under version 1.6 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-doc">
    <li>This is list item 1</li>
    <li>This is list item 2</li>
    <li>This is list item 3
        <ul>
            <li>This is nested item 1</li>
            <li>This is nested item 2</li>
            <li>This is nested item 3</li>
        </ul>
    </li>
    <li>This is list item 4</li>
</ul>

<ul class="list-style-square">
    <li>This is list item 1</li>
    <li>This is list item 2</li>
    <li>This is list item 3
        <ul>
            <li>This is nested item 1</li>
            <li>This is nested item 2</li>
            <li>This is nested item 3</li>
        </ul>
    </li>
    <li>This is list item 4</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">
    <li>This is a list item</li>
    <li>This is a list item</li>
    <li>This is a list item</li>
    <li>This is a list item</li>
</ol>

<ol class="list-style-lower-alpha">
    <li>This is a list item</li>
    <li>This is a list item</li>
    <li>This is a list item</li>
    <li>This is a list item</li>
</ol>

<ol class="list-style-upper-roman">
    <li>This is a list item</li>
    <li>This is a list item</li>
    <li>This is a list item</li>
    <li>This is a 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.

Definition lists

Example definition 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 One</dt>
    <dd>This is an example of a definition description</dd>

    <dt>Definition Two</dt>
    <dd>This is another example of a definition description</dd>
</dl>

Usage

Definition lists can be used for glossaries on a website.

The <dt> tag defines a term/name on the definition list and is used in conjunction with <dl> (defines the description list) and <dd> (describes the term name – is the definition description)

Example: Definition Lists

Accessibility

Using definition list markup provides structure around the relationship between terms and their definitions.

Max-width lists

By default, the <p> tag has a max-width applied to it in CSS. To set the same max-widths on your list elements, apply the class set-max-width to the <ul> or <ol> tags.

  • This is a list with the set-max-width class applied to it for better readability. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id consequat dui. Phasellus commodo ligula at mauris dignissim accumsan. Curabitur vel pretium quam, facilisis efficitur mi.
  • Ut at ante nunc. Integer at urna cursus, aliquam ex id, consequat ex. Mauris at magna efficitur, fringilla neque sed, bibendum velit. Duis imperdiet consectetur augue, non vehicula velit faucibus in.
  • Etiam dapibus, mi consectetur cursus porttitor, nisl ipsum porta ante, nec volutpat tellus erat at eros. Mauris pretium ultrices ante vitae iaculis. Fusce tincidunt turpis eu porta vehicula. Phasellus imperdiet tincidunt justo at volutpat. Mauris non rutrum urna.
    • Nunc eros lectus, convallis eget ultricies in, condimentum eget sem. Maecenas eu ipsum ullamcorper, pellentesque ex vitae, pulvinar enim.
    • Curabitur eu purus vel lectus blandit placerat. Nam ut neque maximus, commodo nisi vitae, rhoncus lorem. Phasellus lacus eros, ultricies eu tristique at, cursus et nulla.
    • Aliquam erat volutpat. Nullam ut fermentum diam. Etiam congue scelerisque tellus sit amet posuere. Ut vel hendrerit quam.
  • Morbi semper justo vel sapien pharetra bibendum. Nam ultrices pulvinar lacus sagittis vestibulum.