Documentation

This site gathers documentation of my GitHub projects

Pricing table

Display a pricing table easily.

Colors Yes
Sizes 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>

Orientation

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

Starter
20GB Storage
100 Domains
-
-
Startups
20GB Storage
25 Domains
1TB Bandwidth
-
Growing Team
200GB Storage
50 Domains
1TB Bandwidth
100 Email Boxes
Enterprise
2TB Storage
100 Domains
1TB Bandwidth
1000 Email Boxes
<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

This page is designed with Bulma CSS framework.