Price Table

Price table Custom HTML is based on the following structure:

<div class="gk-price-table gk-price-table-animated col3">
<dl>
<dt>Basic</dt>
<dd class="gk-price">$15<small>/ month</small></dd>
<dd>Unlimited Storage</dd>
<dd>Unlimited Transactions</dd>
<dd>Unlimited Contacts</dd>
<dd>Unlimited Users</dd>
<dd><a href="#">Choose</a></dd>
</dl>

<dl class="gk-premium">
<dt>Premium</dt>
<dd class="gk-price">$99<small>/ month</small></dd>
<dd>Unlimited Storage</dd>
<dd>Unlimited Transactions</dd>
<dd>Unlimited Contacts</dd>
<dd>Unlimited Users</dd>
<dd>Try it for a month!</dd>
<dd><a href="#">Choose</a></dd>
</dl>

<dl>
<dt>Plus</dt>
<dd class="gk-price">$29<small>/ month</small></dd>
<dd>Unlimited Storage</dd>
<dd>Unlimited Transactions</dd>
<dd>Unlimited Contacts</dd>
<dd>Unlimited Users</dd>
<dd><a href="#">Choose</a></dd>
</dl>
</div>

The main wrapper contains three clases: the gk-price-table class is required, the gk-price-table-animated is required if you want to create an animated price table on scrolling and the last class is used to specify the amount of columns – you can use classes col1col5.

Every column is specified by dl element (with gk-premium class the column will be highlighted) – in the dt element you can specify the table column title. In the dd element with gk-price class you can specify the price – using the small element you can specify te service period time.

Adding of the button at the bottom is very simple – it needs just to add the link element in the dd element.

Uso de cookies

Este sitio web utiliza cookies para que tengas la mejor experiencia de usuario. Si continúas navegando estás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pulsa el enlace para mayor información. ACEPTAR

Aviso de cookies