Cards cardstats

Data Stat Card

Compact card for displaying key metrics with an icon.

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { DataStatCard } from 'astro-component-kit';
---

<StatCard label="Total Revenue" value="$124,590" icon="📈" />
--- import { DataStatCard } from 'astro-component-kit'; --- <StatCard label="Total Revenue" value="$124,590" icon="📈" />

Manual Installation

If you are not using the npm package, create a new file src/components/lib/DataStatCard.astro and paste the following code:

astro 
---
/**
 * StatCard — Compact card for displaying key metrics with an icon.
 * 
 * @param {string} label - The metric name (e.g., "Total Revenue").
 * @param {string} value - The primary statistic value (e.g., "$124,590").
 * @param {string} icon - The emoji or text character representing the stat.
 */
interface Props {
  label: string;
  value: string;
  icon: string;
}

const { label, value, icon } = Astro.props;
---

<div class="stat-card">
  <div class="stat-card__icon" aria-hidden="true">{icon}</div>
  <div class="stat-card__info">
    <span class="stat-card__label">{label}</span>
    <span class="stat-card__value">{value}</span>
  </div>
</div>

<style>
  .stat-card { 
    display: flex; align-items: center; gap: var(--sp-5, 1.25rem); 
    padding: var(--sp-6, 1.5rem); 
    background: var(--c-bg-elev, rgba(99,102,241,0.06)); 
    border: 1px solid var(--c-border, rgba(99,102,241,0.2)); 
    border-radius: var(--r-lg, 16px); 
  }
  .stat-card__icon { 
    font-size: 1.5rem; 
    background: rgba(99,102,241,0.1); 
    width: 50px; height: 50px; 
    display: grid; place-items: center; 
    border-radius: var(--r-md, 12px); 
  }
  .stat-card__label { 
    display: block; font-size: 0.8rem; 
    color: var(--c-text-2, #94a3b8); 
    font-weight: 600; text-transform: uppercase; 
  }
  .stat-card__value { 
    display: block; font-size: 1.4rem; 
    font-weight: 800; color: var(--c-text-1, #fff); 
  }
</style>
--- /** * StatCard — Compact card for displaying key metrics with an icon. * * @param {string} label - The metric name (e.g., "Total Revenue"). * @param {string} value - The primary statistic value (e.g., "$124,590"). * @param {string} icon - The emoji or text character representing the stat. */ interface Props { label: string; value: string; icon: string; } const { label, value, icon } = Astro.props; --- <div class="stat-card"> <div class="stat-card__icon" aria-hidden="true">{icon}</div> <div class="stat-card__info"> <span class="stat-card__label">{label}</span> <span class="stat-card__value">{value}</span> </div> </div> <style> .stat-card { display: flex; align-items: center; gap: var(--sp-5, 1.25rem); padding: var(--sp-6, 1.5rem); background: var(--c-bg-elev, rgba(99,102,241,0.06)); border: 1px solid var(--c-border, rgba(99,102,241,0.2)); border-radius: var(--r-lg, 16px); } .stat-card__icon { font-size: 1.5rem; background: rgba(99,102,241,0.1); width: 50px; height: 50px; display: grid; place-items: center; border-radius: var(--r-md, 12px); } .stat-card__label { display: block; font-size: 0.8rem; color: var(--c-text-2, #94a3b8); font-weight: 600; text-transform: uppercase; } .stat-card__value { display: block; font-size: 1.4rem; font-weight: 800; color: var(--c-text-1, #fff); } </style>

Quick Info

Category
Cards
Filename
DataStatCard.astro
Dependencies
None — pure Astro + CSS
Tags
cardstats