Components

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.

Record HomeRecord Homedev ready

Preview

Code

<div class="slds-page-header">
  <div class="slds-grid">
    <div class="slds-col slds-has-flexi-truncate">
      <div class="slds-media slds-no-space slds-grow">
        <div class="slds-media__figure">
          <svg class="slds-icon slds-icon-standard-user" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
          </svg>
        </div>
        <div class="slds-media__body">
          <p class="slds-text-title--caps slds-line-height--reset">Record Type</p>
          <h1 class="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="this should match the Record Title">Record Title</h1>
        </div>
      </div>
    </div>
    <div class="slds-col slds-no-flex slds-grid slds-align-top">
      <button class="slds-button slds-button--neutral slds-not-selected" aria-live="assertive">
        <span class="slds-text-not-selected">
          <svg class="slds-button__icon--stateful slds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
          </svg>Follow</span>
        <span class="slds-text-selected">
          <svg class="slds-button__icon--stateful slds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
          </svg>Following</span>
        <span class="slds-text-selected-focus">
          <svg class="slds-button__icon--stateful slds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
          </svg>Unfollow</span>
      </button>
      <div class="slds-button-group" role="group">
        <button class="slds-button slds-button--neutral">Edit</button>
        <button class="slds-button slds-button--neutral">Delete</button>
        <button class="slds-button slds-button--neutral">Clone</button>
        <div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-button--last" aria-expanded="false">
          <button class="slds-button slds-button--icon-border-filled" aria-haspopup="true" title="More Actions">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">More Actions</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <ul class="slds-grid slds-page-header__detail-row">
    <li class="slds-page-header__detail-block">
      <p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Field 1">Field 1</p>
      <p class="slds-text-body--regular slds-truncate" title="Description that demonstrates truncation with a long text field">Description that demonstrates truncation with a long text field.</p>
    </li>
    <li class="slds-page-header__detail-block">
      <p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Field2 (3)">Field 2 (3)
        <button class="slds-button slds-button--icon" aria-haspopup="true" title="More Actions">
          <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">More Actions</span>
        </button>
      </p>
      <p class="slds-text-body--regular">Multiple Values</p>
    </li>
    <li class="slds-page-header__detail-block">
      <p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Field 3">Field 3</p><a href="javascript:void(0);">Hyperlink</a></li>
    <li class="slds-page-header__detail-block">
      <p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Field 4">Field 4</p>
      <p>
        <span title="Description (2-line truncation—must use JS to truncate).">Description (2-line truncat...</span>
      </p>
    </li>
  </ul>
</div>

Page header record home contains up to four compact layout fields. They’re contained in the .slds-page-header__detail-row div. That div contains the top and bottom spacing needed for this version of the page header.

When text is truncated, the full text should be placed in a tooltip on hover (currently shown in the title attribute). One line truncation is created by using the .slds-truncate class. Two line truncation must be achieved using JavaScript.

The page header is located at the top of every record home. It includes the record title and compact layout for a record. Excluding the title, the page header displays 4 compact layout fields. Similar data types can be rolled up and be displayed as a single field.

Record Title

  • Display Record Type icon to the left of the title
  • Record Type is displayed above the title
  • When required, follow action is displayed to the right of the record title
  • Display one line of text, truncate when the length conflicts with the page level actions

As shown in Field 3, web addresses and email addresses should be parsed and displayed as hyperlinks linking to the appropriate mailto: or web url. Do not modify the user’s input, display as intended.

When text is truncated, display full field text in browser tooltip on hover.

Display addresses in two lines. Street address on first line, City, State and Postal Code on line 2. For lengthy addresses, truncate each line individually based on the available width of the area using the .slds-truncate class. Display the full address via browser tooltip.

Record Home VerticalRecord Home Verticaldev ready

Preview

Code

<div class="slds-page-header--vertical">
  <div class="slds-grid slds-grid--vertical">
    <div>
      <div class="slds-media slds-no-space slds-has-divider--bottom-space slds-media--center">
        <div class="slds-media__figure">
          <div class="slds-icon_container slds-icon-standard-lead">
            <svg class="slds-icon" aria-hidden="true">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#lead"></use>
            </svg>
            <span class="slds-assistive-text">Lead</span>
          </div>
        </div>
        <div class="slds-media__body">
          <h1 class="slds-page-header__title slds-align-middle">Record Title</h1>
        </div>
      </div>
    </div>
    <div class="slds-has-divider--bottom-space">
      <button class="slds-button slds-button--neutral slds-not-selected" aria-live="assertive">
        <span class="slds-text-not-selected">
          <svg class="slds-button__icon--stateful slds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
          </svg>Follow</span>
        <span class="slds-text-selected">
          <svg class="slds-button__icon--stateful slds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
          </svg>Following</span>
        <span class="slds-text-selected-focus">
          <svg class="slds-button__icon--stateful slds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
          </svg>Unfollow</span>
      </button>
      <div class="slds-button-group slds-m-left--none slds-m-top--x-small" role="group">
        <button class="slds-button slds-button--neutral">Convert</button>
        <button class="slds-button slds-button--neutral">Clone</button>
        <button class="slds-button slds-button--neutral">Edit</button>
        <div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-button--last">
          <button class="slds-button slds-button--icon-border-filled" aria-haspopup="true" title="More Actions">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">More Actions</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <ul class="slds-list--vertical-space-medium slds-m-left--xx-small">
    <li class="slds-item">
      <div class="slds-text-title slds-m-bottom--xx-small">Field 1</div>
      <div class="slds-text-body--regular" title="Description that demonstrates truncation with a long text field">Description that demonstrates a long text field and will eventually wrap.</div>
    </li>
    <li class="slds-item">
      <div class="slds-text-title slds-m-bottom--xx-small">Field 2</div>
      <div class="slds-text-body--regular" title="Hyperlink"><a href="javascript:void(0);">Hyperlink</a></div>
    </li>
    <li class="slds-item">
      <div class="slds-text-title slds-m-bottom--xx-small">Field 3</div>
      <div class="slds-truncate" title="Description">Description</div>
    </li>
    <li class="slds-item">
      <div class="slds-text-title slds-m-bottom--xx-small">
        <button class="slds-button slds-text-link--reset" aria-haspopup="true">Field 4 (3)
          <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
        </button>
      </div>
      <div class="slds-text-body--regular">
        <div>1 Market St</div>
        <div>San Francisco, CA 94105</div>
      </div>
    </li>
    <li class="slds-item">
      <div class="slds-text-title slds-m-bottom--xx-small">Field 5</div>
      <div class="slds-text-body--regular" title="Description">Description</div>
    </li>
    <li class="slds-item">
      <div class="slds-text-title slds-m-bottom--xx-small">Field 6</div>
      <div class="slds-text-body--regular" title="Description">Description</div>
    </li>
    <li class="slds-item">
      <div class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Field 7">Field 7</div>
      <div class="slds-text-body--regular" title="Description">Description</div>
    </li>
  </ul>
</div>

Vertical page header record home contains up to seven compact layout fields. They're contained in the .slds-page-header__detail-row div. The heading does not truncate. This is typically used in more compact layouts where more vertical space is desired.

Object HomeObject Homedev ready

Preview

Code

<div class="slds-page-header slds-page-header--object-home">
  <div class="slds-grid">
    <div class="slds-col slds-has-flexi-truncate">
      <div class="slds-media slds-no-space slds-grow">
        <div class="slds-media__figure">
          <span class="slds-icon_container">
            <svg class="slds-icon slds-icon-standard-lead" aria-hidden="true">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#lead"></use>
            </svg>
          </span>
        </div>
        <div class="slds-media__body">
          <p class="slds-text-title--caps slds-line-height--reset">Leads</p>
          <h1 class="slds-page-header__title slds-p-right--x-small">
            <button class="slds-button slds-button--reset slds-type-focus slds-truncate" aria-haspopup="true" title="this should match My Leads">
              <span class="slds-grid slds-has-flexi-truncate slds-grid--vertical-align-center">
                <span class="slds-truncate">My Leads</span>
                <svg class="slds-button__icon slds-button__icon--right slds-no-flex" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                </svg>
              </span>
            </button>
          </h1>
        </div>
      </div>
    </div>
    <div class="slds-col slds-no-flex slds-grid slds-align-top slds-p-bottom--xx-small">
      <div class="slds-button-group" role="group">
        <button class="slds-button slds-button--neutral">New Lead</button>
        <button class="slds-button slds-button--neutral">Import Leads</button>
        <div class="slds-button--last">
          <button class="slds-button slds-button--icon-border-filled" aria-haspopup="true" title="More Actions">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">More Actions</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="slds-grid">
    <div class="slds-col slds-align-bottom">
      <p class="slds-text-body--small">10 items • Sorted by Name</p>
    </div>
    <div class="slds-col slds-no-flex slds-grid slds-align-bottom">
      <div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-m-left--x-small" aria-expanded="false">
        <button class="slds-button slds-button--icon-more" aria-haspopup="true" title="List View Controls">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
          </svg>
          <svg class="slds-button__icon slds-button__icon--x-small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">List View Controls</span>
        </button>
      </div>
      <div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-m-left--xx-small" aria-expanded="false">
        <button class="slds-button slds-button--icon-more" aria-haspopup="true" title="Change view">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#table"></use>
          </svg>
          <svg class="slds-button__icon slds-button__icon--x-small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Change view</span>
        </button>
      </div>
      <button class="slds-button slds-m-left--xx-small slds-button--icon-border" title="Edit List">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
        </svg>
        <span class="slds-assistive-text">Edit List</span>
      </button>
      <button class="slds-button slds-m-left--xx-small slds-button--icon-border" title="Refresh">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#refresh"></use>
        </svg>
        <span class="slds-assistive-text">Refresh</span>
      </button>
      <div class="slds-button-group" role="group">
        <button class="slds-button slds-button--icon-border" title="Charts">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chart"></use>
          </svg>
          <span class="slds-assistive-text">Charts</span>
        </button>
        <button class="slds-button slds-button--icon-border" title="Filters">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#filterList"></use>
          </svg>
          <span class="slds-assistive-text">Filters</span>
        </button>
      </div>
    </div>
  </div>
</div>

The title for the Object Home page header is sorting component. The .slds-text-focus class is placed on the media object that contains the title and down icon to simulate a hover and focus state of a link.

This component is created entirely of existing components like grids, buttons, button groups, and icons.

Related ListRelated Listdev ready

Preview

Code

<div class="slds-page-header">
  <div class="slds-grid">
    <div class="slds-col slds-has-flexi-truncate">
      <nav class="slds-m-bottom--xx-small" role="navigation" aria-label="Breadcrumbs">
        <ol class="slds-breadcrumb slds-list--horizontal">
          <li class="slds-breadcrumb__item slds-text-title--caps"><a href="javascript:void(0);">Accounts</a></li>
          <li class="slds-breadcrumb__item slds-text-title--caps"><a href="javascript:void(0);">Company One</a></li>
        </ol>
      </nav>
      <h1 class="slds-page-header__title slds-truncate" title="Contacts (will truncate)">Contacts (will truncate)</h1>
    </div>
    <div class="slds-col slds-no-flex slds-grid slds-align-top">
      <div class="slds-button-group">
        <button class="slds-button slds-button--neutral">Add Contact</button>
        <div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-button--last" aria-expanded="false">
          <button class="slds-button slds-button--icon-border-filled" aria-haspopup="true" title="More Actions">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">More Actions</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="slds-grid">
    <div class="slds-col slds-align-bottom">
      <p class="slds-text-body--small">10 items • sorted by name</p>
    </div>
    <div class="slds-col slds-no-flex slds-grid slds-align-bottom">
      <div class="slds-dropdown-trigger slds-dropdown-trigger--click" aria-expanded="false">
        <button class="slds-button slds-button--icon-more" aria-haspopup="true" title="Change view">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#table"></use>
          </svg>
          <svg class="slds-button__icon slds-button__icon--x-small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Change view</span>
        </button>
      </div>
      <div class="slds-button-group slds-m-left--xx-small" role="group">
        <button class="slds-button slds-button--icon-border" title="Chart">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chart"></use>
          </svg>
          <span class="slds-assistive-text">Chart</span>
        </button>
        <button class="slds-button slds-button--icon-border" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#filterList"></use>
          </svg>
          <span class="slds-assistive-text">Filter List</span>
        </button>
        <div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-button--last" aria-expanded="false">
          <button class="slds-button slds-button--icon-more" aria-haspopup="true" title="Sort">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#sort"></use>
            </svg>
            <svg class="slds-button__icon slds-button__icon--x-small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">Sort</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

The Related List page header is similar to the Object Home page header. It includes a breadcrumb component at the top and the title is truncated. It is also created using multiple other components shown in the dependencies tab.

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:

--

.slds-page-header__info
Deprecated
Applied to:

<p>

Outcome:

No longer needed due to tightening

Required:

No, optional element or modifier

Comments:

--

.slds-page-header__detail-row
Applied to:

<div>

Outcome:

Creates margins around the detail section of record home

Required:

No, optional element or modifier

Comments:

Only the record home page header contains this detail area