<div class="card mb-3">
  <div class="bg-holder d-none d-lg-block bg-card" style="background-image:url(../../assets/img/icons/spot-illustrations/corner-4.png);"></div> <!--/.bg-holder-->
  <div class="card-body position-relative">
    <div class="row">
      <div class="col-lg-8">
        <h3>Page Title</h3>
        <p class="mt-2">The page header is a nice little feature to add appropriate spacing around the headings on a page. This is particularly helpful on a web page where you may have several post titles and need a way to add distinction to each of them.</p><a class="btn btn-link ps-0 btn-sm" href="../../documentation/getting-started.html" target="_blank">Get Started<span class="fas fa-chevron-right ms-1 fs--2"></span></a>
      </div>
    </div>
  </div>
</div>

<div class="card overflow-hidden" style="width: 20rem;">
  <div class="card-img-top"><img class="img-fluid" src="../../assets/img/generic/3.jpg" alt="Card image cap" /></div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body"><a class="card-link" href="#!">Card link</a><a class="card-link" href="#!">Another link</a></div>
</div>

<div class="fs--1" style="max-width: 25rem;">
  <a class="notification" href="#!">
    <div class="notification-avatar">
      <div class="avatar avatar-2xl me-3">
        <img class="rounded-circle" src="../../assets/img/team/1.jpg" alt="" />
      </div>
    </div>
    <div class="notification-body">
      <p class="mb-1"><strong>Emma Watson</strong> replied to your comment : "Nice Dashboard 😍"</p>
      <span class="notification-time"><span class="me-2" role="img" aria-label="Emoji">💬</span>Just now</span>
    </div>
  </a>
</div>

<div class="card bg-dark text-white overflow-hidden light" style="max-width: 30rem;">
  <div class="card-img-top"><img class="img-fluid" src="../../assets/img/generic/3.jpg" alt="Card image" /></div>
  <div class="card-img-overlay d-flex align-items-end">
    <div>
      <h5 class="card-title text-white">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
</div>

<div class="row light">
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card text-white bg-primary">
      <div class="card-body">
        <div class="card-title">Primary Card</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card text-white bg-secondary">
      <div class="card-body">
        <div class="card-title">Secondary Card</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card text-white bg-success">
      <div class="card-body">
        <div class="card-title">Success Card</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card text-white bg-danger">
      <div class="card-body">
        <div class="card-title">Danger Card</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card text-white bg-warning">
      <div class="card-body">
        <div class="card-title">Warning Card</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card text-white bg-info">
      <div class="card-body">
        <div class="card-title">Info Card</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card bg-light">
      <div class="card-body">
        <div class="card-title">Light Card</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card text-white bg-dark">
      <div class="card-body">
        <div class="card-title">Dark Card</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card border h-100 border-primary">
      <div class="card-body">
        <div class="card-title">Primary Border Card</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card border h-100 border-secondary">
      <div class="card-body">
        <div class="card-title">Secondary Border Card</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card border h-100 border-success">
      <div class="card-body">
        <div class="card-title">Success Border Card</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card border h-100 border-danger">
      <div class="card-body">
        <div class="card-title">Danger Border Card</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card border h-100 border-warning">
      <div class="card-body">
        <div class="card-title">Warning Border Card</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card border h-100 border-info">
      <div class="card-body">
        <div class="card-title">Info Border Card</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card border h-100 border-light">
      <div class="card-body">
        <div class="card-title">Light Border Card</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card border h-100 border-dark">
      <div class="card-body">
        <div class="card-title">Dark Border Card</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
</div>