Language selection

Lists – GCWeb design system

There are 3 types of lists. Use:

  • Bulleted (unordered) lists when the list item order does not matter
  • Numbered, alpha, or roman (ordered) lists when the list item order does matter
  • Description lists for terms with their associated descriptions or definitions

On this page

Lead-in to a list

Each list requires one of the following:

Lead-in sentence

Most lists have a lead-in paragraph that:

  • Introduces or applies to all the list items
  • Emphasizes the common element between all the items

If necessary, and in bold, specify "all", "any", "or", "one or more" or "one" in the introductory paragraph to clarify whether the list is comprehensive or conditional.

Example - Lead-in sentence to a list
  • You must meet all of the following requirements:
  • To be eligible, you must meet 1 or more of the following requirements:
Introductory paragraph

A short paragraph above the list can help to provide context

Descriptive heading

To create a good heading, refer to: Headings and titles

Bulleted (unordered) list

Basic: Bulleted list

Use an unordered list when the list item order does not matter. A short vertical list is easier for people to scan and remember than a long paragraph.

If your sentence has several commas, consider turning it into a list.

Structure
  • Place only one idea in each bulleted item
  • Use one sentence per single list item
  • If you need to include more information to explain an idea, use sub-bullets, but use them sparingly
  • Arrange list items:
    • By priority, importance, or popularity
    • Alphabetically (on rare occasions)
      When to alphabetize

      Only present your web content in an alphabetical order if it's the most logical and intuitive approach for the audience.

      For example, listing provinces and territories in alphabetical order could be appropriate.

      If you present content in alphabetical order in English, also present it in alphabetical order in French to provide the same intuitive experience.

  • Use similar text and list types consistently within the same document
  • Put the most important words at the beginning of each list item to make them easier to scan
    How this affects French

    When crafting your list, it is important to consider that word order is different in French and in English.

    Adjectives are often placed after the noun in French, while in English they are placed before the noun. The word you front-load in one language might be moved in the other language.

    Make sure the most important words are front-loaded in both languages so that all users have the same web experience.

    Example: Word order in a list

    English:

    Make a choice based on your province of residence:

    • Alberta tax package
    • British Columbia tax package
    • Manitoba tax package
    • New Brunswick tax package
    • Etc.

    French:

    Faites un choix en fonction de votre province de résidence :

    • La trousse d’impôt de l'Alberta
    • La trousse d’impôt de la Colombie-Britannique
    • La trousse d’impôt du Manitoba
    • La trousse d’impôt du Nouveau-Brunswick
    • Etc.

    With a direct translation of this example, the French user is not able to see the province name first or scan in alphabetical order. By adding an introductory sentence that explains that the list is for provincial tax packages, you can avoid the words "tax package" in each list item and shorten them to just the names of the provinces:

    English:

    Choose the tax package according to your province of residence:

    • Alberta
    • British Columbia
    • Manitoba
    • New Brunswick
    • Etc.

    French:

    Choisissez une trousse d'impôt selon votre province de résidence :

    • Alberta
    • Colombie-Britannique
    • Manitoba
    • Nouveau-Brunswick
    • Etc.
  • Use consistent grammatical structure. For example, if you:
    • Use the imperative tense (or command) for the first item of your list, use the same tense for each subsequent list item
    • Start your first item with a noun, start the other list items with nouns
  • If a list contains more than 7 items, consider breaking it up into categories
Example - Structuring a bulleted list
Write

To draft a high-quality source document:

  • Organize your ideas
    • Arrange your ideas from most to least important to the task
    • Test your order with a representative audience
  • Use the active voice
  • Use the right words
  • Write short sentences and paragraphs
Instead of

To draft a high-quality source document:

  • Organize your ideas
  • Arrange your ideas from most to least important to the task
  • Test your order with a representative audience
  • Do not use the passive voice
  • It is important to use the right words
  • Use only short sentences and paragraphs
  • Use the Canada.ca Content Style Guide to ensure you have followed the guidelines
Tone
  • Use positive statements as much as possible
  • Place negatively phrased items together, if you must use them
Capitalization

Capitalize the first word of every list item. This improves the user's ability to scan, as mentioned in the article 7 Tips for Presenting Bulleted Lists in Digital Content, by the Nielsen Norman Group.

Punctuation

Don't end the list items with any punctuation

Appearance and code

Design treatments can be applied. Review the options and get the code.

Style

  • Default
  • Remove bullets
  • Unstyled
  • Inline

Spacing

  • Added spacing
Appearance
  • List item 1
  • List item 2
  • List item 3
HTML code 
<ul class="">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>

Enhancement: Use icons instead of bullets

Replace bullets with icons from the Font Awesome icon set (version 5.15.4 "Free" set, which has 1608 icons). Use icons sparingly, and ensure they match your list content.

Example 1 - Using the same icons on the list items
Without icons
  • January 27, 2022: Last day to apply for period 18 of the CEWS and CRHP
  • January 27, 2022: Last day to apply for period 11 of the CERS
