Renders a statistics card with semantic background color.

Examples

<.stat_card
  value={@session_stats.total_active}
  title="Active Sessions"
  subtitle="Currently logged in"
>
  <:icon>
    <.icon name="hero-signal" class="w-6 h-6" />
  </:icon>
</.stat_card>

<.stat_card
  color="primary"
  value={@stats.active_users}
  title="Active Users"
  subtitle="Currently online"
>
  <:icon>
    <.icon name="hero-users" class="w-6 h-6" />
  </:icon>
</.stat_card>

<.stat_card
  color="success"
  compact={true}
  value={@stats.total_users}
  title="Total Users"
  subtitle="Registered accounts"
>
  <:icon>
    <.icon name="hero-check-circle" class="w-5 h-5" />
  </:icon>
</.stat_card>

Attributes

• rounded (:string) - Border radius size (xl, 2xl, etc.). Defaults to "xl".
• compact (:boolean) - Use compact layout with reduced height. Defaults to false.
• value (:any) (required) - The main statistic value to display.
• title (:string) (required) - The card title text.
• subtitle (:string) (required) - The smaller descriptive text.
• color (:string) - Background color theme (info, primary, success, secondary, warning, error, accent, neutral). Defaults to "info". Must be one of "info", "primary", "success", "secondary", "warning", "error", "accent", or "neutral".

Slots

• icon (required) - Icon to display in the card header.