Detail 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.
Demo and Developer Guidelines


The detail page layout offers more functionality compared to the standard page template. A detail page is used to display extensive amounts of content for a 
single object.


Actions used in the header should be performed on the object level. An action like ‘Edit’ should be used in the sections within the body.


The body is considered the primary content area of the page. Any page level action should  be placed within the body. The body segment can include a header, body and footer sub-segments if necessary. More information on how the body can be ulitilized can be found on the Page Template.

Object Level and Section Level Actions

Actions used in the header should be performed on the object level. An action like ‘Edit’ should be used in the sections within the body.

Section and Subsections

The sections within the body will use the Content Flow structure to ensure clear hierarchy. Content within a container should have a heading. The section heading 
can use the Title Lockup pattern if there is a need for actions for the section. Subsections 
will always have a divider above the subsection title.
If there is a data table or data list within the card it will align with the section heading. The table controls will be placed within the section content, not the section title.

Collapsable Sections

Sections and subsections can be collapsable. The background card will resize depending on the visible content. If the title pattern is used and the section title has 
a button, the button can hide or remain visible when collapsed. Collapsing a section will collapse it's subsections.
Example of expanded section with a visible button and a collapsed subsection.
Example of collapsed section with a hidden button.
Example of collapsed section with an avatar and a hidden button.


The edit pattern for the detail page can happen at the object level or section level depending on the use case. Editing within a sections occurs in a modal or other overlay once triggered by the edit button in a section. Edit at the object level will trigger a full page Edit mode.


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. Minimum padding is 24px.