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.
The HTML stays exactly the same. Notice we are not using a
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.
@import 'components/pricingtable'; to the list of import statements.
Use the modified Scss below.
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.