Card

<!-- Basic card example -->
<div class="card">
  <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>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

<!-- Alternative card style: no border + gray background -->
<div class="card bg-body-tertiary border-0">
  <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>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

<!-- Alternative card style: no border + shadow -->
<div class="card border-0 shadow">
  <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>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

<!-- Card with image on top -->
<div class="card">
  <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
  <div class="ratio" style="--fn-aspect-ratio: calc(305 / 416 * 100%)">
    <img src="assets/img/blog/v2/vlog/03.jpg" class="card-img-top" alt="Card image">
  </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>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

<!-- Card with image on bottom -->
<div class="card">
  <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>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
  <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
  <div class="ratio" style="--fn-aspect-ratio: calc(305 / 416 * 100%)">
    <img src="assets/img/blog/v2/vlog/01.jpg" class="card-img-bottom" alt="Card image">
  </div>
</div>

<!-- Image hover effect: Overlay content + image zoom -->
<div class="card">
  <div class="hover-effect-scale hover-effect-opacity card-img-top position-relative overflow-hidden">
    <span class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
    <div class="hover-effect-target d-flex position-absolute top-0 start-0 w-100 h-100 align-items-center justify-content-center z-2 opacity-0">
      <div class="d-flex align-items-center gap-3 fs-sm bg-dark bg-opacity-50 text-white rounded-pill py-2 px-3">
        <span class="d-flex align-items-center fw-medium">
          <i class="fi-heart fs-base me-1"></i>
          12
        </span>
        <span class="d-flex align-items-center fw-medium">
          <i class="fi-message-square fs-base me-1"></i>
          8
        </span>
      </div>
    </div>
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio hover-effect-target" style="--fn-aspect-ratio: calc(300 / 416 * 100%)">
      <img src="assets/img/blog/v1/01.jpg" alt="Card image">
    </div>
  </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>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

<!-- Image hover effect: Image swap -->
<div class="card">
  <div class="position-relative hover-effect-opacity card-img-top overflow-hidden">
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio" style="--fn-aspect-ratio: calc(300 / 416 * 100%)">
      <img src="assets/img/blog/v1/03.jpg" class="hover-effect-target opacity-100" alt="Image idle">
      <img src="assets/img/blog/v1/02.jpg" class="hover-effect-target position-absolute top-0 start-0 opacity-0" alt="Image hover">
    </div>
  </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>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

<!-- Horizontal card: Image on the left -->
<div class="card overflow-hidden">
  <div class="row g-0">
    <div class="col-sm-4 position-relative" style="min-height: 220px">
      <img src="assets/img/blog/v3/12.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Card image">
    </div>
    <div class="col-sm-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <a class="btn btn-primary" href="#">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

<!-- Horizontal card: Image on the right -->
<div class="card overflow-hidden">
  <div class="row g-0">
    <div class="col-sm-4 position-relative order-sm-2" style="min-height: 220px">
      <img src="assets/img/blog/v1/08.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Card image">
    </div>
    <div class="col-sm-8 order-sm-1">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <a class="btn btn-primary" href="#">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

<!-- Card with header and footer -->
<div class="card text-center">
  <h6 class="card-header">Featured</h6>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
  <div class="card-footer fs-sm text-body-secondary">3 days ago</div>
</div>

<!-- Left aligned (default) -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

<!-- Center aligned -->
<div class="card text-center">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

<!-- Right aligned -->
<div class="card text-end">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

<!-- Nav tabs inside card header -->
<div class="card text-center">
  <div class="card-header border-0">
    <ul class="nav nav-tabs card-header-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" href="#" data-bs-toggle="tab" role="tab">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" data-bs-toggle="tab" role="tab">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" data-bs-toggle="tab" role="tab">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

<!-- Nav underline inside card header -->
<div class="card text-center">
  <div class="card-header bg-transparent py-0">
    <ul class="nav nav-underline nav-justified" role="tablist">
      <li class="nav-item">
        <a class="nav-link py-3 active" href="#" data-bs-toggle="tab" role="tab">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link py-3" href="#" data-bs-toggle="tab" role="tab">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link py-3 disabled" href="#" data-bs-toggle="tab" role="tab">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

<!-- Default pills inside card header -->
<div class="card text-center">
  <div class="card-header bg-transparent">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

<!-- Rounded pills inside card header -->
<div class="card text-center">
  <div class="card-header bg-transparent">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link rounded active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link rounded" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link rounded disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

<!-- Simple list group inside card -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text text-body-secondary">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 fs-base">
    <li class="list-group-item">Lorem ipsum dolor sit</li>
    <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="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

