Blocks - Pricing

Copy any custom block snippet below and paste it on your page to build your website easily.

Filter Blocks:

Our Pricing

We offer great prices, premium and quality products for your business.

Enjoy a free 30-day trial and experience the full service. No credit card required!

See All Prices

Monthly

Yearly (Save 30%)

$19 month

$199 year

Premium Plan

5 Projects
100K API Access
200MB Storage
Weekly Reports
7/24 Support

Choose Plan

$49 month

$499 year

Corporate Plan

20 Projects
300K API Access
500MB Storage
Weekly Reports
7/24 Support

Choose Plan

View example's code

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gy-6">
      <div class="col-lg-4">
        <h2 class="display-4 mt-lg-18 mb-3">Our Pricing</h2>
        <p class="lead fs-lg">We offer <span class="underline">great prices</span>, premium and quality products for your business.</p>
        <p>Enjoy a <a href="#" class="hover">free 30-day trial</a> and experience the full service. No credit card required!</p>
        <a href="#" class="btn btn-primary rounded-pill mt-2">See All Prices</a>
      </div>
      <!--/column -->
      <div class="col-lg-7 offset-lg-1 pricing-wrapper">
        <div class="pricing-switcher-wrapper switcher justify-content-start justify-content-lg-end">
          <p class="mb-0 pe-3">Monthly</p>
          <div class="pricing-switchers">
            <div class="pricing-switcher pricing-switcher-active"></div>
            <div class="pricing-switcher"></div>
            <div class="switcher-button bg-primary"></div>
          </div>
          <p class="mb-0 ps-3">Yearly <span class="text-red">(Save 30%)</span></p>
        </div>
        <div class="row gy-6 position-relative mt-5">
          <div class="shape bg-dot primary rellax w-16 h-18" data-rellax-speed="1" style="bottom: -0.5rem; right: -1.6rem;"></div>
          <div class="shape rounded-circle bg-line red rellax w-18 h-18" data-rellax-speed="1" style="top: -1rem; left: -2rem;"></div>
          <div class="col-md-6">
            <div class="pricing card">
              <div class="card-body pb-12">
                <div class="prices text-dark">
                  <div class="price price-show"><span class="price-currency">$</span><span class="price-value">19</span> <span class="price-duration">month</span></div>
                  <div class="price price-hide price-hidden"><span class="price-currency">$</span><span class="price-value">199</span> <span class="price-duration">year</span></div>
                </div>
                <!--/.prices -->
                <h4 class="card-title mt-2">Premium Plan</h4>
                <ul class="icon-list bullet-bg bullet-soft-primary mt-8 mb-9">
                  <li><i class="uil uil-check"></i><span><strong>5</strong> Projects </span></li>
                  <li><i class="uil uil-check"></i><span><strong>100K</strong> API Access </span></li>
                  <li><i class="uil uil-check"></i><span><strong>200MB</strong> Storage </span></li>
                  <li><i class="uil uil-check"></i><span> Weekly <strong>Reports</strong></span></li>
                  <li><i class="uil uil-times bullet-soft-red"></i><span> 7/24 <strong>Support</strong></span></li>
                </ul>
                <a href="#" class="btn btn-primary rounded-pill">Choose Plan</a>
              </div>
              <!--/.card-body -->
            </div>
            <!--/.pricing -->
          </div>
          <!--/column -->
          <div class="col-md-6 popular">
            <div class="pricing card">
              <div class="card-body pb-12">
                <div class="prices text-dark">
                  <div class="price price-show"><span class="price-currency">$</span><span class="price-value">49</span> <span class="price-duration">month</span></div>
                  <div class="price price-hide price-hidden"><span class="price-currency">$</span><span class="price-value">499</span> <span class="price-duration">year</span></div>
                </div>
                <!--/.prices -->
                <h4 class="card-title mt-2">Corporate Plan</h4>
                <ul class="icon-list bullet-bg bullet-soft-primary mt-8 mb-9">
                  <li><i class="uil uil-check"></i><span><strong>20</strong> Projects </span></li>
                  <li><i class="uil uil-check"></i><span><strong>300K</strong> API Access </span></li>
                  <li><i class="uil uil-check"></i><span><strong>500MB</strong> Storage </span></li>
                  <li><i class="uil uil-check"></i><span> Weekly <strong>Reports</strong></span></li>
                  <li><i class="uil uil-check"></i><span> 7/24 <strong>Support</strong></span></li>
                </ul>
                <a href="#" class="btn btn-primary rounded-pill">Choose Plan</a>
              </div>
              <!--/.card-body -->
            </div>
            <!--/.pricing -->
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

