Pricing Tables

If you're making a rockin' marketing site for a subscription-based product, you are likely in need of a pricing table. These fill 100% of their container and are made from a simple unordered list.

  • Standard
  • $99.99
  • An awesome description
  • 1 Database
  • 5GB Storage
  • 20 Users
  • Buy Now

Basic

Building pricing tables with our predefined classes is quite easy. You'll start with an <ul> and add a class of .pricing-table to it. From there, you just need to add list items inside that represent each piece of the table.

Available HTML class options for the list items:

  • <li class="title">: Creates the styles for a title.
  • <li class="price">: Add a price that stands out.
  • <li class="description">: If you need to describe the plan, add this.
  • <li class="bullet-item">: To call out features, use this list item.
  • <li class="cta-button">: To add a button inside a list item, use this.
  • Standard
  • $99.99
  • An awesome description
  • 1 Database
  • 5GB Storage
  • 20 Users
  • Buy Now
<ul class="pricing-table">
  <li class="title">Standard</li>
  <li class="price">$99.99</li>
  <li class="description">An awesome description</li>
  <li class="bullet-item">1 Database</li>
  <li class="bullet-item">5GB Storage</li>
  <li class="bullet-item">20 Users</li>
  <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
</ul>