Layout

SummaryCard

SummaryCard - Statistic/summary display card refactored for Material 3 Shows a label with a prominent value, optionally with a count badge and link functionality.

Public export

typescript

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

Import path: @happyvertical/smrt-ui/layout
Props: 8
Props described: 8 of 8
Bindable state: 0
Callback events: 0
Verified release: 0.44.0

Props

NameTypeRequiredDescription

labelstringYesCard label

valuestring | numberYesPrimary value to display

countnumberNoOptional count badge

highlightbooleanNoHighlight the card

hrefstringNoMake card clickable with href

iconstringNoOptional icon name, rendered via the {@link Icon} component.

iconContentSnippetNoOptional custom icon content, rendered as a Svelte snippet. Use this escape hatch for bespoke icon markup. It replaces the former raw-SVG **string** support, removed in #1591: SummaryCard no longer renders any consumer-supplied value via `{@html}` (an XSS sink). `iconContent` is rendered as a snippet, so the trust boundary moves to the consumer — the snippet's contents are whatever the consumer authors. When both `iconContent` and `icon` are provided, `iconContent` wins.

variant'default' | 'success' | 'warning' | 'danger'NoValue color variant

Bindable state

This component has no bindable public state.

Callback events

This component declares no callback event props.

Public export

Props

Bindable state

Callback events

Examples and explanation