The foundation pricing table can admittedly be a bit boring. Styling each of the individual elements is easy. 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/

}