Page Template

This is a guide on how our components and patterns are organized on any page in the product. For content hierarchy styling, please see the Content Flow page.

Demo and Developer Guidelines

Anatomy

The page template will be divided into the following segments in to allow for clear content hierarchy. Specific components can be used within each segment to further enforce clear hierarchy. Each segment can have its own set of sub-segments that  are also broken down in to header, body and footer. The aside is unique to page  level segments.

This is an example of components placed within the page segments.

Header

The header segment will contain components that are specific in providing context  for a page or item. Components and patterns like breadcrumbs, title, and tabs. General page navigation should be placed in this segment.

Body

The body is considered the primary content area of the page. Compared to the other segments, the body will be most organic as its contents can change from page to page. The structure of the body segment can mimic the segments at the page level and contain header, body and footer sub-segments if necessary.
‍
Components within the body are not required to take up the full 12 column span.  If the use case suggests the content should not fill 12 columns, the content will be centered within the primary content area. The width of banners within the body  will be dependent on the width of the primary content area. See Detail Page for  more information.
‍
This segment can consist of patterns of single or multiple cards that can have various types of components to display the desired content (table, list, form etc).

Content within the main content area should follow the 12-column grid (see Grid below) and always have a 24px margin on the right and left of the area. This rule applies to forms, tables and lists.

Aside

Also known as the secondary content area, the aside is meant to accompany the content in the primary content area. The panel component is commonly used in the aside to contain the read elements. Similarly to the body segment, the aside contains the header, body and footer sub-segments.

If the secondary content area is needed (either triggered or open by default), The header and body will resize to accommodate the width of the panel. See the Panelcomponent page for more details.

Grid

The header and body will use a 12 column grid to allow for greater content flexibility. Components within each zone will not always take up the full width visually (e.g- depending on the tool, tabs may only take up a few columns). In order to maintain hierarchy negative space will be common throughout the header.

Breakpoints

The segments, and the components inside each segment, will scale based on the sizes defined below.

*Gutters may not always be a consistent size due to the nature of the flexible grid.