Components › Touch

Page Headers

The page header is a masthead that contains the Title of the page, and supporting details.

Record HomeRecord Homedev ready

Preview

Code

<div class="slds-page-header" role="banner">
  <div class="slds-media">
    <div class="slds-media__figure">
      <svg class="slds-icon slds-icon-standard-opportunity" aria-hidden="true">
        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
      </svg>
    </div>
    <div class="slds-media__body">
      <p class="slds-page-header__title slds-truncate" title="Rohde Corp - 80,000 Widgets">Rohde Corp - 80,000 Widgets</p>
      <p class="slds-text-body--small">Mark Jaeckal • Unlimited Customer • 11/13/15</p>
    </div>
  </div>
</div>

Object HomeObject Homedev ready

Preview

Code

<div class="slds-page-header" role="banner">
  <div class="slds-media slds-media--center">
    <div class="slds-media__figure">
      <svg class="slds-icon slds-icon-standard-opportunity" aria-hidden="true">
        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
      </svg>
    </div>
    <div class="slds-media__body">
      <p class="slds-page-header__title slds-truncate" title="Rohde Corp - 80,000 Widgets">Opportunities</p>
    </div>
    <div class="slds-media__figure slds-media__figure--reverse">
      <button class="slds-button slds-button--neutral">New</button>
    </div>
  </div>
</div>

Component Overview

Usage

This table gives you a quick overview of the unique SLDS CSS classes that can be applied to create page headers.
Class NameUsage
.slds-page-header
Applied to:

<div>

Outcome:

Applies background color and padding

Required:

Required

Comments:

Required on the main container for the page header

.slds-page-header__title
Applied to:

<p>

Outcome:

Page title (header text).

Required:

No, optional element or modifier

Comments:

--