Finder | Cards: Advanced

Static content overlay

New

Duplex with Garage

$200,410

<!-- Static content overlay -->
<div class="card bg-size-cover bg-position-center border-0 overflow-hidden" style="background-image: url(path-to-background-image);">
  <span class="img-gradient-overlay"></span>
  <div class="card-body content-overlay pb-0">
    <span class="badge bg-info fs-sm">New</span>
  </div>
  <div class="card-footer content-overlay border-0 pt-0 pb-4">
    <div class="d-sm-flex justify-content-between align-items-end pt-5 mt-2 mt-sm-5">
      <a href="#" class="text-decoration-none text-light pe-2">
        <div class="fs-sm text-uppercase pt-2 mb-1">For sale</div>
        <h3 class="h5 text-light mb-1">Duplex with Garage</h3>
        <div class="fs-sm opacity-70">
          <i class="fi-map-pin me-1"></i>
          21 Pulaski Road Kings Park, NY 11754
        </div>
      </a>
      <div class="btn-group ms-n2 ms-sm-0 mt-3">
        <a href="#" class="btn btn-primary px-3">$200,410</a>
        <button type="button" class="btn btn-primary btn-icon border-end-0 border-top-0 border-bottom-0 border-light fs-sm">
          <i class="fi-heart"></i>
        </button>
      </div>
    </div>
  </div>
</div>

// Static content overlay
.card.bg-size-cover.bg-position-center.border-0.overflow-hidden(style="background-image: url(path-to-background-image);")
  span.img-gradient-overlay
  .card-body.content-overlay.pb-0
    span.badge.bg-info.fs-sm New
  .card-footer.content-overlay.border-0.pt-0.pb-4
    .d-sm-flex.justify-content-between.align-items-end.pt-5.mt-2.mt-sm-5
      a(href="#").text-decoration-none.text-light.pe-2
        .fs-sm.text-uppercase.pt-2.mb-1 For sale
        h3.h5.text-light.mb-1 Duplex with Garage
        .fs-sm.opacity-70
          i.fi-map-pin.me-1
          | 21 Pulaski Road Kings Park, NY 11754
      .btn-group.ms-n2.ms-sm-0.mt-3
        a(href="#").btn.btn-primary.px-3
          | $200,410
        button(type="button").btn.btn-primary.btn-icon.border-end-0.border-top-0.border-bottom-0.border-light.fs-sm
          i.fi-heart

Content overlay on hover

Property for sale

268

Property for rent

1540

Chicago

<!-- Content overlay on hover -->
<a href="#" class="card shadow-sm card-hover border-0">
  <div class="card-img-top card-img-hover">
    <span class="img-overlay opacity-65"></span>
    <img src="path-to-image" alt="Chicago">
    <div class="content-overlay start-0 top-0 d-flex align-items-center justify-content-center w-100 h-100 p-3">
      <div class="w-100 p-1">
        <div class="mb-2">
          <h4 class="mb-2 fs-xs fw-normal text-light">
            <i class="fi-wallet mt-n1 me-2 fs-sm align-middle"></i>
            Property for sale
          </h4>
          <div class="d-flex align-items-center">
            <div class="progress progress-light w-100">
              <div class="progress-bar bg-danger" role="progressbar" style="width: 37%" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <span class="text-light fs-sm ps-1 ms-2">268</span>
          </div>
        </div>
        <div class="pt-1">
          <h4 class="mb-2 fs-xs fw-normal text-light">
            <i class="fi-home mt-n1 me-2 fs-sm align-middle"></i>
            Property for rent
          </h4>
          <div class="d-flex align-items-center">
            <div class="progress progress-light w-100">
              <div class="progress-bar bg-success" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <span class="text-light fs-sm ps-1 ms-2">1540</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card-body text-center">
    <h3 class="mb-0 fs-base text-nav">Chicago</h3>
  </div>
</a>

// Content overlay on hover
a(href="#").card.shadow-sm.card-hover.border-0
  .card-img-top.card-img-hover
    span.img-overlay.opacity-65
    img(src="path-to-image", alt="Chicago")
    .content-overlay.start-0.top-0.d-flex.align-items-center.justify-content-center.w-100.h-100.p-3
      .w-100.p-1
        .mb-2
          h4.mb-2.fs-xs.fw-normal.text-light
            i.fi-wallet.mt-n1.me-2.fs-sm.align-middle
            | Property for sale
          .d-flex.align-items-center
            .progress.progress-light.w-100
              .progress-bar.bg-danger(role="progressbar", style="width: 37%", aria-valuenow="37", aria-valuemin="0", aria-valuemax="100")
            span.text-light.fs-sm.ps-1.ms-2 268
        .pt-1
          h4.mb-2.fs-xs.fw-normal.text-light
            i.fi-home.mt-n1.me-2.fs-sm.align-middle
            | Property for rent
          .d-flex.align-items-center
            .progress.progress-light.w-100
              .progress-bar.bg-success(role="progressbar", style="width: 80%", aria-valuenow="80", aria-valuemin="0", aria-valuemax="100")
            span.text-light.fs-sm.ps-1.ms-2 1540
  .card-body.text-center
    h3.mb-0.fs-base.text-nav Chicago

