Skip to main content

Dashboard Usage Cards

Use this pattern inside customer dashboards, account portals, or hosting control panels where someone needs immediate status visibility.

Operations

Customer dashboard cards with clear hosting status signals

Useful for bandwidth, backups, uptime, and support visibility inside account or portal views.

Bandwidth used

72%

1.8 TB of 2.5 TB monthly quota

Backup health

Healthy

Last restore point at 02:15 UTC

Uptime

99.99%

No incidents in the last 30 days

Tickets

2 open

Average first reply in 3m 42s

Why it works​

  • Each card answers a practical operational question fast.
  • The layout is easy to connect to real usage data later.
  • It keeps dashboard surfaces clear without feeling empty.

Copy paste code​

const cards = [
  {label: 'Bandwidth used', value: '72%', detail: '1.8 TB of 2.5 TB monthly quota'},
  {label: 'Backup health', value: 'Healthy', detail: 'Last restore point: 02:15 UTC'},
  {label: 'Uptime', value: '99.99%', detail: 'No incidents in the last 30 days'},
  {label: 'Tickets', value: '2 open', detail: 'Average first response: 3m 42s'},
];

export function DashboardUsageCards() {
  return (
    <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
      {cards.map((card) => (
        <article
          key={card.label}
          className="rounded-[24px] border border-slate-200 bg-white p-5 shadow-[0_20px_64px_-48px_rgba(15,23,42,0.35)]"
        >
          <p className="text-sm font-medium text-slate-500">{card.label}</p>
          <p className="mt-3 text-2xl font-semibold text-slate-950">{card.value}</p>
          <p className="mt-2 text-sm leading-6 text-slate-600">{card.detail}</p>
        </article>
      ))}
    </section>
  );
}

Customization notes​

  • Keep labels operational and explicit.
  • If you add trend charts, keep them secondary to the main value.
  • Use color sparingly so alerts stay meaningful.