🔣 Advanced Design Toolkit - HTML Required

Advanced Design Toolkit - HTML Required

How To Use this Page

**Note: Using the elements on this page requires use of HTML. Basic knowledge of HTML is recommended.

Each section below contains different elements that you can use to customize the look and appearance of the pages in your Canvas Course. In each section you will find an example of the element, followed by the code and instructions on how to implement it into your Canvas page. To access the HTML editor on any Canvas page, click on the < / > symbol on the bottom right corner of the rich text editor. You can copy and paste the code into the desired area of your Canvas Page. 

Two Column Layout

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim scelerisque ornare. Nullam suscipit lectus vitae nulla fringilla dapibus. Praesent ultricies interdum finibus. Aliquam quis velit sed nisi porta ullamcorper id eget neque. Fusce malesuada fermentum vulputate. Pellentesque ut suscipit nibh, eget facilisis sem. Mauris a est a velit rhoncus imperdiet quis scelerisque ante. Morbi lacinia justo sed lacinia eleifend. Suspendisse et eros et quam faucibus tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim scelerisque ornare. Nullam suscipit lectus vitae nulla fringilla dapibus. Praesent ultricies interdum finibus. Aliquam quis velit sed nisi porta ullamcorper id eget neque. Fusce malesuada fermentum vulputate. Pellentesque ut suscipit nibh, eget facilisis sem. Mauris a est a velit rhoncus imperdiet quis scelerisque ante. Morbi lacinia justo sed lacinia eleifend. Suspendisse et eros et quam faucibus tincidunt.

Basic Code

<div class="grid-row">
    <div class="col-xs-12 col-md-12 col-lg-6">
        <div style="flex: auto;">
             <p>Column 1 Content</p>
        </div>
    </div>
    <div class="col-xs-12 col-md-12 col-lg-6">
        <div style="flex: auto;">
             <p>Column 2 Content</p>
        </div>
    </div>
</div>

Instructions

Copy and paste the code above into the HTML editor of any section of your page where you would like to insert two columns. Replace the red italicized text, "Column 1 Content" and "Column 2 Content" with your own content. This code is mobile responsive, which means it will become two paragraphs in one column when viewed on a mobile device.

Icon Typography

Examples

Basic Code

<a class="icon-star">Insert Text</a>
<a class="icon-flag">Insert Text</a>
<a class="icon-video">Insert Text</a>
<a class="icon-document">Insert Text</a>

Instructions

Each icon is denoted by a distinct class name (Ex. icon-star, icon-flag, icon-video). For any piece of text you want to add an icon to, insert <a class="icon-X"> right before the text and </a> after the text in the HTML editor. Replace X with the icon of your choice. 

For a complete list of Canvas Icon Typography and their associated codes, please take a look at this Canvas Icons List Links to an external site. developed by Paul Edwards, Software Engineer.

Note that Icons can only be added to <a> tags.

Tabbed Menu

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim scelerisque ornare. Nullam suscipit lectus vitae nulla fringilla dapibus. Praesent ultricies interdum finibus. Aliquam quis velit sed nisi porta ullamcorper id eget neque. Fusce malesuada fermentum vulputate. Pellentesque ut suscipit nibh, eget facilisis sem. Mauris a est a velit rhoncus imperdiet quis scelerisque ante. Morbi lacinia justo sed lacinia eleifend. Suspendisse et eros et quam faucibus tincidunt.

Basic Code

<div class="enhanceable_content tabs">
    <ul>
        <li><a href="#tabs-1">Tab One</a></li>
        <li><a href="#tabs-2">Tab Two</a></li>
        <li><a href="#tabs-3">Tab Three</a></li>
        <li><a href="#tabs-4">Tab Four</a></li>
    </ul>
    <div id="tabs-1">Tab 1 content</div>
    <div id="tabs-2">Tab 2 content</div>
    <div id="tabs-3">Tab 3 content</div>
    <div id="tabs-4">Tab 4 content</div>
</div>

Instructions

Copy and paste the code above into the HTML editor of any section of your page where you would like to add a tabbed menu. Replace the first four pieces of red, italicized text with your tab titles. Replace the next four pieces of red italicized text with the content contained in each tab.

Note that if there are too many tabs or the text in them is too long, the tabs may start piling on top of each other when there's not enough space. The number of tabs and text should be kept minimal so this doesn't happen.

If you would like to add icons to your tabs, as seen in the example above, go to the icon typography section to learn how to insert icons.

Accordion Menu

Example

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Basic Code

<details style="border: 1px solid #C3C3C3; margin: 0 0 10px 0; background-color: #ffffff;">
     <summary style="padding: 10px;">Insert Title</summary>
          <p style="margin-left: 10px; margin-right: 10px;">Insert Text Content</p>
</details>

Instructions

Copy and paste the code above into the HTML editor of any section of your page where you would like to add an accordion menu. Replace the red, italicized Title with the title of your accordion menu. Replace the red, italicized Text Content portion with the content you would like to put inside the menu.

Buttons

Example

Home View Video

Basic Code

<a href="Insert URL" class="btn" title="button name">Button Name</a>

Instructions

Copy and paste the code above into the HTML editor of any section of your page where you would like to add a button. Replace the red, italicized "Insert URL" text with the URL of the webpage you would like this button to navigate to. Replace the red, italicized "Button Name" text with the name of this button.

If you would like to add icons to your buttons, as seen in the example above, go to the icon typography section to learn how to insert icons.

Alerts

Example

Alert Title

Insert alert message!