Carousel inside

VerifiedNew

For sale

3-bed Apartment | 67 sq.m

140-60 Beech Ave Flushing, NY 11355

$65,000

312

<!-- Carousel inside card -->
<div class="card shadow-sm card-hover border-0">
  <div class="tns-carousel-wrapper card-img-top card-img-hover">
    <a href="#" class="img-overlay"></a>
    <div class="position-absolute start-0 top-0 pt-3 ps-3">
      <span class="d-table badge bg-success mb-1">Verified</span>
      <span class="d-table badge bg-info">New</span>
    </div>
    <div class="content-overlay end-0 top-0 pt-3 pe-3">
      <button class="btn btn-icon btn-light btn-xs text-primary rounded-circle" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to Wishlist">
        <i class="fi-heart"></i>
      </button>
    </div>
    <div class="tns-carousel-inner">
      <img src="path-to-image" alt="Image">
      <img src="path-to-image" alt="Image">
      <img src="path-to-image" alt="Image">
    </div>
  </div>
  <div class="card-body position-relative pb-3">
    <div class="mb-1 fs-xs text-uppercase text-primary">For sale</div>
    <h3 class="h6 mb-2 fs-base">
      <a href="#" class="nav-link stretched-link">3-bed Apartment | 67 sq.m</a>
    </h3>
    <p class="mb-2 fs-sm text-muted">140-60 Beech Ave Flushing, NY 11355</p>
    <div class="fw-bold">
      <i class="fi-cash mt-n1 me-2 lead align-middle opacity-70"></i>
      $65,000
    </div>
  </div>
  <div class="card-footer d-flex align-items-center justify-content-center mx-3 pt-3 text-nowrap">
    <span class="d-inline-block mx-1 px-2 fs-sm">
      3
      <i class="fi-bed ms-1 mt-n1 fs-lg text-muted"></i>
    </span>
    <span class="d-inline-block mx-1 px-2 fs-sm">
      1
      <i class="fi-bath ms-1 mt-n1 fs-lg text-muted"></i>
    </span>
    <span class="d-inline-block mx-1 px-2 fs-sm">
      2
      <i class="fi-car ms-1 mt-n1 fs-lg text-muted"></i>
    </span>
  </div>
</div>

// Carousel inside card
.card.shadow-sm.card-hover.border-0
  .tns-carousel-wrapper.card-img-top.card-img-hover
    a(href="#").img-overlay
    .position-absolute.start-0.top-0.pt-3.ps-3
      span.d-table.badge.bg-success.mb-1 Verified
      span.d-table.badge.bg-info New
    .content-overlay.end-0.top-0.pt-3.pe-3
      button(type="button", data-bs-toggle="tooltip", data-bs-placement="left", title="Add to Wishlist").btn.btn-icon.btn-light.btn-xs.text-primary.rounded-circle
        i.fi-heart
    .tns-carousel-inner
      img(src="path-to-image", alt="Image")
      img(src="path-to-image", alt="Image")
      img(src="path-to-image", alt="Image")
  .card-body.position-relative.pb-3
    .mb-1.fs-xs.text-uppercase.text-primary For sale
    h3.h6.mb-2.fs-base
      a(href="#").nav-link.stretched-link
        | 3-bed Apartment | 67 sq.m
    p.mb-2.fs-sm.text-muted 140-60 Beech Ave Flushing, NY 11355
    .fw-bold
      i.fi-cash.mt-n1.me-2.lead.align-middle.opacity-70
      | $65,000
  .card-footer.d-flex.align-items-center.justify-content-center.mx-3.pt-3.text-nowrap
    span.d-inline-block.mx-1.px-2.fs-sm 3
      i.fi-bed.ms-1.mt-n1.fs-lg.text-muted
    span.d-inline-block.mx-1.px-2.fs-sm 1
      i.fi-bath.ms-1.mt-n1.fs-lg.text-muted
    span.d-inline-block.mx-1.px-2.fs-sm 2
      i.fi-car.ms-1.mt-n1.fs-lg.text-muted

