Introduction

4 min read

This guide collects examples of HTML and CSS patterns that can be used to style content created with the Canvas Rich Content Editor (RCE). All examples have been tested in Canvas and are intended for everyday use when building pages, assignments, and other course content.

The patterns shown here are based on Canvas' legacy style guide, available at canvas.instructure.com/styleguide, with additional adjustments where needed to ensure that they work reliably in this Canvas instance.

About these styles

The Canvas style guide describes HTML and CSS components that were developed for use in Canvas prior to 2015. The Canvas-provided CSS classes and JavaScript behaviours documented there are no longer actively maintained by Instructure, so their behaviour or appearance may change in future updates to Canvas.

In this guide, those legacy classes are combined with modern HTML semantics, inline styles, and current accessibility practices (for example, appropriate use of headings, ARIA attributes, and colour contrast). Inline styles are often the most reliable way to apply consistent visual styling in Canvas content and are recommended when used alongside accessible HTML.

You can therefore think of these examples as: modern HTML and accessibility patterns layered on top of Canvas' legacy CSS utilities for authors working inside Canvas, rather than as a design system for new applications.

Scope of this guide

This guide focuses on patterns that work reliably in the Canvas RCE after saving. It is not an exhaustive list of everything Canvas allows. Many legacy classes, JavaScript behaviours, and older components are intentionally excluded if they are unstable, inaccessible, or inconsistent across browsers. Every example here has been curated for clarity, reliability, and practical use in course content.

Because Canvas rewrites HTML when you save or switch between the Visual and HTML editors, examples in this guide use simple, widely supported HTML and inline CSS that survive Canvas' cleaning process. For complex patterns, it is often easiest to paste the code directly into the HTML editor.

When to use these patterns

Use the patterns in this guide when you are:

  • Creating or updating Canvas content in the RCE.
  • Structuring information with headings, lists, and tables.
  • Applying layout, spacing, and borders to make content easier to read.
  • Adding Canvas-styled components such as buttons, alerts, flash messages, and tabs.
  • Including icons or accessibility helpers to support users.

Do not use these Canvas-specific classes as the basis for new standalone applications or LTI tools. For those, use a modern design system instead.

LTI tools and Instructure UI

If you are building an LTI tool (for example, with React.js) and want it to visually integrate with Canvas, you should use Instructure UI rather than the legacy Canvas CSS documented here. Instructure UI is the actively maintained design system for Canvas and related products.

Using colour for headings

Combining background colour with text colour can create distinct visual moods while maintaining accessible contrast. The examples below show three ready-to-use combinations for headings in Canvas. They are intended for short headings or banners rather than long paragraphs of text.

Mood 1 — Calm, scientific, trustworthy

A deep blue background paired with light text creates a cool, calm, analytical feel. This combination is suitable for high-level section headings.

Example heading

<h2 style="background: #0000cd; color: #ffd6e5; padding: 1rem;">
  Example heading
</h2>

Mood 2 — Bold, forward-looking

A bright yellow background with slate-like grey text communicates energy and confidence. Use this for key announcements or stand-out sections.

Example heading

<h2 style="background: #fff200; color: #4b4f57; padding: 1rem;">
  Example heading
</h2>

Mood 3 — Fresh, modern

A fresh green background with a dark navy text tone gives a contemporary, optimistic feel while preserving good contrast for headings.

Example heading

<h2 style="background: #00e67a; color: #111322; padding: 1rem;">
  Example heading
</h2>

Optional variations

You can adapt the same colour combinations for smaller headings or simple banner blocks by changing the heading level:

<h3 style="background: #0000cd; color: #ffd6e5; padding: 0.75rem;">
  Subsection heading
  </h3>

Or wrapping the text in a container:

<div style="background: #fff200; color: #4b4f57; padding: 1.25rem; margin: 1rem 0;">
  <h2 style="margin: 0;">Module introduction</h2>
</div>

When creating your own colour combinations, always check contrast with a WCAG contrast checker and avoid using low-contrast pairings for text.

For more detail on which colours are suitable for text and background combinations, see the Colours in Canvas page in this guide.

How to use the examples

Each page follows a consistent pattern: a live example shown as it appears in Canvas, followed by a code block containing the HTML needed to recreate it. You can copy the code into the RCE (using the HTML view) and adapt it for your own content.

Where possible, examples also include brief notes about accessibility, such as the use of screenreader-only, aria-hidden="true", and appropriate heading levels.