When we want a Canvas page that is unique, customized, and segmented into clear sections for our content, we need to turn to the HTML editor (unless your university has extensions or templates for design from your Instructional Design teams, lucky you!). If you’re anything like me when I first started, that can feel a bit… intimidating to work in the HTML side of pages.

When I first began building pages within the editor, I was constantly looking up HTML snippets for different elements. I swear, I spent hours sifting through forums and component libraries, often finding things that needed a ton of troubleshooting to work in Canvas. After way too many crucial bookmarks vanished and forum threads got lost in the digital ether of my open tabs, I finally had that "aha!" moment: I needed to save the HTML elements I was actually using regularly.

Having that personal stash of go-to HTML sequences for the basic building blocks of a Canvas page – think bordered boxes, custom horizontal lines, or even simple colored header backgrounds – became a total game-changer for my workflow.

And because I know how precious our course prep time is, and that creative energy often needs to be spent on curriculum rather than code, I wanted to share a couple of shortcuts. If you want to skip the step-by-step HTML wrangling, definitely check out the freebie shop on the Teacher's PET site! We've got Canvas page templates where all you need to do is copy and paste the whole code block.

To make tweaking those templates even easier (like changing colors to match your course aesthetic), you should totally use our Simple HTML Preview and Editor. It lets you see your color-code updates before you drop the code into your Canvas page or other LMS.

For each of these code snippets, you just need to copy and paste into your HTML editor and then update the #COLOR and text content.

You don't have to use them just as they are, all by themselves. Think of each little chunk of code – like a bordered box, a colored header, or a button – as a building block, kind of like digital LEGOs for your Canvas pages.

Want a header followed by a bordered content box, then a fancy line, and then a couple of buttons side-by-side? You can totally do that! Just copy the HTML for the header and paste it into your Canvas HTML editor. Then, grab the code for the bordered box and paste it right underneath the header code. Keep going like that, stacking and arranging these blocks in whatever order makes sense for the page you’re trying to create.

The idea is to give you a starting point so you can mix, match, and modify these snippets to build out a page that looks and feels uniquely yours, without having to write every single line of HTML from scratch. It’s all about piecing them together to design something awesome!

You can also download a TXT version with more codes fully written to save to your computer.

Ultimately, it's about empowering you to create those beautiful, functional course environments efficiently. Happy designing!

This first section are three simple boxes of content with borders. You can alter these basic codes to change the color, thickness, and emphasis for the borders.

Examples of the HTML code with variations of a bordered textbox. — The code snippets below are for the 1) simple yellow box, 2) black box, and 3) the shadow box. You can change the colors and border thickness to get the variations shown.

Simple, thick border on all sides

<h2 class=""><span style="color: #000000;">Section Title Text</span></h2>

<p><span style="font-size: 14pt;">Content for the simple bordered text box. </span></p>

</div>

Simple border with a thicker edge on the left side

<h2 class=""><span style="color: #000000;">Section Title Text</span></h2>

<p><span style="font-size: 14pt;">Content for the right thick bordered text box. </span></p>

</div>

Simple shadowbox for the text

<p>Text for Shadow Box</p>

</div> </div>

This section has code for various borders and lines. You can alter these basic codes to change the color and thickness.

Sample of thick dividing lines for Canvas — The code snippets below are for the 1) thick yellow divider, 2) simple grey divider, 3) the gradient divider. You can change the colors and thickness to get the variations shown.

1) thick yellow divider

2) simple grey divider

3) the gradient divider.

This section has code for various Headers or shaded boxes for text. You can alter these basic codes to change the colors

1) the simple yellow box with black text

<h2 style="background-color: #ffe72e; padding: 10px; padding-right: 10px;"><span style="color: #000000; ">Enter Text</span>

</h2>

2) the black box with white text

TEXT

</h2>

</div>

3) the yellow gradient box

<h2 style="background: linear-gradient(to bottom, #ffe72e,#fff176); padding: 20px 0 20px 35px;"><span style="font-size: 36pt;"><strong><span style="color: #000000;">Gradient Text Top</span></strong></span></h2>

This section has code for various buttons (as shaded boxes with placeholders for the links). You can alter these basic codes to change the color.

Samples of simple buttons from HTML — The code snippets below are for the 1) the simple blue box with black text 2) the two side-by-side yellow boxes and 3) the row of three boxes. You can change the colors and thickness to get new variations. You will then turn the text into a link to make this a button in Canvas.

1) the simple blue box with black text

BUTTON TEXT

</a>

2) the two side-by-side yellow boxes

BUTTON TEXT

</a>

BUTTON TEXT

</a>

</div>

3) the row of three boxes.

<a href="#" style="flex: 1; display: block; padding: 10px 20px; background-color: #4AC1FC; color: black; font-weight:bold; font-size: large; border: none; text-decoration: none; cursor: pointer; text-align: center">Button Text</a>

<a href="#" style="flex: 1; display: block; padding: 10px 20px; background-color: #f9a825; color: Black; font-weight: bold; font-size: large; border: none; text-decoration: none; cursor: pointer; text-align: center ">Button Text</a>

<a href="#" style="flex: 1; display: block; padding: 10px 20px; background-color: #ffe72e; color: Black; font-weight: bold; font-size: large; border: none; text-decoration: none; cursor: pointer; text-align: center ">Button Text</a>

</div>

Clickable Accordion and Expanders in each color

This section has code for expanding accordion blocks. When you first enter the code into Canvas, it will display as “open.” Once you save and publish the page, the clickable actions will work. You can alter these basic codes to change the color and thickness.

Code below is for the set of three expandable text boxes.

Accordion Section 1

</summary>

<p>This is the content of the first accordion section.</p>

</div>

</details>

Accordion Section 2

</summary>

<p>This is the content of the accordion section.</p>

</div>

</details>

Accordion Section 3

</summary>

<p>This is the content of the accordion section.</p>

</div>

</details>

My favorite HTML elements for Canvas Pages