Home Forums Particles Support Pricing Table

Viewing 6 posts - 1 through 6 (of 6 total)
  • Avatar
    Philip Holmes
    Subscriber

    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 3 weeks, 3 days ago by Avatar Philip Holmes.
    Avatar
    Tony
    Moderator

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

    Avatar
    Philip Holmes
    Subscriber

    Ah, probably why I couldn’t replicate it.

    Thank you

    Avatar
    Tony
    Moderator

    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>
    
    Avatar
    Philip Holmes
    Subscriber

    Thank you, very kind of you to share that

    Avatar
    Tony
    Moderator

    No problem 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Pricing Table’ is closed to new replies.