Also known as:
Page layoutPage templateStructureScreensTemplatesForms

Layout

A layout pattern is a familiar way to responsively arrange content and other elements on a page.

AnchorNeed to know

  • Each layout helps the user identify the most important information and the single next action they must perform.

To keep in mind

Each layout pattern helps the user:

  • identify the most important information
  • identify the single next action they must perform
  • understand how information on the page will be used
  • efficiently understand and act on information

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:

  • Culture Amp branding that links back to “homepage”
  • Current page title that identifies where they are
  • No more than 1 Primary Action Button
  • Access to support such as the Help Center academy sidebar

Generally, most layout patterns have:

  • A single task focus
  • 1 prominent piece of information such as hero data
  • Show where the user is relative to everything else
  • Show where they can go next
  • An emergency exit

Anatomy of core pages:

  • Global nav (optional)
  • Title block or Workflow header (mandatory)
  • Side navigation (optional)
  • Hero data (optional)
  • Content area (mandatory)
  • Workflow navigation (optional)

Key variables:

$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;

Anatomy of page layouts

Workflow bookends anatomy

  • Intro: an introduction to a workflow that prepares the user for the task they are about to begin, giving them the info they need to be successful
  • Outro: a successful end to a workflow that celebrates the key moment and prepares users for what happens next

Workflow steps anatomy

  • 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:

    • Survey overview page
    • Designer
    • Participants
    • Communications
    • Launch plan

Admin anatomy

  • Admin page (sidebar + single column content area)
    • E.g. account settings, admins
    • E.g. Report settings:
      • E.g. Report sharing
      • E.g. Inspiration configuration

Index anatomy

  • E.g. Survey
  • E.g. Reports

An index page and a linked page is sometimes referred to as:

  • master and detail
  • listing and individual

Tile grid anatomy

  • With side nav (max 3 col, responsive)
  • Without side nav (max 4 col, responsive)
  • E.g. Template library e.g. board/card layout

Overview anatomy

  • Dashboard (account dashboard/company dashboard)
  • Tasks / Activity timeline
  • Simplified insights report

Email anatomy

  • Email header
  • Content area
  • Footer

When to use

  • Use for most product pages

When not to use

  • For a novel experience intended to catch attention, such as a marketing landing page, an unusual page layout may be more appropriate.

External links

Here are some examples from existing design systems: