/styleguide

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 
<div class="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 
<div class="border border-rbl">
  right, bottom, left border
</div>
<br />
<br />
<div class="border border-tbl">
  top, bottom, left border
</div>
<br />
<br />
<div class="border border-bl">
  bottom, left border
</div>
<br />
<br />
<div class="border border-tl">
  top, left border
</div>
<br />
<br />
<div class="border border-b">
  bottom border
</div>
<br />
<br />
<div class="border border-t">
  top border
</div>

Border Radius

Add rounded corners with .border-round- classes.

all corners rounded


bottom corners rounded


top corners rounded


top-left corner rounded 
<div class="border border-trbl border-round">
  all corners rounded
</div>
<br />
<br />
<div class="border border-trbl border-round-b">
  bottom corners rounded
</div>
<br />
<br />
<div class="border border-trbl border-round-t">
  top corners rounded
</div>
<br />
<br />
<div class="border border-trbl border-round-tl">
  top-left corner rounded
</div>

Buttons

components/_buttons.scss

The Basic Button

<button class="Button" type="button">My Awesome Button</button>

Button Styles

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 
<button class="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.

<div class="ic-Form-control">
  <label for="demo-text-input-1" class="ic-Label">This is a label</label>
  <input type="text" id="demo-text-input-1" class="ic-Input" placeholder="Don't forget a helpful placeholder">
</div>
<div class="ic-Form-control">
  <label for="demo-text-input-2" class="ic-Label">This is another label</label>
  <select class="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>.

Favorite flower 
<fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
  <legend class="ic-Legend">
    Favorite flower
  </legend>
  <div class="ic-Form-control ic-Form-control--radio">
    <div class="ic-Radio">
      <input id="tulip" type="radio" value="tulip" name="flower" checked>
      <label for="tulip" class="ic-Label">Tulip</label>
    </div>
    <div class="ic-Radio">
      <input id="daisy" type="radio" value="daisy" name="flower">
      <label for="daisy" class="ic-Label">Daisy</label>
    </div>
    <div class="ic-Radio">
      <input id="daffodil" type="radio" value="daffodil" name="flower">
      <label for="daffodil" class="ic-Label">Daffodil</label>
    </div>
  </div>
</fieldset>

Inline radio button group

Add the ic-Form-control--radio-inline class to the ic-Form-control--radio element to make the radio buttons display inline.

Favorite Premier League team 
<fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
  <legend class="ic-Legend">
    Favorite Premier League team
  </legend>
  <div class="ic-Form-control ic-Form-control--radio ic-Form-control--radio-inline">
    <div class="ic-Radio">
      <input id="liverpool" type="radio" value="liverpool" name="epl" checked>
      <label for="liverpool" class="ic-Label">Liverpool</label>
    </div>
    <div class="ic-Radio">
      <input id="manutd" type="radio" value="manutd" name="epl">
      <label for="manutd" class="ic-Label">Manchester United</label>
    </div>
    <div class="ic-Radio">
      <input id="astonvilla" type="radio" value="astonvilla" name="epl" disabled>
      <label for="astonvilla" class="ic-Label">Aston Villa (relegated)</label>
    </div>
    <div class="ic-Radio">
      <input id="otherteam" type="radio" value="otherteam" name="epl">
      <label for="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.

<div class="ic-Form-control ic-Form-control--checkbox">
  <input type="checkbox" id="freecandy">
  <label class="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>.

Major label artists you admire 
<fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
  <legend class="ic-Legend">
    Major label artists you admire
  </legend>
  <div class="ic-Checkbox-group">
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="beyonce">
      <label class="ic-Label" for="beyonce">Beyonce</label>
    </div>
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="coldplay">
      <label class="ic-Label" for="coldplay">Coldplay</label>
    </div>
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="mariah">
      <label class="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.

Major label artists you admire 
<fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
  <legend class="ic-Legend">
    Major label artists you admire
  </legend>
  <div class="ic-Checkbox-group ic-Checkbox-group--inline">
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="beyonce2">
      <label class="ic-Label" for="beyonce2">Beyonce</label>
    </div>
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="coldplay2">
      <label class="ic-Label" for="coldplay2">Coldplay</label>
    </div>
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="mariah2">
      <label class="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.

Basic usage

<div class="content-box">
  <div class="grid-row">
      <div class="col-xs-6">
          <div class="styleguide-section__grid-demo-element"></div>
      </div>
      <div class="col-xs-6">
          <div class="styleguide-section__grid-demo-element"></div>
      </div>
  </div>
