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>