No image + Contextual dropdown menu

IT Pro TVFeatured

Business Analyst

New York$7,500

<!-- No image + Contextual dropdown menu -->
<div class="card bg-secondary card-hover">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-start mb-2">
      <div class="d-flex align-items-center">
        <img class="me-2" src="path-to-image" width="24" alt="IT Pro TV">
        <span class="fs-sm text-dark opacity-80 px-1">IT Pro TV</span>
        <span class="badge bg-faded-accent rounded-pill fs-sm ms-2">Featured</span>
      </div>
      <div class="dropdown content-overlay">
        <button type="button" class="btn btn-icon btn-light btn-xs rounded-circle shadow-sm" id="contextMenu" data-bs-toggle="dropdown" aria-expanded="false">
          <i class="fi-dots-vertical"></i>
        </button>
        <ul class="dropdown-menu my-1" aria-labelledby="contextMenu">
          <li>
            <button type="button" class="dropdown-item">
              <i class="fi-heart opacity-60 me-2"></i>
              Add to wishlist
            </button>
          </li>
          <li>
            <button type="button" class="dropdown-item">
              <i class="fi-x-circle opacity-60 me-2"></i>
              Not interested
            </button>
          </li>
        </ul>
      </div>
    </div>
    <h3 class="h6 card-title pt-1 mb-3">
      <a href="#" class="text-nav stretched-link text-decoration-none">Business Analyst</a>
    </h3>
    <div class="fs-sm">
      <span class="text-nowrap me-3">
        <i class="fi-map-pin text-muted me-1"> </i>
        New York
      </span>
      <span class="text-nowrap me-3">
        <i class="fi-cash fs-base text-muted me-1"></i>
        $7,500
      </span>
    </div>
  </div>
</div>

// No image + Contextual dropdown menu
.card.bg-secondary.card-hover
  .card-body
    .d-flex.justify-content-between.align-items-start.mb-2
      .d-flex.align-items-center
        img(src="path-to-image", width="24", alt="IT Pro TV").me-2
        span.fs-sm.text-dark.opacity-80.px-1 IT Pro TV
        span.badge.bg-faded-accent.rounded-pill.fs-sm.ms-2 Featured
      .dropdown.content-overlay
        button(type="button", id="contextMenu", data-bs-toggle="dropdown", aria-expanded="false").btn.btn-icon.btn-light.btn-xs.rounded-circle.shadow-sm
          i.fi-dots-vertical
        ul(aria-labelledby="contextMenu").dropdown-menu.my-1
          li
            button(type="button").dropdown-item
              i.fi-heart.opacity-60.me-2
              | Add to wishlist
          li
            button(type="button").dropdown-item
              i.fi-x-circle.opacity-60.me-2
              | Not interested
    h3.h6.card-title.pt-1.mb-3
      a(href="#").text-nav.stretched-link.text-decoration-none
        | Business Analyst
    .fs-sm
      span.text-nowrap.me-3
        i.fi-map-pin.text-muted.me-1 
        | New York
      span.text-nowrap.me-3
        i.fi-cash.fs-base.text-muted.me-1
        | $7,500

Light card on dark background: Vertical

New

1995

Compare

Ford Truck Lifted

$24,000

Chicago

278K mi

Manual

Diesel

<!-- Light card on dark background: Vertical -->
<div class="card card-light card-hover">
  <div class="card-img-top card-img-hover">
    <a href="#" class="img-overlay"></a>
    <div class="position-absolute start-0 top-0 pt-3 ps-3">
      <span class="d-table badge bg-info">New</span>
    </div>
    <div class="content-overlay end-0 top-0 pt-3 pe-3">
      <button type="button" class="btn btn-icon btn-light btn-xs text-primary rounded-circle" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to Wishlist">
        <i class="fi-heart"></i>
      </button>
    </div>
    <img src="path-to-image" alt="Image">
  </div>
  <div class="card-body">
    <div class="d-flex align-items-center justify-content-between pb-1">
      <span class="fs-sm text-light me-3">1995</span>
      <div class="form-check form-check-light">
        <input type="checkbox" id="compare" class="form-check-input">
        <label for="compare" class="form-check-label fs-sm">Compare</label>
      </div>
    </div>
    <h3 class="h6 mb-1">
      <a href="#" class="nav-link-light">Ford Truck Lifted</a>
    </h3>
    <div class="text-primary fw-bold mb-1">$24,000</div>
    <div class="fs-sm text-light opacity-70">
      <i class="fi-map-pin me-1"></i>
      Chicago
    </div>
  </div>
  <div class="card-footer border-0 pt-0">
    <div class="border-top border-light pt-3">
      <div class="row g-2">
        <div class="col me-sm-1">
          <div class="bg-dark rounded text-center w-100 h-100 p-2">
            <i class="fi-dashboard d-block h4 text-light mb-0 mx-center"></i>
            <span class="fs-xs text-light">278K mi</span>
          </div>
        </div>
        <div class="col me-sm-1">
          <div class="bg-dark rounded text-center w-100 h-100 p-2">
            <i class="fi-gearbox d-block h4 text-light mb-0 mx-center"></i>
            <span class="fs-xs text-light">Manual</span>
          </div>
        </div>
        <div class="col">
          <div class="bg-dark rounded text-center w-100 h-100 p-2">
            <i class="fi-petrol d-block h4 text-light mb-0 mx-center"></i>
            <span class="fs-xs text-light">Diesel</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

