Page Content

Layouts

Each page content is made up of a header and cards (or content sections). The header and cards can be organized in the following layouts.

One column

1/2 columns

2/3 columns

1/3 column can take lefthand place as well.

Mixed

Header

The header gives context for the rest of the page content. A few guidelines:

1. The top row should contain the page title, description and all page-level actions. These actions are located in the top-right of the page to provide a consistent location. Any primary actions should be on the furthest right.

2. The second row should contain any filters, sorting, or searching tools.

3. A third row directly relates to the content below it. Often this includes tabs for tabbed pages or table controls such as bulk actions and pagination for any tables.

Cards (or sections):

Used to split the rest of the page content into digestible sections.

1. Cards can be fullwidth, 1/2 width, 2/3 and 1/3 width, or tabular (see layouts above).

2. If there are multiple card columns, they should be the same length, even if content doesn't fill one of the columns.

3. Card headers sit inside the card.

Structure: Card content can vary greatly, from tables to lists. But we follow these general spacing guidelines for consistency.