A reusable library of clean, copy-paste HTML blocks for the Canvas RCE. Each component shows a Notion approximation of how it will look, followed by the HTML ready to paste into the </> HTML editor.

<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>

Component index

# Component Use for
1 Section heading Page section dividers
2 Callout — info Tips, definitions, context
3 Callout — warning Required actions, deadlines
4 Callout — highlight "Read me" intros, key takeaways
5 Hero banner with overlay Page tops, unit intros
6 Card grid Resource lists, office directories
7 CTA button Submit, register, external links
8 Data table Schedules, grading, comparisons
9 Instructor card Meet-your-instructor blocks
10 Two-column layout Side-by-side content
11 Outcomes list Lesson/unit objectives
12 Pull quote Emphasis, framing statements
13 Unit outline Module objectives + graded-activity overview

Design tokens

Swap these hex values to rebrand the entire library. The components below use them consistently.

Token Default hex Usage
Primary #273a80 Headings, navy CTAs, borders
Secondary #406daa Subtitles, italics, accents
Warning #e12526 Required/alert callouts
Highlight #fdb71a Underlines, highlight borders
Primary tint #eef2f9 Card backgrounds
Warning tint #fdecec Warning callout fills
Highlight tint #fff8e6 Highlight callout fills

1. Section heading

Navy heading with a gold underline. Use as the main divider for any page section.

Approximate look:

Section Title

<div color="yellow_bg" style="height:3px"></div>

<h2 style="color:#273a80; border-bottom:3px solid #fdb71a; padding-bottom:6px;">Section Title</h2>

2. Callout — info

Neutral blue tint. Use for definitions, context, or transitions between sections.

Approximate look:

<aside> ℹī¸

Keep going. Below you'll find additional information about the topic at hand.

</aside>

<div role="note" style="border-left:4px solid #406daa; background-color:#eef2f9; padding:14px 18px; margin:18px 0; border-radius:4px;">
  <p style="margin:0; color:#273a80;"><strong>Keep going.</strong> Below you'll find additional information about the topic at hand.</p>
</div>