Dashboard bundle

The dashboard bundle provides product-neutral shells that compose the core drawer, stat cards, user summaries, value and record tables, activity feeds, progress/status panels, toolbar actions, and empty/loading/error/attention states for dashboard pages. Load core first, then dashboard CSS:

<link rel="stylesheet" href="/v1/css/starthds-core.css">
<link rel="stylesheet" href="/v1/css/starthds-dashboard.css">

Bundle separation is part of the contract: dashboard classes belong in /v1/css/starthds-dashboard.css, not /v1/css/starthds-app.css, and this route intentionally does not load the aggregate /v1/css/starthds.css. Legacy/all-in-one consumers may still use the aggregate because it physically includes dashboard styles in documented order.

Optional dashboard JavaScript is progressive only and follows core JS when a page wants browser behavior:

<script type="module" src="/v1/js/starthds-core.js"></script>
<script type="module" src="/v1/js/starthds-dashboard.js"></script>

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.