foundation/stylus/foundation/components/pricing-tables.styl

You may also want to checkout:

//
// Pricing Table 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 ?= emCalc(20px);

// We use these to control the title styles
$price-title-bg ?= #ddd;
$price-title-padding ?= emCalc(15px) emCalc(20px);
$price-title-align ?= center;
$price-title-color ?= #333;
$price-title-weight ?= bold;
$price-title-size ?= emCalc(16px);

// We use these to control the price styles
$price-money-bg ?= #eee;
$price-money-padding ?= emCalc(15px) emCalc(20px);
$price-money-align ?= center;
$price-money-color ?= #333;
$price-money-weight ?= normal;
$price-money-size ?= emCalc(20px);

// We use these to control the description styles
$price-bg ?= #fff;
$price-desc-color ?= #777;
$price-desc-padding ?= emCalc(15px);
$price-desc-align ?= center;
$price-desc-font-size ?= emCalc(12px);
$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 ?= emCalc(15px);
$price-item-align ?= center;
$price-item-font-size ?= emCalc(14px);
$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 ?= emCalc(20px) emCalc(20px) 0;

//
// Pricing Table Mixins
//

// We use this to create the container element for the pricing tables
pricing-table-container() {
  border: $price-table-border;
  margin-{$default-float}: 0;
  margin-bottom: $price-table-margin-bottom;

  & * {
    list-style: none;
    line-height: 1;
  }
}

// We use this mixin to create the pricing table title styles
pricing-table-title() {
  background-color: $price-title-bg;
  padding: $price-title-padding;
  text-align: $price-title-align;
  color: $price-title-color;
  font-weight: $price-title-weight;
  font-size: $price-title-size;
}

// We use this mixin to control the pricing table price styles
pricing-table-price() {
  background-color: $price-money-bg;
  padding: $price-money-padding;
  text-align: $price-money-align;
  color: $price-money-color;
  font-weight: $price-money-weight;
  font-size: $price-money-size;
}

// We use this mixin to create the description styles for the pricing table
pricing-table-description() {
  background-color: $price-bg;
  padding: $price-desc-padding;
  text-align: $price-desc-align;
  color: $price-desc-color;
  font-size: $price-desc-font-size;
  font-weight: $price-desc-weight;
  line-height: $price-desc-line-height;
  border-bottom: $price-desc-bottom-border;
}

// We use this mixin to style the bullet items in the pricing table
pricing-table-bullet() {
  background-color: $price-bg;
  padding: $price-item-padding;
  text-align: $price-item-align;
  color: $price-item-color;
  font-size: $price-item-font-size;
  font-weight: $price-item-weight;
  border-bottom: $price-item-bottom-border;
}

// We use this mixin to style the CTA area of the pricing tables
pricing-table-cta() {
  background-color: $price-cta-bg;
  text-align: $price-cta-align;
  padding: $price-cta-padding;
}


if $include-html-pricing-classes != false {

  /* Pricing Tables */
  .pricing-table {
    pricing-table-container();

    .title {
    	pricing-table-title(); 
    }
    .price {
    	pricing-table-price(); 
    }
    .description {
    	pricing-table-description(); 
    }
    .bullet-item {
    	pricing-table-bullet(); 
    }
    .cta-button {
    	pricing-table-cta(); 
    }
  }

}