Skip to content
STYLESCAPE

Dashboard Grid

Examples for the ss-l-dashboard layout: an auto-fill grid of widgets (ss-c-card, ss-c-stat, ss-c-panel, charts) at least --ss-dashboard-min wide, spaced by --ss-dashboard-gap. Widgets span more columns with ss-l-dashboard__item--span-2, --span-3, --full and more rows with --tall. The dashboard is a size container: a span applies only once the dashboard is wide enough for that many default-width columns, so it never overflows.

Stats and cards

Accounts
1,284
+12 this week
Open tickets
37
5 overdue
Uptime
99.98%
Last 30 days
Queue
4
Jobs waiting

Requests per hour

Recent activity

Invoice 2041 paid.

Storage

62 GB of 100 GB.

Event log
12:04 Deploy finished · 11:58 Backup completed
HTML 
<div class="ss-l-dashboard">
            <div class="ss-c-stat">
                <div class="ss-c-stat__title">Accounts</div>
                <div class="ss-c-stat__value">1,284</div>
                <div class="ss-c-stat__desc">+12 this week</div>
            </div>
            <div class="ss-c-stat">
                <div class="ss-c-stat__title">Open tickets</div>
                <div class="ss-c-stat__value">37</div>
                <div class="ss-c-stat__desc">5 overdue</div>
            </div>
            <div class="ss-c-stat">
                <div class="ss-c-stat__title">Uptime</div>
                <div class="ss-c-stat__value">99.98%</div>
                <div class="ss-c-stat__desc">Last 30 days</div>
            </div>
            <div class="ss-c-stat">
                <div class="ss-c-stat__title">Queue</div>
                <div class="ss-c-stat__value">4</div>
                <div class="ss-c-stat__desc">Jobs waiting</div>
            </div>
            <article class="ss-c-card ss-l-dashboard__item--span-2 ss-l-dashboard__item--tall">
                <header class="ss-c-card__header"><h3 class="ss-c-card__title">Requests per hour</h3></header>
                <div class="ss-c-card__body">
                    <div style="height: 100%; min-height: 160px; background: var(--ss-color-surface-2)" role="img"
                         aria-label="Chart placeholder"></div>
                </div>
            </article>
            <article class="ss-c-card">
                <h3 class="ss-c-card__title">Recent activity</h3>
                <p class="ss-c-card__body" style="margin: 0">Invoice 2041 paid.</p>
            </article>
            <article class="ss-c-card">
                <h3 class="ss-c-card__title">Storage</h3>
                <p class="ss-c-card__body" style="margin: 0">62 GB of 100 GB.</p>
            </article>
            <section class="ss-c-panel ss-l-dashboard__item--full" aria-labelledby="demo-dash-log">
                <div class="ss-c-panel__header" id="demo-dash-log">Event log</div>
                <div class="ss-c-panel__body">12:04 Deploy finished &middot; 11:58 Backup completed</div>
            </section>
        </div>

Compact

ss-l-dashboard--compact: narrower columns, smaller gap.

CPU
41%
Memory
6.2 GB
Disk
62%
Network
12 MB/s
Workers
8
HTML 
<div class="ss-l-dashboard ss-l-dashboard--compact">
            <div class="ss-c-stat"><div class="ss-c-stat__title">CPU</div><div class="ss-c-stat__value">41%</div></div>
            <div class="ss-c-stat"><div class="ss-c-stat__title">Memory</div><div class="ss-c-stat__value">6.2 GB</div></div>
            <div class="ss-c-stat"><div class="ss-c-stat__title">Disk</div><div class="ss-c-stat__value">62%</div></div>
            <div class="ss-c-stat"><div class="ss-c-stat__title">Network</div><div class="ss-c-stat__value">12 MB/s</div></div>
            <div class="ss-c-stat"><div class="ss-c-stat__title">Workers</div><div class="ss-c-stat__value">8</div></div>
        </div>