A cheeky, unofficial guide to Canvas pages

Code/tips guide

Buttons

<a class="btn btn-primary" href="#">Primary</a>
<a class="btn btn-success" href="#">Success</a> 
<a class="btn btn-default" href="#">Default</a>

Progress Bar

<div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" style="width: 100%;" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37">
   <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 17%;">&nbsp; Progress</div>
</div>

Icons

<i class="icon-Solid icon-trash" aria-hidden="true"></i> 
<i class=" icon-gradebook" aria-hidden="true"></i> 
<i class="icon-info" aria-hidden="true"></i> 
<i class="icon-Solid icon-paperclip" aria-hidden="true"></i> 
<i class="icon-Solid icon-pdf" aria-hidden="true"></i></p>

See https://instructure.design/#iconography for a list of icons

Tabbed content

<div class="enhanceable_content tabs">
   <ul>
      <li><a href="#fragment-1">Tab 1</a></li>
      <li><a href="#fragment-2">Tab 2</a></li>
      <li><a href="#fragment-3">Tab 3</a></li>
    </ul>
    <div id="fragment-1">
        <p>This is some content in a tab. It can contain whatever you want.</p>
        <iframe style="border: 1px solid #464646;" src="https://campus.recap.ncl.ac.uk/Panopto/Pages/Embed.aspx?id=882a8649-feb3-4d44-a104-ab87014d6efa&amp;autoplay=false&amp;offerviewer=true&amp;showtitle=true&amp;showbrand=false&amp;start=0&amp;interactivity=all" width="720" height="405" allowfullscreen="allowfullscreen" allow="autoplay"></iframe>
    </div>
    <div id="fragment-2">
        <p>This is a second tab of content.</p>
    </div>
    <div id="fragment-3"> 
        <p>More content</p>
    </div>
</div>

Grid content - images alongside text

<div class="grid-row">
   <div class="col-sm-3"><img src="https://ncl.instructure.com/courses/317/files/3080494/preview" alt="bear-brown-bear-fur-bears-hairy-dangerous-teddy-muzzle-brown.jpg" width="100%" data-api-endpoint="https://ncl.instructure.com/api/v1/courses/317/files/3080494" data-api-returntype="File" /></div>
   <div class="col-sm-9">
      <h3>It's a bear!</h3>
      <p>Uh oh!</p>
   </div>
</div>

Grid content - collapsing divs

In Canvas, re-size your page and watch the grids re-order.

<div class="grid-row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="https://ncl.instructure.com/courses/317/files/3080494/preview" alt="bear-brown-bear-fur-bears-hairy-dangerous-teddy-muzzle-brown.jpg" width="100%" data-api-endpoint="https://ncl.instructure.com/api/v1/courses/317/files/3080494" data-api-returntype="File" />
       <h3>A bear!</h3>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="https://ncl.instructure.com/courses/317/files/3080494/preview" alt="bear-brown-bear-fur-bears-hairy-dangerous-teddy-muzzle-brown.jpg" width="100%" data-api-endpoint="https://ncl.instructure.com/api/v1/courses/317/files/3080494" data-api-returntype="File" />
       <h3>A bear!</h3>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="https://ncl.instructure.com/courses/317/files/3080494/preview" alt="bear-brown-bear-fur-bears-hairy-dangerous-teddy-muzzle-brown.jpg" width="100%" data-api-endpoint="https://ncl.instructure.com/api/v1/courses/317/files/3080494" data-api-returntype="File" />
      <h3>A bear!</h3>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="https://ncl.instructure.com/courses/317/files/3080494/preview" alt="bear-brown-bear-fur-bears-hairy-dangerous-teddy-muzzle-brown.jpg" width="100%" data-api-endpoint="https://ncl.instructure.com/api/v1/courses/317/files/3080494" data-api-returntype="File" />
       <h3>A bear!</h3>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="https://ncl.instructure.com/courses/317/files/3080494/preview" alt="bear-brown-bear-fur-bears-hairy-dangerous-teddy-muzzle-brown.jpg" width="100%" data-api-endpoint="https://ncl.instructure.com/api/v1/courses/317/files/3080494" data-api-returntype="File" />
      <h3>A bear!</h3>
    </div>
</div>

Striped tables

<table class="ic-Table ic-Table--hover-row ic-Table--striped">
   <thead>
      <tr>
         <th>Month</th>
         <th>Year</th>
         <th>Sales</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Nov</td>
         <td>2019</td>
         <td>10344.50</td>
     </tr>
     <tr>
         <td>Dec</td>
         <td>2019</td>
         <td>10111.50</td>
     </tr>
     <tr>
         <td>Jan</td>
         <td>2020</td>
         <td>9333.50</td>
     </tr>
     <tr>
         <td>Feb</td>
         <td>2020</td>
         <td>10241.50</td>
     </tr>
     <tr>
         <td>Mar</td>
         <td>2020</td>
         <td>4000.50</td>
     </tr>
   </tbody>
</table>

Hide content

The following hides, for example, a <div> element (noting that normal HTML comments don't work in the Canvas Editor)

<div style="display: none;">