Pricing Tables

Pricing Table #1

The basic widget HTML markup to display one element looks the following way:

<div class="pricing-box-1">    <div class="pricing-title"> ... </div>    <div class="pricing-icon">      ...    </div>    <ul class="pricing-list">      <li> ... </li>    </ul>    <hr class="pricing-divider">    <div class="price-wrap">         <span class="price">10</span>         <span>per month</span>     </div>     <a class="btn btn-gray-5" href="#"> ... </a>  </div>

Pricing Table #2

The basic widget HTML markup to display one element looks the following way:

<div class="pricing-box-2 pricing-box-2_mod-1">   <div class="pricing-title"> ... </div>   <div class="price-wrap">     <span class="price"> ... </span>     <span> ... </span>   </div>   <ul class="pricing-list-marked pricing-list-marked__mod-1">     <li> ... </li>   </ul>   <a class="btn btn-silver-outline btn-lg" href="#"> ... </a> </div>

Pricing Table #3

The basic widget HTML markup to display one element looks the following way:

<div class="pricing-box-3">   <div class="pricing-title"> ... </div>   <div class="price-wrap"><span class="price"> ... </span><span> ... </span></div>   <ul class="pricing-list">     <li> ... </li>   </ul>   <a class="btn btn-silver-outline" href="#"> ... </a> </div>

Pricing Table #4

The basic widget HTML markup to display one element looks the following way:

<div class="pricing-box-2">   <div class="pricing-title"> ... </div>   <div class="price-wrap">     <span class="price"> ... </span>     <span> ... </span>   </div>   <ul class="pricing-list-marked pricing-list-marked__mod-1">     <li> ... </li>   </ul>   <a class="btn btn-silver-outline btn-lg" href="#"> ... </a> </div>