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.

<div class="slds-page-header">
  <div class="slds-media">
    <div class="slds-media__figure">
      <span class="slds-icon_container slds-icon-standard-opportunity" title="Description of icon when needed">
        <svg class="slds-icon" aria-hidden="true">
          <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
        </svg>
      </span>
    </div>
    <div class="slds-media__body">
      <h1 class="slds-page-header__title slds-truncate slds-align-middle" title="Rohde Corp - 80,000 Widgets">Rohde Corp - 80,000 Widgets</h1>
      <p class="slds-text-body_small slds-line-height_reset">Mark Jaeckal • Unlimited Customer • 11/13/15</p>
    </div>
  </div>
</div>

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