Cards: Basic

<!-- No image -->
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <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 href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

// No image
.card
  .card-body
    h4.card-title Card title
    p.card-text Some quick example text to build on the card title and make up the bulk of the card's content.
    a(href="#").btn.btn-primary
      | Go somewhere

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

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

// Alternative card style: no border + gray background
.card.border-0.bg-secondary
  .card-body
    h4.card-title Card title
    p.card-text Some quick example text to build on the card title and make up the bulk of the card's content.
    a(href="#").btn.btn-primary
      | Go somewhere

// Alternative card style: no border
.card.border-0
  .card-body
    h4.card-title Card title
    p.card-text Some quick example text to build on the card title and make up the bulk of the card's content.
    a(href="#").btn.btn-primary
      | Go somewhere

<!-- Image on top -->
<div class="card">
  <img src="assets/img/blog/grid/01.jpg" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <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 href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

// Image on top
.card
  img(src="assets/img/blog/grid/01.jpg", alt="Card image").card-img-top
  .card-body
    h4.card-title Card title
    p.card-text Some quick example text to build on the card title and make up the bulk of the card's content.
    a(href="#").btn.btn-primary
      | Go somewhere

<!-- Image on bottom -->
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <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 href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <img src="assets/img/blog/grid/03.jpg" class="card-img-bottom" alt="Card image">
</div>

// Image on bottom
.card
  .card-body
    h4.card-title Card title
    p.card-text Some quick example text to build on the card title and make up the bulk of the card's content.
    a(href="#").btn.btn-primary
      | Go somewhere
  img(src="assets/img/blog/grid/03.jpg", alt="Card image").card-img-bottom

<!-- Horizontal card: Image on the left -->
<div class="card overflow-hidden">
  <div class="row g-0">
    <div class="col-sm-4 bg-repeat-0 bg-size-cover" style="background-image: url(assets/img/blog/list/03.jpg); min-height: 14rem;"></div>
    <div class="col-sm-8">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <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 href="#" class="btn btn-primary">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 bg-repeat-0 bg-size-cover order-sm-2" style="background-image: url(assets/img/blog/list/05.jpg); min-height: 14rem;"></div>
    <div class="col-sm-8 order-sm-1">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <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 href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

// Horizontal card: Image on the left
.card.overflow-hidden
  .row.g-0
    .col-sm-4.bg-repeat-0.bg-size-cover(style="background-image: url(assets/img/blog/list/03.jpg); min-height: 14rem;")
    .col-sm-8
      .card-body
        h4.card-title Card title
        p.card-text Some quick example text to build on the card title and make up the bulk of the card's content within card's body.
        a(href="#").btn.btn-primary Go somewhere

// Horizontal card: Image on the right
.card.overflow-hidden
  .row.g-0
    .col-sm-4.bg-repeat-0.bg-size-cover.order-sm-2(style="background-image: url(assets/img/blog/list/05.jpg); min-height: 14rem;")
    .col-sm-8.order-sm-1
      .card-body
        h4.card-title Card title
        p.card-text Some quick example text to build on the card title and make up the bulk of the card's content within card's body.
        a(href="#").btn.btn-primary Go somewhere

<!-- Header and footer -->
<div class="card text-center">
  <div class="card-header">Featured</div>
  <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 href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer fs-sm text-muted">3 days ago</div>
</div>

// Header and footer
.card.text-center
  .card-header Featured
  .card-body
    h4.card-title Special title treatment
    p.card-text With supporting text below as a natural lead-in to additional content.
    a(href="#").btn.btn-primary
      | Go somewhere
  .card-footer.fs-sm.text-muted 3 days ago

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

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

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

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

// Center aligned
.card.text-center
  .card-body
    h4.card-title Card title
    p.card-text With supporting text below as a natural lead-in to additional content.
    a(href="#").btn.btn-primary
      | Go somewhere

// Right aligned
.card.text-end
  .card-body
    h4.card-title Card title
    p.card-text With supporting text below as a natural lead-in to additional content.
    a(href="#").btn.btn-primary
      | Go somewhere

<!-- Tabs inside card header -->
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" role="tablist">
      <li class="nav-item">
        <a href="#" class="nav-link active" data-bs-toggle="tab" role="tab">Active</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" data-bs-toggle="tab" role="tab">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled" data-bs-toggle="tab" role="tab">Disabled</a>
      </li>
    </ul>
  </div>
  <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 href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