// Light card on dark background: Vertical
.card.card-light.card-hover
  .card-img-top.card-img-hover
    a(href="#").img-overlay
    .position-absolute.start-0.top-0.pt-3.ps-3
      span.d-table.badge.bg-info New
    .content-overlay.end-0.top-0.pt-3.pe-3
      button(type="button", data-bs-toggle="tooltip", data-bs-placement="left", title="Add to Wishlist").btn.btn-icon.btn-light.btn-xs.text-primary.rounded-circle
        i.fi-heart
    img(src="path-to-image", alt="Image")
  .card-body
    .d-flex.align-items-center.justify-content-between.pb-1
      span.fs-sm.text-light.me-3 1995
      .form-check.form-check-light
        input(type="checkbox", id="compare").form-check-input
        label(for="compare").form-check-label.fs-sm
          | Compare
    h3.h6.mb-1
      a(href="#").nav-link-light Ford Truck Lifted
    .text-primary.fw-bold.mb-1 $24,000
    .fs-sm.text-light.opacity-70
      i.fi-map-pin.me-1
      | Chicago
  .card-footer.border-0.pt-0
    .border-top.border-light.pt-3
      .row.g-2
        .col.me-sm-1
          .bg-dark.rounded.text-center.w-100.h-100.p-2
            i.fi-dashboard.d-block.h4.text-light.mb-0.mx-center
            span.fs-xs.text-light 278K mi
        .col.me-sm-1
          .bg-dark.rounded.text-center.w-100.h-100.p-2
            i.fi-gearbox.d-block.h4.text-light.mb-0.mx-center
            span.fs-xs.text-light Manual
        .col
          .bg-dark.rounded.text-center.w-100.h-100.p-2
            i.fi-petrol.d-block.h4.text-light.mb-0.mx-center
            span.fs-xs.text-light Diesel

Light card on dark background: Horizontal

New

2018

Compare

BMW 640 XI Gran Turismo

$44,920

New Jersey

10K mi

Automatic

Gasoline

<!-- Light card on dark background: Horizontal -->
<div class="card card-light card-hover card-horizontal">
  <div class="card-img-top card-img-hover" style="background-image: url(path-to-image);">
    <a href="#" class="img-overlay"></a>
    <div class="position-absolute start-0 top-0 pt-3 ps-3">
      <span class="d-table badge bg-info">New</span>
    </div>
    <div class="content-overlay end-0 top-0 pt-3 pe-3">
      <button type="button" class="btn btn-icon btn-light btn-xs text-primary rounded-circle" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to Wishlist">
        <i class="fi-heart"></i>
      </button>
    </div>
  </div>
  <div class="card-body">
    <div class="d-flex align-items-center justify-content-between pb-1">
      <span class="fs-sm text-light me-3">2018</span>
      <div class="form-check form-check-light">
        <input type="checkbox" id="compare" class="form-check-input">
        <label for="compare" class="form-check-label fs-sm">Compare</label>
      </div>
    </div>
    <h3 class="h6 mb-1">
      <a href="#" class="nav-link-light">BMW 640 XI Gran Turismo </a>
    </h3>
    <div class="text-primary fw-bold mb-1">$44,920</div>
    <div class="fs-sm text-light opacity-70">
      <i class="fi-map-pin me-1"></i>
      New Jersey
    </div>
    <div class="border-top border-light mt-3 pt-3">
      <div class="row g-2">
        <div class="col me-sm-1">
          <div class="bg-dark rounded text-center w-100 h-100 p-2">
            <i class="fi-dashboard d-block h4 text-light mb-0 mx-center"></i>
            <span class="fs-xs text-light">10K mi</span>
          </div>
        </div>
        <div class="col me-sm-1">
          <div class="bg-dark rounded text-center w-100 h-100 p-2">
            <i class="fi-gearbox d-block h4 text-light mb-0 mx-center"></i>
            <span class="fs-xs text-light">Automatic</span>
          </div>
        </div>
        <div class="col">
          <div class="bg-dark rounded text-center w-100 h-100 p-2">
            <i class="fi-petrol d-block h4 text-light mb-0 mx-center"></i>
            <span class="fs-xs text-light">Gasoline</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

