Lab // Canvas-safe HTML

Canvas HTML Library

A reusable library of clean, copy-paste HTML blocks for the Canvas RCE. This version renders the actual color system outside Notion, where the navy, blue, red, and gold treatments display properly.

Source reference: Notion library

Design tokens

Swap these seven hex values to rebrand the full library. The previews below use the same defaults consistently.

Primary #273a80 Headings, navy CTAs, borders

Secondary #406daa Subtitles, italics, accents

Warning #e12526 Required and alert callouts

Highlight #fdb71a Underlines, highlight borders

Primary tint #eef2f9 Card backgrounds

Warning tint #fdecec Warning callout fills

Highlight tint #fff8e6 Highlight callout fills

Component index

01 Section heading Page section dividers

02 Callout - info Tips, definitions, context

03 Callout - warning Required actions, deadlines

04 Callout - highlight Read-me intros, key takeaways

05 Hero banner with overlay Page tops, unit intros

06 Card grid Resource lists, office directories

07 CTA button Submit, register, external links

08 Data table Schedules, grading, comparisons

09 Instructor card Meet-your-instructor blocks

10 Two-column layout Side-by-side content

11 Outcomes list Lesson or unit objectives

12 Pull quote Emphasis, framing statements

13 Unit outline Module objectives and graded activities

Rendered components

Section heading

Section Title

Callouts

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

Required. This task must be completed before the next module unlocks.

READ ME - YES, REALLY

This is the friendly opener that reframes important content so students actually read it.

Hero banner with overlay

EYEBROW LABEL

Page Title Goes Here

Optional supporting sentence.

Card grid

01 - CATEGORY

Card Title One

One-line description of what this card links to. Visit ->

02 - CATEGORY

Card Title Two

One-line description of what this card links to. Visit ->

03 - CATEGORY

Card Title Three

One-line description of what this card links to. Visit ->

CTA button

Submit your response › Submit your response ›

Data table

Column A	Column B	Column C
Row 1	Value	Value
Row 2	Value	Value
Row 3	Value	Value

Instructor card

INSTRUCTOR

Dr. Instructor Name

Course title and section Email: email@school.edu Office: Building, Room 123

Best way to reach me: Email - I reply within 24 business hours.

Two-column layout

Left column

Body content for the left side. Keep it tight - one idea per column works best.

Right column

Body content for the right side. Pair with the left, or use for related-but-separate ideas.

Outcomes list

What you'll get out of this section

1
Outcome one. Short action-oriented description.
2
Outcome two. Short action-oriented description.
3
Outcome three. Short action-oriented description.

Pull quote

"A short, memorable sentence that frames the section or sets the tone."
- Attribution

Unit outline

ALIGNS WITH COURSE LEARNING OUTCOME

Illustrate the role of the computer for personal and professional uses.

At the End of This Unit You Will Be Able To
#	Learning objective
1	Discuss the history and evolution of computers.
2	Describe common computer parameters and computer circuits.
3	Define and demonstrate digital literacy.

Canvas caveats

Keep components self-contained; Canvas usually strips shared style blocks and media queries.
Use inline styles and responsive grid values such as repeat(auto-fit, minmax(...)).
Do not rely on scripts, forms, pseudo-elements, or links wrapped around block-level cards.
Keep table captions and scope attributes for screen readers.
Upload images to Canvas Files first, then replace image URLs in copied HTML.

Back to Lab