Price

A unit for laying out prices and associated data.

Examples

12 for $ 4 99 lb. with Card

12 for 99 ¢ lb. with Card

Buy One, Get One, FREE! with Card 

    <p class="price price-big-dollars">
      <span class="price-prefix">12 for</span>
      <span class="price-dollar-sign">$</span>
      <span class="price-dollars">4</span>
      <span class="price-cents">99</span>
      <span class="price-suffix">lb.</span>
      <img  class="price-suffix-icon" src="/assets/images/Card_45x29.gif" alt="with Card">
    </p>

    <hr>
    <p class="price price-big-cents">
      <span class="price-prefix">12 for</span>
      <span class="price-cents">99</span>
      <span class="price-cent-sign">&cent;</span>
      <span class="price-suffix">lb.</span>
      <img  class="price-suffix-icon" src="/assets/images/Card_45x29.gif" alt="with Card">
    </p>

    <hr>   
    <p class="price">
      <span class="price-overlay">Buy One, Get One, FREE!</span>
      <img src="/assets/images/Card_45x29.gif" class="price-suffix-icon" alt="with Card">
    </p>

Price in Dollars Example

This example shows a price in dollars. Use the price-big-dollars sub-class to give a larger emphasis to the dollar portion of the price.

12 for $ 4 99 lb. with Card 

    <p class="price price-big-dollars">
      <span class="price-prefix">12 for</span>
      <span class="price-dollar-sign">$</span>
      <span class="price-dollars">4</span>
      <span class="price-cents">99</span>
      <span class="price-suffix">lb.</span>
      <img  class="price-suffix-icon" src="/assets/images/Card_45x29.gif" alt="with Card">
    </p>

Price in Cents Example

This example shows a price in cents. Use the price-big-cents sub-class to give a larger emphasis to the cents portion of the price.

12 for 99 ¢ lb. with Card 

    <p class="price price-big-cents">
      <span class="price-prefix">12 for</span>
      <span class="price-cents">99</span>
      <span class="price-cent-sign">&cent;</span>
      <span class="price-suffix">lb.</span>
      <img  class="price-suffix-icon" src="/assets/images/Card_45x29.gif" alt="with Card">
    </p>

Price Overlay Example

In this example we want to overlay the price with text, but still give it special treatment.

Buy One, Get One, FREE! with Card 

    <p class="price">
      <span class="price-overlay">Buy One, Get One, FREE!</span>
      <img src="/assets/images/Card_45x29.gif" class="price-suffix-icon" alt="with Card">
    </p>