// Light card on dark background: Horizontal
.card.card-light.card-hover.card-horizontal
  .card-img-top.card-img-hover(style="background-image: url(path-to-image);")
    a(href="#").img-overlay
    .position-absolute.start-0.top-0.pt-3.ps-3
      span.d-table.badge.bg-info New
    .content-overlay.end-0.top-0.pt-3.pe-3
      button(type="button", data-bs-toggle="tooltip", data-bs-placement="left", title="Add to Wishlist").btn.btn-icon.btn-light.btn-xs.text-primary.rounded-circle
        i.fi-heart
  .card-body
    .d-flex.align-items-center.justify-content-between.pb-1
      span.fs-sm.text-light.me-3 2018
      .form-check.form-check-light
        input(type="checkbox", id="compare").form-check-input
        label(for="compare").form-check-label.fs-sm
          | Compare
    h3.h6.mb-1
      a(href="#").nav-link-light
        | BMW 640 XI Gran Turismo 
    .text-primary.fw-bold.mb-1 $44,920
    .fs-sm.text-light.opacity-70
      i.fi-map-pin.me-1
      | New Jersey
    .border-top.border-light.mt-3.pt-3
      .row.g-2
        .col.me-sm-1
          .bg-dark.rounded.text-center.w-100.h-100.p-2
            i.fi-dashboard.d-block.h4.text-light.mb-0.mx-center
            span.fs-xs.text-light 10K mi
        .col.me-sm-1
          .bg-dark.rounded.text-center.w-100.h-100.p-2
            i.fi-gearbox.d-block.h4.text-light.mb-0.mx-center
            span.fs-xs.text-light Automatic
        .col
          .bg-dark.rounded.text-center.w-100.h-100.p-2
            i.fi-petrol.d-block.h4.text-light.mb-0.mx-center
            span.fs-xs.text-light Gasoline

Blog post: Simple

Test Drives

This Year is All About New Harley Davidson

Cody Fisher

Nov 242 comments

<!-- Blog post: Simple -->
<article>
  <a href="#" class="d-block rounded-3 overflow-hidden">
    <img class="d-block" src="path-to-image" alt="Image">
  </a>
  <div class="py-3">
    <a href="#" class="fs-xs text-uppercase text-decoration-none">Test Drives</a>
    <h3 class="fs-base pt-1">
      <a class="nav-link" href="#">This Year is All About New Harley Davidson</a>
    </h3>
    <a href="#" class="d-flex align-items-center text-decoration-none">
      <img class="rounded-circle" src="path-to-avatar-image" width="44" alt="Avatar">
      <div class="ps-2">
        <h6 class="fs-sm text-nav lh-base mb-1">Cody Fisher</h6>
        <div class="d-flex text-body fs-xs">
          <span class="me-2 pe-1">
            <i class="fi-calendar-alt opacity-70 me-1"></i>
            Nov 24
          </span>
          <span>
            <i class="fi-chat-circle opacity-70 me-1"></i>
            2 comments
          </span>
        </div>
      </div>
    </a>
  </div>
</article>

// Blog post: Simple
article
  a(href="#").d-block.rounded-3.overflow-hidden
    img(src="path-to-image" alt="Image").d-block
  .py-3
    a(href="#").fs-xs.text-uppercase.text-decoration-none
      | Test Drives
    h3.fs-base.pt-1
      a(href="#").nav-link
        | This Year is All About New Harley Davidson
    a(href="#").d-flex.align-items-center.text-decoration-none
      img(src="path-to-avatar-image", width="44", alt="Avatar").rounded-circle
      .ps-2
        h6.fs-sm.text-nav.lh-base.mb-1 Cody Fisher
        .d-flex.text-body.fs-xs
          span.me-2.pe-1
            i.fi-calendar-alt.opacity-70.me-1
            | Nov 24
          span
            i.fi-chat-circle.opacity-70.me-1
            | 2 comments

Blog post: Card vertical

Tips & Advice

How to Win Your First Job In Tech

Nunc, hac augue ante in facilisi id. Consectetur egestas orci, arcu ac tellus...

Annette Black

Dec 183 comments

