Lists

Canvas supports standard HTML list elements, along with optional legacy utility classes such as unstyled and dl-horizontal. The structures shown here follow modern semantic HTML, and the examples demonstrate how each list type appears in this Canvas instance. All examples below can be copied directly into a Canvas page using the HTML editor.

Useful references

• MDN — Structuring content with lists
• MDN — <dl>, <dt>, and <dd>

Unordered lists

Use <ul> for lists where the order of items does not matter. Canvas displays unordered lists with standard bullet points.

<ul>
  <li>First unordered item</li>
  <li>Second unordered item</li>
  <li>Third unordered item</li>
</ul>

Ordered lists

Use <ol> for content where the sequence is meaningful, such as steps in a process or ranked items.

<ol>
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ol>

Unstyled lists

The unstyledclass removes bullets or numbering from a list. This utility comes from Canvas' legacy CSS and may behave differently if the institutional theme is updated. Alternatively, you can use inline styles such as style="list-style: none; padding: 0; margin: 0;".

<ul class="unstyled">
  <li>Unstyled list item one</li>
  <li>Unstyled list item two</li>
  <li>Unstyled list item three</li>
</ul>

Definition lists

Definition lists use <dt> for the term and <dd> for its description. They are useful for glossaries, key-value pairs, or structured explanation lists.

<dl>
  <dt>Placeholder term</dt>
  <dd>A short description relating to the term.</dd>

  <dt>Another term</dt>
  <dd>Additional details describing this item.</dd>

  <dt>Final term</dt>
  <dd>A final example description.</dd>
</dl>

Horizontal definition lists

The dl-horizontalclass displays terms and definitions side-by-side. This layout is powered by Canvas' legacy CSS and may differ slightly depending on institutional theme settings.

If you want full control of spacing and alignment, you can recreate a similar layout using inline CSS Grid. This avoids relying on legacy classes and behaves consistently across modern browsers. For a full reference of grid properties, see: CSS Grid documentation (MDN).

<dl class="dl-horizontal">
  <dt>Placeholder term</dt>
  <dd>A short description relating to the term.</dd>

  <dt>Another term</dt>
  <dd>Additional details describing this item.</dd>

  <dt>Final term</dt>
  <dd>A final example description.</dd>
</dl>

Accessibility notes

• Use lists for genuine list content, not for layout or indentation.
• Avoid long lists without headings — break sections up with subheadings where appropriate.
• Do not rely on colour or position alone to communicate meaning within list items.
• Definition lists should only be used for pairs of related terms and descriptions, not as a styling shortcut.