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