Documentation

Everything you need to start with Bulma-extensions.

Pricing table

Display a pricing table easily.

View on Github
NPM Package 0.2.0
Colors Yes
Sizes No
Javascript No
Variables Yes
Starter
$20/month
20GB Storage
100 Domains
-
-
Startups
$40/month
20GB Storage
25 Domains
1TB Bandwidth
-
Growing Team
$60/month
200GB Storage
50 Domains
1TB Bandwidth
100 Email Boxes
Enterprise
$100/month
2TB Storage
100 Domains
1TB Bandwidth
1000 Email Boxes
<div class="pricing-table">
  <div class="pricing-plan">
    <div class="plan-header">Starter</div>
    <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">$</span>20</span>/month</div>
    <div class="plan-items">
      <div class="plan-item">20GB Storage</div>
      <div class="plan-item">100 Domains</div>
      <div class="plan-item">-</div>
      <div class="plan-item">-</div>
    </div>
    <div class="plan-footer">
      <button class="button is-fullwidth" disabled="disabled">Current plan</button>
    </div>
  </div>

  <div class="pricing-plan is-warning">
    <div class="plan-header">Startups</div>
    <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">$</span>40</span>/month</div>
    <div class="plan-items">
      <div class="plan-item">20GB Storage</div>
      <div class="plan-item">25 Domains</div>
      <div class="plan-item">1TB Bandwidth</div>
      <div class="plan-item">-</div>
    </div>
    <div class="plan-footer">
      <button class="button is-fullwidth">Choose</button>
    </div>
  </div>

  <div class="pricing-plan is-active">
    <div class="plan-header">Growing Team</div>
    <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">$</span>60</span>/month</div>
    <div class="plan-items">
      <div class="plan-item">200GB Storage</div>
      <div class="plan-item">50 Domains</div>
      <div class="plan-item">1TB Bandwidth</div>
      <div class="plan-item">100 Email Boxes</div>
    </div>
    <div class="plan-footer">
      <button class="button is-fullwidth">Choose</button>
    </div>
  </div>

  <div class="pricing-plan is-danger">
    <div class="plan-header">Enterprise</div>
    <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">$</span>100</span>/month</div>
    <div class="plan-items">
      <div class="plan-item">2TB Storage</div>
      <div class="plan-item">100 Domains</div>
      <div class="plan-item">1TB Bandwidth</div>
      <div class="plan-item">1000 Email Boxes</div>
    </div>
    <div class="plan-footer">
      <button class="button is-fullwidth">Choose</button>
    </div>
  </div>
</div>

Comparative

You can choose to display the pricing tables as a comparative table by adding the .is-comparative modifier to the pricing-table element.

Features
 
Storage
Domains
Bandwidth
Email Boxes
Starter
$20/month
20GB
100
-
-
Startups
$40/month
20GB
25
1TB
-
Growing Team
$60/month
200GB
50
1TB
100
Enterprise
$100/month
2TB
100
1TB
1000
<div class="pricing-table is-comparative">
  <div class="pricing-plan is-features">
    <div class="plan-header">Features</div>
    <div class="plan-price"><span class="plan-price-amount">&nbsp;</span></div>
    <div class="plan-items">
      <div class="plan-item">Storage</div>
      <div class="plan-item">Domains</div>
      <div class="plan-item">Bandwidth</div>
      <div class="plan-item">Email Boxes</div>
    </div>
    <div class="plan-footer">

    </div>
  </div>
  <div class="pricing-plan">
    <div class="plan-header">Starter</div>
    <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">$</span>20</span>/month</div>
    <div class="plan-items">
      <div class="plan-item" data-feature="Storage">20GB</div>
      <div class="plan-item" data-feature="Domains">100</div>
      <div class="plan-item" data-feature="Bandwidth">-</div>
      <div class="plan-item" data-feature="Email Boxes">-</div>
    </div>
    <div class="plan-footer">
      <button class="button is-fullwidth" disabled="disabled">Current plan</button>
    </div>
  </div>

  <div class="pricing-plan is-warning">
    <div class="plan-header">Startups</div>
    <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">$</span>40</span>/month</div>
    <div class="plan-items">
      <div class="plan-item" data-feature="Storage">20GB</div>
      <div class="plan-item" data-feature="Domains">25</div>
      <div class="plan-item" data-feature="Bandwidth">1TB</div>
      <div class="plan-item" data-feature="Email Boxes">-</div>
    </div>
    <div class="plan-footer">
      <button class="button is-fullwidth">Choose</button>
    </div>
  </div>

  <div class="pricing-plan is-active">
    <div class="plan-header">Growing Team</div>
    <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">$</span>60</span>/month</div>
    <div class="plan-items">
      <div class="plan-item" data-feature="Storage">200GB</div>
      <div class="plan-item" data-feature="Domains">50</div>
      <div class="plan-item" data-feature="Bandwidth">1TB</div>
      <div class="plan-item" data-feature="Email Boxes">100</div>
    </div>
    <div class="plan-footer">
      <button class="button is-fullwidth">Choose</button>
    </div>
  </div>

  <div class="pricing-plan is-danger">
    <div class="plan-header">Enterprise</div>
    <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">$</span>100</span>/month</div>
    <div class="plan-items">
      <div class="plan-item" data-feature="Storage">2TB</div>
      <div class="plan-item" data-feature="Domains">100</div>
      <div class="plan-item" data-feature="Bandwidth">1TB</div>
      <div class="plan-item" data-feature="Email Boxes">1000</div>
    </div>
    <div class="plan-footer">
      <button class="button is-fullwidth">Choose</button>
    </div>
  </div>
