Cards

<!-- No image -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text font-size-sm">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.font-size-sm
      | 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 box-shadow">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text font-size-sm">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.box-shadow
  .card-body
    h5.card-title
      | Card title
    p.card-text.font-size-sm
      | 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

<!-- Hover effect on default card -->
<div class="card card-hover">
  <div class="card-body">
    <h5 class="card-title">Hover over me!</h5>
    <p class="card-text font-size-sm">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>

<!-- Hover effect on alt style card -->
<div class="card border-0 box-shadow card-hover">
  <div class="card-body">
    <h5 class="card-title">Hover over me!</h5>
    <p class="card-text font-size-sm">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>

// Hover effect on default card
.card.card-hover
  .card-body
    h5.card-title
      | Hover over me!
    p.card-text.font-size-sm
      | 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

// Hover effect on alt style card
.card.border-0.box-shadow.card-hover
  .card-body
    h5.card-title
      | Hover over me!
    p.card-text.font-size-sm
      | 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 font-size-sm">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.font-size-sm
      | 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 font-size-sm">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.font-size-sm
      | 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 card-horizontal">
  <div class="card-img-top" style="background-image: url(pat-to-image);"></div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text font-size-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>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

// Horizontal card layout
.card.card-horizontal
  .card-img-top(style="background-image: url(path-to-image);")
  .card-body
    h5.card-title Card title
    p.card-text.font-size-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.
    a(href="#").btn.btn-sm.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-sm btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer font-size-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.btn.btn-sm.btn-primary(href="#") Go somewhere
  .card-footer.font-size-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 font-size-sm">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 font-size-sm">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-right">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text font-size-sm">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.font-size-sm
      | 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.font-size-sm
      | 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-right
  .card-body
    h5.card-title
      | Card title
    p.card-text.font-size-sm
      | 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" data-toggle="tab" role="tab">Active</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" data-toggle="tab" role="tab">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled" data-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-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="#", data-toggle="tab", role="tab") Active
      li.nav-item
        a.nav-link(href="#", data-toggle="tab", role="tab") Link
      li.nav-item
        a.nav-link.disabled(href="#", data-toggle="tab", role="tab") 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.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">
    <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-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
    h4.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">
    <h4 class="card-title">Card title</h4>
    <p class="card-text font-size-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">
    <h4 class="card-title">Card title</h4>
    <p class="card-text font-size-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
    h4.card-title
      | Card title
    p.card-text.font-size-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
    h4.card-title
      | Card title
    p.card-text.font-size-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 font-size-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 font-size-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 font-size-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 font-size-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 font-size-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 font-size-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 font-size-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

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

// Gradient card
.card.text-white.bg-gradient
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Gradient card title
    p.card-text.font-size-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 font-size-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 font-size-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 font-size-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 font-size-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 font-size-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 font-size-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 font-size-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.font-size-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.font-size-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.font-size-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.font-size-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.font-size-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.font-size-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.font-size-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 font-size-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>
      <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 font-size-sm">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 font-size-sm">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.font-size-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.
      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.font-size-sm
        | 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.font-size-sm
        | 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

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

  <!-- 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 font-size-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>
    </div>
    <div class="card-footer font-size-xs text-muted">Last updated 3 mins ago</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 font-size-sm">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer font-size-xs text-muted">Last updated 3 mins ago</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 font-size-sm">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 font-size-xs text-muted">Last updated 3 mins ago</div>
  </div>
</div>

// Card deck
.card-deck

  // Card
  .card
    img(src="path-to-image", alt="Card image").card-img-top
    .card-body
      h5.card-title
        | Card title
      p.card-text.font-size-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.
    .card-footer.font-size-xs.text-muted Last updated 3 mins ago
  
  // Card
  .card
    img(src="path-to-image", alt="Card image").card-img-top
    .card-body
      h5.card-title
        | Card title
      p.card-text.font-size-sm
        | This card has supporting text below as a natural lead-in to additional content.
    .card-footer.font-size-xs.text-muted Last updated 3 mins ago
  
  // Card
  .card
    img(src="path-to-image", alt="Card image").card-img-top
    .card-body
      h5.card-title
        | Card title
      p.card-text.font-size-sm
        | 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-footer.font-size-xs.text-muted Last updated 3 mins ago

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

  <!-- Card -->
  <div class="card mb-4">
    <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 font-size-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 font-size-xs">Last updated 3 mins ago</span>
    </div>
  </div>

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

  <!-- Card -->
  <div class="card mb-4">
    <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 font-size-sm">This card has supporting text below as a natural lead-in to additional content.</p>
      <span class="text-muted font-size-xs">Last updated 3 mins ago</span>
    </div>
  </div>

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

  <!-- Card -->
  <div class="card mb-4">
    <img src="pat-to-image" class="card-img" alt="Card image">
  </div>

  <!-- Card -->
  <div class="card border border-danger mb-4">
    <div class="card-body">
      <p class="card-text font-size-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <span class="text-muted font-size-xs">Last updated 3 mins ago</span>
    </div>
  </div>

// Card columns
.card-columns

  // Card
  .card.mb-4
    img(src="path-to-image", alt="Card image").card-img-top
    .card-body
      h5.card-title
        | Card title
      p.card-text.font-size-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.font-size-xs
        | Last updated 3 mins ago

  // Card
  .card.mb-4
    .card-body
      h5.card-title
        | Card title
      p.card-text.font-size-sm
        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      span.text-muted.font-size-xs
        | Last updated 3 mins ago
  
  // Card
  .card.mb-4
    img(src="path-to-image", alt="Card image").card-img-top
    .card-body
      h5.card-title
        | Card title
      p.card-text.font-size-sm
        | This card has supporting text below as a natural lead-in to additional content.
      span.text-muted.font-size-xs
        | Last updated 3 mins ago

  // Card
  .card.border.border-primary.mb-4.text-center
    .card-body
      p.card-text.font-size-sm
        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      span.text-muted.font-size-xs
        | Last updated 3 mins ago

  // Card
  .card.mb-4
    img(src="path-to-image", alt="Card image").card-img

  // Card
  .card.border.border-danger.mb-4
    .card-body
      p.card-text.font-size-sm
        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      span.text-muted.font-size-xs
        | Last updated 3 mins ago