Detail Page Layout

A detail page is used when an object is selected from a list page. The layout can adhere to varying predefined widths depending on use case.

Anatomy

It is important to note the various components that are included in the detail layout.

Primary Content

Content that sits outside of the card, but inside the body. This mainly includes components like banners or edit specific patterns like a title or buttons.

Tool Header

The Tool Header appears on other pages with varying components. For example, a list page may not have actions.

Variants

Layout Width

Detail pages support a few different layout width depending on the content need.
Note that these are max-widths; the min-width of the content area is always 736px.

Cards

If there is a need for a page to have multiple layouts, the container will divide into multiple cards. All cards on a page take up the same width.
Correct
Incorrect

Responsiveness

The content and container will have a max width of 672px and 792px, respectively. When the view port has a 768px width the minimum for the body and container will be is 640px and 736px, respectively.



This does not apply to list pages, but it applies to most other layouts.
The maximum padding between the content and the card edge is 60px. Minumim padding is 48px.

Specifications