Page layouts

Tools is based off a handful of different layout options

App layout#

Initial layout of app header/side panel navigation. Used in all of our tools applications, if navigation is required. It also handles the padding for the nav and content area at all breakpoints.

Simple Page Layout#

We currently have two page layouts: Simple Page Layout and Aside Page Layout. Simple uses 1 column. Only one option can be used per page.

Aside Page Layout#

Aside uses 2 columns, which allows for side-by-side cards. This is beneficial for custom dashboards, a set of anchored links and for forms that require a more prominent and overarching call to action [see Forms page]. On mobile, the 2nd column stacks below the 1st.

Overview#