SummaryCard

Compact info card for dashboards and metrics. Shows a label with a prominent value, optionally with count badge, icon, and link functionality.

Installation

typescript

import { SummaryCard } from '@happyvertical/smrt-svelte';

Basic Usage

Simple metric display with label and value.

Total Users 1,234

svelte

<SummaryCard label="Total Users" value="1,234" />

With Icon

Add an icon for visual context.

Revenue $45,678

Orders 567

svelte

<SummaryCard label="Revenue" value="$45,678" icon="dollar-sign" />
<SummaryCard label="Orders" value="567" icon="shopping-cart" />

With Count Badge

Show a count badge next to the label.

Pending Tasks 3 12

svelte

<SummaryCard label="Pending Tasks" value="12" count={3} />

Clickable Card

Add href to make the card a clickable link.

Active Projects 8

svelte

<SummaryCard
  label="Active Projects"
  value="8"
  href="/projects"
/>

Highlighted

Use highlight for important metrics.

Today's Sales $12,345

svelte

<SummaryCard label="Today's Sales" value="$12,345" highlight />

Color Variants

Use variants for semantic meaning.

Success Rate 98.5%

Warnings 12

Errors 3

svelte

<SummaryCard label="Success Rate" value="98.5%" variant="success" />
<SummaryCard label="Warnings" value="12" variant="warning" />
<SummaryCard label="Errors" value="3" variant="danger" />

Dashboard Example

Multiple cards in a grid layout.

Users 1,234

Revenue $45,678

Orders 567

Conversion 3.2%

svelte

<Grid columns={2}>
  <SummaryCard label="Users" value="1,234" icon="users" href="/users" />
  <SummaryCard label="Revenue" value="$45,678" icon="dollar-sign" href="/revenue" />
  <SummaryCard label="Orders" value="567" icon="shopping-cart" href="/orders" />
  <SummaryCard label="Conversion" value="3.2%" icon="trending-up" variant="success" />
</Grid>

Props

Prop	Type	Default	Description
`label` *	`string`	-	Card label text
`value` *	`string \| number`	-	Primary value to display
`count`	`number`	-	Optional count badge
`highlight`	`boolean`	`false`	Use highlighted style
`href`	`string`	-	Make card clickable with link
`icon`	`string`	-	Icon name or SVG string
`variant`	`'default' \| 'success' \| 'warning' \| 'danger'`	`'default'`	Value color variant

TypeScript

typescript

import { SummaryCard } from '@happyvertical/smrt-svelte';

interface Props {
  label: string;
  value: string | number;
  count?: number;
  highlight?: boolean;
  href?: string;
  icon?: string;
  variant?: 'default' | 'success' | 'warning' | 'danger';
}