A Comparison Table is used to compare multiple products, services, or plans side by side. It helps users make informed decisions by highlighting key differences and similarities.
| Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | |
|---|---|---|
| Lorem ipsum | Lorem ipsum dolor | Lorem ipsum dolor |
| Lorem ipsum | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore | Lorem ipsum |
| Lorem |
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur |
Lorem ipsum dolor sit amet |
| Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod |
| Lorem ipsum dolor sit amet, consectetur | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod | ||
| Lorem ipsum dolor | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor | Lorem ipsum dolor sit amet, consectetur adipiscing |
<div className="container">
<h3 class="large-text-3 text--center"> Lorem ipsum dolor sit amet </h3>
<div class="comparison-table">
<div class="display--flex justify-content-center">
<div class="col-xl-8 col-lg-10 col-md-12">
<div class="intro-txt para--two"> Lorem ipsum </div>
<table>
<thead>
<tr>
<th> </th>
<th className="bg-primary"> Lorem ipsum dolor sit amet </th>
<th className="bg-secondary"> Lorem ipsum dolor sit amet </th>
</tr>
</thead>
<tbody>
<tr>
<td> Lorem ipsum </td>
<td> Lorem ipsum dolor <div className="table-icons">
<span className="blueprint-icon icon-checkmark"></span>
</div>
<div className="table-icons">
<span className="blueprint-icon icon-bp_1_close"></span>
</div>
</td>
<td> Lorem ipsum dolor <div className="table-icons">
<span className="blueprint-icon icon-checkmark"></span>
</div>
<div className="table-icons">
<span className="blueprint-icon icon-bp_1_close"></span>
</div>
</td>
</tr>
<tr>
<td> Lorem ipsum </td>
<td> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </td>
<td> Lorem ipsum </td>
</tr>
<tr>
<td> Lorem </td>
<td> Lorem ipsum dolor sit amet, consectetur <br /> Lorem ipsum dolor sit amet, consectetur </td>
<td> Lorem ipsum dolor sit amet </td>
</tr>
<tr>
<td> Lorem ipsum dolor sit amet </td>
<td> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </td>
<td> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </td>
</tr>
<tr>
<td> Lorem ipsum dolor sit amet, consectetur </td>
<td>
<div className="table-icons">
<span className="blueprint-icon icon-checkmark"></span>
</div>
</td>
<td>
<div className="table-icons">
<span className="blueprint-icon icon-bp_1_close"></span>
</div>
</td>
</tr>
<tr>
<td> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </td>
<td>
<div className="table-icons">
<span className="blueprint-icon icon-bp_1_close"></span>
</div>
</td>
<td>
<div className="table-icons">
<span className="blueprint-icon icon-checkmark"></span>
</div>
</td>
</tr>
<tr>
<td> Lorem ipsum dolor </td>
<td> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </td>
<td> Lorem ipsum dolor sit amet, consectetur adipiscing </td>
</tr>
</tbody>
</table>
<div class="outro-txt mt-3 disclaimer-txt para--four"> Disclaimer goes here </div>
</div>
</div>
</div>
</div>