Are you ready to make money with your website? Do you have something to sell? Foundation has a pricing table component to help you with that.
Foundation sets a unique style for each of the following classes: title
, price
, description
, bullet-item
, and cta-button
(call to action).
The setup is quite simple. Add the pricing-table
class to an outer container for the pricing table itself with inner containers for each attribute. The presumption is that you'll use an unordered list, but that isn't necessary. Nested <div>
elements work just fine.
You still need to include numeric formatting in your price. You also need to wrap your cta-button
in an <a>
element in order to provide a link when a user clicks on it. You can make the entire cta-button
container clickable by wrapping it in an <a>
element. Or you could make your cta-button
an actual button by adding the button
class.
The following code incorporates these things:
<ul class="pricing-table"> <li class...