<!-- Blog post: Card vertical -->
<article class="card card-hover border-0 shadow-sm h-100">
  <a href="#" class="card-img-top overflow-hidden">
    <img class="d-block" src="path-to-image" alt="Image">
  </a>
  <div class="card-body p-3">
    <a href="#" class="fs-xs text-uppercase text-decoration-none">Tips &amp; Advice</a>
    <h3 class="fs-base pt-1 mb-2">
      <a href="#" class="nav-link">How to Win Your First Job In Tech</a>
    </h3>
    <p class="fs-sm text-muted m-0">Nunc, hac augue ante in facilisi id. Consectetur egestas orci, arcu ac tellus...</p>
  </div>
  <a href="#" class="card-footer d-flex align-items-center text-decoration-none border-top-0 pt-0 mb-1">
    <img class="rounded-circle" src="path-to-avatar-image" width="44" alt="Avatar">
    <div class="ps-2">
      <h6 class="fs-sm text-nav lh-base mb-1">Annette Black</h6>
      <div class="d-flex text-body fs-xs">
        <span class="me-2 pe-1">
          <i class="fi-calendar-alt opacity-70 me-1"></i>
          Dec 18
        </span>
        <span>
          <i class="fi-chat-circle opacity-70 me-1"></i>
          3 comments
        </span>
      </div>
    </div>
  </a>
</article>

// Blog post: Card vertical
article.card.border-0.shadow-sm.card-hover
  a(href="#").card-img-top.overflow-hidden
    img(src="path-to-image", alt="Image").d-block
  .card-body.pb-3
    a(href="#").fs-xs.text-uppercase.text-decoration-none
      | Tips &amp; Advice
    h3.fs-base.pt-1.mb-2
      a(href="#").nav-link
        | How to Win Your First Job In Tech
    p.fs-sm.text-muted.m-0 Nunc, hac augue ante in facilisi id. Consectetur egestas orci, arcu ac tellus...
  a(href="#").card-footer.d-flex.align-items-center.text-decoration-none.border-top-0.pt-0.mb-1
    img(src="path-to-avatar-image", width="44", alt="Avatar").rounded-circle
    .ps-2
      h6.fs-sm.text-nav.lh-base.mb-1 Annette Black
      .d-flex.text-body.fs-xs
        span.me-2.pe-1
          i.fi-calendar-alt.opacity-70.me-1
          | Dec 18
        span
          i.fi-chat-circle.opacity-70.me-1
          | 3 comments

Blog post: Card horizontal

Inspiration

10 Ways to Stay Ahead of the Curve

Ac sit tincidunt lacus dignissim volutpat dui scelerisque porttitor non. Elit at ullamcorper feugiat porta adipiscing...

Kristin Watson

Dec 231 comment

<!-- Blog post: Card horizontal -->
<article class="card border-0 shadow-sm card-hover card-horizontal">
  <a href="#" class="card-img-top" style="background-image: url(path-to-image);"></a>
  <div class="card-body">
    <a href="#" class="fs-xs text-uppercase text-decoration-none">Inspiration</a>
    <h3 class="fs-base pt-1 mb-2">
      <a href="#" class="nav-link">10 Ways to Stay Ahead of the Curve</a>
    </h3>
    <p class="fs-sm text-muted">Ac sit tincidunt lacus dignissim volutpat dui scelerisque porttitor non. Elit at ullamcorper feugiat porta adipiscing...</p>
    <a href="#" class="d-flex align-items-center text-decoration-none">
      <img class="rounded-circle" src="path-to-avatar-image" width="44" alt="Avatar">
      <div class="ps-2">
        <h6 class="fs-sm text-nav lh-base mb-1">Kristin Watson</h6>
        <div class="d-flex text-body fs-xs">
          <span class="me-2 pe-1">
            <i class="fi-calendar-alt opacity-70 me-1"></i>
            Dec 23
          </span>
          <span>
            <i class="fi-chat-circle opacity-70 me-1"></i>
            1 comment
          </span>
        </div>
      </div>
    </a>
  </div>
</article>

// Blog post: Card horizontal
article.card.border-0.shadow-sm.card-hover.card-horizontal
  a(href="#", style="background-image: url(path-to-image);").card-img-top
  .card-body
    a(href="#").fs-xs.text-uppercase.text-decoration-none Inspiration
    h3.fs-base.pt-1.mb-2
      a(href="#").nav-link
        | 10 Ways to Stay Ahead of the Curve
    p.fs-sm.text-muted Ac sit tincidunt lacus dignissim volutpat dui scelerisque porttitor non. Elit at ullamcorper feugiat porta adipiscing...
    a(href="#").d-flex.align-items-center.text-decoration-none
      img(src="path-to-avatar-image", width="44", alt="Avatar").rounded-circle
      .ps-2
        h6.fs-sm.text-nav.lh-base.mb-1 Kristin Watson
        .d-flex.text-body.fs-xs
          span.me-2.pe-1
            i.fi-calendar-alt.opacity-70.me-1
            | Dec 23
          span
            i.fi-chat-circle.opacity-70.me-1
            | 1 comment

