Page Headers - Lightning Design System

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

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

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

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__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
Support	dev-ready
Restrict	`.slds-page-header`
Variant	True

Selector	`.slds-page-header_vertical`
Summary	Initializes vertical page header
Support	dev-ready
Restrict	`.slds-page-header`
Variant	True

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
Support	dev-ready
Restrict	`.slds-page-header`
Variant	True

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
Support	dev-ready
Restrict	`.slds-page-header`
Variant	True