<!-- Actionable list group inside card -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text text-body-secondary">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="list-group list-group-flush fs-base">
    <a class="list-group-item list-group-item-action" href="#">Lorem ipsum dolor sit</a>
    <a class="list-group-item list-group-item-action" href="#">Cras justo odio</a>
    <a class="list-group-item list-group-item-action" href="#">Dapibus ac facilisis in</a>
    <a class="list-group-item list-group-item-action" href="#">Vestibulum at eros</a>
  </div>
  <div class="card-body">
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

<!-- Primary card -->
<div class="card text-bg-primary">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Primary 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>

<!-- Secondary card -->
<div class="card text-bg-secondary">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Secondary 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>

<!-- Success card -->
<div class="card text-bg-success">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Success 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>

<!-- Danger card -->
<div class="card text-bg-danger">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Danger 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>

<!-- Warning card -->
<div class="card text-bg-warning">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Warning 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>

<!-- Info card -->
<div class="card text-bg-info">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Info 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>

<!-- Body secondary card -->
<div class="card bg-body-secondary">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Body secondary 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>

<!-- Body tertiary card -->
<div class="card bg-body-tertiary">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Body tertiary 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>

<!-- Dark card -->
<div class="card text-bg-dark">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Dark 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>

<!-- Primary card -->
<div class="card bg-primary-subtle border-primary-subtle">
  <div class="card-header border-primary-subtle">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary 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>

<!-- Secondary card -->
<div class="card bg-secondary-subtle border-secondary-subtle">
  <div class="card-header border-secondary-subtle">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary 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>

<!-- Success card -->
<div class="card bg-success-subtle border-success-subtle">
  <div class="card-header border-success-subtle">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success 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>

<!-- Danger card -->
<div class="card bg-danger-subtle border-danger-subtle">
  <div class="card-header border-danger-subtle">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger 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>

<!-- Warning card -->
<div class="card bg-warning-subtle border-warning-subtle">
  <div class="card-header border-warning-subtle">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning 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>

<!-- Info card -->
<div class="card bg-info-subtle border-info-subtle">
  <div class="card-header border-info-subtle">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info 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>

<!-- Dark card -->
<div class="card bg-dark-subtle border-dark-subtle">
  <div class="card-headerborder-dark-subtle">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark 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>

<!-- Primary card -->
<div class="card text-primary border-primary">
  <div class="card-header bg-primary-subtle border-primary">Header</div>
  <div class="card-body">
    <h5 class="card-title text-primary">Primary 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>

<!-- Secondary card -->
<div class="card border-secondary">
  <div class="card-header bg-secondary-subtle border-secondary">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary 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>

<!-- Success card -->
<div class="card text-success border-success">
  <div class="card-header bg-success-subtle border-success">Header</div>
  <div class="card-body">
    <h5 class="card-title text-success">Success 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>

<!-- Danger card -->
<div class="card text-danger border-danger">
  <div class="card-header bg-danger-subtle border-danger">Header</div>
  <div class="card-body">
    <h5 class="card-title text-danger">Danger 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>

<!-- Warning card -->
<div class="card text-warning border-warning">
  <div class="card-header bg-warning-subtle border-warning">Header</div>
  <div class="card-body">
    <h5 class="card-title text-warning">Warning 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>


<!-- Info card -->
<div class="card text-info border-info">
  <div class="card-header bg-info-subtle border-info">Header</div>
  <div class="card-body">
    <h5 class="card-title text-info">Info 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>


<!-- Dark card -->
<div class="card text-body-emphasis border-dark">
  <div class="card-header bg-dark-subtle border-dark">Header</div>
  <div class="card-body">
    <h5 class="card-title text-body-emphasis">Dark 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>

<!-- Card group -->
<div class="card-group">

  <!-- Card -->
  <div class="card">
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio" style="--fn-aspect-ratio: calc(300 / 416 * 100%)">
      <img src="assets/img/blog/v1/02.jpg" class="card-img-top" alt="Card image">
    </div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer text-body-tertiary bg-transparent border-0 fs-sm pt-0 pb-4">
      Last updated 3 mins ago
    </div>
  </div>

  <!-- Card -->
  <div class="card">
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio" style="--fn-aspect-ratio: calc(300 / 416 * 100%)">
      <img src="assets/img/blog/v1/03.jpg" class="card-img-top" alt="Card image">
    </div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer text-body-tertiary bg-transparent border-0 fs-sm pt-0 pb-4">
      Last updated 5 mins ago
    </div>
  </div>
</div>