Lava Example - 61 | Rock Community

Lava Example - 60

Prompt

We have some data in a table on a page in Rock. It's accurate, but not very attention-grabbing.

Show these items in KPIs instead, using the shortcode.

Try using the icons fa-users for attendance, fa-tint for baptisms, and fa-hand-holding-heart for giving.

Initial Code

<table class="table">
    <thead>
        <tr><th>Attendance</th><th>Baptisms</th><th>Giving</th></tr>
    </thead>
    <tr>
        <td>{{ attendance }}</td>
        <td>{{ baptisms }}</td>
        <td>{{ giving | FormatAsCurrency }}</td>
    </tr>
</table>

Solution Lava

{[ kpis ]}
    [[ kpi icon:'fa fa-users' value:'{{ attendance }}' label:'Attendance' color:'yellow-700' ]][[ endkpi ]]
    [[ kpi icon:'fa fa-tint' value:'{{ baptisms }}' label:'Baptisms' color:'blue-700' ]][[ endkpi ]]
    [[ kpi icon:'fa fa-hand-holding-heart' value:'{{ giving | FormatAsCurrency }}' label:'Giving' color:'green-700' ]][[ endkpi ]]
{[ endkpis ]}