Account card with navigation

Annette Black

Add property Menu

Personal Info My Properties Wishlist Reviews Notifications Sign Out

Robert Fox

Sell car Menu

Personal Info My Cars Wishlist Reviews Notifications Sign Out

<!-- Account card with navigation -->
<div class="card card-body border-0 shadow-sm pb-1">
  <div class="d-flex d-md-block d-lg-flex align-items-start mb-4">
    <img class="rounded-circle" src="path-to-avatar-image" width="48" alt="Annette Black">
    <div class="pt-md-2 pt-lg-0 ps-3 ps-md-0 ps-lg-3">
      <h2 class="fs-lg mb-0">Annette Black</h2>
      <div class="star-rating">
        <i class="star-rating-icon fi-star-filled active"></i>
        <i class="star-rating-icon fi-star-filled active"></i>
        <i class="star-rating-icon fi-star-filled active"></i>
        <i class="star-rating-icon fi-star-filled active"></i>
        <i class="star-rating-icon fi-star-filled active"></i>
      </div>
      <ul class="list-unstyled fs-sm mt-3 mb-0">
        <li>
          <a class="nav-link fw-normal p-0" href="tel:3025550107">
            <i class="fi-phone opacity-60 me-2"></i>
            (302) 555-0107
          </a>
        </li>
        <li>
          <a class="nav-link fw-normal p-0" href="mailto:annette_black@email.com">
            <i class="fi-mail opacity-60 me-2"></i>
            annette_black@email.com
          </a>
        </li>
      </ul>
    </div>
  </div>
  <a class="btn btn-primary btn-lg w-100 mb-3" href="#">
    <i class="fi-plus me-2"></i>
    Add property
  </a>
  <a class="btn btn-outline-secondary d-block d-md-none w-100 mb-3" href="#card-nav" data-bs-toggle="collapse">
    <i class="fi-align-justify me-2"></i>
    Menu
  </a>
  <div class="collapse d-md-block mt-3" id="card-nav">
    <div class="card-nav">
      <a class="card-nav-link" href="#">
        <i class="fi-user opacity-60 me-2"></i>
        Personal Info
      </a>
      <a class="card-nav-link active" href="#">
        <i class="fi-home opacity-60 me-2"></i>
        My Properties
      </a>
      <a class="card-nav-link" href="#">
        <i class="fi-heart opacity-60 me-2"></i>
        Wishlist
      </a>
      <a class="card-nav-link" href="#">
        <i class="fi-star opacity-60 me-2"></i>
        Reviews
      </a>
      <a class="card-nav-link" href="#">
        <i class="fi-bell opacity-60 me-2"></i>
        Notifications
      </a>
      <a class="card-nav-link" href="#">
        <i class="fi-logout opacity-60 me-2"></i>
        Sign Out
      </a>
    </div>
  </div>
</div>

<!-- Account card with navigation: Light version -->
<div class="card card-light card-body pb-1">
  <div class="d-flex d-md-block d-lg-flex align-items-start mb-4">
    <img class="rounded-circle" src="path-to-avatar-image" width="48" alt="Robert Fox">
    <div class="pt-md-2 pt-lg-0 ps-3 ps-md-0 ps-lg-3">
      <h2 class="text-light fs-lg mb-0">Robert Fox</h2>
      <div class="star-rating">
        <i class="star-rating-icon fi-star-filled active"></i>
        <i class="star-rating-icon fi-star-filled active"></i>
        <i class="star-rating-icon fi-star-filled active"></i>
        <i class="star-rating-icon fi-star-filled active"></i>
        <i class="star-rating-icon fi-star-filled active"></i>
      </div>
      <ul class="list-unstyled fs-sm mt-3 mb-0">
        <li>
          <a class="nav-link-light fw-normal p-0" href="tel:4057329046">
            <i class="fi-phone me-2"></i>
            (405) 732-9046
          </a>
        </li>
        <li>
          <a class="nav-link-light fw-normal p-0" href="mailto:robert_fox@email.com">
            <i class="fi-mail me-2"></i>
            robert_fox@email.com
          </a>
        </li>
      </ul>
    </div>
  </div>
  <a class="btn btn-primary btn-lg w-100 mb-3" href="#">
    <i class="fi-plus me-2"></i>
    Sell car
  </a>
  <a class="btn btn-outline-light d-block d-md-none w-100 mb-3" href="#card-light-nav" data-bs-toggle="collapse">
    <i class="fi-align-justify me-2"></i>
    Menu
  </a>
  <div class="collapse d-md-block mt-3" id="card-light-nav">
    <div class="card-nav">
      <a class="card-nav-link" href="#">
        <i class="fi-user me-2"></i>
        Personal Info
      </a>
      <a class="card-nav-link active" href="#">
        <i class="fi-car me-2"></i>
        My Cars
      </a>
      <a class="card-nav-link" href="#">
        <i class="fi-heart me-2"></i>
        Wishlist
      </a>
      <a class="card-nav-link" href="#">
        <i class="fi-star me-2"></i>
        Reviews
      </a>
      <a class="card-nav-link" href="#">
        <i class="fi-bell me-2"></i>
        Notifications
      </a>
      <a class="card-nav-link" href="#">
        <i class="fi-logout me-2"></i>
        Sign Out
      </a>
    </div>
  </div>
