Introduction
Design PrinciplesAccessibility
Foundation
ColorGridIconographyIllustrationsShadowsTypography
Product Writing Guide
OverviewProduct's PersonalityBest PracticesInclusive LanguageWriting AccessiblyWriting GloballyWriting for AIGrammar RulesGlossaries
Components
ACTIONS
ButtonDropdownDropdown FlyoutToggle ButtonSegmented Controller
DISPLAY
AvatarAvatar StackContact ItemFile ListPillTokenThumbnail
INPUT
CheckboxDate SelectDropzoneFile SelectGroup SelectMenuMulti SelectNumber/Currency InputPill SelectRadio ButtonSingle SelectSliderSwitchText AreaText Editor (RTF)Text InputTiered Select
LOADING
Progress BarSpinner
MESSAGING
BannerEmpty StateToastTooltip
navigation
BreadcrumbsLinkPaginationSearchTabsTree
overlays & surfaces
CardModalPanelPopoverTearsheet
Layouts
DetailEmailPage TemplateRelated ItemsTool Landing Layout
Patterns
Content FlowFormForm Empty StateIn-Line Error ValidationOverlay UsageTitle LockupEmail Notifications
Views
Data Table
Data TableCells & RowsLocation Filter
Lists vs. TablesTile
Other Resources
Development Resources

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

Anatomy

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.

Header

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.

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.

Edit

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.

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

Specifications

Page

Expanded

Section

Collapsable