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

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

No content has been added for this component.

No content has been added for this component.