Our Pricing

We offer great prices, premium products and quality service for your business.

Monthly

Yearly

Basic Plan

$9 month

$99 year

1 Project
100K API Access
100MB Storage
Weekly Reports
7/24 Support

Choose Plan

Premium Plan

$19 month

$199 year

5 Projects
100K API Access
200MB Storage
Weekly Reports
7/24 Support

Choose Plan

Corporate Plan

$49 month

$499 year

20 Projects
300K API Access
500MB Storage
Weekly Reports
7/24 Support

Choose Plan

View example's code

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row">
      <div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center">
        <h2 class="fs-15 text-uppercase text-muted mb-3">Our Pricing</h2>
        <h3 class="display-4 mb-15 mb-md-6 px-lg-10">We offer great prices, premium products and quality service for your business.</h3>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
    <div class="pricing-wrapper position-relative">
      <div class="shape bg-dot primary rellax w-16 h-18" data-rellax-speed="1" style="top: 2rem; right: -2.4rem;"></div>
      <div class="shape rounded-circle bg-line red rellax w-18 h-18 d-none d-lg-block" data-rellax-speed="1" style="bottom: 0.5rem; left: -2.5rem;"></div>
      <div class="pricing-switcher-wrapper switcher">
        <p class="mb-0 pe-3">Monthly</p>
        <div class="pricing-switchers">
          <div class="pricing-switcher pricing-switcher-active"></div>
          <div class="pricing-switcher"></div>
          <div class="switcher-button bg-primary"></div>
        </div>
        <p class="mb-0 ps-3">Yearly</p>
      </div>
      <div class="row gy-6 mt-3 mt-md-5">
        <div class="col-md-6 col-lg-4">
          <div class="pricing card text-center">
            <div class="card-body">
              <img src="./assets/img/icons/shopping-basket.svg" class="svg-inject icon-svg icon-svg-md text-primary mb-3" alt="" />
              <h4 class="card-title">Basic Plan</h4>
              <div class="prices text-dark">
                <div class="price price-show"><span class="price-currency">$</span><span class="price-value">9</span> <span class="price-duration">month</span></div>
                <div class="price price-hide price-hidden"><span class="price-currency">$</span><span class="price-value">99</span> <span class="price-duration">year</span></div>
              </div>
              <!--/.prices -->
              <ul class="icon-list bullet-bg bullet-soft-primary mt-8 mb-9 text-start">
                <li><i class="uil uil-check"></i><span><strong>1</strong> Project </span></li>
                <li><i class="uil uil-check"></i><span><strong>100K</strong> API Access </span></li>
                <li><i class="uil uil-check"></i><span><strong>100MB</strong> Storage </span></li>
                <li><i class="uil uil-times bullet-soft-red"></i><span> Weekly <strong>Reports</strong> </span></li>
                <li><i class="uil uil-times bullet-soft-red"></i><span> 7/24 <strong>Support</strong></span></li>
              </ul>
              <a href="#" class="btn btn-primary rounded-pill">Choose Plan</a>
            </div>
            <!--/.card-body -->
          </div>
          <!--/.pricing -->
        </div>
        <!--/column -->
        <div class="col-md-6 col-lg-4 popular">
          <div class="pricing card text-center">
            <div class="card-body">
              <img src="./assets/img/icons/home.svg" class="svg-inject icon-svg icon-svg-md text-primary mb-3" alt="" />
              <h4 class="card-title">Premium Plan</h4>
              <div class="prices text-dark">
                <div class="price price-show"><span class="price-currency">$</span><span class="price-value">19</span> <span class="price-duration">month</span></div>
                <div class="price price-hide price-hidden"><span class="price-currency">$</span><span class="price-value">199</span> <span class="price-duration">year</span></div>
              </div>
              <!--/.prices -->
              <ul class="icon-list bullet-bg bullet-soft-primary mt-8 mb-9 text-start">
                <li><i class="uil uil-check"></i><span><strong>5</strong> Projects </span></li>
                <li><i class="uil uil-check"></i><span><strong>100K</strong> API Access </span></li>
                <li><i class="uil uil-check"></i><span><strong>200MB</strong> Storage </span></li>
                <li><i class="uil uil-check"></i><span> Weekly <strong>Reports</strong></span></li>
                <li><i class="uil uil-times bullet-soft-red"></i><span> 7/24 <strong>Support</strong></span></li>
              </ul>
              <a href="#" class="btn btn-primary rounded-pill">Choose Plan</a>
            </div>
            <!--/.card-body -->
          </div>
          <!--/.pricing -->
        </div>
        <!--/column -->
        <div class="col-md-6 offset-md-3 col-lg-4 offset-lg-0">
          <div class="pricing card text-center">
            <div class="card-body">
              <img src="./assets/img/icons/briefcase-2.svg" class="svg-inject icon-svg icon-svg-md text-primary mb-3" alt="" />
              <h4 class="card-title">Corporate Plan</h4>
              <div class="prices text-dark">
                <div class="price price-show"><span class="price-currency">$</span><span class="price-value">49</span> <span class="price-duration">month</span></div>
                <div class="price price-hide price-hidden"><span class="price-currency">$</span><span class="price-value">499</span> <span class="price-duration">year</span></div>
              </div>
              <!--/.prices -->
              <ul class="icon-list bullet-bg bullet-soft-primary mt-8 mb-9 text-start">
                <li><i class="uil uil-check"></i><span><strong>20</strong> Projects </span></li>
                <li><i class="uil uil-check"></i><span><strong>300K</strong> API Access </span></li>
                <li><i class="uil uil-check"></i><span><strong>500MB</strong> Storage </span></li>
                <li><i class="uil uil-check"></i><span> Weekly <strong>Reports</strong></span></li>
                <li><i class="uil uil-check"></i><span> 7/24 <strong>Support</strong></span></li>
              </ul>
              <a href="#" class="btn btn-primary rounded-pill">Choose Plan</a>
            </div>
            <!--/.card-body -->
          </div>
          <!--/.pricing -->
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
    </div>
    <!--/.pricing-wrapper -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

