Pricing

Quickly build pricing plans for subscription based pricing model.

Finder component

Basic example

Result
HTML

Easy Start

/month

3x more views
Top ads for 3 days
Moving up the list
Featured badge in the results

Choose plan

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>

Easy Start

/month

3x more views
Top ads for 3 days
Moving up the list
Featured badge in the results

Choose plan

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>