Add a Detail Row
What You’ll Do
- Add a detail row to the page header
Step 1: Add a Detail Row to the Page Header
Let’s complete the page header so it has room for some metadata. Add the following code between the <!-- PAGE HEADER DETAIL ROW --> comments:
<!-- PAGE HEADER DETAIL ROW -->
<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 aria-hidden="true" class="slds-button__icon slds-button__icon_small">
<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>
<!-- / PAGE HEADER DETAIL ROW -->
Step 2: Preview
Save your page, and click the Preview button.
Resources
The Design System site has more documentation and examples.
