Page Headers

Page Headers

Page headers are used at the top of several page types. They use the .slds-page-header class as a base and are comprised of multiple components.

Base

Preview

No content has been added for this component.

No content has been added for this component.

About Base

The page header is a masthead that contains the Title of the page, and supporting details. For large form factors, it may include actions.


Overview of CSS Classes

Selector.slds-page-header
Summary

Initializes page header

Supportdev-ready
Restrictdiv
VariantTrue
Selector.slds-page-header__title
Summary

Page title (header text).

Restrict.slds-page-header h1
Selector.slds-page-header_object-home
Summary

Initializes object home page header

Supportdev-ready
Restrict.slds-page-header
VariantTrue
Selector.slds-page-header_vertical
Summary

Initializes vertical page header

Supportdev-ready
Restrict.slds-page-header
VariantTrue
Selector.slds-page-header__detail
Summary

Bottom section containing record details

Supportdev-ready
Restrict.slds-page-header div
VariantTrue
Selector.slds-page-header__detail-row
Summary

Creates margins around the detail section of record home

Restrict.slds-page-header ul
Selector.slds-page-header__detail-block
Summary

Creates margins around the detail section of record home

Restrict.slds-page-header__detail-row li