Foundation price list

May 04, 2021 Foundation5

Foundation price list

Price lists can be used to showcase enterprise products:

Instance

< 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 out . . .

Instance resolution

ul.pricing-table - Define the price list
li.title - Define product title (black background)
li.price - Define price (gray background font large item)
li.description - Define the product description (if required)
li.bullet-item - Defines product characteristics
li.ca-button - button text (e.g. "Buy," "Join," "Sign Up," etc.)

Note: The table fills the width of the container 100%, and all items are bordered and centered.

The price list grid

The following example shows the price of three enterprise products (three are equally divided widths):

Instance

< 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 out . . .

Foundation price list

Table of contents