Recent updates
-
Image Borders
Updated onArticleThis page provides information for adding and styling image borders.
Gen3 Course Template Advanced HTML Elements Images
-
Row of Resizable Images
Updated onArticleThis code uses the grid-row class so that when the page is viewed at different widths, the images decrease in size rather than reformat to display vertically. Resize this page to see how it works.
Gen3 Course Template Advanced HTML Elements Images
-
Image Code Tutorial
Updated onArticleThe content in this module provides guidance for placing images in relation to text, captioning them, styling them, describing them, and making them responsive-none of which happens by default in Canvas. The code we are recommending is based on best practices and extensive testing, but there are many other methods to achieve the same results and there is more than one right answer. You may want to learn more about image widths, margins, padding, and so on. If so, we recommend the following resources: Web Images Best Practices and HTML Code Code Academy Learn HTML
Gen3 Course Template Advanced HTML Elements Images
-
Aligning Images Left or Right
Updated onArticleWe're using <figure> and <figcaption> tags to style our images throughout this resource. This isn't the only way to do it, but it's a best practice because it provides the correct semantic structure in the code, and for screen reader users the image and caption are associated with each other. If you don't need a caption, just eliminate the <figcaption> tags. In the following examples, we use filler text to show you how the image and text will display for that alignment choice. We also provide code to "clear" the image because without it, the content you want below the image will be beside it.
Gen3 Course Template Advanced HTML Elements Images
-
Image Overview
Updated onArticleWhen adding an image to a page, there are several important considerations, such as placement, responsiveness, and so on. The RCE allows you to add the image and then choose the alignment options to position it; however, the RCE doesn't provide a way to make the image responsive so that it resizes for different devices and screen sizes, add a caption, or add a border. And what if you want to group two or more images? Fortunately, you can do all of those things with the right code. This module will give you code and best practices that teach you how to center an image, align an image left or right, clear content after an image, add an image caption, add various border styles, group two or more images, and add a long description. All the code provided follows best practices for responsive design, accessibility, and usability.
Gen3 Course Template Advanced HTML Elements Images
-
Boxes Overview
Updated onArticleCanvas doesn't provide box styles via the Rich Content Editor (RCE), so we've developed some box styles you can use. This module includes basic boxes, boxes with bars, and some special case designs like combining text with an image. If none of the preformatted styles in this resource meet your needs, we have a tutorial page explaining how you can customize our basic code.A word of caution: Use boxes sparingly and in a consistent way. If you use boxes to visually highlight several examples, use the same type of box for each example. That will lessen the cognitive load for students and improve readability. Also keep in mind that boxes don't provide the same type of structure created by headings and lists because they aren't programmatically recognized by screen readers. Some students may not be able to see the boxes or will see color differently, so you shouldn't rely on the appearance of a box to convey information.Learn how to customize box code in the Tutorial section of this module.
Gen3 Course Template Advanced HTML Elements Boxes
-
Rich Content Editor Basics
Updated onArticleUsing the styles found in this resource requires basic knowledge of hyper text markup language (HTML) and the Rich Content Editor (RCE) in Canvas.
Gen3 Course Template Introduction Guidelines and Best Practices
-
Visual Design Guidelines
Updated onArticleThe following are some general best practices related to visual design that you may want to consider while utilizing styles in your course. These recommendations were created in consultation with a multimedia specialist.
Gen3 Course Template Introduction Guidelines and Best Practices
-
Symbolic Design Elements
Updated onArticleSymbolic design elements can be used alone or in combination with other elements to provide visual interest, help students navigate pages, or provide visual context to course content. Understanding the difference between marks, icons, symbols, emojis, images, and graphics, and when to use them, can greatly enhance the effectiveness of your page designs.
Gen3 Course Template Introduction Guidelines and Best Practices
-
Color Codes and Information
Updated onArticleThe styles in the resource use the University of Utah's recommended colors, but they are all customizable. By simply changing the color's hex code (for example, #000000 for black), you can create styles with nearly any color you want. We recommend using a consistent color palette, using colors that align with the University of Utah's style guide, and checking contrast to make sure people with low vision or color blindness can still understand the content. For more information about how to use the colors, please see the University of Utah's Brand Book, which is linked in the Resources section below.
Gen3 Course Template Introduction Guidelines and Best Practices