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>