</div>

// Account card with navigation
.card.card-body.border-0.shadow-sm.pb-1
  .d-flex.d-md-block.d-lg-flex.align-items-start.mb-4
    img(src="path-to-avatar-image", class="rounded-circle", width="48", alt="Annette Black")
    .pt-md-2.pt-lg-0.ps-3.ps-md-0.ps-lg-3
      h2.fs-lg.mb-0 Annette Black
      +star-rating(5)
      ul.list-unstyled.fs-sm.mt-3.mb-0
        li
          a(href="tel:3025550107").nav-link.fw-normal.p-0
            i.fi-phone.opacity-60.me-2
            | (302) 555-0107
        li
          a(href="mailto:annette_black@email.com").nav-link.fw-normal.p-0
            i.fi-mail.opacity-60.me-2
            | annette_black@email.com
  a(href="#").btn.btn-primary.btn-lg.w-100.mb-3
    i.fi-plus.me-2
    | Add property
  a(href="#card-nav", data-bs-toggle="collapse").btn.btn-outline-secondary.d-block.d-md-none.w-100.mb-3
    i.fi-align-justify.me-2
    | Menu
  #card-nav.collapse.d-md-block.mt-3
    .card-nav
      a(href="#").card-nav-link
        i.fi-user.opacity-60.me-2
        | Personal Info
      a(href="#").card-nav-link.active
        i.fi-home.opacity-60.me-2
        | My Properties
      a(href="#").card-nav-link
        i.fi-heart.opacity-60.me-2
        | Wishlist
      a(href="#").card-nav-link
        i.fi-star.opacity-60.me-2
        | Reviews
      a(href="#").card-nav-link
        i.fi-bell.opacity-60.me-2
        | Notifications
      a(href="#").card-nav-link
        i.fi-logout.opacity-60.me-2
        | Sign Out
        
// Account card with navigation: Light version
.card.card-light.card-body.pb-1
  .d-flex.d-md-block.d-lg-flex.align-items-start.mb-4
    img(src="path-to-avatar-image", class="rounded-circle", width="48", alt="Robert Fox")
    .pt-md-2.pt-lg-0.ps-3.ps-md-0.ps-lg-3
      h2.text-light.fs-lg.mb-0 Robert Fox
      +star-rating(5)
      ul.list-unstyled.fs-sm.mt-3.mb-0
        li
          a(href="tel:4057329046").nav-link-light.fw-normal.p-0
            i.fi-phone.me-2
            | (405) 732-9046
        li
          a(href="mailto:robert_fox@email.com").nav-link-light.fw-normal.p-0
            i.fi-mail.me-2
            | robert_fox@email.com
  a(href="#").btn.btn-primary.btn-lg.w-100.mb-3
    i.fi-plus.me-2
    | Sell car
  a(href="#card-light-nav", data-bs-toggle="collapse").btn.btn-outline-light.d-block.d-md-none.w-100.mb-3
    i.fi-align-justify.me-2
    | Menu
  #card-light-nav.collapse.d-md-block.mt-3
    .card-nav
      a(href="#").card-nav-link
        i.fi-user.me-2
        | Personal Info
      a(href="#").card-nav-link.active
        i.fi-car.me-2
        | My Cars
      a(href="#").card-nav-link
        i.fi-heart.me-2
        | Wishlist
      a(href="#").card-nav-link
        i.fi-star.me-2
        | Reviews
      a(href="#").card-nav-link
        i.fi-bell.me-2
        | Notifications
      a(href="#").card-nav-link
        i.fi-logout.me-2
        | Sign Out