Add a Page Header
- Add a header to your page
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 -->
Save your page, and click the Preview button.
The Design System site has more documentation and examples for these components: