How to add a price list table?


Here is the markup for a price table

<div class="column medium-4">
    <div class="wrapper pr ovh pricelist component">
        <div class="wrapper">
            <div class="hover-top hover-el"></div>
            <div class="hover-bottom hover-el"></div>
        </div>
        <div class="wrapper tbgc5 pt40 pl40 pr40 pb60">
            <h3 class="text fz4 fw3 ttu ac mb10">
                first plan
            </h3>
            <span class="text fz8 ac c5 mb20 lh0">
                <i class="pe-7s-angle-down lh0"></i>
            </span>
            <div class="wrapper ac lh0 mb40">
                <div class="separator bottom dib"></div>
            </div>
            <div class="wrapper ac mb40">
                <div class="wrapper pr dib ac">
                    <h4 class="text fz9 fw3 pr20 mr-20 price-container">
                        30
                        <span class="wrapper pa right top lh0 mr-15 mt15">
                            <span class="text fz6 lh0">$</span>
                        </span>
                    </h4>
                </div>
                <p class="text fz3 ttu fw3 c5 ac mt-10">
                    monthly
                </p>
            </div>
            <div class="wrapper mb40">
                <ul class="list">

                    <!-- description item -->
                    <li>
                        <p class="text fz3 fsi fw3 ac">Corporate style</p>
                    </li>

                </ul>
            </div>
            <div class="wrapper ac">
                <span class="button">
                    <span class="text fz4 ttu fw3 lh24">
                        Get it now
                    </span>
                </span>
            </div>
        </div>
    </div>
</div>

Add "recomended" class to the ".pricelist" tag to add recomended icon to table.

Tags: change, pricelist

Last update:
2015-01-09 09:13
Author:
Daniel Verejan
Revision:
1.0
Average rating:0 (0 Votes)