Tags & Pills

First time using these tags and pills?

Make sure to read the Info & Notes section so you know how they work.

Jump to Info & Notes

TAGS: COPY & PASTE

All tags are available below for copying and pasting in the Visual Editor.

Looking for pills? Skip ahead to the Advanced section.

Selection bars are necessary for tags.

Start of Selection

Red Tag

End of Selection

Start of Selection

Gray Tag

End of Selection

Start of Selection

Stripe Tag

End of Selection

 

GIF showing process of copying and pasting tag

TAGS & PILLS: INFO & NOTES

Tags and pills are subtle elements that allow you to provide context or additional information about your content. They help users know what to expect from the content.

Ways you can use tags and pills in Canvas…

  • Provide an estimated reading time so that students can plan for how long it will take them to read the content.
  • Provide content warnings through tags.
  • Add topics covered in tags.
  • Indicate which course-level or module-level objectives an assignments is designed to address.
  • Add a footnote citation.

Notes

  • Pills are only available with two parts. Use tags instead of pills whenever you have 1 part or more than 2 parts.
  • You can include multiple tags and they will appear next to each other in a row as long as you place them next to each other in the content. Pills, on the other hand, will always take up their own line.
  • Use red tags for items you want to stand out, such as content warnings. Use gray tags for items you want to be more subtle, such as footnotes.
  • Feel free to mix and match tags and pills as you see fit.

Back to Top

ADVANCED: PILLS

Pills are available below for copying and pasting in the HTML Editor. To use pills, do the following:

  1. Select the entire contents of the Codepen embed.
  2. Copy using Ctrl+C (PC), Cmd+C (Mac), or right-click > Copy.
  3. Go to your Canvas content and open the Rich Content Editor by selecting the Edit button in the top-right corner.
  4. Toggle to the HTML Editor by clicking the </> icon in the bottom-right corner.
  5. Locate where you want the item to appear using the Find bar.
  6. Paste using Ctrl+V (PC), Cmd+V (Mac), or right-click > Paste.
  7. Toggle back to the Visual Editor by clicking the </> icon in the bottom-right corner.
  8. Edit the content.
  9. Click the “Save” button in the bottom-right corner.

Pill Part 1

Pill Part 2

Back to Top