Each layout pattern helps the user:
By using a limited selection of layout patterns, we create consistency in the platform and therefore clear expectations about where content and actions can be found or performed. This helps drive action.
Every layout has:
Generally, most layout patterns have:
Anatomy of core pages:
$ca-layout-max-width: 1416px; $ca-layout-side-padding: 24px; $ca-layout-content-width: 1080px; $ca-layout-title-block-height: 5 * $ca-grid; $ca-layout-title-block-tablet-height: 3.5 * $ca-grid;
Workflow header: the workflow header is above the content area. It’s a full-width fluid section that stretches across the entire viewport. As you scroll, the header shrinks to maximize focus on the content area, but stays visible to provide context, easy access to primary actions such as “Preview” and easy access to emergency exits.
E.g. Survey builder:
An index page and a linked page is sometimes referred to as:
Here are some examples from existing design systems: