Section Headings
SECTION HEADINGS: COPY & PASTE
Section headings without icons are available below for copying and pasting in the Visual Editor.
Section headings 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 bars are only necessary for the icon headings.
Click or tap to expand for the section headings.
Section Headings Without Icons
H2: Simple
H2: GRAY BAR
H2: RED BAR
H2: GRAY BACKGROUND
H2: RED BACKGROUND
H3: Simple
H3: Gray Bar
H3: Red Bar
H3: Gray Background
H3: Red Background
Section Headings with Home Icon
Start of Selection
H2: BLACK ICON (HOME)
End of Selection
Start of Selection
H2: RED ICON (HOME)
End of Selection
Start of Selection
H3: Black Icon (Home)
End of Selection
Start of Selection
H3: Red Icon (Home)
End of Selection
Section Headings with Student Icon
Start of Selection
H2: BLACK ICON (STUDENT)
End of Selection
Start of Selection
H2: RED ICON (STUDENT)
End of Selection
Start of Selection
H3: Black Icon (Student)
End of Selection
Start of Selection
H3: Red Icon (Student)
End of Selection
Section Headings with Objectives Icon
Start of Selection
H2: BLACK ICON (OBJECTIVES)
End of Selection
Start of Selection
H2: RED ICON (OBJECTIVES)
End of Selection
Start of Selection
H3: Black Icon (Objectives)
End of Selection
Start of Selection
H3: Red Icon (Objectives)
End of Selection
Section Headings with Book Icon
Start of Selection
H2: BLACK ICON (BOOK)
End of Selection
Start of Selection
H2: RED ICON (BOOK)
End of Selection
Start of Selection
H3: Black Icon (Book)
End of Selection
Start of Selection
H3: Red Icon (Book)
End of Selection
Section Headings with Writing Icon
Start of Selection
H2: BLACK ICON (WRITING)
End of Selection
Start of Selection
H2: RED ICON (WRITING)
End of Selection
Start of Selection
H3: Black Icon (Writing)
End of Selection
Start of Selection
H3: Red Icon (Writing)
End of Selection
Section Headings with Check Icon
Start of Selection
H2: BLACK ICON (CHECK)
End of Selection
Start of Selection
H2: RED ICON (CHECK)
End of Selection
Start of Selection
H3: Black Icon (Check)
End of Selection
Start of Selection
H3: Red Icon (Check)
End of Selection
Section Headings with Play Icon
Start of Selection
H2: BLACK ICON (PLAY)
End of Selection
Start of Selection
H2: RED ICON (PLAY)
End of Selection
Start of Selection
H3: Black Icon (Play)
End of Selection
Start of Selection
H3: Red Icon (Play)
End of Selection
Section Headings with Megaphone Icon
Start of Selection
H2: BLACK ICON (MEGAPHONE)
End of Selection
Start of Selection
H2: RED ICON (MEGAPHONE)
End of Selection
Start of Selection
H3: Black Icon (Megaphone)
End of Selection
Start of Selection
H3: Red Icon (Megaphone)
End of Selection
SECTION HEADINGS: INFO AND NOTES
Section headings help learners process information and mentally organize content. They provide a break from reading fatigue and help signpost what is coming next.
Ways you can use section headings in Canvas…
- Organize your course home page into sections to help students navigate it.
- Add to your Module overview pages to allow for quick identification of content.
- Use in Discussion Board, Quiz, and Assignment prompts to separate different types of information, such as important dates and grading criteria.
Notes
- Mobile - Heading 2 (H2) styles will adjust their size slightly for mobile devices.
- Canvas item titles are Heading 1 (H1), which is why you cannot access Heading 1 from the Rich Content Editor in Canvas.
- We have not included Heading 4 (H4) because this level of the hierarchy is more effective with minimal styles. If you are using H4, we recommend adjusting the font size and bolding to help it fit with the rest of the items.
- Heading 2 (H2) is in all caps and Heading 3 (H3) is not. This helps create visual hierarchy. It is not required by the code, so you are welcome to change the case if you want.
While you are not required to use the same style of heading for Heading 2 (H2) and for Heading 3 (H3), doing so is recommended, as it ensures a consistent visual aesthetic. Whatever styles you choose for each level, ensure they are consistent throughout your course.
SECTION HEADINGS: DEMO
H2: Simple
H2: GRAY BAR
H2: RED BAR
H2: GRAY BACKGROUND
H2: RED BACKGROUND
H2: BLACK ICON
H2: RED ICON
H3: Simple
H3: Gray Bar
H3: Red Bar
H3: Gray Background
H3: Red Background
H3: Black Icon
H3: Red Icon
ADVANCED: CUSTOMIZE HEADING 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.