@@include('_navbar.html', { "classList": "center-nav transparent navbar-light", "otherClassList": "w-100 d-flex ms-auto", "otherLanguageSelect": true, "otherBtn": true, "otherBtnClassList": "btn-sm btn-primary rounded-pill", "otherBtnText": "Contact", "otherBtnLink": "@@webRoot/contact.html" })

Blocks - Pricing

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

@@include('docs/_blocks-menu.html', {"page": "blocks-pricing"})

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 mo

$199 yr

Premium Plan

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

Choose Plan

$49 mo

$499 yr

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 justify-content-start"><span class="price-currency">$</span><span class="price-value">19</span> <span class="price-duration">mo</span></div>
                  <div class="price price-hide price-hidden justify-content-start"><span class="price-currency">$</span><span class="price-value">199</span> <span class="price-duration">yr</span></div>
                </div>
                <!--/.prices -->
                <h4 class="card-title mt-2">Premium Plan</h4>
                <ul class="icon-list bullet-bg bullet-soft-primary mt-7 mb-8">
                  <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 justify-content-start"><span class="price-currency">$</span><span class="price-value">49</span> <span class="price-duration">mo</span></div>
                  <div class="price price-hide price-hidden justify-content-start"><span class="price-currency">$</span><span class="price-value">499</span> <span class="price-duration">yr</span></div>
                </div>
                <!--/.prices -->
                <h4 class="card-title mt-2">Corporate Plan</h4>
                <ul class="icon-list bullet-bg bullet-soft-primary mt-7 mb-8">
                  <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 mo

$99 yr

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

Choose Plan

Premium Plan

$19 mo

$199 yr

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

Choose Plan

Corporate Plan

$49 mo

$499 yr

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/lineal/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">mo</span></div>
                <div class="price price-hide price-hidden"><span class="price-currency">$</span><span class="price-value">99</span> <span class="price-duration">yr</span></div>
              </div>
              <!--/.prices -->
              <ul class="icon-list bullet-bg bullet-soft-primary mt-7 mb-8 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/lineal/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">mo</span></div>
                <div class="price price-hide price-hidden"><span class="price-currency">$</span><span class="price-value">199</span> <span class="price-duration">yr</span></div>
              </div>
              <!--/.prices -->
              <ul class="icon-list bullet-bg bullet-soft-primary mt-7 mb-8 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/lineal/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">mo</span></div>
                <div class="price price-hide price-hidden"><span class="price-currency">$</span><span class="price-value">499</span> <span class="price-duration">yr</span></div>
              </div>
              <!--/.prices -->
              <ul class="icon-list bullet-bg bullet-soft-primary mt-7 mb-8 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 mo

$99 yr

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

Choose Plan

Premium Plan

$19 mo

$199 yr

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

Choose Plan

Corporate Plan

$29 mo

$299 yr

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

Choose Plan

Community Plan

$49 mo

$499 yr

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 pe-none"> <i class="uil uil-shopping-bag"></i> </div>
              <h4 class="card-title">Basic Plan</h4>
              <div class="prices text-dark">
                <div class="price price-show justify-content-start"><span class="price-currency">$</span><span class="price-value">9</span> <span class="price-duration">mo</span></div>
                <div class="price price-hide price-hidden justify-content-start"><span class="price-currency">$</span><span class="price-value">99</span> <span class="price-duration">yr</span></div>
              </div>
              <!--/.prices -->
              <ul class="icon-list bullet-bg bullet-soft-primary mt-7 mb-8">
                <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 pe-none"> <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 justify-content-start"><span class="price-currency">$</span><span class="price-value">19</span> <span class="price-duration">mo</span></div>
                <div class="price price-hide price-hidden justify-content-start"><span class="price-currency">$</span><span class="price-value">199</span> <span class="price-duration">yr</span></div>
              </div>
              <!--/.prices -->
              <ul class="icon-list bullet-bg bullet-soft-primary mt-7 mb-8">
                <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 pe-none"> <i class="uil uil-store"></i> </div>
              <h4 class="card-title">Corporate Plan</h4>
              <div class="prices text-dark">
                <div class="price price-show justify-content-start"><span class="price-currency">$</span><span class="price-value">29</span> <span class="price-duration">mo</span></div>
                <div class="price price-hide price-hidden justify-content-start"><span class="price-currency">$</span><span class="price-value">299</span> <span class="price-duration">yr</span></div>
              </div>
              <!--/.prices -->
              <ul class="icon-list bullet-bg bullet-primary mt-7 mb-8">
                <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 pe-none"> <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 justify-content-start"><span class="price-currency">$</span><span class="price-value">49</span> <span class="price-duration">mo</span></div>
                <div class="price price-hide price-hidden justify-content-start"><span class="price-currency">$</span><span class="price-value">499</span> <span class="price-duration">yr</span></div>
              </div>
              <!--/.prices -->
              <ul class="icon-list bullet-bg bullet-soft-primary mt-7 mb-8">
                <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 -->