With icons instead of bullets
  • January 27, 2022: Last day to apply for period 18 of the CEWS and CRHP
  • January 27, 2022: Last day to apply for period 11 of the CERS
Example 2 - Using different icons on the list items
Without icons

You can register:

  • Online
  • By mail
  • By fax
  • By telephone
With icons instead of bullets

You can register:

  • Online
  • By mail
  • By fax
  • By telephone

Icons can be used effectively to convey meaning when using a checkmark and X in a bulleted list.

Using the checkmark and X icons

Correct use
  • Use icons consistently:
    • Use green checkmarks () to reinforce the correct action or response
    • Use red X marks () for the incorrect or less corect action or response
  • Use together to make a comparison between the following concepts:
    • yes / no
    • can / cannot
    • correct / incorrect
  • Use as an explicit statement of when you can/must do something
  • Use with a clear call to action when a list of steps must be taken
  • Use X marks to identify actions that should not be considered or to identify what not to do
  • Use only on one level of bullet
    Where to put the icon on a single level list

    An icon should appear before each first-level list item:

    • First-level item
    • First-level item
    • First-level item
    Where to put the icon on a list with nested levels

    Option 1: When each first-level list has its own sub-list, an icon should appear on the sub-list items:

    • First-level item
      • Second-level item
      • Second-level item
      • Second-level item
    • First-level item
      • Second-level item
      • Second-level item
      • Second-level item
    • First-level item
      • Second-level item
      • Second-level item
      • Second-level item

    Option 2: When the first-level list items have sub-lists, but others do not, an icon should appear on the first-level, for example:

    • First-level item
      • Second-level item
      • Second-level item
      • Second-level item
    • First-level item
    • First-level item
      • Second-level item
      • Second-level item
      • Second-level item
Incorrect use
  • Do not use in a table of contents
  • Do not use for actions that might be correct
  • Do not use if there is no clear call to action
  • Do not use outside of a list (for example, do not insert checkmarks and X icons into a paragraph)
  • Do not use in conjunction with another graphic or image
  • Do not use as a header, with bullets included beneath
  • Do not use for theoretical information

Appearance and code

Design treatments can be applied. Review the options and get the code.

Options

  • Default
  • Checkmarks and X marks
Appearance
  • List item 1
  • List item 2
  • List item 3
  • List item 4
HTML code 
<ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>

Enhancement: Display across multiple columns

Use to spread a list over 2, 3 or 4 columns. Since columns are similar to grids, they adhere to the same breakpoints as grids.

Correct use

  • Apply to bulleted (unordered) list elements
  • Test the design in different screen resolutions to optimize the number of columns for phone, tablet or computer

Appearance and code

Design treatments can be applied. Review the options and get the code.

Options

  • Default
  • 2 columns
  • 3 columns
  • 4 columns
  • Adjusts to screen resolution (sm-2 md-3 lg-4)
Appearance
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  • List item 6
  • List item 7
  • List item 8
HTML code 
<ul class="">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>...</li>
    </ul>

Coding considerations:

  • Use any of the following CSS classes:
    List colums CSS classes
    2 columns 3 columns 4 columns
    colcount-xs-2 colcount-xs-3 colcount-xs-4
    colcount-sm-2 colcount-sm-3 colcount-sm-4
    colcount-md-2 colcount-md-3 colcount-md-4
    colcount-lg-2 colcount-lg-3 colcount-lg-4
    colcount-xl-2 colcount-xl-3 colcount-xl-4

Enhancement: Apply and/or pattern

Use the and/or design to demonstrate that there are options or that there are content blocks that are complementary or associated.

Refer to: And/or design for full details

"And" pattern

  • This is content for column A

  • This is content for column B

"Or" pattern

  • This is content for column A

  • This is content for column B

Enhancement: Add a search filter

Apply a filter to a single list or a series of related lists.

Refer to: WET4 filter for full details

Single list filter
  • Alberta
  • British Columbia
  • Manitoba
  • New Brunswick
  • Newfoundland & Labrador
  • Northwest Territories
  • Nova Scotia
  • Nunavut
  • Ontario
  • Prince Edward Island
  • Quebec
  • Saskatchewan
  • Yukon
Multi-list filter

T4 slips

T5 slips

More tax slips

Enhancement: Mimic a menu

Use to group related content in a menu. This is typically used for applications and not regular content pages.

Correct use

  • Mark the link as active when the link target matches the current page address
  • Use the badges component to add a number value on the right
    14Inbox 9Unread
  • Use the following colours to style list items:
    • Green: when the item is correct
    • Blue: when the item is informational
    • Yellow: when the item warns to the user
    • Red: when the item or action is dangerous

Appearance and code

Design treatments can be applied. Review the options and get the code.

Style

  • Default
  • With links

Colour

  • Info
  • Success
  • Warning
  • Danger

Active

  • Active item

Badges

  • Add badges

Headings

  • Add headings
Appearance
  • List item
  • List item
  • List item
  • List item
