A reusable library of clean, copy-paste HTML blocks for the Canvas RCE. Each component shows a live preview of the actual rendered HTML, followed by the source code to copy.

<aside> 💡

How to use. Pick a component. Copy the HTML. In Canvas, open the page editor, click </> (HTML editor), and paste. Edit text and colors inline. For images, upload to Canvas Files and replace REPLACE_WITH_IMAGE_URL.

</aside>

Using this library in a module

A practical workflow for instructors building or rebuilding a Canvas module with these components.

<aside> 🧭

Recommended skeleton. Overview page → content pages → activity pages. Use the same components in the same positions in every module so students learn the pattern once.

</aside>

Which components go where

Module page Components Purpose
Module overview / intro Module page template (14) — pre-assembled with everything in this row Sets context, outcome alignment, and expectations
Content & lesson pages Section heading (1), Callouts (2–4), Two-column layout (10), Data table (8), Card grid (6) Structured reading with clear signposts
Activity & assignment pages Callout — warning (3), CTA button (7) Deadlines, requirements, and the next action
Syllabus or welcome page Instructor card (9), Pull quote (12) Instructor presence and course voice

Build workflow

  1. Plan the module first — list its pages, then pick components from the Component index below.
  2. In Canvas, create each page (Modules → + → Page, or Pages → +Page).
  3. Open the page editor and switch to the HTML editor (</>).
  4. Copy the component HTML from this page and paste it in.
  5. Replace the placeholder text, links, and image URLs. Upload images to Canvas Files first, then paste the Canvas file URL into src.
  6. Save, then check the page at phone width and in Student View.
  7. Run the Accessibility checklist below before publishing.

Consistency tips