Create a Pill Box in Canvas
The Pill Box is an aesthetically inclined way of presenting bite-sized information on a page. Typically, it is used to display the Estimated Reading Time of a page or piece of content to course participants, as shown below.
This small step might be useful for students to help with time management when participating in an online course, or to manage their attention level. You can use the ReadTime website to quickly help estimate how long it may take for participants to read the text on a page, and use that estimate in your Pill Box. Additionally, this guide requires some minor editing of the HTML view in Canvas. While the steps below attempt to simplify the process, we recommend you review the basics of understanding HTML code in Canvas. Understanding the basics of the HTML editor will lead to greater customization opportunities for your course material, allowing you to add buttons, and flair, and fix odd formatting issues.
In-Depth Walkthrough
Step 1
Log in to Canvas, from Cardinal Apps, and open any page to find the Rich Content Editor (RCE). Select the HTML </> button within the window.
Step 2
The HTML editor will open in the same window. Find the location within the editor where you want to insert your Pill Box and follow the steps below:
- Highlight the code block from "<ul" to "</ul>", then right-click and select Copy:
- <ul class="pill">
<li>FIRST ITEM</li>
<li>SECOND ITEM</li>
</ul>
Paste the code into the HTML editor in Canvas. It's recommended to paste the information on line 1.
Verify the code with FIRST ITEM and SECOND ITEM successfully inserted. Do not worry about spacing, as long as four rows are used.
Step 3
Now that we have inserted the code into our editor, we are ready to edit our "Pill Box" to display what we want it to display. Select the HTML </> button once more to switch back to the Rich Content Editor view.
Step 4
Note: The Pill Box will show as a bulleted list in the editor view. That is normal. The Pill Box display will not appear until the page is saved and viewed normally.
Within the editor, locate the bulleted list that displays FIRST ITEM and SECOND ITEM, matching the code we just added. Edit these lines of text to match what you want to display in your "Pill Box". In the example below, the text is replaced with the following values:
- FIRST ITEM becomes "Estimated Time to Read"
- SECOND ITEM becomes "30min"
Step 5
When you're finished and ready to see how it looks, Save your page to find the "Pill Box" in all its glory when viewing the page normally.
Canvas Pill Box FAQ
What if I want more than two spaces in my Pill Box?
You can add more spaces to your Pill Box by adding more lines to the bulleted list. This can be done within the HTML editor or the normal editor view.
