Dashboard example

This standalone example uses only core plus dashboard assets and demonstrates a full responsive dashboard composition with product-neutral labels.

Dashboard bundle

Generic operations overview

Core CSS loads first; dashboard sections can compose shell primitives with hds-data tables, lists, cards, and states from the dashboard bundle.

Stats and trends

Reusable KPI cards for any dashboard domain.

+8% improving
128
Active records
Updated just now
94%
Completion rate
Target met
12m
Median response
Stable range
42Queued17Needs review0Runtime dependencies

Summary cards and data list

Identity summaries stay generic; host apps own user and record data.

  • AAAnalyst AReviewer · Online
  • BOBuilder OOperator · 2 records
  • CRCoordinator RCoordinator · Away
  • Record note AUses hds-data-list and hds-data-record inside a dashboard section.
  • Record note BList records remain plain semantic HTML.

Data table and record details

Compose hds-data toolbar, filters, table, action cells, cards, and pagination inside dashboard sections.

Status: allOwner: any groupRange: current
RecordStatusOwnerValueActions
Record AReadyGroup one1,240 units
Record BWatchingGroup two860 units
Record CBlockedGroup three320 units

Selected record

Record
Record A
Status
Ready
Owner
Group one
SummaryStateAmount
Reusable value rowSettled€490
Follow-up value rowPending€120
2 selected

Activity, progress, and status

Use these panels for dashboard summaries without product-specific logic.

Healthy queue36
Needs attention5
Blocked1
Review progress72%

Progress is CSS-only; applications own state updates.

Projected capacity84%Within range
  1. Record updated2 min ago
  2. Review assigned18 min ago
  3. Status changed1 hr ago

Empty, loading, error, and attention states

Dashboard state surfaces can pair with generic hds-data states for tables and lists.

No records yet

Use empty states for first-run or filtered views.

Loading

Loading latest values.

Unable to refresh

Show a clear recovery path without exposing implementation details.

Attention required

Surface cautionary dashboard states before users continue.

Threshold warning

Warn about review thresholds using semantic dashboard styling.