HTML code 
<ul class="list-group">
      <li class="list-group-item">List item</li>
      <li class="list-group-item">List item</li>
      <li class="list-group-item">List item</li>
      <li class="list-group-item">List item</li>
    </ul>

Coding considerations:

  • Use an unordered list element (<div>) only when there are no links
  • Use the <div> element when there are links

Enhancement: Create an interactive checklist

Checklists help people break down complex eligibility lists to ensure that they meet all criteria.

Since coding them is more complex and requires custom JavaScript, you must contact weboptimizg@cra-arc.gc.ca before implementing.

Supporting research

The Digital Transformation Office (DTO) has been studying the use of interactive checklists to simplify the way we present eligibility criteria.

Refer to: Using interactive checklists to simplify eligibility criteria

Correct use

  • Lead with an opening sentence that informs the users that they must meet all the criteria
  • Start with the criteria that will eliminate the largest number of people, to reduce the number of unnecessary questions people will answer before determining that they do not qualify
  • Start with easier criteria (such as age, timelines, basic situation) and progress to more complex criteria
  • Have 3 dynamically changing alerts:
    • When no boxes checked, use the following template:

      You need all of the above to be eligible

      To be eligible for (situation), you must meet all of the above criteria.

      (Further information here)

    • When some boxes are checked, use the following template:

      You need all of the above to be eligible

      To be eligible for the (situation), you must meet all of the above criteria.

      (Further information here)

    • When all boxes checked, use the following template:

      You may be eligible for (situation)

      (Further information here)

Demo

You must meet all of the following criteria in order to qualify:

You need all of the above to be eligible

To be eligible for (situation), you must meet all of the above criteria.

(Further information here)

Numbered, alpha or roman (ordered) list

Basic: Numbered, alpha or roman list

Use an ordered list to list items when the order does matter.

Structure

Numbered lists

  • Use numbered lists to show:
    • Ranking
    • Order
    • Priority
    • Step-by-step instructions

Alpha lists

  • Use to display letters instead of numbers
  • Try to avoid, as alpha lists are not a typical way of displaying information
  • Used mainly in legal documents or for sub-steps when combined with numbers (such as steps 1a, 1b, 1c)

Roman numeral lists

  • Use to display Roman (I, II, III, IV or i, ii, iii, iv…) instead of Arabic (1, 2, 3, 4…) numerals
  • Try to avoid, as many people do not understand Roman numerals
  • Used mainly in legal documents
Capitalization

Capitalize the first word of every list item. This improves the user's ability to scan, as mentioned in the article 7 Tips for Presenting Bulleted Lists in Digital Content, by the Nielsen Norman Group.

Punctuation

Don't end the list items with any punctuation

Appearance and code

Design treatments can be applied. Review the options and get the code.

Style

  • Default
  • Lower alpha
  • Upper alpha
  • Lower roman
  • Upper roman

Spacing

  • Added spacing
Appearance
  1. List item 1
  2. List item 2
  3. List item 3
HTML code 
<ol class="">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ol>

Enhancement: Stylized steps

Use when a task can be divided into steps and sub-steps.

If you are using this component on Adobe Experience Manager (AEM) you have to include the latest experimental files (that contain the 2021-05-steps component) for the design to be properly applied.

Refer to: GCWeb experimental features

Correct use

  • List items in the correct order for task completion
  • Start with an active verb (for example: open, complete, manage, know, close, send, keep, find, etc.)
  • If sub steps do not have to be in a specific order, bullet points are acceptable

Incorrect use

  • Do not use if the order of the list items does not matter
  • Do not exceed 4 levels of sub steps

Appearance and code

Design treatments can be applied. Review the options and get the code.

Headings

  • Ordered list without headings
  • Ordered list with headings

Nested list

  • Default
  • Add sub-steps

Zebra striping

  • Add zebra striping
Appearance

  1. Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.

  2. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.

  3. Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in.

    Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.

HTML code 
<ol class="lst-stps">
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ol>

Description list

Use to list terms with their associated descriptions or definitions.

Structure

Made up of 2 parts:

  • The term (single words or small phrases)
  • The description (can be range in size from a single statement to a large block of content)
Capitalization

Capitalize the first word of the term and the first word of the description

Punctuation
  • Don't use punctuation on the term
  • If the description is a single statement, do not end with punctuation
  • If the description is more than one sentence, end with punctuation

Appearance and code

Design treatments can be applied. Review the options and get the code.

Options

  • Default
  • Horizontal
  • Horizontal without borders
Appearance
Term 1
Description of term 1
Term 2
Description of term 2
Term 3
Description of term 3
HTML code 
<dl class="">
      <dt>Term 1</dt>
      <dd>Description of term 1</dd>
      <dt>Term 2</dt>
      <dd>Description of term 2</dd>
      <dt>Term 3</dt>
      <dd>Description of term 3</dd>
    </dl>

Coding considerations:

  • Use datalists (<dl>) for terms (<dt>) and the associated descriptions (<dd>) that follow them
  • A horizontal description list will stack like the default <dl> on smaller screen resolutions
Date modified: