Horizontal Lines
When using Canvas, is it best practice to break up large pages of text into more easily digested chunks. One quick and easy way to do this is to use horizontal lines. Just copy, paste, & personalize the code snippet below!
Use the tabs for more customization options.
Anatomy of the Code Snippet
Examples
<hr style="border: 4px solid blue;" />
<hr style="border: 2px solid green;" />
Steps to Create a Horizontal Line
1. Select and copy the code snippet:
<hr style="border: 4px solid blue;" />
2. Navigate to an existing Canvas page and go to Edit. Switch to HTML Editor.
3. Paste the code above & switch back to Rich Content Editor to view the results.
4. To modify the code to make the line thicker or a different color:
- Raise the number of pixels (yellow highlighted text in the code snippet) to make it thicker.
- Replace the blue highlighted text in the code snippet with the color you want to use.
More Default Colors
Blue line 1px thick
<hr style="border: 1px solid blue;" />
Red line 2px thick
<hr style="border: 2px solid red;" />
Green line 4px thick
<hr style="border: 4px solid green;" />
Purple line 6px thick
<hr style="border: 6px solid purple;" />
Yellow line 8px thick
<hr style="border: 8px solid yellow;" />
Orange line 10px thick
<hr style="border: 10px solid orange;" />
Pink line 12px thick
<hr style="border: 12px solid pink;" />
Hex Color Code Example
If you know the Hex color code for the color you'd like to use, use the code snippet below and replace the blue-highlighted text with the hex color code for your desired color. Visit the "Custom Colors" page for more on Hex color codes.
<hr style="border: 2px solid #5b9aa0;" />
More Line Styles!
Replace the green-highlighted word for more line styles.
<hr style="border: 4px solid blue;" />
<hr style="border: 4px dashed red;" />
<hr style="border: 4px dotted yellow;" />
<hr style="border: 8px double green;" />