Pricing Table

[Philip Holmes]

One the Pricing Table paricle demo page, the last block shows ‘Compare all Features’ layout.

I am struggling to achieve this, is there any documentation to recreate this please ?

Thanks, phil

• This topic was modified 7 years, 1 month ago by Philip Holmes.

[Tony]

The last table is custom table, not pricing table itself 🙂

[Philip Holmes]

Ah, probably why I couldn’t replicate it.

Thank you

[Tony]

Here the custom code for example

<h2 class="jl-h3">
Compare All Features    </h2>
<div><div class="jl-overflow-auto">
<table class="jl-table jl-table-striped">
<thead>
<tr>
<th>Features</th>
<th>Basic</th>
<th>Standard</th>
<th>Advanced</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>3 Users</td>
<td>9 Users</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>1 GB / Team member</td>
<td>10 GB / Team member</td>
<td>20 GB / Team member</td>
</tr>
<tr>
<td>Consetetur sadipscing</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Ipsum dolor sit amet consetetur elit</td>
<td>Lorem ipsum</td>
<td>Ipsum dolor</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Sit amet consetetur elit</td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
</tr>
<tr>
<td>Dolor sit amet consetetur</td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
</tr>
<tr>
<td>Ipsum dolor sit amet</td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
</tr>
<tr>
<td>Dolor sit amet consetetur</td>
<td><img class="jl-text-danger" src="images/sampledata/pricing-cross.svg" jl-svg></td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td><img class="jl-text-danger" src="images/sampledata/pricing-cross.svg" jl-svg></td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
</tr>
<tr>
<td>Consetetur sadipscing elit</td>
<td><img class="jl-text-danger" src="images/sampledata/pricing-cross.svg" jl-svg></td>
<td><img class="jl-text-danger" src="images/sampledata/pricing-cross.svg" jl-svg></td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
</tr>
<tr>
<td>Lorem ipsum amet consetetur</td>
<td><img class="jl-text-danger" src="images/sampledata/pricing-cross.svg" jl-svg></td>
<td><img class="jl-text-danger" src="images/sampledata/pricing-cross.svg" jl-svg></td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td><img class="jl-text-danger" src="images/sampledata/pricing-cross.svg" jl-svg></td>
<td><img class="jl-text-danger" src="images/sampledata/pricing-cross.svg" jl-svg></td>
<td><img class="jl-text-primary" src="images/sampledata/pricing-check.svg" jl-svg></td>
</tr>
</tbody>
</table>
</div></div>

[Philip Holmes]

Thank you, very kind of you to share that

[Tony]

No problem 🙂