Layout & Navigation
Page & Component Layout alpha

Overview

Layout

Usage

Larger elements (ie. Text blocks, tables, etc.) should be placed on the left side of the page taking up 12 columns.

Smaller elements (ie. Lists, single items, etc.) should be placed on the right side of the page taking up 3 columns.

There should be a 1 column gap between the left and right side of the page.

Action Area

Form Layout

Everywhere else

Usage

  • Within components, all actions should be on the right side.
  • For forms and modals, actions should be on the bottom right side
  • Otherwise actions should be on the top right side

Button Layout

Layout

Usage

Buttons are sorted by importance from right to left.

Changelog

  • March 16, 2017 - Reorganized and updated to add button layout rules
  • December 9, 2016 - Promoted to Alpha