Using Canvas Classes

Code Tutorial

With the exception of the tabbed-interface examples, we have not provided any library code snippets that include CSS classes created by Instructure because they are no longer supporting it, and it does not work in the mobile app. However, in some cases, using a class does add a nice visual element to content pages that is still understandable in the mobile app, and won't affect the content if it stops working.

This tutorial page demonstrates how to add the Border-Round Canvas class (class="border-round") to visually style accordions, borders, and buttons. 

Accordion With Class

This style is using a Canvas class to give the accordions a rounded edge. The example also demonstrates how to adjust the margins and alter the appearance of the cursor.

Heading Introducing the Content

<h2>Heading Introducing the Content</h2>
<div style="margin: 1.5rem 0;">
    <details>
        <summary class="border-round" style="display: block; width: 98%; font-size: 140%; line-height: 200%; background: #1E407C; color: #ffffff; border: 1px solid #001E44; padding: 0.5rem 0.75rem; cursor: pointer;">Title</summary>
        <div style="margin: 1rem;">
            <h3>Subheading</h3>
            <p>Content here.</p>
        </div>
    </details>
    <details>
        <summary class="border-round" style="display: block; width: 98%; font-size: 140%; line-height: 200%; background: #1E407C; color: #ffffff; border: 1px solid #001E44; padding: 0.5rem 0.75rem; cursor: pointer;">Title</summary>
        <div style="margin: 1rem;">
            <h3>Subheading</h3>
            <p>Content here.</p>
        </div>
    </details><details>
        <summary class="border-round" style="display: block; width: 98%; font-size: 140%; line-height: 200%; background: #1E407C; color: #ffffff; border: 1px solid #001E44; padding: 0.5rem 0.75rem; cursor: pointer;">Title</summary>
        <div style="margin: 1rem;">
            <h3>Subheading</h3>
            <p>Content here.</p>
        </div>
    </details>
</div>

As noted in the sample code, the class, border-round, has been added to the summary tag to create the rounded effect on each accordion tab. The summary tag also includes details about font size (font-size: 140%;), font color (color: #ffffff;) paragraph style (display; block;), background color (background: #1E407C;), border color and thickness (border: 1px solid #001E44;), and pointer style (cursor: pointer;). With the cursor: pointer code included, the cursor will change from an arrow to a hand when you hover your cursor over any of the accordion tabs. All of these details can be altered to align with the visual styling of your course.

In addition to the summary tag elements, div tags have been added to this example in order to add margins within a style code. In this instance the style code adds space on all sides of the accordion tabs as a whole and within each tab to offset the text.

Toggle With Class

Class code can also be added to self-check questions/answers or other basic toggles. In the following example, a border with rounded corners has been added to the answer. This is the same code that was used in the accordion tab example.

Self-Check Question

This style uses a Canvas class to add rounded corners to the show/hide button. 

In what year was Penn State founded?

1. 1970
2. 1776
3. 1855
4. 1890

<p>Your question</p>
<ol style="list-style-type: lower-alpha;">
    <li>Answer 1</li>
    <li>Answer 2</li>
    <li>Answer 3</li>
    <li>Answer 4</li>
</ol>
<details class="border-round" style="border: 1px solid #314D64; background: #f1f1f0; font-size: 100%; overflow: auto; width: 30%;">
    <summary style="margin-left: 2%;">Self-Check Answer</summary>
    <p style="margin-left: 15px; font-size: 100%;">Answer: C. 1855</p>
</details>

Button With Class

Similar to accordions and borders, the class code can be added to buttons. This is a button with the border-round class:

Notice the difference between the button with the rounded corners and the button with the square edges.