Skip to main content

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


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

Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities