Best Practices

• Page Titles tell the user which page they’re on.
• Pelican recommends a Page Title for every page.
• Use the button to provide quick access to one common action for the page.
• If a page needs more than one button, use a Bootstrap Dropdown button.
• Use only one H1 per page. (We are using an extra one here only as a documentation sample for the component.)
• Learn more about how to use Headings

Using Badges in the Page Title

• Remove the Badges section if you don’t need them.
• Try to use no more than two or three Badges.
• Badges in the Page Title are no longer dim by default. Refer to Badges for using dim badges.

Usage

<div class="page-title">
  <div class="container-fluid">
    <div class="row">
      <!-- badges begin -->
      <div class="col-12">
        <span class="badge badge-primary">Badge</span>
        <span class="badge badge-primary badge-dim">Badge</span>
        <span class="badge badge-secondary">Badge</span>
        <span class="badge badge-secondary badge-dim">Badge</span>
        <span class="badge badge-accent">Badge</span>
        <span class="badge badge-accent badge-dim">Badge</span>
        <span class="badge badge-ui">Badge</span>
        <span class="badge badge-ui badge-dim">Badge</span>
        <span class="badge badge-info">Badge</span>
        <span class="badge badge-info badge-dim">Badge</span>
        <span class="badge badge-success">Badge</span>
        <span class="badge badge-success badge-dim">Badge</span>
        <span class="badge badge-warning">Badge</span>
        <span class="badge badge-warning badge-dim">Badge</span>
        <span class="badge badge-danger">Badge</span>
        <span class="badge badge-danger badge-dim">Badge</span>
        <hr class="minor">
      </div>
      <!-- badges end -->
      <div class="col-12 d-lg-flex justify-content-lg-between align-items-center">
        <div class="mb-2 mb-lg-0">
          <h1 class="page-title-text">
            <span class="icon fas fa-tachometer-alt me-1" aria-hidden="true"></span>Page Title
          </h1>	
          <p class="mb-0">Use this sentence to briefly describe the purpose of the page.</p>
        </div>
        <div>
          <a href="https://google.com" class="btn btn-primary btn-shadow">
            <span class="icon fas fa-bolt me-1" aria-hidden="true"></span>Do This
          </a>
        </div>
      </div>
    </div>
  </div>
</div>