// Tabs inside card header
.card.text-center
  .card-header
    ul(role="tablist").nav.nav-tabs.card-header-tabs
      li.nav-item
        a(href="#", data-bs-toggle="tab", role="tab").nav-link.active
          | Active
      li.nav-item
        a(href="#", data-bs-toggle="tab", role="tab").nav-link
          | Link
      li.nav-item
        a(href="#", data-bs-toggle="tab", role="tab").nav-link.disabled
          | Disabled
  .card-body
    h4.card-title Special title treatment
    p.card-text With supporting text below as a natural lead-in to additional content.
    a(href="#").btn.btn-primary
      | Go somewhere

<!-- Pills inside card header -->
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a href="#" class="nav-link active">Active</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <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 href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

// Pills inside card header
.card.text-center
  .card-header
    ul.nav.nav-pills.card-header-pills
      li.nav-item
        a(href="#").nav-link.active
          | Active
      li.nav-item
        a(href="#").nav-link
          | Link
      li.nav-item
        a(href="#").nav-link.disabled
          | Disabled
  .card-body
    h4.card-title Special title treatment
    p.card-text With supporting text below as a natural lead-in to additional content.
    a(href="#").btn.btn-primary
      | Go somewhere

<!-- Simple list group inside card -->
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text text-muted">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <ul class="list-group list-group-flush mb-4">
      <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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

// Simple list group inside card
.card
  .card-body
    h4.card-title Card title
    p.card-text.text-muted Some quick example text to build on the card title and make up the bulk of the card's content.
    ul.list-group.list-group-flush.mb-4
      li.list-group-item Cras justo odio
      li.list-group-item Dapibus ac facilisis in
      li.list-group-item Dapibus ac facilisis in
    a(href="#").btn.btn-primary
      | Go somewhere

// Actionable list group inside card
.card
  .card-body
    h4.card-title Card title
    p.card-text.text-muted Some quick example text to build on the card title and make up the bulk of the card's content.
    .list-group.list-group-flush.mb-4
      a(href="#").list-group-item.list-group-item-action
        | Cras justo odio
      a(href="#").list-group-item.list-group-item-action
        | Dapibus ac facilisis in
      a(href="#").list-group-item.list-group-item-action
        | Dapibus ac facilisis in
    a(href="#").btn.btn-primary
      | Go somewhere

<!-- Primary card -->
<div class="card border-0 bg-primary">
  <div class="card-header text-white border-light">Header</div>
  <div class="card-body">
    <h4 class="card-title text-white">Primary card title</h4>
    <p class="card-text text-white opacity-70">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-0 bg-secondary">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h4 class="card-title">Secondary card title</h4>
    <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 border-0 bg-success">
  <div class="card-header text-white border-light">Header</div>
  <div class="card-body">
    <h4 class="card-title text-white">Success card title</h4>
    <p class="card-text text-white opacity-70">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 border-0 bg-danger">
  <div class="card-header text-white border-light">Header</div>
  <div class="card-body">
    <h4 class="card-title text-white">Danger card title</h4>
    <p class="card-text text-white opacity-70">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 border-0 bg-warning">
  <div class="card-header text-white border-light">Header</div>
  <div class="card-body">
    <h4 class="card-title text-white">Warning card title</h4>
    <p class="card-text text-white opacity-70">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 border-0 bg-info">
  <div class="card-header text-white border-light">Header</div>
  <div class="card-body">
    <h4 class="card-title text-white">Info card title</h4>
    <p class="card-text text-white opacity-70">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">
  <div class="card-header text-white border-light">Header</div>
  <div class="card-body">
    <h4 class="card-title text-white">Dark card title</h4>
    <p class="card-text text-white opacity-70">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
.card.border-0.bg-primary
  .card-header.text-white.border-light Header
  .card-body
    h4.card-title.text-white Primary card title
    p.card-text.text-white.opacity-70 Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

// Secondary card
.card.border-0.bg-secondary
  .card-header Header
  .card-body
    h4.card-title Secondary card title
    p.card-text Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

// Success card
.card.border-0.bg-success
  .card-header.text-white.border-light Header
  .card-body
    h4.card-title.text-white Success card title
    p.card-text.text-white.opacity-70 Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

// Danger card
.card.border-0.bg-danger
  .card-header.text-white.border-light Header
  .card-body
    h4.card-title.text-white Danger card title
    p.card-text.text-white.opacity-70 Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

