Foundation List Price
Price list can be used to display their products:
Examples
<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>
<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"
Examples of analytical
-
ul.pricing-table- definition of price list -
li.title- defines the product of the title (black background) -
li.price- defined price (large font entries gray background) -
li.description- defines the product description (if desired) -
li.bullet-item- defined Features -
li.ca-button- button text (such as "Buy", "Join", "Sign Up", etc.)
Note: The table filled with 100% width of the container, all the items have a border and be centered.
List Price Grid
The following example shows three enterprise product price (three is an equal division width):
Examples
<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>
<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"