Advanced Course Design Options for Canvas

The Canvas HTML Editor Allow List contains all HTML codes that are permissible in Canvas. You can use code to customize the design of your course, and add more advanced elements to vary the layout of your content. To edit the HTML on a Page in Canvas, click on the HTML editor icon (</>), located in the Rich Content Editor (RCE).

Accordion (Expand/Collapse)

An accordion can be used to condense content on a page, and will require users to click on the heading to expand and see the content underneath it.

mceclip0.png

To add an accordion to your course content, copy and paste the following code in to the HTML editor in the Canvas RCE.

When using accordions, you should include "click to reveal" language so that anyone using assistive technology will know that the content should be clicked in order to expand and read more content.

<details>
<summary style="cursor: pointer;">Accordion Title ONE<small> (click to reveal) </small></summary>
<p style="padding-left: 40px;">Your content here.</p>
</details>
<details>
<summary style="cursor: pointer;">Accordion Title TWO<small> (click to reveal) </small></summary>
<p style="padding-left: 40px;">Your content here.</p>
</details>
<details>
<summary style="cursor: pointer;">Accordion Title THREE<small> (click to reveal) </small></summary>
<p style="padding-left: 40px;">Your content here.</p>
</details>

Blockquotes

Blockquotes can be used to call out specific content, and make it stand out against the rest of the content on the page.

mceclip1.png

To add a blockquote to your course content, copy and paste the following code in to the HTML editor in the Canvas RCE.

<blockquote>
<p>Your content here.</p>
</blockquote>

Buttons

Buttons can be used to link to areas within the course, or weblinks that are external to the course site.

mceclip2.png

To add a button to your course content, copy and paste the following code in to the HTML editor in the Canvas RCE.

When linking to content within the course, be sure to use the Course Link tool within the RCE so that when you go to copy the course in a future semester, the Course ID will automatically update to the new course and the link will not break.

<p><a class="Button" style="color: #ffffff; font-size: 18pt; background-color: #001c6b;" href="Insert link here"> START HERE</a></p>

Tabs

Tabs can be used to organize content on a single page and helps to keep students from having to scroll down the page to review everything.

mceclip4.png

To add tabs to your course content, copy and paste the following code in to the HTML editor in the Canvas RCE.

Keep in mind that the content area for each tab should begin with a Header, so that anyone accessing the content from the mobile app or anyone using a screen reader will be able to discern what content relates to each particular tab.

<div class="enhanceable_content tabs">
<ul>
<li><a href="#tab-1">TAB One</a></li>
<li><a href="#tab-2">TAB Two</a></li>
<li><a href="#tab-3">TAB Three</a></li>
</ul>
<div id="tab-1">
<h2>Content - One</h2>
<p>Tab One Content</p>
</div>
<div id="tab-2">
<h2>Content - Two</h2>
<p>Tab Two Content</p>
</div>
<div id="tab-3">
<h2>Content - Three</h2>
<p>Tab Three Content</p>
</div>
</div>
Was this article helpful?
0 out of 0 found this helpful