DataSummaryCard

Key metric display card for dashboards and summary views.

Open in Storybook

Interactive Demo

Total Transactions

1234

Last 30 days

Active Users

89

+12% this week

Volume

$2.4M

This month

Variants

Filled vs unfilled

Filled

42

Unfilled

0

Usage

<script setup>
import { DataSummaryCard } from '@yellowcard/b2b-design-system';
</script>

<template>
  <DataSummaryCard
    label="Total Transactions"
    :value="1234"
    metaText="Last 30 days"
  />
</template>

API Reference

Props

Prop	Type	Default	Description
label*	string	—	Card label/title
value*	number | string	—	Metric value to display
metaText	string	''	Supporting meta text
filled	boolean	true	Use filled background style