Data display

Data list

Monthly subscription Aug 12

$29.90

<div class="joy-data-list">
    <div class="joy-data-row">
        <div class="joy-data-row-icon"><i class="ph ph-credit-card"></i></div>
        <div class="joy-data-row-info">
            <span class="joy-data-row-title">Monthly subscription</span>
            <span class="joy-data-row-sub">Aug 12</span>
        </div>
        <span class="joy-data-row-value">$29.90</span>
    </div>
</div>

Empty state

Nothing here yet.

<div class="joy-empty-state"><i class="ph ph-tray"></i><p>Nothing here yet.</p></div>

Stat tiles

1,204Users

98%Uptime

<div class="joy-stat-row">
    <div class="joy-stat-tile"><span class="joy-stat-tile-value">1,204</span><span class="joy-stat-tile-label">Users</span></div>
    <div class="joy-stat-tile"><span class="joy-stat-tile-value">98%</span><span class="joy-stat-tile-label">Uptime</span></div>
</div>