</div>

Official documentation for Flexbox Grid by Kristofer @dam.

Icons

components/_canvas-icons.scss

Canvas uses @instructure/ui-icons for its icon library. For a complete list of Instructure icons, visit https://instructure.design/#iconography.

Using icons

You can bring icons into Canvas using CSS classes. There are two weights to our icons: Line and Solid.

  
<i class="icon-Solid icon-trash" aria-hidden="true"></i>
&nbsp;
<i class="icon-Line icon-trash" aria-hidden="true"></i>

Icons in links

Add Something 
<a class="icon-Line icon-add" href="#">Add Something</a>

Icons in buttons

Edit 

<p>
  <a class="icon-Line icon-edit btn btn-primary">Edit</a>
</p>
<p>
  <button class="btn"><i class="icon-Line icon-trash"></i> Delete</button>
</p>

Spacing

components/_spacing.scss

.content-box

Content boxes automatically clear their floated children and have default top and bottom margins.

Hello
Hey, we have space between us 
<div class="content-box border border-trbl">
  Hello
</div>
<div class="content-box border border-trbl">
  Hey, we have space between us
</div>

.pad-box

Use pad-box if you want to add some padding to an element.

Mega
Normal
mini
micro
<div class="pad-box-mega border border-trbl">Mega</div>
<div class="pad-box border border-trbl">Normal</div>
<div class="pad-box-mini border border-trbl">mini</div>
<div class="pad-box-micro border border-trbl">micro</div>

Tables

components/_tables.scss

Default table

Name Email address Section Role
Paul Howard paulhowardemail@gmail.com Advanced students Student
Paul Howard paulhowardemail@gmail.com Advanced students Student
Paul Howard paulhowardemail@gmail.com Advanced students Student 
<table class="ic-Table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email address</th>
      <th>Section</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
  </tbody>
</table>

Striped table

Add .ic-Table--striped to the table element to produce a striped table among rows in the table body.

Name Email address Section Role
Paul Howard paulhowardemail@gmail.com Advanced students Student
Paul Howard paulhowardemail@gmail.com Advanced students Student
Paul Howard paulhowardemail@gmail.com Advanced students Student 
<table class="ic-Table ic-Table--hover-row ic-Table--striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email address</th>
      <th>Section</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
  </tbody>
</table>

Condensed table

Add .ic-Table--condensed to the table element to reduce the default cell padding.

Name Email address Section Role
Paul Howard paulhowardemail@gmail.com Advanced students Student
Paul Howard paulhowardemail@gmail.com Advanced students Student
Paul Howard paulhowardemail@gmail.com Advanced students Student 
<table class="ic-Table ic-Table--condensed">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email address</th>
      <th>Section</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
  </tbody>
</table>

Typography

components/_typography.scss

Alignment

.text-right

align this text right

align this text left

align this text center

<div>
  <p class="text-right">align this text right</p>
  <p class="text-left">align this text left</p>
  <p class="text-center">align this text center</p>
</div>

Emphasis

<strong>

Narwhal gastropub messenger bag viral letterpress plaid.

<p>Narwhal gastropub messenger bag viral <strong>letterpress plaid</strong>.</p>

<em>

Leggings whatever truffaut farm-to-table portland blue bottle cray selvage lo-fi marfa.

<p>Leggings whatever truffaut farm-to-table <em>portland blue bottle </em>cray selvage lo-fi marfa.</p>

<small>

Plaid tofu polaroid banjo keffiyeh wolf etsy craft beer kogi.

<p>Plaid tofu polaroid <small>banjo keffiyeh wolf etsy</small> craft beer kogi.</p>

Color

Example of MUTED text

Example of WARNING text with a link

Example of ERROR text with a link

Example of INFO text with a link

Example of SUCCESS text with a link

<p class="muted">Example of MUTED text</p>
<p class="text-warning">Example of WARNING text <a href="" class="text-warning">with a link</a></p>
<p class="text-error">Example of ERROR text <a href="" class="text-error">with a link</a></p>
<p class="text-info">Example of INFO text <a href="" class="text-info">with a link</a></p>
<p class="text-success">Example of SUCCESS text <a href="" 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>

Ordered Lists

  1. List Item One
  2. List Item Two
  3. List Item Three
<ol>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
</ol>

Unstyled Lists

Add class="unstyled"

  1. List Item One
  2. List Item Two
  3. List Item Three
<ol class="unstyled">
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
</ol>

Definition Lists

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
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>

<dl class="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>