Images
Layout
Page Template
Typography
Spacing

Layout

When authoring, be sure to check tablet and mobile views to ensure spacers and text boxes are adjusted appropriately. Layouts can be modified between desktop, tablet and mobile screen sizes without losing the changes made to other other devices.

 

For example, if you change the layout settings of a component on tablet, this will not cascade into desktop or mobile view. Each screen size needs to be manually checked and adjusted to display the way the author wants.

Organizing Groups

To change the layout of a group of components, please use the Structure: Section Container for more flexibility.

Common Layouts

Two-thirds

This layout is the maximum length that text can reach on a page.

Two-thirds column

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. 

Two-thirds / One-third

This layout is commonly used for pages where there are supplementary components to go with content, such as filters, topic navigation, or social media share buttons.

Two-thirds column

One-third column

One-half / One-half

One-half column

One-half column

Full-width

Full-width column