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.

Preview of Visualforce page after adding detail row to page header

Resources

The Design System site has more documentation and examples.

Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • 1 in 4 land a new job
  • 50% receive a promotion or raise
  • 80% learn new technologies that boost their resume
  • 66% say it increases productivity
Source: Trailblazer Community Impact Survey 2019