This page documents HTML and CSS components developed for use in Canvas prior to 2015. The code patterns documented here can be used to style content created in the Rich Content Editor (RCE). However, please note that these styles are no longer being actively maintained by Instructure.
If you're building an LTI tool with React.js, please use Instructure UI to visually integrate your app with Canvas.
Borders
components/_borders.scss
The basic .border class defines the border's appearance. Use the .border- classes to specify where you want the border to appear.
Full Border
some content here
<divclass="border border-trbl">
some content here
</div>
Partial Borders
right, bottom, left border
top, bottom, left border
bottom, left border
top, left border
bottom border
top border
<divclass="border border-rbl">
right, bottom, left border
</div><br/><br/><divclass="border border-tbl">
top, bottom, left border
</div><br/><br/><divclass="border border-bl">
bottom, left border
</div><br/><br/><divclass="border border-tl">
top, left border
</div><br/><br/><divclass="border border-b">
bottom border
</div><br/><br/><divclass="border border-t">
top border
</div>
By adding on a modifier class, you can get the style of the button you need.
Class
Normal State
Active State
Disabled State
default
.Button--primary
.Button--secondary
.Button--success
.Button--warning
.Button--danger
.Button--link
.Button--icon-action
<buttonclass="Button Button--primary"type="button">Hey, I have a blue button!</button>
Button Sizes
If you need to change a button's size, you can do so by adding the appropriate class
Class
Size
default
.Button.Button--large
.Button.Button--small
.Button.Button--mini
Forms
components/_ic-forms.scss
Basic inputs and labels
Our forms styles are opt-in, which means you need to add the right CSS
classes to inputs, labels, etc. to see the styles. (This prevents us from breaking
any existing Canvas forms CSS.) Inputs, selects, textareas, etc. should be
given the .ic-Input class, while labels should have the .ic-Label class.
The .ic-Form-control element provides positioning context and margin for
each label-input pair.
<divclass="ic-Form-control"><labelfor="demo-text-input-1"class="ic-Label">This is a label</label><inputtype="text"id="demo-text-input-1"class="ic-Input"placeholder="Don't forget a helpful placeholder"></div><divclass="ic-Form-control"><labelfor="demo-text-input-2"class="ic-Label">This is another label</label><selectclass="ic-Input"id="demo-text-input-2"><option>This is an option</option><option>This is another option</option><option>This is yet another option</option></select></div>
Radio buttons
Radio button group
Radio button groups should be contained within their own <fieldset> with
the class ic-Fieldset--radio-checkbox and labeled with a <legend>.
Add the ic-Form-control--radio-inline class to the ic-Form-control--radio
element to make the radio buttons display inline.
<fieldsetclass="ic-Fieldset ic-Fieldset--radio-checkbox"><legendclass="ic-Legend">
Favorite Premier League team
</legend><divclass="ic-Form-control ic-Form-control--radio ic-Form-control--radio-inline"><divclass="ic-Radio"><inputid="liverpool"type="radio"value="liverpool"name="epl"checked><labelfor="liverpool"class="ic-Label">Liverpool</label></div><divclass="ic-Radio"><inputid="manutd"type="radio"value="manutd"name="epl"><labelfor="manutd"class="ic-Label">Manchester United</label></div><divclass="ic-Radio"><inputid="astonvilla"type="radio"value="astonvilla"name="epl"disabled><labelfor="astonvilla"class="ic-Label">Aston Villa (relegated)</label></div><divclass="ic-Radio"><inputid="otherteam"type="radio"value="otherteam"name="epl"><labelfor="otherteam"class="ic-Label">Another team</label></div></div></fieldset>
Checkboxes
Basic checkbox
For these to work properly, make sure the for attribute of the label matches the id
of the checkbox element. If you want to use default checkboxes, the existing Bootstrap 2.x
styles have been left unchanged.
<divclass="ic-Form-control ic-Form-control--checkbox"><inputtype="checkbox"id="freecandy"><labelclass="ic-Label"for="freecandy">Yes, I want free candy</label></div>
Checkbox group
Checkbox groups should be contained within their own <fieldset> with
the class ic-Fieldset--radio-checkbox and labeled with a <legend>.
<fieldsetclass="ic-Fieldset ic-Fieldset--radio-checkbox"><legendclass="ic-Legend">
Major label artists you admire
</legend><divclass="ic-Checkbox-group"><divclass="ic-Form-control ic-Form-control--checkbox"><inputtype="checkbox"id="beyonce"><labelclass="ic-Label"for="beyonce">Beyonce</label></div><divclass="ic-Form-control ic-Form-control--checkbox"><inputtype="checkbox"id="coldplay"><labelclass="ic-Label"for="coldplay">Coldplay</label></div><divclass="ic-Form-control ic-Form-control--checkbox"><inputtype="checkbox"id="mariah"><labelclass="ic-Label"for="mariah">Mariah Carey</label></div></div></fieldset>
Inline checkbox group
Add the ic-Checkbox-group--inline class to the ic-Checkbox-group
element to make the checkboxes display inline.
<fieldsetclass="ic-Fieldset ic-Fieldset--radio-checkbox"><legendclass="ic-Legend">
Major label artists you admire
</legend><divclass="ic-Checkbox-group ic-Checkbox-group--inline"><divclass="ic-Form-control ic-Form-control--checkbox"><inputtype="checkbox"id="beyonce2"><labelclass="ic-Label"for="beyonce2">Beyonce</label></div><divclass="ic-Form-control ic-Form-control--checkbox"><inputtype="checkbox"id="coldplay2"><labelclass="ic-Label"for="coldplay2">Coldplay</label></div><divclass="ic-Form-control ic-Form-control--checkbox"><inputtype="checkbox"id="mariah2"><labelclass="ic-Label"for="mariah2">Mariah Carey</label></div></div></fieldset>
Grid
vendor/_flexboxgrid.scss
We use a slightly modified version of Flexbox Grid as Canvas' grid.
Important! Flexbox Grid's default .row class has been changed to *.grid-row* due to previous usage of Bootstrap 2.x grid in small parts of the application.
Flexbox Grid is a lot like Bootstrap 3's 12-column grid, with different column widths available for .xs-, .sm-, .md-, and .lg- screen sizes.
To create vertical space between grid rows, consider using the .content-box and its variants.
<pclass="muted">Example of MUTED text</p><pclass="text-warning">Example of WARNING text <ahref=""class="text-warning">with a link</a></p><pclass="text-error">Example of ERROR text <ahref=""class="text-error">with a link</a></p><pclass="text-info">Example of INFO text <ahref=""class="text-info">with a link</a></p><pclass="text-success">Example of SUCCESS text <ahref=""class="text-success">with a link</a></p>
Headings
Use <h2> as page content heading
H1 Lorem ipsum dolor sit amet
H2 Lorem ipsum dolor sit amet
H3 Lorem ipsum dolor sit amet
H4 Lorem ipsum dolor sit amet
H5 Lorem ipsum dolor sit amet
H6 Lorem ipsum dolor sit amet
<h1>H1 Lorem ipsum dolor sit amet</h1><h2>H2 Lorem ipsum dolor sit amet</h2><h3>H3 Lorem ipsum dolor sit amet</h3><h4>H4 Lorem ipsum dolor sit amet</h4><h5>H5 Lorem ipsum dolor sit amet</h5><h6>H6 Lorem ipsum dolor sit amet</h6>
Unordered Lists
Unordered List Item
Unordered List Item
Unordered List Item
<ul><li>Unordered List Item</li><li>Unordered List Item</li><li>Unordered List Item</li></ul>
A substance that produces H+(aq) ions in aqueous solution
Acid Anhydride
The oxide of a nonmetal that reacts with water to form an acid
Acid Anhydride
Compound produced by dehydration of a carbonic acid
Acid
A substance that produces H+(aq) ions in aqueous solution
Acid Anhydride
The oxide of a nonmetal that reacts with water to form an acid
Acid Anhydride
Compound produced by dehydration of a carbonic acid
<dl><dt>Acid</dt><dd>A substance that produces H+(aq) ions in aqueous solution</dd><dt>Acid Anhydride</dt><dd>The oxide of a nonmetal that reacts with water to form an acid</dd><dt>Acid Anhydride</dt><dd>Compound produced by dehydration of a carbonic acid</dd></dl><dlclass="dl-horizontal"><dt>Acid</dt><dd>A substance that produces H+(aq) ions in aqueous solution</dd><dt>Acid Anhydride</dt><dd>The oxide of a nonmetal that reacts with water to form an acid</dd><dt>Acid Anhydride</dt><dd>Compound produced by dehydration of a carbonic acid</dd></dl>