Basic Code

<div class="border-round-t" style="background-color: #c0392b; padding: 10px; margin: 0px;">
     <span style="color: #fff;">Alert Title</span>
</div>
<div class="border-round-b" style="border: 1px solid #c0392b; padding: 5px 15px 1px 15px;">
     <p>Insert alert message!</p>
</div>

Instructions

Copy and paste the code above into the HTML editor of any section of your page where you would like to insert an alert message. Replace the red, italicized "Alert Title" text with the title of your alert. Replace the red, italicized "Insert alert message!" text with your alert message.

If you would like to change the color of the alert message, replace the color hex code #c0392b with the hex code color of your choosing. Note this hex code appears twice in the code and both instances need to be replaced.

Tables

Example

Table 1. Student class data
Name Email address Cohort Group
Student 1 Name  student1@uci.edu Cohort A Group 1
Student 2 Name student2@uci.edu Cohort B Group 2
Student 3 Name student3@uci.edu Cohort A Group 3

Basic Code

<table class="ic-Table ic-Table--hover-row border border-trbl" style="background-color: white;">
<caption>Insert Table Caption</caption>
     <thead>
          <tr>                       
               <th scope="col">Insert header, row 1 cell 1</th>
               <th scope="col">Insert header, row 1 cell 2</th>
               <th scope="col">Insert header, row 1 cell 3</th>
               <th scope="col">Insert header, row 1 cell 4</th>
          </tr>
     </thead>
     <tbody>
         <tr>     
              <td>Insert data, row 2 cell 1</td>
              <td>Insert data, row 2 cell 2</td>
              <td>Insert data, row 2 cell 3</td>
              <td>Insert data, row 2 cell 4</td>
         </tr>
         <tr>     
              <td>Insert data, row 3 cell 1</td>
              <td>Insert data, row 3 cell 2</td>
              <td>Insert data, row 3 cell 3</td>
              <td>Insert data, row 3 cell 4</td>
         </tr>
     </tbody>
</table>

Instructions

Copy and paste the code above into the HTML editor of any section of your page where you would like to insert a table. Replace the red, italicized "Insert Table Caption" text with a short header or description of what this table is about. Replace the red, italicized "Insert header, row 1 cell 1...cell 4" text with the header text you want in each column. Replace the red, italicized "Insert data, row 2 cell 1...cell 4" text with the corresponding data you want in the row below the header row. Replace the red, italicized "Insert data, row 3 cell 1...cell 4" text with the corresponding data you want in the following row.

Image with Text-Wrapping

Example - Image Left, Text Right

close up photo black Android smartphone

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim scelerisque ornare. Nullam suscipit lectus vitae nulla fringilla dapibus. Praesent ultricies interdum finibus. Aliquam quis velit sed nisi porta ullamcorper id eget neque. Fusce malesuada fermentum vulputate. Pellentesque ut suscipit nibh, eget facilisis sem. Mauris a est a velit rhoncus imperdiet quis scelerisque ante. Morbi lacinia justo sed lacinia eleifend. Suspendisse et eros et quam faucibus tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim scelerisque ornare. Nullam suscipit lectus vitae nulla fringilla dapibus. Praesent ultricies interdum finibus. Aliquam quis velit sed nisi porta ullamcorper id eget neque. Fusce malesuada fermentum vulputate. Pellentesque ut suscipit nibh, eget facilisis sem. Mauris a est a velit rhoncus imperdiet quis scelerisque ante. Morbi lacinia justo sed lacinia eleifend. Suspendisse et eros et quam faucibus tincidunt.

Example - Image Right, Text Left

close up photo black Android smartphone

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim scelerisque ornare. Nullam suscipit lectus vitae nulla fringilla dapibus. Praesent ultricies interdum finibus. Aliquam quis velit sed nisi porta ullamcorper id eget neque. Fusce malesuada fermentum vulputate. Pellentesque ut suscipit nibh, eget facilisis sem. Mauris a est a velit rhoncus imperdiet quis scelerisque ante. Morbi lacinia justo sed lacinia eleifend. Suspendisse et eros et quam faucibus tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim scelerisque ornare. Nullam suscipit lectus vitae nulla fringilla dapibus. Praesent ultricies interdum finibus. Aliquam quis velit sed nisi porta ullamcorper id eget neque. Fusce malesuada fermentum vulputate. Pellentesque ut suscipit nibh, eget facilisis sem. Mauris a est a velit rhoncus imperdiet quis scelerisque ante. Morbi lacinia justo sed lacinia eleifend. Suspendisse et eros et quam faucibus tincidunt.

 

Basic Code

Image Left, Text Right
<img style="float: left; margin: 10px 20px 5px 0px;" src="Insert Image URL" alt="Insert alternative text" />
     <p>Insert Text Content</p>
Image Right, Text Left
<img style="float: right; margin: 10px 0px 5px 20px;" src="Insert image URL" alt="Insert alternative text" />
     <p>Insert text content</p>

Instructions

Copy and paste the code above into the HTML editor of any section of your page where you would like to insert an image with text wrapping. Replace the red, italicized "Insert image URL" text with the URL for your image. Alternative text is required for accessibility purposes and is a written description of the image. Replace the red, italicized "Insert alternative text" text with a description of your image that would be adequate for an individual with a visual impairment to understand the image. Replace the red, italicized "Insert text content" text with the paragraph text you would like to place next to the image. Please note you may have to adjust the size of the image (you can do this in the rich text editor by dragging the corner of the image) for the text to wrap properly.