Pricing cards

Use Impact Front’s pricing cards elements to indicate your SaaS business pricing model

Pricing card example

The following example is a basic and clean pricing card to let your potential customers know what they get by purchasing your service:

$ 69

Freelancer

Great for personal use and for your side projects.

  • Full documentation
  • Domains: 1
  • Team size: 1 developer
  • Premium support: 6 months
  • Free updates: 6 months
Purchase 
<div class="row">
    <div class="col-8">
        <div class="card shadow-soft mb-5 mb-lg-6 px-2">
            <div class="card-header border-light p-4">
                <!-- Price -->
                <div class="d-flex mb-3">
                    <span class="h5 mb-0">$</span>
                    <span class="price display-2 mb-0" data-annual="69" data-monthly="69">69</span>
                </div>
                <h4 class="mb-3 text-black">Freelancer</h4>
                <p class="font-weight-normal mb-0">Great for personal use and for your side projects.</p>
            </div>
            <div class="card-body pt-5">
                <ul class="list-group simple-list">
                    <li class="list-group-item font-weight-normal"><span class="icon-success"><i class="fas fa-check"></i></span>Full documentation</li>
                    <li class="list-group-item font-weight-normal"><span class="icon-success"><i class="fas fa-check"></i></span>Domains: <strong>1</strong></li>
                    <li class="list-group-item font-weight-normal"><span class="icon-success"><i class="fas fa-check"></i></span>Team size: <strong>1 developer</strong></li>
                    <li class="list-group-item font-weight-normal"><span class="icon-success"><i class="fas fa-check"></i></span>Premium support: <strong>6 months</strong></li>
                    <li class="list-group-item font-weight-normal"><span class="icon-success"><i class="fas fa-check"></i></span>Free updates: <strong>6 months</strong></li>
                </ul> 
            </div>
            <div class="card-footer px-4 pb-4">
                <!-- Button -->
                <a href="./sign-up.html" target="_blank" class="btn btn-block btn-outline-gray animate-up-2">
                    Purchase <span class="icon icon-xs ml-3"><i class="fas fa-arrow-right"></i></span>
                </a>
            </div>
        </div>
    </div>
</div>