PhoenixKitWeb.Components.Core.HeroStatCard (phoenix_kit v1.6.15)

View Source

Provides a large hero statistics card UI component for prominent dashboard metrics.

This component renders a large gradient card with decorative background circle, icon with title side-by-side, and a prominent statistic value. Used for key metrics like System Owners, Administrators, and Total Users.

Summary

Functions

hero_stat_card(assigns)

Renders a large hero statistics card with decorative background.

Functions

hero_stat_card(assigns)

Renders a large hero statistics card with decorative background.

Examples

<.hero_stat_card
  circle_size="20"
  value={@stats.owner_count}
  title="System Owners"
  subtitle="Complete system authority"
>
  <:icon>
    <PhoenixKitWeb.Components.Core.Icons.icon_crown />
  </:icon>
</.hero_stat_card>

<.hero_stat_card
  circle_size="16"
  value={@stats.admin_count}
  title="Administrators"
  subtitle="Management privileges"
>
  <:icon>
    <PhoenixKitWeb.Components.Core.Icons.icon_star />
  </:icon>
</.hero_stat_card>

Attributes

  • circle_size (:string) (required) - Decorative circle size in rem (e.g., '20', '16', '24').
  • value (:any) (required) - The main statistic value to display.
  • title (:string) (required) - The card title text (displayed next to icon).
  • subtitle (:string) (required) - The smaller descriptive text.

Slots

  • icon (required) - Icon to display next to the title.