Pricing plans

by jorgeluis

HTML

<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<div class="columns">

  <div class="column is-one-third">
    <div class="box billing-plan-card">
      <header class="card-header">
        <h2>Small Organizations</h2>
      </header>
      <div class="is-flex is-flex-direction-column">
        <h2 class="is-size-4 m-b-1">
          Connect with the Apple Consulting Network
        </h2>
        <h2 class="is-size-4 m-b-1">
          Addigy Certified Experts
        </h2>
        <p>Monthly Pricing</p>
        <p>All Addigy Features</p>
      </div>
      
      <footer class="card-footer">
        <a href="#" class="button is-primary">Find an expert
        </a>
      </footer>
      </div>
    </div>
  </div>
  
  
  <div class="column is-one-third">
    <div class="box billing-plan-card">
      <div class="p-1">
        <h2 class="is-size-2">Get Started</h2>
        <h3 class="billing-plan-price">$3600</h3>
        <p class="is-small has-text-grey">
          minimum annual subscription
        </p>
        <p>All Addigy Features</p>
        <button class="button is-primary">Contact</button>
      </div>
    </div>
  </div>
  <div class="column is-one-third">
    <div class="box billing-plan-card">
      <div class="p-1">
        <h2 class="is-size-2">Get a custom quote</h2>
        <h3 class="billing-plan-price">&nbsp;&nbsp;</h3>
        <p>All Addigy Features</p>
        <p>Demo and Onboarding</p>
        <button class="button is-primary">Contact</button>
      </div>
    </div>
  </div>
</div>

SCSS

.billing-plan-card {
  height: 100%;
  border-top: 11px solid #0998BE;
  text-align: center;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  
  .is-card-footer {
    padding: 1rem;
  }
}
.billing-plan-price {
  font-size: 4em;
}

.is-flex-direction-column {
  flex-direction: column;
}

.is-flex-align-center {
  align-items: center
}

.is-flex-justify-center {
  justify-content: center;
}