// Warning card
.card.border-0.bg-warning
  .card-header.text-white.border-light Header
  .card-body
    h4.card-title.text-white Warning card title
    p.card-text.text-white.opacity-70 Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

// Info card
.card.border-0.bg-info
  .card-header.text-white.border-light Header
  .card-body
    h4.card-title.text-white Info card title
    p.card-text.text-white.opacity-70 Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

// Dark card
.card.bg-dark
  .card-header.text-white.border-light Header
  .card-body
    h4.card-title.text-white Dark card title
    p.card-text.text-white.opacity-70 Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

<!-- Primary card -->
<div class="card border-0 bg-faded-primary">
  <div class="card-header text-primary border-primary">Header</div>
  <div class="card-body">
    <h4 class="card-title text-primary">Primary card title</h4>
    <p class="card-text text-primary">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 border-0 bg-faded-success">
  <div class="card-header text-success border-success">Header</div>
  <div class="card-body">
    <h4 class="card-title text-success">Success card title</h4>
    <p class="card-text text-success">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 border-0 bg-faded-danger">
  <div class="card-header text-danger border-danger">Header</div>
  <div class="card-body">
    <h4 class="card-title text-danger">Danger card title</h4>
    <p class="card-text text-danger">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 border-0 bg-faded-warning">
  <div class="card-header text-warning border-warning">Header</div>
  <div class="card-body">
    <h4 class="card-title text-warning">Warning card title</h4>
    <p class="card-text text-warning">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 border-0 bg-faded-info">
  <div class="card-header text-info border-info">Header</div>
  <div class="card-body">
    <h4 class="card-title text-info">Info card title</h4>
    <p class="card-text text-info">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-faded-dark">
  <div class="card-header text-dark border-dark">Header</div>
  <div class="card-body">
    <h4 class="card-title text-dark">Dark card title</h4>
    <p class="card-text text-dark">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
.card.border-0.bg-faded-primary
  .card-header.text-primary.border-primary Header
  .card-body
    h4.card-title.text-primary Primary card title
    p.card-text.text-primary Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

// Success card
.card.border-0.bg-faded-success
  .card-header.text-success.border-success Header
  .card-body
    h4.card-title.text-success Success card title
    p.card-text.text-success Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

// Danger card
.card.border-0.bg-faded-danger
  .card-header.text-danger.border-danger Header
  .card-body
    h4.card-title.text-danger Danger card title
    p.card-text.text-danger Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

// Warning card
.card.border-0.bg-faded-warning
  .card-header.text-warning.border-warning Header
  .card-body
    h4.card-title.text-warning Warning card title
    p.card-text.text-warning Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

// Info card
.card.border-0.bg-faded-info
  .card-header.text-info.border-info Header
  .card-body
    h4.card-title.text-info Info card title
    p.card-text.text-info Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

// Dark card
.cardx.bg-faded-dark
  .card-header.text-info.border-dark Header
  .card-body
    h4.card-title Dark card title
    p.card-text.text-info Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

<!-- Primary card -->
<div class="card border-primary">
  <div class="card-header text-primary border-primary">Header</div>
  <div class="card-body">
    <h4 class="card-title text-primary">Primary card title</h4>
    <p class="card-text text-primary">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 border-success">
  <div class="card-header text-success border-success">Header</div>
  <div class="card-body">
    <h4 class="card-title text-success">Success card title</h4>
    <p class="card-text text-success">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 border-danger">
  <div class="card-header text-danger border-danger">Header</div>
  <div class="card-body">
    <h4 class="card-title text-danger">Danger card title</h4>
    <p class="card-text text-danger">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 border-warning">
  <div class="card-header text-warning border-warning">Header</div>
  <div class="card-body">
    <h4 class="card-title text-warning">Warning card title</h4>
    <p class="card-text text-warning">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 border-info">
  <div class="card-header text-info border-info">Header</div>
  <div class="card-body">
    <h4 class="card-title text-info">Info card title</h4>
    <p class="card-text text-info">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 border-dark">
  <div class="card-header text-dark border-dark">Header</div>
  <div class="card-body">
    <h4 class="card-title text-dark">Dark card title</h4>
    <p class="card-text text-dark">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
.card.border-primary
  .card-header.text-primary.border-primary Header
  .card-body
    h4.card-title.text-primary Primary card title
    p.card-text.text-primary Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

