Columns

This is the first half column.

This is the second half column.

You can use columns to display content side-by-side. This can help learners visualize related information. Columns can also provide emphasis by breaking up the visual flow of the page.

Ways you can use columns in Canvas…

• Display an image and information about that image side-by-side.
• Create a grid of images or videos.
• Display lists or buttons beside other content.

Notes

• Mobile - These columns will revert to a single column on mobile devices. For 2-column layouts, this occurs below 720px width (most phones and some tablets). For 3-column layouts this occurs below 960px (most phones, most tablets, and some laptops). If you want to see this in action, resize your browser window and note how the column behavior changes.
• Given the behavior of the columns on mobile, put your most important information in the first (left) column, since this will appear above others on mobile.
• The space between columns (gutter) may look like a lot here, but it is important to visually separate the columns, particularly when they don’t have a background color.
• Columns can be used to create a row of buttons, similar to what you would see on a website navigation. You can check out an example of this in action on our Content Blocks page.
• Some items may appear differently inside a column. The design library elements have been coded to be consistent both inside a column and not.