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!