Pricing Tables

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.

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

Build With Predefined HTML Classes

There are two ways to build pricing tables in Foundation 4: with our predefined HTML or with our mixins. Building pricing tables with our predefined classes is quite easy. You'll start with an <ul> and add a class of .pricing-table to it. From there, you just need to add list items inside that represent each piece of the table.

Available HTML class options for the list items:

  • <li class="title">: Creates the styles for a title.
  • <li class="price">: Add a price that stands out.
  • <li class="description">: If you need to describe the plan, add this.
  • <li class="bullet-item">: To call out features, use this list item.
  • <li class="cta-button">: To add a button inside a list item, use this.
<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="button" href="#">Buy Now</a></li>

For these styles to come across, make sure you have the default Foundation CSS package or that you've selected pricing-tables from a custom package. These should be linked up following our default HTML page structure.

Build with a Mixin

We've included SCSS mixins used to style pricing tables so that you can code how you want to. To use the mixin, you'll need to have the extension installed or grab _variables.scss, _global.scss and _pricing-tables.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

@import "foundation/variables";
@import "foundation/components/global";
@import "foundation/components/pricing-tables";

If you are using the mixins, you may include the styles on whatever class or ID you'd like with the <ul> and the list items inside it.

<ul class="your-pricing-class">
  <li class="your-title-class">Title</li>
  <li class="your-price-class">$$$</li>
  <li class="your-desc-class">...</li>
  <li class="your-bullet-class">Bullet</li>
  <li class="your-cta-class"><a class="your-button-class" href="#">Button</a></li>
The Container Mixin

Pricing tables are built up from an unordered list. We give this container some necessary styles by using our container mixin. There are no customizable options within the mixin, but everything can be changed using the SCSS variables below.

.your-pricing-class  { @include pricing-table-container;
  .your-title-class  { @include pricing-table-title; }
  .your-price-class  { @include pricing-table-price; }
  .your-desc-class   { @include pricing-table-description; }
  .your-bullet-class { @include pricing-table-bullet; }
  .your-cta-class    { @include pricing-table-cta; }
  • Standard
  • $99.99
  • An awesome description
  • 1 Database
  • 5GB Storage
  • 20 Users
  • Buy Now
Default SCSS Variables
$include-html-pricing-classes: $include-html-classes;

/* We use this to control the border color */
$price-table-border: solid 1px #ddd;

/* We use this to control the bottom margin of the pricing table */
$price-table-margin-bottom: em-calc(20);

/* We use these to control the title styles */
$price-title-bg: #ddd;
$price-title-padding: em-calc(15 20);
$price-title-align: center;
$price-title-color: #333;
$price-title-weight: bold;
$price-title-size: em-calc(16);

/* We use these to control the price styles */
$price-money-bg: #eee;
$price-money-padding: em-calc(15 20);
$price-money-align: center;
$price-money-color: #333;
$price-money-weight: normal;
$price-money-size: em-calc(20);

/* We use these to control the description styles */
$price-bg: #fff;
$price-desc-color: #777;
$price-desc-padding: em-calc(15);
$price-desc-align: center;
$price-desc-font-size: em-calc(12);
$price-desc-weight: normal;
$price-desc-line-height: 1.4;
$price-desc-bottom-border: dotted 1px #ddd;

/* We use these to control the list item styles */
$price-item-color: #333;
$price-item-padding: em-calc(15);
$price-item-align: center;
$price-item-font-size: em-calc(14);
$price-item-weight: normal;
$price-item-bottom-border: dotted 1px #ddd;

/* We use these to control the CTA area styles */
$price-cta-bg: #f5f5f5;
$price-cta-align: center;
$price-cta-padding: em-calc(20 20 0);

Note: em-calc(); is a function we wrote to convert px to em. It is included in _variables.scss.

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...


This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.


This modal has video