Foundation Price List

Pricing tables can be used to showcase enterprise 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>

Try it Yourself »

Example analysis

ul.pricing-table- Define Price List
li.title- Define product title (black background)
li.price- Define price (gray background, large font item)
li.description- Define product description (if needed)
li.bullet-item- Define product features
li.ca-button- Button text (e.g., "Buy", "Join", "Sign Up", etc.)

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

Pricing Table Grid

The following example shows the prices of three enterprise products (the 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>

Try it Yourself »

other extensions