Finder Buy now

Pricing

Quickly build pricing plans for subscription based pricing model.

Finder component

Basic example

Icon

Easy Start

$5
/month
  • 3x more views
  • Top ads for 3 days
  • Moving up the list
  • Featured badge in the results
Choose plan
Icon

Fast Sale

$15
/month
  • 10x more views
  • Top ads for 5 days
  • Moving up the list
  • Featured badge in the results
Choose plan
<!-- Default pricing plan -->
<div class="card">
  <div class="card-body">
    <img src="path-to-image" class="d-block mx-auto mt-2 mb-4" width="72" alt="Icon">
    <h2 class="h5 fw-normal text-center py-1 mb-0">Easy Start</h2>
    <div class="d-flex align-items-end justify-content-center mb-4">
      <div class="h1 mb-0">$5</div>
      <div class="pb-2 ps-2">/month</div>
    </div>
    <ul class="list-unstyled d-block mb-0 mx-auto" style="max-width: 16rem;">
      <li class="d-flex">
        <i class="fi-check text-primary fs-sm mt-1 me-2"></i>
        <span>3x more views</span>
      </li>
      <li class="d-flex">
        <i class="fi-check text-primary fs-sm mt-1 me-2"></i>
        <span>Top ads for 3 days</span>
      </li>
      <li class="d-flex text-muted">
        <i class="fi-x fs-xs mt-2 me-2"></i>
        <span>Moving up the list</span>
      </li>
      <li class="d-flex text-muted">
        <i class="fi-x fs-xs mt-2 me-2"></i>
        <span>Featured badge in the results</span>
      </li>
    </ul>
  </div>
  <div class="card-footer py-2 border-0">
    <div class="border-top text-center pt-4 pb-3">
      <a href="#" class="btn btn-outline-primary rounded-pill">Choose plan</a>
    </div>
  </div>
</div>

<!-- Popular pricing plan -->
<div class="card shadow">
  <div class="card-body">
    <img src="path-to-image" class="d-block mx-auto mt-2 mb-4" width="72" alt="Icon">
    <h2 class="h5 fw-normal text-center py-1 mb-0">Fast Sale</h2>
    <div class="d-flex align-items-end justify-content-center mb-4">
      <div class="h1 mb-0">$15</div>
      <div class="pb-2 ps-2">/month</div>
    </div>
    <ul class="list-unstyled d-block mb-0 mx-auto" style="max-width: 16rem;">
      <li class="d-flex">
        <i class="fi-check text-primary fs-sm mt-1 me-2"></i>
        <span>10x more views</span>
      </li>
      <li class="d-flex">
        <i class="fi-check text-primary fs-sm mt-1 me-2"></i>
        <span>Top ads for 5 days</span>
      </li>
      <li class="d-flex">
        <i class="fi-check text-primary fs-sm mt-1 me-2"></i>
        <span>Moving up the list</span>
      </li>
      <li class="d-flex text-muted">
        <i class="fi-x fs-xs mt-2 me-2"></i>
        <span>Featured badge in the results</span>
      </li>
    </ul>
  </div>
  <div class="card-footer py-2 border-0">
    <div class="border-top text-center pt-4 pb-3">
      <a href="#" class="btn btn-primary rounded-pill">Choose plan</a>
    </div>
  </div>
</div>
// Default pricing plan
.card
  .card-body
    img(src="path-to-image", width="72", alt="Icon").d-block.mx-auto.mt-2.mb-4
    h2.h5.fw-normal.text-center.py-1.mb-0 Easy Start
    .d-flex.align-items-end.justify-content-center.mb-4
      .h1.mb-0 $5
      .pb-2.ps-2 /month
    ul.list-unstyled.d-block.mb-0.mx-auto(style="max-width: 16rem;")
      li.d-flex
        i.fi-check.text-primary.fs-sm.mt-1.me-2
        span 3x more views
      li.d-flex
        i.fi-check.text-primary.fs-sm.mt-1.me-2
        span Top ads for 3 days
      li.d-flex.text-muted
        i.fi-x.fs-xs.mt-2.me-2
        span Moving up the list
      li.d-flex.text-muted
        i.fi-x.fs-xs.mt-2.me-2
        span Featured badge in the results
  .card-footer.py-2.border-0
    .border-top.text-center.pt-4.pb-3
      a(href="#").btn.btn-outline-primary.rounded-pill
        | Choose plan

// Popular pricing plan
.card.shadow
  .card-body
    img(src="path-to-image", width="72", alt="Icon").d-block.mx-auto.mt-2.mb-4
    h2.h5.fw-normal.text-center.py-1.mb-0 Fast Sale
    .d-flex.align-items-end.justify-content-center.mb-4
      .h1.mb-0 $15
      .pb-2.ps-2 /month
    ul.list-unstyled.d-block.mb-0.mx-auto(style="max-width: 16rem;")
      li.d-flex
        i.fi-check.text-primary.fs-sm.mt-1.me-2
        span 10x more views
      li.d-flex
        i.fi-check.text-primary.fs-sm.mt-1.me-2
        span Top ads for 5 days
      li.d-flex
        i.fi-check.text-primary.fs-sm.mt-1.me-2
        span Moving up the list
      li.d-flex.text-muted
        i.fi-x.fs-xs.mt-2.me-2
        span Featured badge in the results
  .card-footer.py-2.border-0
    .border-top.text-center.pt-4.pb-3
      a(href="#").btn.btn-primary.rounded-pill
        | Choose plan

Light version

Icon

Easy Start

$5
/month
  • 3x more views
  • Top ads for 3 days
  • Moving up the list
  • Featured badge in the results
Choose plan
Icon

