Styling the Foundation Pricing Tables


The foundation pricing table can easily be styled. Lets find out how to do it with some simple CSS

Here are the CSS selectors that you will be using. I have put a few example styles in to get you started. The main things that you are likely to be changing are the background color, the font size and the text color. You can of course add any other valid statements that you require between the curly braces of each selector, remembering to terminate each line with a semi-colon.

We will also need to add !important to the end of each statement in order to over ride the Foundation for RapidWeaver theme styles.

.pricing-table>.title{ background:#ccccff!important; font-size:2rem!important }

.pricing-table>.price{ background:#ccaaff!important; font-size:3rem!important }

.pricing-table>.description{ font-size:1.7rem!important; }

.pricing-table>.bullet-item{ /Additional Info/ font-size:1.5rem!important }

.pricing-table>.cta-button{ /Stacks dropone/ }

Now go forth and make your websites great!

Deal of the Week

Latest Updates

Latest Live Stream

Behind the Scenes: Designing the Total CMS 3 Uploader

Latest Design

Subscribe

For product releases and updates by email, please subscribe below.

© 2025 Weavers Space | Terms of Service | Privacy Policy

HelpShelfHelpShelf