MODULE 10

Pricing Comparison

Comparison layout with independently scoped billing controls and plan rows.

Billing:

Compare plan features side by side. Use the Pricing Table when the primary task is choosing a plan.

Example plan features
Feature	Basic	Pro	Plus
Projects	3	20	Unlimited
Priority support	Not included	Included	Included

HTML source & reuse instructions

Load Bootstrap, Versa CSS/JS, and your custom layer. Give every copied ID a unique value and update its matching references.


<div data-lab-pricing="">
<fieldset class="versa-billing-selector mb-4">
  <legend class="visually-hidden">Billing frequency</legend>
  <span class="versa-billing-label">Billing:</span>
  <div class="versa-billing-options" role="group" aria-label="Billing frequency">
    <button class="versa-billing-option is-active" data-billing-period="monthly" type="button" aria-pressed="true">Monthly</button>
    <button class="versa-billing-option" data-billing-period="annual" type="button" aria-pressed="false">Annual <span class="versa-billing-save">Save 20%</span></button>
  </div>
  <input class="visually-hidden" data-lab-billing="" type="checkbox" aria-hidden="true" tabindex="-1"/>
</fieldset>
<div class="lab-grid three">
<article class="lab-plan">
<span class="eyebrow">
          START SIMPLE
         </span>
<h3>
          Basic
         </h3>
<p>
<strong class="display-5" data-annual="20.0" data-monthly="25">
           $25
          </strong>
          / month
         </p>
<p data-billing-note="">
          Billed monthly
         </p>
<ul>
<li>
           3 projects
          </li>
<li>
           Reusable components
          </li>
<li>
           Responsive templates
          </li>
</ul>
<a class="btn btn-primary" href="/templates/contact/">
          Choose Basic
         </a>
</article>
<article class="lab-plan featured">
<span class="eyebrow">
          MOST POPULAR
         </span>
<h3>
          Pro
         </h3>
<p>
<strong class="display-5" data-annual="60.0" data-monthly="75">
           $75
          </strong>
          / month
         </p>
<p data-billing-note="">
          Billed monthly
         </p>
<ul>
<li>
           20 projects
          </li>
<li>
           Reusable components
          </li>
<li>
           Responsive templates
          </li>
</ul>
<a class="btn btn-primary" href="/templates/contact/">
          Choose Pro
         </a>
</article>
<article class="lab-plan">
<span class="eyebrow">
          MORE POSSIBILITIES
         </span>
<h3>
          Plus
         </h3>
<p>
<strong class="display-5" data-annual="100.0" data-monthly="125">
           $125
          </strong>
          / month
         </p>
<p data-billing-note="">
          Billed monthly
         </p>
<ul>
<li>
           Unlimited projects
          </li>
<li>
           Reusable components
          </li>
<li>
           Responsive templates
          </li>
</ul>
<a class="btn btn-primary" href="/templates/contact/">
          Choose Plus
         </a>
</article>
</div>
<div class="table-responsive mt-4">
<table class="table">
<caption>
          Example plan features
         </caption>
<thead>
<tr>
<th scope="col">
            Feature
           </th>
<th scope="col">
            Basic
           </th>
<th scope="col">
            Pro
           </th>
<th scope="col">
            Plus
           </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
            Projects
           </th>
<td>
            3
           </td>
<td>
            20
           </td>
<td>
            Unlimited
           </td>
</tr>
<tr>
<th scope="row">
            Priority support
           </th>
<td>
            Not included
           </td>
<td>
            Included
           </td>
<td>
            Included
           </td>
</tr>
</tbody>
</table>
</div>
</div>