Your Style Guide

Bull's Eye Icon Pro Tip: Every Canvas course should have a Style Guide.

Once you are familiar with the possibilities of Canvas page design, you should determine which graphic elements and colors work best for your course. We advise that you save these elements in a page that is easily referenced as you build or update your Canvas course. This page is called a Style Guide.

Below are common graphic elements found in a Style Guide. You can incorporate parts of our DVC Style Guide too.

Example of a Style Guide

Course Palette with Color Hex Codes:

#abd1d1

#4f9090

#015491

#000000

Banner as Heading 2

HTML for Banner:

<div style="max-width: 1200px;">
<h2 style="background: #abd1d1; padding-left: 15px; padding-top: 15px; padding-bottom: 15px; color: #f5f2ed; margin: 0px; text-align: left;">
<span style="color: #000000;">Banner as Heading 2</span>
</h2>
</div>

Blue Line (for top of page)

HTML for Blue Line:

Thin line for separator:

HTML for Thin Line:

<hr/>

Black Line for Bottom of Page

HTML for Black Line:

Line for Bottom of Page with "Next" direction

Click "Next" below to continue.

HTML for Line with "Next" Direction:

<p style="border-top: 3px solid #007550;"> </p>
<p style="text-align: right;"><span style="background-color: #ffffff;"><strong>Click "Next" below to continue.</strong></span></p>

Icons, Button, Badges, and Images

See the ◾ Accessing DVC Images to download these image files for your course. (Do not simply copy and paste these images into your course.)

Announcement small icon

Arrow small icon

Silhouette of person talking online with chat box

Tech support button

Continue to DVC Style Guide