Canvas uses standard HTML elements for headings, paragraphs, and text emphasis, along with a set of Canvas utility classes for alignment and colour. The utility classes come from Canvas' legacy styles, while the HTML patterns shown here follow modern semantic and accessibility best practice. The examples below show how common typography patterns appear in Canvas, followed by the code used to create them.

All examples are designed to be copied into a Canvas page using the HTML editor. They rely on native HTML elements, inline styles, and a small number of Canvas legacy classes that are still available in this Canvas instance.

Useful references

• MDN — Headings and paragraphs
• MDN — <strong> element
• MDN — <em> element
• MDN — <small> element
• MDN — <details> and <summary>

Headings

Use <h1> through <h6> to structure content hierarchically. <h1> is the most important heading on the page, and <h6> is the least important. In most Canvas pages you will only need levels one to three.

<h1>H1 Heading example</h1>

<h2>H2 Heading example</h2>

<h3>H3 Heading example</h3>

<h4>H4 Heading example</h4>

<h5>H5 Heading example</h5>

<h6>H6 Heading example</h6>

Emphasis

Use <strong> to indicate important text, <em> for emphasised text (often read with stress by screen readers), and <small> for secondary or fine-print text. These are standard HTML elements and are preferred over purely visual styling for conveying meaning.

<p>
  This sentence contains <strong>important highlighted text</strong>
  using <code>&lt;strong&gt;</code>.
</p>

<p>
  This sentence uses <em>emphasised text for stress</em>
  with <code>&lt;em&gt;</code>.
</p>

<p>
  This line includes <small>supporting details in smaller text</small>
  using <code>&lt;small&gt;</code>.
</p>

Alignment

Alignment utility classes adjust the horizontal alignment of text. Use text-left, text-right, or text-center on block-level elements.

These text-*classes are part of Canvas' legacy utility CSS. They still work in this Canvas instance, but behaviour or naming could change in the future. You can also use inline styles such as style="text-align: center;"if you prefer a more standard HTML approach that does not depend on Canvas' stylesheets.

<p class="text-left">This paragraph is left-aligned.</p>

<p class="text-center">This paragraph is centre-aligned.</p>

<p class="text-right">This paragraph is right-aligned.</p>

Text colour

Colour utility classes can be used to indicate status or emphasis. These classes are usually applied to short pieces of text such as labels, inline messages, or links.

Classes like muted, text-warning, text-error, text-info, and text-successare provided by Canvas' legacy CSS. They still work, but the exact colours may change if Canvas' theme is updated. For precise colour control you can also use inline styles (for example from the Colours in Canvas page) alongside these classes.

<p class="muted">Example of muted text.</p>

<p class="text-warning">
  Example of warning text <a href="#" class="text-warning">with a link</a>
</p>

<p class="text-error">
  Example of error text <a href="#" class="text-error">with a link</a>
</p>

<p class="text-info">
  Example of info text <a href="#" class="text-info">with a link</a>
</p>

<p class="text-success">
  Example of success text <a href="#" class="text-success">with a link</a>
</p>

Collapsible content with <details>

You can use the native HTML <details> and <summary> elements to create simple collapsible sections. These are useful for optional extra information, examples, or FAQs, without needing any custom JavaScript.

<details>
  <summary>Collapsible section one</summary>
  <p>
    This is some additional content that can be shown or hidden
    by activating the summary above.
  </p>
</details>

<details>
  <summary>Collapsible section two</summary>
  <p>
    You can use multiple <code>&lt;details&gt;</code> elements on
    a page for separate blocks of content.
  </p>
</details>

<details>
  <summary>Collapsible section three</summary>
  <p>
    Avoid hiding critical instructions inside collapsed content,
    as some learners may miss it.
  </p>
</details>

Some browsers support "exclusive" accordion behaviour using a name attribute on <details> (where opening one section closes the others). However, in this Canvas instance the name attribute is removed from <details> elements, so this exclusive accordion pattern is not available.

If you would like to learn more about the <details> and <summary> elements and the exclusive accordion pattern, see the MDN article Exclusive accordions using the HTML details element.

Accessibility notes

• Use headings in order and avoid skipping levels (for example, do not jump from <h1> straight to <h4>).
• Use <strong> and <em> to convey importance or emphasis, not just to change the visual appearance.
• Avoid using colour alone to indicate meaning in text (for example, "items in red are required" without any other cue).
• Treat <details> as a way to hide optional or supplementary information. Essential instructions should remain visible without needing to open a collapsed section.