Page Headers

<div class="page-header">
  <div class="row align-items-center">
    <div class="col-auto">
      <span class="avatar avatar-md" style="background-image: url(...)"></span>
    </div>
    <div class="col">
      <h2 class="page-title">Paweł Kuna</h2>
      <div class="page-subtitle">
        <div class="row">
          <div class="col-auto">
            <!-- SVG icon code -->
            <a href="#" class="text-reset">UI Designer at Tabler</a>
          </div>
          <div class="col-auto">
            <!-- SVG icon code -->
            <a href="#" class="text-reset">194 friends</a>
          </div>
          <div class="col-auto text-success">
            <!-- SVG icon code with class="text-green" -->
            Verified
          </div>
        </div>
      </div>
    </div>
    <div class="col-auto d-none d-md-flex">
      <a href="#" class="btn btn-primary">
        <!-- SVG icon code -->
        Send message
      </a>
    </div>
  </div>
</div>
<div class="page-header page-header-border">
  <div class="row align-items-center">
    <div class="col">
      <h2 class="page-title">Improve cards with no border</h2>
      <div class="text-muted mt-1">
        <a href="#" class="text-reset">#693</a>
        opened by <a href="#" class="text-body">Jeffie Lewzey</a>
        in <a href="#" class="text-body">Calendar Page</a>
      </div>
    </div>
    <div class="col-auto">
      <div class="btn-list">
        <a href="#" class="btn btn-white">
          <!-- SVG icon code -->
          Edit
        </a>
        <a href="#" class="btn btn-white d-none d-md-inline-flex">
          <!-- SVG icon code -->
          Subscribe
        </a>
      </div>
    </div>
  </div>
</div>
<div class="page-header">
  <div class="row align-items-center mw-100">
    <div class="col">
      <div class="mb-1">
        <ol class="breadcrumb breadcrumb-alternate" aria-label="breadcrumbs">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item"><a href="#">Library</a></li>
          <li class="breadcrumb-item active" aria-current="page"><a href="#">Articles</a></li>
        </ol>
      </div>
      <h2 class="page-title">
        <span class="text-truncate">Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.</span>
      </h2>
    </div>
    <div class="col-auto">
      <div class="btn-list">
        <a href="#" class="btn btn-white d-none d-md-inline-flex">
          <!-- SVG icon code -->
          Edit
        </a>
        <a href="#" class="btn btn-primary">
          Publish
        </a>
      </div>
    </div>
  </div>
</div>
<div class="page-header">
  <div class="row align-items-center">
    <div class="col">
      <div class="page-pretitle">
        Overview
      </div>
      <h2 class="page-title">
        Dashboard
      </h2>
    </div>
    <div class="col-auto ms-auto">
      <div class="btn-list">
        <span class="d-none d-sm-inline">
          <a href="#" class="btn btn-white">
            New view
          </a>
        </span>
        <a href="#" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#modal-report">
          <!-- SVG icon code -->
          Create new report
        </a>
        <a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
          <!-- SVG icon code -->
        </a>
      </div>
    </div>
  </div>
</div>