Our Pricing

Monthly

Yearly (Save 30%)

Basic Plan

$9 month

$99 year

1 Project
100K API Access
100MB Storage
Weekly Reports
7/24 Support

Choose Plan

Premium Plan

$19 month

$199 year

5 Projects
100K API Access
200MB Storage
Weekly Reports
7/24 Support

Choose Plan

Corporate Plan

$29 month

$299 year

20 Projects
300K API Access
500MB Storage
Weekly Reports
7/24 Support

Choose Plan

Community Plan

$49 month

$499 year

90 Projects
900K API Access
900MB Storage
Weekly Reports
7/24 Support

Choose Plan

View example's code

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <h2 class="display-5 mb-7 text-center">Our Pricing</h2>
    <div class="pricing-wrapper">
      <div class="pricing-switcher-wrapper switcher">
        <p class="mb-0 pe-3">Monthly</p>
        <div class="pricing-switchers">
          <div class="pricing-switcher pricing-switcher-active"></div>
          <div class="pricing-switcher"></div>
          <div class="switcher-button bg-primary"></div>
        </div>
        <p class="mb-0 ps-3">Yearly <span class="text-red">(Save 30%)</span></p>
      </div>
      <div class="row gx-0 gy-6 mt-2">
        <div class="col-md-6 col-lg-3">
          <div class="pricing card shadow-none">
            <div class="card-body">
              <div class="icon btn btn-circle btn-lg btn-soft-primary disabled"> <i class="uil uil-cart"></i> </div>
              <h4 class="card-title">Basic Plan</h4>
              <div class="prices text-dark">
                <div class="price price-show"><span class="price-currency">$</span><span class="price-value">9</span> <span class="price-duration">month</span></div>
                <div class="price price-hide price-hidden"><span class="price-currency">$</span><span class="price-value">99</span> <span class="price-duration">year</span></div>
              </div>
              <!--/.prices -->
              <ul class="icon-list bullet-bg bullet-soft-primary mt-8 mb-9">
                <li><i class="uil uil-check"></i><span><strong>1</strong> Project </span></li>
                <li><i class="uil uil-check"></i><span><strong>100K</strong> API Access </span></li>
                <li><i class="uil uil-check"></i><span><strong>100MB</strong> Storage </span></li>
                <li><i class="uil uil-times bullet-soft-red"></i><span> Weekly <strong>Reports</strong> </span></li>
                <li><i class="uil uil-times bullet-soft-red"></i><span> 7/24 <strong>Support</strong></span></li>
              </ul>
              <a href="#" class="btn btn-soft-primary rounded-pill">Choose Plan</a>
            </div>
            <!--/.card-body -->
          </div>
          <!--/.pricing -->
        </div>
        <!--/column -->
        <div class="col-md-6 col-lg-3">
          <div class="pricing card shadow-none">
            <div class="card-body">
              <div class="icon btn btn-circle btn-lg btn-soft-primary disabled"> <i class="uil uil-shopping-cart-alt"></i> </div>
              <h4 class="card-title">Premium Plan</h4>
              <div class="prices text-dark">
                <div class="price price-show"><span class="price-currency">$</span><span class="price-value">19</span> <span class="price-duration">month</span></div>
                <div class="price price-hide price-hidden"><span class="price-currency">$</span><span class="price-value">199</span> <span class="price-duration">year</span></div>
              </div>
              <!--/.prices -->
              <ul class="icon-list bullet-bg bullet-soft-primary mt-8 mb-9">
                <li><i class="uil uil-check"></i><span><strong>5</strong> Projects </span></li>
                <li><i class="uil uil-check"></i><span><strong>100K</strong> API Access </span></li>
                <li><i class="uil uil-check"></i><span><strong>200MB</strong> Storage </span></li>
                <li><i class="uil uil-check"></i><span> Weekly <strong>Reports</strong></span></li>
                <li><i class="uil uil-times bullet-soft-red"></i><span> 7/24 <strong>Support</strong></span></li>
              </ul>
              <a href="#" class="btn btn-soft-primary rounded-pill">Choose Plan</a>
            </div>
            <!--/.card-body -->
          </div>
          <!--/.pricing -->
        </div>
        <!--/column -->
        <div class="col-md-6 col-lg-3">
          <div class="pricing card bg-soft-primary">
            <div class="card-body">
              <div class="icon btn btn-circle btn-lg btn-primary disabled"> <i class="uil uil-store"></i> </div>
              <h4 class="card-title">Corporate Plan</h4>
              <div class="prices text-dark">
                <div class="price price-show"><span class="price-currency">$</span><span class="price-value">29</span> <span class="price-duration">month</span></div>
                <div class="price price-hide price-hidden"><span class="price-currency">$</span><span class="price-value">299</span> <span class="price-duration">year</span></div>
              </div>
              <!--/.prices -->
              <ul class="icon-list bullet-bg bullet-primary mt-8 mb-9">
                <li><i class="uil uil-check"></i><span><strong>20</strong> Projects </span></li>
                <li><i class="uil uil-check"></i><span><strong>300K</strong> API Access </span></li>
                <li><i class="uil uil-check"></i><span><strong>500MB</strong> Storage </span></li>
                <li><i class="uil uil-check"></i><span> Weekly <strong>Reports</strong></span></li>
                <li><i class="uil uil-check"></i><span> 7/24 <strong>Support</strong></span></li>
              </ul>
              <a href="#" class="btn btn-primary rounded-pill">Choose Plan</a>
            </div>
            <!--/.card-body -->
          </div>
          <!--/.pricing -->
        </div>
        <!--/column -->
        <div class="col-md-6 col-lg-3">
          <div class="pricing card shadow-none">
            <div class="card-body">
              <div class="icon btn btn-circle btn-lg btn-soft-primary disabled"> <i class="uil uil-store-alt"></i> </div>
              <h4 class="card-title">Community Plan</h4>
              <div class="prices text-dark">
                <div class="price price-show"><span class="price-currency">$</span><span class="price-value">49</span> <span class="price-duration">month</span></div>
                <div class="price price-hide price-hidden"><span class="price-currency">$</span><span class="price-value">499</span> <span class="price-duration">year</span></div>
              </div>
              <!--/.prices -->
              <ul class="icon-list bullet-bg bullet-soft-primary mt-8 mb-9">
                <li><i class="uil uil-check"></i><span><strong>90</strong> Projects </span></li>
                <li><i class="uil uil-check"></i><span><strong>900K</strong> API Access </span></li>
                <li><i class="uil uil-check"></i><span><strong>900MB</strong> Storage </span></li>
                <li><i class="uil uil-check"></i><span> Weekly <strong>Reports</strong> </span></li>
                <li><i class="uil uil-check"></i><span> 7/24 <strong>Support</strong></span></li>
              </ul>
              <a href="#" class="btn btn-soft-primary rounded-pill">Choose Plan</a>
            </div>
            <!--/.card-body -->
          </div>
          <!--/.pricing -->
        </div>
      </div>
      <!--/.row -->
    </div>
    <!--/.pricing-wrapper -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

