Foundation Pricing Table

A pricing table can be used to display company products:

Example

<ul class="pricing-table">  <li class="title">Basic</li>  
    <li class="price">$19.99</li>  <li class="description">Great 
    for small business</li>  <li class="bullet-item">24/7 
    Support</li>  
    <li class="bullet-item">15GB Storage</li>  <li 
    class="bullet-item">1GB Bandwidth</li>  <li class="cta-button"><a 
    class="button" href="#">Buy</a></li></ul>

Example Analysis

• ul.pricing-table - Defines the pricing table
• li.title - Defines the product title (black background)
• li.price - Defines the price (large gray background item)
• li.description - Defines the product description (if needed)
• li.bullet-item - Defines the product features
• li.ca-button - Button text (such as "Buy", "Join", "Sign Up", etc.)

Note: The table will fill 100% of the container's width, all items have borders and are centered.

Pricing Table Grid

The following example shows the prices of three company products (three items are equally divided in width):

Example

<div class="row">  <div class="medium-4 columns">    
    <ul class="pricing-table">      <li 
    class="title">Basic</li>      ...    
    </ul>  </div>  <div class="medium-4 columns">    
    <ul class="pricing-table">      <li 
    class="title">Pro</li>      ...    
    </ul>  </div>  <div class="medium-4 columns">    
    <ul class="pricing-table">      <li 
    class="title">Premium</li>      ...    
    </ul>  </div></div>