Dashboard Overview

This integration showcase combines multiple @bnotk/dsx CSS modules into a compact dashboard-style layout.

Live Preview

Sections

Status Overview: three summary cards with count badges, status dots, and a 75% circular progress indicator.
Category Distribution: a seven-segment cluster bar with a matching legend below it.
Notifications: an infobox summary plus recent info, success, and warning messages.
Quick Actions: primary and secondary buttons for common dashboard actions.

CSS modules used

status.css
progress-indicator.css
cluster.css
notification.css
buttons.css
infobox.css

Layout notes

The top row uses a 3-column CSS grid on wider screens and stacks on narrower screens.
Wider sections span the full layout width so distribution, messaging, and actions stay easy to scan.
The demo is self-contained and can be reused as a reference pattern for product dashboards.

Example structure

<div class="dashboard__row dashboard__row--cards">
  <article class="dashboard-card">...</article>
  <article class="dashboard-card">...</article>
  <article class="dashboard-card">...</article>
</div>

<section class="dashboard-card">
  <div class="dsx-cluster__container">...</div>
</section>

<section class="dashboard-card">
  <div class="dsx-infobox dsx-infobox--info">...</div>
  <div class="dsx-notification">...</div>
</section>