// Success card
.card.border-success
  .card-header.text-success.border-success Header
  .card-body
    h4.card-title.text-success Success card title
    p.card-text.text-success Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

// Danger card
.card.border-danger
  .card-header.text-danger.border-danger Header
  .card-body
    h4.card-title.text-danger Danger card title
    p.card-text.text-danger Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

// Warning card
.card.border-warning
  .card-header.text-warning.border-warning Header
  .card-body
    h4.card-title.text-warning Warning card title
    p.card-text.text-warning Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

// Info card
.card.border-info
  .card-header.text-info.border-info Header
  .card-body
    h4.card-title.text-info Info card title
    p.card-text.text-info Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

// Dark card
.card.border-dark
  .card-header.text-dark.border-dark Header
  .card-body
    h4.card-title Dark card title
    p.card-text.text-dark Some quick example text to build on the card title and make up the bulk of the card's content within card's body.

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

  <!-- Card -->
  <div class="card">
    <img src="assets/img/blog/grid/01.jpg" class="card-img-top" alt="Card image">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <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 href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>

  <!-- Card -->
  <div class="card">
    <img src="assets/img/blog/grid/03.jpg" class="card-img-top" alt="Card image">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <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>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

// Card group
.card-group

  // Card
  .card
    img(src="assets/img/blog/grid/01.jpg", alt="Card image").card-img-top
    .card-body
      h4.card-title Card title
      p.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.
      a(href="#").btn.btn-primary
        | Go somewhere
  
  // Card
  .card
    img(src="assets/img/blog/grid/03.jpg", alt="Card image").card-img-top
    .card-body
      h4.card-title Card title
      p.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.
      a(href="#").btn.btn-primary
        | Go somewhere

<!-- Masonry grid: 3 columns -->
<div class="masonry-grid" data-columns="3">

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card">
      <img src="assets/img/blog/grid/01.jpg" class="card-img-top" alt="Card image">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">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>
        <span class="text-muted fs-xs">Last updated 3 mins ago</span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card border-danger">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <span class="text-muted fs-xs">Last updated 3 mins ago</span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card">
      <img src="assets/img/blog/grid/02.jpg" class="card-img-top" alt="Card image">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">This card has supporting text below as a natural lead-in to additional content.</p>
        <span class="text-muted fs-xs">Last updated 3 mins ago</span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card">
      <img src="assets/img/blog/grid/03.jpg" class="card-img" alt="Card image">
    </div>
  </div>

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <span class="text-muted fs-xs">Last updated 3 mins ago</span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card border border-primary text-center">
      <div class="card-body">
        <p class="card-text fs-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <span class="text-muted fs-xs">Last updated 3 mins ago</span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card border-0 bg-secondary">
      <div class="card-body">
        <p class="card-text fs-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <span class="text-muted fs-xs">Last updated 3 mins ago</span>
      </div>
    </div>
  </div>
</div>

// Masonry grid: 3 columns
.masonry-grid(data-columns='3')

  // Item
  .masonry-grid-item
    .card
      img(src="assets/img/blog/grid/01.jpg", alt="Card image").card-img-top
      .card-body
        h5.card-title Card title
        p.card-text.fs-sm This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
        span.text-muted.fs-xs Last updated 3 mins ago

  // Item
  .masonry-grid-item
    .card.border-danger
      .card-body
        h5.card-title Card title
        p.card-text.fs-sm Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        span.text-muted.fs-xs Last updated 3 mins ago

  // Item
  .masonry-grid-item
    .card
      img(src="assets/img/blog/grid/02.jpg", alt="Card image").card-img-top
      .card-body
        h5.card-title Card title
        p.card-text.fs-sm This card has supporting text below as a natural lead-in to additional content.
        span.text-muted.fs-xs Last updated 3 mins ago

  // Item
  .masonry-grid-item
    .card
      img(src="assets/img/blog/grid/03.jpg", alt="Card image").card-img

  // Item
  .masonry-grid-item
    .card
      .card-body
        h5.card-title Card title
        p.card-text.fs-sm Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        span.text-muted.fs-xs Last updated 3 mins ago

  // Item
  .masonry-grid-item
    .card.border-primary.text-center
      .card-body
        p.card-text.fs-sm Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        span.text-muted.fs-xs Last updated 3 mins ago

  // Item
  .masonry-grid-item
    .card.border-0.bg-secondary
      .card-body
        p.card-text.fs-sm Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        span.text-muted.fs-xs Last updated 3 mins ago