Stylized lists

Overview

Stylized lists highlight and group important information using icons in an unordered list. They improve scannability, helping users quickly find and act on key details with visual emphasis and clear grouping.

Design

Each stylized list item includes a title (designed with larger size text), optional subtitle (bolded to help it stand above basic text but smaller than the title), description text (regular text size), and one of the following icons:

• telephone for phone numbers
• star inside a circle for awards or recognition
• calendar for important dates or deadlines
• page with a folded corner for documents or resources
• clock for timelines
• at sign inside a speech bubble for email addresses
• paired speech bubbles for online chat
• front and back side of an envelope for mailing addresses

A stylized list can include multiple items, but all the icons must be the same.

The first icon in a telephone number list can optionally use a red background for highlighting emergency information. Do not use the red background for any other icon.

Usage guidelines

Considerations

Stylized lists are useful when presenting groups of related information that benefit from quick visual recognition, such as emergency numbers or important dates.

• Avoid long lists – aim for 1 to 5 items.
• Do not use stylized lists for long or complex paragraphs of content. Each list item should be short and scannable.
• Avoid using stylized lists in multiple locations on a single page. Too many visually emphasized lists can reduce their effectiveness and overwhelm users.
• Do not rely on colour alone to convey meaning.
• Use consistent, meaningful icons that clearly represent the type of information in each list item (for example, the phone icon for contact numbers or the calendar icon for dates). Icons should reinforce meaning, not introduce ambiguity.
• Use standard bullet lists instead when visual emphasis is not required or when the list is purely informational and low priority.

Structure

When building stylized list items, use the following structure:

• Icon (mandatory) – the visual aspect that separates stylized lists from other content on the page.
  • Choose icons that clearly match the content.
• Title (mandatory) – the most important thing for a user to remember from the list item.
  • This should be the phone number (linked for all non-emergency numbers), email address (linked), document title, grant name or other primary distinguishing label for the item.
• Subtitle (optional) – a qualifying note to help users better understand the title.
  • This field is available to help further define or differentiate the item identified in the title.
• Description (mandatory) – explains or details clarifying information related to the item.
  • Use this field to add a short description of the list item or note its importance.

Emergency phone numbers

Use the following recommended structure for 911 unless there are specific requirements based on the other content on the page. Do not use a tel link for 911.

Content guidelines

Stylized lists draw attention to small chunks of information, like grant application dates and important phone numbers. They are not to be used as a replacement for regular bulleted lists, callouts or contact information sections. Use them instead to elevate select content above plain text and default bulleted lists. 

Keep the following in mind when using them:

• Write concise, front-loaded list items so users can understand each item at a glance.
• Keep items parallel in structure (for example, all noun phrases or all short sentences) to improve readability.
• Limit each list item to a single idea or action.
• Use clear, descriptive link text within list items when links are included (for example, 'Download the annual report (PDF)' instead of 'Click here').
• Ensure that the meaning of each list item remains clear even if icons or colours are not visible (for example, when read by a screen reader or viewed in high-contrast mode).
• Review content periodically to confirm the list is still the most appropriate format as information changes or grows.
• Do not create a tel link for 911 as this can lead to accidental calls to emergency services.
• Use the red colour option only for emergency information like 911, and only for the first item in a stylized list. Never use it solely for visual interest as this can dilute emergency messaging across the site.