# SparkCard

Source: https://lumeo.nativ.sh/components/spark-card

# SparkCard

Small dashboard card with an inline sparkline chart.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<SparkCard />

## When to Use

-   Display a metric with a compact inline trend chart in a dashboard strip.
-   Use alongside `KpiCard` when you want the sparkline as the main visual focus rather than a delta badge.
-   Grid 2–4 SparkCards together for a metrics overview row.

Preview Code

Basic

Revenue

$24,800

Sessions

8,412

Bounce Rate

34.2%

Preview Code

Custom Sparkline Slot

Page Views

94,210

Errors

12

Preview Code

Without Data (Label + Value only)

Uptime

99.98%

SLA

100%

Incidents

0

Preview Code

Variant (interactive)

Switch variant to compare Default, Bordered, and Filled styling.

Default Bordered Filled

Revenue

$24,800

Sessions

8,412

Bounce Rate

34.2%

Preview Code

Size (interactive)

Switch size to see how the card scales.

Small Medium Large

Revenue

$24,800

Sessions

8,412

## API Reference

### SparkCard

Property

Type

Default

Description

Label

string?

null

Metric label rendered above the value.

Value

string?

null

The primary metric value rendered in large text.

Data

IEnumerable<double>?

null

Numeric series rendered as an inline SVG polyline sparkline. Requires at least 2 points.

ChildContent

RenderFragment?

null

Custom chart slot. When provided, replaces the built-in SVG sparkline. Useful for rendering a `Sparkline` component with custom colors.

Size

SparkCardSize

Medium

Overall card size. Values: Small, Medium, Large.

Variant

SparkCardVariant

Default

Visual style. Default = standard card border, Bordered = thicker 2px border, Filled = muted background. Values: Default, Bordered, Filled.

Class

string?

null

Additional CSS classes merged onto the card root.

## Related Components

-   [KpiCard](/components/kpi-card) — Richer KPI tile with delta badge and icon slot.
-   [Sparkline](/components/sparkline) — Standalone inline SVG trend chart primitive.
-   [Statistic](/components/statistic) — Big-number statistic display with label and unit.