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.
Resources
The Design System site has more documentation and examples for these components:
