Emphasis Boxes
EMPHASIS BOXES: COPY & PASTE
Emphasis boxes without icons are available below for copying and pasting in the Visual Editor.
Emphasis boxes with commonly used icons are also available below for copying and pasting in the Visual Editor. Want to choose from any of the 2,000+ icons available in our icon library? Skip ahead to the Advanced section.
Selection lines are necessary for emphasis boxes.
Click or tap to expand the emphasis boxes.
Emphasis Boxes Without Icons
IMPORTANT
Emphasis Box Small: Red
Placeholder paragraph so you don’t get stuck in the emphasis box.
TIP
Emphasis Box Small: Gray
Placeholder paragraph so you don’t get stuck in the emphasis box.
TIP OR OTHER HEADING
Emphasis Box Small: Red Outline
Placeholder paragraph so you don’t get stuck in the emphasis box.
TIP OR OTHER HEADING
Emphasis Box Small: Gray Outline
Placeholder paragraph so you don’t get stuck in the emphasis box.
Emphasis Box Large: Red
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Emphasis Box Large: Black
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Placeholder paragraph so you don’t get stuck in the emphasis box.
(New: Fall 2024) Info Box with Lightbulb Icon
Placeholder paragraph so you don’t get stuck in the emphasis box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus nibh ac orci efficitur, quis finibus orci iaculis. Nulla pharetra, purus tempor sodales tempus, elit arcu sodales dolor, feugiat placerat velit magna id mi. Fusce consequat consectetur vulputate. Suspendisse potenti. Donec ut rhoncus odio. Vivamus vel faucibus libero. Proin diam felis, tempus ornare feugiat eget, varius ut nisl. Aliquam eleifend orci ac augue vulputate, et pellentesque ipsum posuere. Fusce nec quam nec massa lobortis tempus eu nec nisi. Curabitur nisl nisi, vulputate id leo quis, sollicitudin pulvinar sapien. Ut semper molestie orci malesuada mattis.
Placeholder paragraph so you don’t get stuck in the emphasis box.
(New: Fall 2024) Pointing Box with Hand Pointing Icons
Placeholder paragraph so you don’t get stuck in the emphasis box.
This is an important alert. Pay attention to what is below.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
This is an important alert. Pay attention to what is above.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Emphasis Boxes with Important Icon
Placeholder paragraph so you don’t get stuck in the emphasis box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Emphasis Boxes with Lightbulb Icon
Placeholder paragraph so you don’t get stuck in the emphasis box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Emphasis Boxes with Note Icon
Placeholder paragraph so you don’t get stuck in the emphasis box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Emphasis Boxes with Contact Info Icon
Placeholder paragraph so you don’t get stuck in the emphasis box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Emphasis Boxes with Calendar Icon
Placeholder paragraph so you don’t get stuck in the emphasis box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Emphasis Boxes with Flag Icon
Placeholder paragraph so you don’t get stuck in the emphasis box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
Placeholder paragraph so you don’t get stuck in the emphasis box.
EMPHASIS BOXES: INFO & NOTES
Emphasis boxes allow you to highlight key content and visually separate it from the rest of the page. They are particularly helpful for ensuring that students don’t miss something critical, such as an assignment requirement or due date.
Ways you can use emphasis boxes in Canvas…
- Highlight key assignment requirements.
- Provide easy access on your home page to your contact information.
- Review or recap content.
- Bring awareness to items that may get buried in content, such as a link to a key resource.
Notes
- The large emphasis boxes are designed for longer content, such as instructor contact information or a recap paragraph. The small emphasis boxes are designed for shorter content, such as indicating a due date or providing a quick tip.
- If you want to add items other than paragraphs, such as lists, buttons, or images, use the large emphasis boxes.
- The small emphasis boxes come in two styles: one-line and multi-line. The one-line options are designed for short headings, such as “Tip.” The multi-line options are designed for longer headings, such as “Important Information About Course Evaluations.”
EMPHASIS BOXES: DEMO
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus nibh ac orci efficitur, quis finibus orci iaculis. Nulla pharetra, purus tempor sodales tempus, elit arcu sodales dolor, feugiat placerat velit magna id mi. Fusce consequat consectetur vulputate. Suspendisse potenti. Donec ut rhoncus odio. Vivamus vel faucibus libero. Proin diam felis, tempus ornare feugiat eget, varius ut nisl. Aliquam eleifend orci ac augue vulputate, et pellentesque ipsum posuere. Fusce nec quam nec massa lobortis tempus eu nec nisi. Curabitur nisl nisi, vulputate id leo quis, sollicitudin pulvinar sapien. Ut semper molestie orci malesuada mattis.
This is an important alert. Pay attention to what is below.
This is an important alert. Pay attention to what is above.
Emphasis Box Large: Red
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Emphasis Box Large: Black
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
IMPORTANT
Emphasis Box Small: Red
TIP
Emphasis Box Small: Gray
TIP OR OTHER HEADING
Emphasis Box Small: Red Outline
TIP OR OTHER HEADING
Emphasis Box Small: Gray Outline
ADVANCED: CUSTOMIZE BOX ICONS
If you want to choose from 2,000+ icons available in our icon library, follow the directions below. This will require copying and pasting in the HTML Editor.
- Open Font Awesome Links to an external site. and find the icon you want to use. (For more info on Font Awesome, review the Icons page.)
- Copy the icon’s code by clicking the icon, then clicking the code snippet.
- In the Codepen embed, select [ICON CODE PLACEHOLDER] and replace it with the copied Font Awesome icon code using Ctrl+V (PC), Cmd+V (Mac), or right-click > Paste.
- Select the entire contents of the Codepen embed.
- Copy using Ctrl+C (PC), Cmd+C (Mac), or right-click > Copy.
- Go to your Canvas content and open the Rich Content Editor by selecting the Edit button in the top-right corner.
- Toggle to the HTML Editor by clicking the </> icon in the bottom-right corner.
- Locate where you want the item to appear using the Find bar.
- Paste using Ctrl+V (PC), Cmd+V (Mac), or right-click > Paste.
- Toggle back to the Visual Editor by clicking the </> icon in the bottom-right corner.
- Edit the content.
- Click the “Save” button in the bottom-right corner.