Cards

<!-- No image -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm text-muted">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-sm btn-primary">Go somewhere</a>
  </div>
</div>

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

<!-- 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 fs-sm text-muted">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-sm btn-primary">Go somewhere</a>
  </div>
</div>

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

<!-- Image on top -->
<div class="card">
  <img src="pat-to-image" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm text-muted">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-sm btn-primary">Go somewhere</a>
  </div>
</div>

// Image on top
.card
  img(src="path-to-image", alt="Card image").card-img-top
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm.text-muted
      | Some quick example text to build on the card title and make up the bulk of the card's content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

<!-- Image on bottom -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm text-muted">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-sm btn-primary">Go somewhere</a>
  </div>
  <img src="pat-to-image" class="card-img-bottom" alt="Card image">
</div>

// Image on bottom
.card
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm.text-muted
      | Some quick example text to build on the card title and make up the bulk of the card's content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere
  img(src="path-to-image", alt="Card image").card-img-bottom

<!-- Horizontal card layout -->
<div class="card" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-sm-4">
      <img src="pat-to-image" class="rounded-start" alt="Card image">
    </div>
    <div class="col-sm-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm text-muted">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-sm btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

// Horizontal card layout
.card(style="max-width: 540px;")
  .row.g-0
    .col-sm-4
      img(src="path-to-image", alt="Card image").rounded-start
    .col-sm-8
      .card-body
        h5.card-title
          | Card title
        p.card-text.fs-sm.text-muted
          | 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.btn.btn-sm.btn-primary(href="#") Go somewhere

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

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

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

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

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

<!-- Tabs inside card header -->
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <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">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text fs-sm text-muted">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

// Tabs inside card header
.card.text-center
  .card-header
    ul.nav.nav-tabs.card-header-tabs
      li.nav-item
        a.nav-link.active(href="#") Active
      li.nav-item
        a.nav-link(href="#") Link
      li.nav-item
        a.nav-link.disabled(href="#") Disabled
  .card-body
    h5.card-title Special title treatment
    p.card-text With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href="#") 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">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text fs-sm text-muted">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-sm 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.nav-link.active(href="#") Active
      li.nav-item
        a.nav-link(href="#") Link
      li.nav-item
        a.nav-link.disabled(href="#") Disabled
  .card-body
    h5.card-title Special title treatment
    p.card-text With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href="#") 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 fs-sm text-muted">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 href="#" class="btn btn-sm btn-primary">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 fs-sm text-muted">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">
    <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>
  <div class="card-body">
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

// Simple list group inside card
.card
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm.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
    li.list-group-item Cras justo odio
    li.list-group-item Dapibus ac facilisis in
    li.list-group-item Dapibus ac facilisis in
  .card-body
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

// Actionable list group inside card
.card
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm.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
    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
  .card-body
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

<!-- Primary card -->
<div class="card text-white 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 fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Accent card -->
<div class="card bg-accent">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text fs-sm">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-primary">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text fs-sm">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-white 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 fs-sm">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-white 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 fs-sm">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-white 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 fs-sm">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-white 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 fs-sm">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-white 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 fs-sm">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.text-white.bg-primary
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Primary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Accent card
.card.text-white.bg-accent
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Secondary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Secondary card
.card.bg-secondary
  .card-header Header
  .card-body
    h5.card-title
      | Secondary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Success card
.card.text-white.bg-success
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Success card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Danger card
.card.text-white.bg-danger
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Danger card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Warning card
.card.text-white.bg-warning
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Warning card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Info card
.card.text-white.bg-info
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Info card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Dark card
.card.text-white.bg-dark
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Dark card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

<!-- Faded primary card -->
<div class="card text-primary bg-faded-primary border-primary">
  <div class="card-header border-primary">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Primary card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Faded accent card -->
<div class="card text-accent bg-faded-accent border-accent">
  <div class="card-header border-accent">Header</div>
  <div class="card-body">
    <h5 class="card-title text-accent">Secondary card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Faded success card -->
<div class="card text-success bg-faded-success border-success">
  <div class="card-header border-success">Header</div>
  <div class="card-body">
    <h5 class="card-title text-success">Success card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Faded danger card -->