</div>

Orientation

You can choose to display the pricing tables horizontally just by adding the .is-horizontal modifier to the pricing-table element.

Starter
20GB Storage
100 Domains
-
-
$20/month
Startups
20GB Storage
25 Domains
1TB Bandwidth
-
$40/month
Growing Team
200GB Storage
50 Domains
1TB Bandwidth
100 Email Boxes
$60/month
Enterprise
2TB Storage
100 Domains
1TB Bandwidth
1000 Email Boxes
$100/month
<div class="pricing-table is-horizontal">
  <div class="pricing-plan">
    <div class="plan-header">Starter</div>
    <div class="plan-items">
      <div class="plan-item">20GB Storage</div>
      <div class="plan-item">100 Domains</div>
      <div class="plan-item">-</div>
      <div class="plan-item">-</div>
    </div>
    <div class="plan-footer">
      <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">$</span>20</span>/month</div>
      <button class="button is-fullwidth" disabled="disabled">Current plan</button>
    </div>
  </div>

  <div class="pricing-plan is-warning">
    <div class="plan-header">Startups</div>
    <div class="plan-items">
      <div class="plan-item">20GB Storage</div>
      <div class="plan-item">25 Domains</div>
      <div class="plan-item">1TB Bandwidth</div>
      <div class="plan-item">-</div>
    </div>
    <div class="plan-footer">
      <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">$</span>40</span>/month</div>
      <button class="button is-fullwidth">Choose</button>
    </div>
  </div>

  <div class="pricing-plan is-active">
    <div class="plan-header">Growing Team</div>
    <div class="plan-items">
      <div class="plan-item">200GB Storage</div>
      <div class="plan-item">50 Domains</div>
      <div class="plan-item">1TB Bandwidth</div>
      <div class="plan-item">100 Email Boxes</div>
    </div>
    <div class="plan-footer">
      <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">$</span>60</span>/month</div>
      <button class="button is-fullwidth">Choose</button>
    </div>
  </div>

  <div class="pricing-plan is-danger">
    <div class="plan-header">Enterprise</div>
    <div class="plan-items">
      <div class="plan-item">2TB Storage</div>
      <div class="plan-item">100 Domains</div>
      <div class="plan-item">1TB Bandwidth</div>
      <div class="plan-item">1000 Email Boxes</div>
    </div>
    <div class="plan-footer">
      <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">$</span>100</span>/month</div>
      <button class="button is-fullwidth">Choose</button>
    </div>
  </div>
</div>

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$pricing-plan-border .1rem solid $white-ter
$pricing-plan-border-radius $radius
$pricing-plan-active-shadow 0 8px 12px 0 rgba($grey, 0.2)
$pricing-plan-active-transform scale(1.05)
$pricing-header-background $white
$pricing-item-background $white-ter
$pricing-item-border .1rem solid white
$pricing-item-color $grey
$pricing-price-background $white