Zurb Foundation 6 Pricing Table

Zurb’s Foundation for Sites 6 no longer includes a Pricing table component. No problem. Let’s put a Pricing table in the Zurb 6 pipeline. They are great for marketing landing pages, product signups, and subscription or product comparisons. Unfortunately, I saw a few people on the interwebs indicate Zurb 6’s lack of Pricing tables a show stopper; preventing their move from Zurb 5 to Zurb 6. At the end of the day, regardless of version, Zurb Foundation is still CSS, HTML, and Javascript. And both Zurb 5 and Zurb 6 utilize Sass; although some Scss variables have either changed, were made obsolete, or flat-out no longer make sense. After utilizing the code and instructions below, you will end up with a Zurb 6 responsive Pricing table.

The End Result

I made it look exactly like a Zurb 5 Pricing table. But you can modify the colors, border, and style if you like.

alt text

Markup

The HTML stays exactly the same. Notice we are not using a <table/> tag.

<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>

CSS

If you haven’t already done so, pull down and install Zurb Foundation. If you are unsure, review the Getting Started instructions. If you are coming from Zurb 5, check out a previous post: What’s new in Zurb Foundation 6?.

Using your favorite text editor or IDE, create and/or modify the following files. I’ve been using Microsoft’s free, open source, multi-platform Visual Studio Code. It might be better than Sublime Text.

  • scss/foundation.scss

Append @import 'components/pricingtable'; to the list of import statements.

  • scss/components/_pricingtable.scss

Use the modified Scss below.

Final Thoughts

Pricing tables were missed. And I agree with Zurb’s decision to not make them part of the core framework. They are too specific and niche. But I showed you how to bring Pricing tables back. One less excuse to not transition from Zurb 5 to Zurb 6. Now get back out there and design something responsively awesome!

Disclaimer: I am a Foundation fan, user, and minor open-source contributor.