<div class="card text-danger bg-faded-danger border-danger">
  <div class="card-header border-danger">Header</div>
  <div class="card-body">
    <h5 class="card-title text-danger">Danger card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Faded warning card -->
<div class="card text-warning bg-faded-warning border-warning">
  <div class="card-header border-warning">Header</div>
  <div class="card-body">
    <h5 class="card-title text-warning">Warning card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Faded info card -->
<div class="card text-info bg-faded-info border-info">
  <div class="card-header border-info">Header</div>
  <div class="card-body">
    <h5 class="card-title text-info">Info card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Faded dark card -->
<div class="card text-dark bg-faded-dark border-dark">
  <div class="card-header border-dark">Header</div>
  <div class="card-body">
    <h5 class="card-title text-dark">Dark card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

// Faded primary card
.card.text-primary.bg-faded-primary.border-primary
  .card-header.border-primary Header
  .card-body
    h5.card-title.text-primary
      | Primary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded accent card
.card.text-accent.bg-faded-accent.border-accent
  .card-header.border-accent Header
  .card-body
    h5.card-title.text-accent
      | Secondary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded success card
.card.text-white.bg-faded-success.border-success
  .card-header.border-success Header
  .card-body
    h5.card-title.text-white
      | Success card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded danger card
.card.text-white.bg-faded-danger.border-danger
  .card-header.border-danger Header
  .card-body
    h5.card-title.text-white
      | Danger card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded warning card
.card.text-white.bg-faded-warning.border-warning
  .card-header.border-warning Header
  .card-body
    h5.card-title.text-white
      | Warning card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded info card
.card.text-white.bg-faded-info.border-info
  .card-header.border-info Header
  .card-body
    h5.card-title.text-white
      | Info card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Faded dark card
.card.text-white.bg-faded-dark.border-dark
  .card-header.border-dark Header
  .card-body
    h5.card-title.text-white
      | Dark card title
    p.card-text.fs-sm
      | 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 border-primary">Header</div>
  <div class="card-body">
    <h5 class="card-title text-primary">Primary card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

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

// Accent card
.card.text-accent.border-accent
  .card-header.border-accent
    | Header
  .card-body
    h5.card-title.text-accent
      | Accent card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Secondary card
.card
  .card-header
    | Header
  .card-body
    h5.card-title
      | Secondary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

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

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

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

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

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

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

  <!-- Card -->
  <div class="card">
    <img src="pat-to-image" class="card-img-top" alt="Card image">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text fs-sm text-muted">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-sm btn-primary">Go somewhere</a>
    </div>
  </div>

  <!-- Card -->
  <div class="card">
    <img src="pat-to-image" class="card-img-top" alt="Card image">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text fs-sm text-muted">This card has supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
  </div>

  <!-- Card -->
  <div class="card">
    <img src="pat-to-image" class="card-img-top" alt="Card image">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text fs-sm text-muted">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-sm btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

// Card group
.card-group

  // Card
  .card
    img(src="path-to-image", alt="Card image").card-img-top
    .card-body
      h5.card-title
        | Card title
      p.card-text.fs-sm.text-muted
        | 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.btn.btn-sm.btn-primary(href="#") Go somewhere
  
  // Card
  .card
    img(src="path-to-image", alt="Card image").card-img-top
    .card-body
      h5.card-title
        | Card title
      p.card-text.fs-sm.text-muted
        | This card has supporting text below as a natural lead-in to additional content.
      a.btn.btn-sm.btn-primary(href="#") Go somewhere
  
  // Card
  .card
    img(src="path-to-image", alt="Card image").card-img-top
    .card-body
      h5.card-title
        | Card title
      p.card-text.fs-sm.text-muted
        | 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.btn.btn-sm.btn-primary(href="#") Go somewhere

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

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card">
      <img class="card-img-top" src="path-to-image" 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">
      <img class="card-img-top" src="path-to-image" 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>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card">
      <img class="card-img" src="path-to-image" 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 border-accent">
      <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
.masonry-grid(data-columns="3")

  // Item
  .masonry-grid-item
    .card
      img(src="path-to-image", 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
      img(src="path-to-image", 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.
  
  // Item
  .masonry-grid-item
    .card
      img(src="path-to-image", 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.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.border-accent
      .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