Column Layouts

Layout options to organize content on pages.

Overview

These templates can be inserted in the body of a page to lay out the content in various ways. Each template can either be used alone or in combination with another column template.

Helpful hints

checkmark When selecting a template, keep in mind the best practices for line-length of body copy. View line-length guidelines.

Single column layout

A centered single column layout works well for headlines, tables, large graphics and charts.


Double column layout

Using two equal-width columns works well for body copy, images, and cards. On small screens, each column resizes to take on the full width of the screen.

Sidebar two column layout

A sidebar layout includes one wider primary column and a narrower secondary column. On small screens, each column resizes to take up the full width of the page. The primary column is a good option for tables, forms, and images. The secondary column is a good place for cards, highlight boxes, widgets, lists, and secondary copy.

Three column layout

A three column layout works well for cards and 3 short pieces of related text. On small screens each column resizes to fill the full width of the page.