Skip to content
Search Calcite Web
Search
Calcite Web
Documentation
Examples
Guides
Quick Reference
Dark Theme
Calcite Web
Examples
Download Latest Release
Overview
Basic Pages
Grid
Navigation
Marketing
E-Commerce
i18n
Examples
e-commerce
Back to Top
E-Commerce Pattern Examples
E-Commerce
Pricing Table
View HTML
Pricing Table
<!-- Sample HTML --> <div class="grid-container"> <div class="trailer-2 leader-1 clearfix"> <div class="column-24"> <div class="column-8"> <h2 class="text-darker-gray leader-3 font-size-4">Splashy Marketing Pitch That Makes you Want This Thing we Sell.</h2> </div> <div class="column-15 pre-1"> <div class="block-group block-group-3-up trailer-1"> <div class="card card-bar-purple block"> <div class="card-content text-center"> <h4>Some Option</h4> <p class="font-size--3 text-darker-gray trailer-0"><b>A NOTE ABOUT THAT</b></p> <p class="font-size--3 text-darker-gray"><b>YOU WILL LIKE IT</b></p> <hr> <p class="trailer-0">An option option: $10</p> <p>Another option option: $10</p> <a href="#" class="btn btn-fill">Buy Online</a> </div> </div> <div class="card card-bar-blue block"> <div class="card-content text-center"> <h4>Some Option</h4> <p class="font-size--3 text-darker-gray trailer-0"><b>A NOTE ABOUT THAT</b></p> <p class="font-size--3 text-darker-gray"><b>YOU WILL LIKE IT</b></p> <hr> <p class="trailer-0">An option option: $10</p> <p>Another option option: $10</p> <a href="#" class="btn btn-clear btn-fill">Buy Online</a> </div> </div> <div class="card card-bar-orange block"> <div class="card-content text-center"> <h4>Some Option</h4> <p class="font-size--3 text-darker-gray trailer-0"><b>A NOTE ABOUT THAT</b></p> <p class="font-size--3 text-darker-gray"><b>YOU WILL LIKE IT</b></p> <hr> <p class="trailer-0">An option option: $10</p> <p>Another option option: $10</p> <a href="#" class="btn btn-clear btn-fill">Buy Online</a> </div> </div> </div> </div> <table class="table table-pricing"> <col width="38%"> <thead> <tr> <th> <a href="#" class="font-size-2">Here is one category of thing.</a> </th> <th>Option 1</th> <th>Option 2</th> <th>Option 3</th> </tr> </thead> <tbody> <tr> <td>One particular feature goes here</td> <td><span class="icon-ui-check-mark icon-ui-purple"></span></td> <td><span class="icon-ui-check-mark icon-ui-blue"></span></td> <td><span class="icon-ui-check-mark icon-ui-orange"></span></td> </tr> <tr> <td> Some other specific feature thing goes here. <a class="icon-ui-description" href="#"></a> </td> <td><span class="icon-ui-check-mark icon-ui-purple"></span></td> <td><span class="icon-ui-check-mark icon-ui-blue"></span></td> <td> </td> </tr> <tr> <td> This one is really expensive and only one plan gets it. </td> <td><span class="icon-ui-check-mark icon-ui-purple"></span></td> <td></td> <td></td> </tr> </tbody> </table> </div> </div> </div>
Close
Copy to Clipboard
Splashy Marketing Pitch That Makes you Want This Thing we Sell.
Some Option
A NOTE ABOUT THAT
YOU WILL LIKE IT
An option option: $10
Another option option: $10
Buy Online
Some Option
A NOTE ABOUT THAT
YOU WILL LIKE IT
An option option: $10
Another option option: $10
Buy Online
Some Option
A NOTE ABOUT THAT
YOU WILL LIKE IT
An option option: $10
Another option option: $10
Buy Online
Here is one category of thing.
Option 1
Option 2
Option 3
One particular feature goes here
Some other specific feature thing goes here.
This one is really expensive and only one plan gets it.