Add a Page Header

What You’ll Do

  • Add a header to your page

Step 1: Add a Basic Page Header

The page header component can look different depending on the context of the page. In our case, we’re just adding a simple title, but in future steps we’ll add buttons and a detail row.

Add the following code between the <!-- PAGE HEADER --> comments:

<!-- PAGE HEADER -->
<div class="slds-page-header">
  <!-- LAYOUT GRID -->
  <div class="slds-grid">
    <!-- GRID COL -->
    <div class="slds-col slds-has-flexi-truncate">
      <!-- HEADING AREA -->
      <p class="slds-text-title_caps slds-line-height_reset">Contacts</p>
      <h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate"  title="My Contacts">My Contacts</h1>
      <!-- / HEADING AREA -->
    </div>
    <!-- ACTION BUTTONS -->
    <!-- / ACTION BUTTONS -->
  </div>
  <!-- / LAYOUT GRID -->
  <!-- PAGE HEADER DETAIL ROW -->
  <!-- / PAGE HEADER DETAIL ROW -->
</div>
<!-- / PAGE HEADER -->

Step 2: Preview

Save your page, and click the Preview button.

Preview of Visualforce page after adding header

Resources

The Design System site has more documentation and examples for these components: