Dashboard
Dashboard blocks display key metrics, key-value pairs, action toolbars, and chronological timelines for admin and analytics interfaces.
Stat
Key metric display with label, large value, delta indicator, and optional unit. The default style includes a border and background. Use --flat to remove the container, --inline for horizontal layout. Delta modifiers: --positive and --negative.
Default stat
index.htmlhtml
<div class="ln-stat">
<span class="ln-stat__label">Revenue</span>
<span class="ln-stat__value">$48,290<span class="ln-stat__unit">/mo</span></span>
<span class="ln-stat__delta ln-stat__delta--positive">
<span>+12.5%</span>
<span>vs. last month</span>
</span>
</div>Revenue$48,290/mo+12.5%vs. last month
Flat modifier with negative delta
index.htmlhtml
<div class="ln-stat ln-stat--flat">
<span class="ln-stat__label">Users</span>
<span class="ln-stat__value">3,841</span>
<span class="ln-stat__delta ln-stat__delta--negative">
<span>-2.1%</span>
<span>vs. last month</span>
</span>
</div>Users3,841-2.1%vs. last month
Data List
Key-value pairs displayed vertically or horizontally. Modifiers include --horizontal, --divided, --striped, and --compact.
Horizontal divided
index.htmlhtml
<div class="ln-data-list ln-data-list--horizontal ln-data-list--divided">
<div class="ln-data-list__item">
<span class="ln-data-list__term">Name</span>
<span class="ln-data-list__value">Alice Johnson</span>
</div>
<div class="ln-data-list__item">
<span class="ln-data-list__term">Email</span>
<span class="ln-data-list__value">[email protected]</span>
</div>
<div class="ln-data-list__item">
<span class="ln-data-list__term">Role</span>
<span class="ln-data-list__value">Administrator</span>
</div>
<div class="ln-data-list__item">
<span class="ln-data-list__term">Joined</span>
<span class="ln-data-list__value">March 15, 2024</span>
</div>
</div>Toolbar
Horizontal action bar with start/end grouping. Contains button groups, search fields, counts, and vertical dividers. Supports --bulk, --sticky, and --compact modifiers.
Default toolbar
index.htmlhtml
<div class="ln-toolbar">
<div class="ln-toolbar__start">
<div class="ln-toolbar__group">
<button class="ln-button ln-button--outline ln-button--sm">Filter</button>
<button class="ln-button ln-button--outline ln-button--sm">Sort</button>
</div>
<div class="ln-toolbar__divider"></div>
<span class="ln-toolbar__count">24 results</span>
</div>
<div class="ln-toolbar__end">
<button class="ln-button ln-button--solid ln-button--sm">Export</button>
</div>
</div>Timeline
Vertical sequence of events with circular markers and connector lines. Add role classes to items (e.g. ln-timeline__item--success) to color markers.
Default timeline
index.htmlhtml
<div class="ln-timeline">
<div class="ln-timeline__item">
<div class="ln-timeline__marker ln-timeline__marker--success"></div>
<div class="ln-timeline__content">
<div class="ln-timeline__title">Order shipped</div>
<div class="ln-timeline__time">Sep 28, 2026 · 2:30 PM</div>
<div class="ln-timeline__body">Package picked up by carrier.</div>
</div>
</div>
<div class="ln-timeline__item">
<div class="ln-timeline__marker ln-timeline__marker--primary"></div>
<div class="ln-timeline__content">
<div class="ln-timeline__title">Payment confirmed</div>
<div class="ln-timeline__time">Sep 27, 2026 · 10:15 AM</div>
<div class="ln-timeline__body">Payment of $129.00 processed.</div>
</div>
</div>
<div class="ln-timeline__item">
<div class="ln-timeline__marker"></div>
<div class="ln-timeline__content">
<div class="ln-timeline__title">Order placed</div>
<div class="ln-timeline__time">Sep 27, 2026 · 9:42 AM</div>
<div class="ln-timeline__body">Order #4821 created by customer.</div>
</div>
</div>
</div>Order shipped
Sep 28, 2026 · 2:30 PM
Package picked up by carrier.
Payment confirmed
Sep 27, 2026 · 10:15 AM
Payment of $129.00 processed.
Order placed
Sep 27, 2026 · 9:42 AM
Order #4821 created by customer.
Reference
| Class | Description | Responsive |
|---|---|---|
.ln-stat | Key metric display | No |
.ln-stat--sm | Small size variant | No |
.ln-stat--lg | Large size variant | No |
.ln-stat--flat | No background or border | No |
.ln-stat--inline | Horizontal layout | No |
.ln-stat__delta--positive | Positive delta indicator | No |
.ln-stat__delta--negative | Negative delta indicator | No |
.ln-data-list | Key-value pair list | No |
.ln-data-list--horizontal | Horizontal layout | No |
.ln-data-list--divided | Dividers between items | No |
.ln-data-list--striped | Alternating row backgrounds | No |
.ln-data-list--compact | Compact spacing | No |
.ln-data-list--cols-2 | Two-column grid layout | No |
.ln-toolbar | Horizontal action bar | No |
.ln-toolbar--bulk | Bulk action mode | No |
.ln-toolbar--sticky | Sticky positioning | No |
.ln-toolbar--compact | Compact spacing | No |
.ln-timeline | Vertical event sequence | No |
.ln-timeline--compact | Compact spacing | No |
.ln-timeline__marker--success | Success marker color | No |
.ln-timeline__marker--primary | Primary marker color | No |
.ln-timeline__marker--warning | Warning marker color | No |
.ln-timeline__marker--danger | Danger marker color | No |
.ln-timeline__marker--info | Info marker color | No |