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__row
Summary

Used for creating rows in a page header

Restrict.slds-page-header div
Selector.slds-page-header__row_gutters
Summary

Used to create rows with gutters in the page header

Restrict.slds-page-header__row
Selector.slds-page-header__col_title
Summary

Used to create a column containing the page title

Restrict.slds-page-header__row
Selector.slds-page-header__col_actions
Summary

Used to create a column containing the page actions

Restrict.slds-page-header__row
Selector.slds-page-header__col_meta
Summary

Used to create a column containing the page meta data

Restrict.slds-page-header__row
Selector.slds-page-header__col_controls
Summary

Used to create a column containing the page controls

Restrict.slds-page-header__row
Selector.slds-page-header__col_controls
Summary

Used to create a column containing the page record details

Restrict.slds-page-header__row
Selector.slds-page-header__name
Summary

Holds all the elements that make up the overall page name

Restrict.slds-page-header div
Selector.slds-page-header__name-title
Summary

Used to contain the page name title

Restrict.slds-page-header__name div
Selector.slds-page-header__name-switcher
Summary

Used to position the list view switcher

Restrict.slds-page-header__name div
Selector.slds-page-header__name-meta
Summary

Used to display the meta-text related to the page name

Restrict.slds-page-header p
Selector.slds-page-header__meta-text
Summary

Contains the page header meta text

Restrict.slds-page-header p
Selector.slds-page-header__title
Summary
Restrict.slds-page-header h1 span
Selector.slds-page-header__controls
Summary

Used to create a row of page header controls

Restrict.slds-page-header div
Selector.slds-page-header__control
Summary

Used to create spacing between each page header control

Restrict.slds-page-header div
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-list
Summary

Vertical list of detail items

Restrict.slds-page-header_vertical ul
Selector.slds-page-header__detail-item
Summary

List items of vertical detail list

Restrict.slds-page-header__detail-list li
Selector.slds-page-header_record-home
Summary

Bottom section containing record details

Supportdev-ready
Restrict.slds-page-header
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
Selector.slds-page-header_related-list
Summary

Initializes Related List home page header

Supportdev-ready
Restrict.slds-page-header
VariantTrue