باکس های پیشرفته

<!-- 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 -->
<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 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="افزودن به علاقه مندی">
        <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="افزودن به علاقه مندی").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 -->
<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 -->
<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="افزودن به علاقه مندی">
        <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="افزودن به علاقه مندی").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 -->
<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="افزودن به علاقه مندی">
        <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="افزودن به علاقه مندی").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 -->
<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 -->
<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 & 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 -->
<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 -->
<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