Foundation Pricing Tables

foundation-pricing-tables
Pricing Tables are no longer available in Foundation 6

If you’re making a rockin’ marketing site for a subscription-based product, you are likely in need of a pricing table. These fill 100% of their container and are made from a simple unordered list.
Foundation

Just as the name implies, Foundation Pricing Tables can be implemented when a site offers different products or services with differing levels of pricing. Depending on what the visitor is looking for, they can use the information contained in the tables to make a decision that will best suit their needs. Normally we see pricing tables on website’s that offer different hosting packages or different levels of user access to content.

Foundation Pricing Tables Example

If you are going to offer different products or services on your site, you can easily add Foundation Pricing Tables to your content and make it super easy for your visitors to make the best choice on what they need.

To add Foundation Pricing Tables to any post/page on your site, make sure to click on the “text” tab, then add the following where you want it to appear (modify to suit your needs):

<ul class="pricing-table no-bullet text-center">
 	<li class="title">Standard</li>
 	<li class="price">$99.99</li>
 	<li class="description">An awesome description</li>
 	<li>1 Database</li>
 	<li>5GB Storage</li>
 	<li>20 Users</li>
 	<li><a class="button" href="#">Buy Now</a></li>
</ul>

Once you have added the above to your content, this is what you have:

  • Standard
  • $99.99
  • An awesome description
  • 1 Database
  • 5GB Storage
  • 20 Users
  • Buy Now

You will notice that the Foundation Pricing Tables will fill the content area. If you are going to have multiple tables, you can use the Foundation Block Grid to add multiple tables. Again click the “text” tab in the editor and add the following:

<ul class="large-block-grid-4">
    <li>
        <ul class="pricing-table">
            <li class="title">Standard</li>
            <li class="price">$99.99</li>
            <li class="description">An awesome description</li>
            <li class="bullet-item">1 Database</li>
            <li class="bullet-item">5GB Storage</li>
            <li class="bullet-item">20 Users</li>
            <li class="cta-button"><a class="tiny button" href="#">Buy Now</a></li>
        </ul>
    </li>
    <li>
        <ul class="pricing-table">
            <li class="title">Standard</li>
            <li class="price">$99.99</li>
            <li class="description">An awesome description</li>
            <li class="bullet-item">1 Database</li>
            <li class="bullet-item">5GB Storage</li>
            <li class="bullet-item">20 Users</li>
            <li class="cta-button"><a class="tiny button" href="#">Buy Now</a></li>
        </ul>
    </li>
    <li>
        <ul class="pricing-table">
            <li class="title">Standard</li>
            <li class="price">$99.99</li>
            <li class="description">An awesome description</li>
            <li class="bullet-item">1 Database</li>
            <li class="bullet-item">5GB Storage</li>
            <li class="bullet-item">20 Users</li>
            <li class="cta-button"><a class="tiny button" href="#">Buy Now</a></li>
        </ul>
    </li>
    <li>
        <ul class="pricing-table">
            <li class="title">Standard</li>
            <li class="price">$99.99</li>
            <li class="description">An awesome description</li>
            <li class="bullet-item">1 Database</li>
            <li class="bullet-item">5GB Storage</li>
            <li class="bullet-item">20 Users</li>
            <li class="cta-button"><a class="tiny button" href="#">Buy Now</a></li>
        </ul>
    </li>
</ul>

The above example uses Foundation Pricing Tables with the large-block-grid-4

    • Standard
    • $29.99
    • An awesome description
    • 1 Database
    • 5GB Storage
    • 1 User
    • Buy Now
    • Standard
    • $59.99
    • An awesome description
    • 3 Database
    • 10GB Storage
    • 3 Users
    • Buy Now
    • Standard
    • $79.99
    • An awesome description
    • 5 Database
    • 15GB Storage
    • 5 Users
    • Buy Now
    • Standard
    • $99.99
    • An awesome description
    • Unlimited Database
    • Unlimited Storage
    • Unlimited Users
    • Buy Now

So as you can see adding Foundation Pricing Tables to your content is a very easy process and can help your visitors tremendously. What are your thoughts on using pricing tables on a site?

Read more Foundation Docs: Pricing Tables

Leave a Comment