Our Pricing

We offer great prices, premium and quality products for your business.

Enjoy a free 30-day trial and experience the full service. No credit card required!

See All Prices

	Basic Plan $9 / Monthly	Premium Plan $19 / Monthly	Corporate Plan $29 / Monthly	Business Plan $49 / Monthly
Project	1	5	20	90
API Access	100K	200K	300K	900K
Storage	100MB	200MB	500MB	900MB
Weekly Reports	-
24/7 Support	-	-
	Choose Plan	Choose Plan	Choose Plan	Choose Plan

View example's code

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <h2 class="display-4 mb-3">Our Pricing</h2>
    <p class="lead fs-lg">We offer <span class="underline">great prices</span>, premium and quality products for your business.</p>
    <div class="row">
      <div class="col-lg-4">
        <p>Enjoy a <a href="#" class="hover">free 30-day trial</a> and experience the full service. No credit card required!</p>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
    <a href="#" class="btn btn-primary rounded-pill mt-2">See All Prices</a>
    <div class="table-responsive">
      <table class="table table-borderless table-striped text-center">
        <thead>
          <tr>
            <th class="w-25"></th>
            <th>
              <div class="h4 mb-1">Basic Plan</div>
              <div class="fs-15 fw-normal text-secondary">$9 / Monthly</div>
            </th>
            <th>
              <div class="h4 mb-1">Premium Plan</div>
              <div class="fs-15 fw-normal text-secondary">$19 / Monthly</div>
            </th>
            <th>
              <div class="h4 mb-1">Corporate Plan</div>
              <div class="fs-15 fw-normal text-secondary">$29 / Monthly</div>
            </th>
            <th>
              <div class="h4 mb-1">Business Plan</div>
              <div class="fs-15 fw-normal text-secondary">$49 / Monthly</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="option text-start">Project</td>
            <td>1</td>
            <td>5</td>
            <td>20</td>
            <td>90</td>
          </tr>
          <tr>
            <td class="option text-start">API Access</td>
            <td>100K</td>
            <td>200K</td>
            <td>300K</td>
            <td>900K</td>
          </tr>
          <tr>
            <td class="option text-start">Storage</td>
            <td>100MB</td>
            <td>200MB</td>
            <td>500MB</td>
            <td>900MB</td>
          </tr>
          <tr>
            <td class="option text-start">Weekly Reports</td>
            <td>-</td>
            <td><i class="uil uil-check bg-pale-primary text-primary rounded-circle p-1"></i></td>
            <td><i class="uil uil-check bg-pale-primary text-primary rounded-circle p-1"></i></td>
            <td><i class="uil uil-check bg-pale-primary text-primary rounded-circle p-1"></i></td>
          </tr>
          <tr>
            <td class="option text-start">24/7 Support</td>
            <td>-</td>
            <td>-</td>
            <td><i class="uil uil-check bg-pale-primary text-primary rounded-circle p-1"></i></td>
            <td><i class="uil uil-check bg-pale-primary text-primary rounded-circle p-1"></i></td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th class="w-25"></th>
            <th><a href="#" class="btn btn-soft-primary rounded-pill mt-1">Choose Plan</a></th>
            <th><a href="#" class="btn btn-soft-primary rounded-pill mt-1">Choose Plan</a></th>
            <th><a href="#" class="btn btn-soft-primary rounded-pill mt-1">Choose Plan</a></th>
            <th><a href="#" class="btn btn-soft-primary rounded-pill mt-1">Choose Plan</a></th>
          </tr>
        </tfoot>
      </table>
    </div>
    <!-- /.table-responsive -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

Usage

Styleguide

Elements

Blocks - Pricing

Filter Blocks:

Our Pricing

Premium Plan

Corporate Plan

Our Pricing

We offer great prices, premium products and quality service for your business.

Basic Plan

Premium Plan

Corporate Plan

Our Pricing

Basic Plan

Premium Plan

Corporate Plan

Community Plan

Our Pricing

Think unique and be creative. Make a difference with Sandbox.