Fast Sale

$15
/month
  • 10x more views
  • Top ads for 5 days
  • Moving up the list
  • Featured badge in the results
Choose plan
<!-- Light default pricing plan -->
<div class="card card-light border-light">
  <div class="card-body">
    <img src="path-to-image" class="d-block mx-auto mt-2 mb-4" width="72" alt="Icon">
    <h2 class="h5 fw-normal text-light text-center py-1 mb-0">Easy Start</h2>
    <div class="d-flex align-items-end justify-content-center mb-4">
      <div class="h1 text-light mb-0">$5</div>
      <div class="text-light opacity-70 pb-2 ps-2">/month</div>
    </div>
    <ul class="list-unstyled d-block mb-0 mx-auto" style="max-width: 16rem;">
      <li class="d-flex">
        <i class="fi-check text-primary fs-sm mt-1 me-2"></i>
        <span class="text-light">3x more views</span>
      </li>
      <li class="d-flex">
        <i class="fi-check text-primary fs-sm mt-1 me-2"></i>
        <span class="text-light">Top ads for 3 days</span>
      </li>
      <li class="d-flex text-light opacity-50">
        <i class="fi-x fs-xs mt-2 me-2"></i>
        <span>Moving up the list</span>
      </li>
      <li class="d-flex text-light opacity-50">
        <i class="fi-x fs-xs mt-2 me-2"></i>
        <span>Featured badge in the results</span>
      </li>
    </ul>
  </div>
  <div class="card-footer py-2 border-0">
    <div class="border-top border-light text-center pt-4 pb-3">
      <a href="#" class="btn btn-outline-light rounded-pill">Choose plan</a>
    </div>
  </div>
</div>

<!-- Light popular pricing plan -->
<div class="card card-light border-light card-active">
  <div class="card-body">
    <img src="path-to-image" class="d-block mx-auto mt-2 mb-4" width="72" alt="Icon">
    <h2 class="h5 fw-normal text-light text-center py-1 mb-0">Fast Sale</h2>
    <div class="d-flex align-items-end justify-content-center mb-4">
      <div class="h1 text-light mb-0">$15</div>
      <div class="text-light opacity-70 pb-2 ps-2">/month</div>
    </div>
    <ul class="list-unstyled d-block mb-0 mx-auto" style="max-width: 16rem;">
      <li class="d-flex">
        <i class="fi-check text-primary fs-sm mt-1 me-2"></i>
        <span class="text-light">10x more views</span>
      </li>
      <li class="d-flex">
        <i class="fi-check text-primary fs-sm mt-1 me-2"></i>
        <span class="text-light">Top ads for 5 days</span>
      </li>
      <li class="d-flex">
        <i class="fi-check text-primary fs-sm mt-1 me-2"></i>
        <span class="text-light">Moving up the list</span>
      </li>
      <li class="d-flex text-light opacity-50">
        <i class="fi-x fs-xs mt-2 me-2"></i>
        <span>Featured badge in the results</span>
      </li>
    </ul>
  </div>
  <div class="card-footer py-2 border-0">
    <div class="border-top border-light text-center pt-4 pb-3">
      <a href="#" class="btn btn-primary rounded-pill">Choose plan</a>
    </div>
  </div>
</div>
// Light default pricing plan
.card.card-light.border-light
  .card-body
    img(src="path-to-image", width="72", alt="Icon").d-block.mx-auto.mt-2.mb-4
    h2.h5.fw-normal.text-light.text-center.py-1.mb-0 Easy Start
    .d-flex.align-items-end.justify-content-center.mb-4
      .h1.text-light.mb-0 $5
      .text-light.opacity-70.pb-2.ps-2 /month
    ul.list-unstyled.d-block.mb-0.mx-auto(style="max-width: 16rem;")
      li.d-flex
        i.fi-check.text-primary.fs-sm.mt-1.me-2
        span.text-light 3x more views
      li.d-flex
        i.fi-check.text-primary.fs-sm.mt-1.me-2
        span.text-light Top ads for 3 days
      li.d-flex.text-light.opacity-50
        i.fi-x.fs-xs.mt-2.me-2
        span Moving up the list
      li.d-flex.text-light.opacity-50
        i.fi-x.fs-xs.mt-2.me-2
        span Featured badge in the results
  .card-footer.py-2.border-0
    .border-top.border-light.text-center.pt-4.pb-3
      a(href="#").btn.btn-outline-light.rounded-pill
        | Choose plan

// Light popular pricing plan
.card.card-light.border-light.card-active
  .card-body
    img(src="path-to-image", width="72", alt="Icon").d-block.mx-auto.mt-2.mb-4
    h2.h5.fw-normal.text-light.text-center.py-1.mb-0 Fast Sale
    .d-flex.align-items-end.justify-content-center.mb-4
      .h1.text-light.mb-0 $15
      .text-light.opacity-70.pb-2.ps-2 /month
    ul.list-unstyled.d-block.mb-0.mx-auto(style="max-width: 16rem;")
      li.d-flex
        i.fi-check.text-primary.fs-sm.mt-1.me-2
        span.text-light 10x more views
      li.d-flex
        i.fi-check.text-primary.fs-sm.mt-1.me-2
        span.text-light Top ads for 5 days
      li.d-flex
        i.fi-check.text-primary.fs-sm.mt-1.me-2
        span.text-light Moving up the list
      li.d-flex.text-light.opacity-50
        i.fi-x.fs-xs.mt-2.me-2
        span Featured badge in the results
  .card-footer.py-2.border-0
    .border-top.border-light.text-center.pt-4.pb-3
      a(href="#").btn.btn-primary.rounded-pill
        | Choose plan
Top