Create an HTML Pill List in Canvas

This guide explains switching to HTML view in the Canvas Rich Content Editor (RCE) to transform a bullet point list into a pill-shaped element. This option is only recommended for info that makes sense as a list. Do not use this HTML for creating interactive buttons.

HTML Considerations

Not all HTML is accepted by Canvas.
All customization must meet WCAG Level A and Level AA compliance.
HTML code must be written with perfectly for it to work.
Enter replacement text exactly where placeholders appear in the copied code.
Avoid extra spacing or duplicating punctuation that is not represented in the code provided.
Backspace and delete can mess up your HTML in the RCE.
You can copy HTML anywhere in your course for a consistent appearance.
Always confirm the results of your work before publishing.

Step 1: Copy the Code

<ul class="pill">
<li>FIRST ITEM</li>
<li>SECOND ITEM</li>
</ul>

Step 2: Open the HTML Editor and Paste the Code

Open the RCE in Canvas and click the HTML toggle button, represented with a less than-slash-greater than symbol, then paste the pill code.

Step 3: Customize the Appearance

Replace the FIRST ITEM and SECOND ITEM placeholders in the pasted code with your own text. You can also add more items to your list if appropriate. Carefully check the finished product makes sense visible and if read aloud by assistive technology.

Step 4: Leave HTML View and Check for Errors

When you click the HTML toggle button, Canvas will switch back to the WYSIWYG editing view. Make sure there are no errors in your typing, the Accessibility Checker, or Ally. The content will appear as a bullet point list until you have saved.

Step 5: Save Your Work

Save the changes to view the final appearance.