Bootstrap docs

# Card

Flexible and extensible content container.

#### Basic example

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

    <!-- 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

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

    <!-- 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>

#### Image caps

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

    <!-- 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="--cz-aspect-ratio: calc(305 / 416 * 100%)">
        <img src="assets/img/blog/grid/v1/07.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="--cz-aspect-ratio: calc(305 / 416 * 100%)">
        <img src="assets/img/blog/grid/v1/10.jpg" class="card-img-bottom" alt="Card image">
      </div>
    </div>

#### Image hover effects

12 8

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

    <!-- 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="ci-heart fs-base me-1"></i>
              12
            </span>
            <span class="d-flex align-items-center fw-medium">
              <i class="ci-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="--cz-aspect-ratio: calc(466 / 636 * 100%)">
          <img src="assets/img/blog/grid/v2/07.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="--cz-aspect-ratio: calc(255 / 348 * 100%)">
          <img src="assets/img/docs/card/img.png" class="hover-effect-target opacity-100" alt="Image idle">
          <img src="assets/img/docs/card/img-hover.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 layout

##### Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Go somewhere

##### Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Go somewhere

    <!-- 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/grid/v2/09.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/grid/v2/11.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>

#### Header and footer

###### Featured

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

    <!-- 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>

#### Text alignment

##### Card title

With supporting text below as a natural lead-in to additional content.

Go somewhere

##### Card title

With supporting text below as a natural lead-in to additional content.

Go somewhere

##### Card title

With supporting text below as a natural lead-in to additional content.

Go somewhere

    <!-- 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>

#### Navigation: Tabs

##### Card title

With supporting text below as a natural lead-in to additional content.

Go somewhere

##### Card title

With supporting text below as a natural lead-in to additional content.

Go somewhere

    <!-- 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>

#### Navigation: Pills

##### Card title

With supporting text below as a natural lead-in to additional content.

Go somewhere

##### Card title

With supporting text below as a natural lead-in to additional content.

Go somewhere

    <!-- 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>

#### List group inside card

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

- Lorem ipsum dolor sit
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros

Go somewhere

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Lorem ipsum dolor sit Cras justo odio Dapibus ac facilisis in Vestibulum at eros
Go somewhere

    <!-- 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>

#### Card styles: Solid background

Header

##### Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Body secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Body tertiary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

    <!-- 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>

#### Card styles: Subtle background

Header

##### Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

    <!-- 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>

#### Card styles: Border and text color

Header

##### Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

    <!-- 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>

#### Layout: Card group

##### Card title

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.

##### Card title

This card has supporting text below as a natural lead-in to additional content.

    <!-- 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="--cz-aspect-ratio: calc(305 / 416 * 100%)">
          <img src="assets/img/blog/grid/v1/07.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="--cz-aspect-ratio: calc(305 / 416 * 100%)">
          <img src="assets/img/blog/grid/v1/10.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>

#### Layout: Card grid

##### Card title

Some quick example text to build on the card title.

##### Card title

Some quick example text to build on the card title.

##### Card title

Some quick example text to build on the card title.

##### Card title

Some quick example text to build on the card title.

##### Card title

Some quick example text to build on the card title.

##### Card title

Some quick example text to build on the card title.

    <!-- Grid of cards -->
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">

      <!-- Card -->
      <div class="col">
        <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="--cz-aspect-ratio: calc(466 / 636 * 100%)">
            <img src="assets/img/blog/grid/v2/01.jpg" class="card-img-top" alt="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.</p>
          </div>
        </div>
      </div>

      <!-- Card -->
      <div class="col">
        <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="--cz-aspect-ratio: calc(466 / 636 * 100%)">
            <img src="assets/img/blog/grid/v2/02.jpg" class="card-img-top" alt="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.</p>
          </div>
        </div>
      </div>

      <!-- Card -->
      <div class="col">
        <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="--cz-aspect-ratio: calc(466 / 636 * 100%)">
            <img src="assets/img/blog/grid/v2/03.jpg" class="card-img-top" alt="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.</p>
          </div>
        </div>
      </div>

      <!-- Card -->
      <div class="col">
        <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="--cz-aspect-ratio: calc(466 / 636 * 100%)">
            <img src="assets/img/blog/grid/v2/04.jpg" class="card-img-top" alt="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.</p>
          </div>
        </div>
      </div>

      <!-- Card -->
      <div class="col">
        <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="--cz-aspect-ratio: calc(466 / 636 * 100%)">
            <img src="assets/img/blog/grid/v2/05.jpg" class="card-img-top" alt="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.</p>
          </div>
        </div>
      </div>

      <!-- Card -->
      <div class="col">
        <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="--cz-aspect-ratio: calc(466 / 636 * 100%)">
            <img src="assets/img/blog/grid/v2/06.jpg" class="card-img-top" alt="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.</p>
          </div>
        </div>
      </div>
    </div>

Top