Badge Card

Gamified badge card for achievements, loyalty programs, and progress tracking.

Badge Showcase

First Steps

Complete your onboarding checklist

Common

50 points Unlocked

Collaboration Pro

Invite five teammates to your workspace

Progress 60%

120 points

Ship It

Launch your first project milestone

Progress 25%

250 points


<.badge_card
  title="Collaboration Pro"
  description="Invite five teammates"
  icon="hero-users"
  rarity={:rare}
  progress={60}
  points={120}
/>

Tips

Use the rarity attr to theme border and icon colors.
Show progress bar for locked achievements with progress.
Include points and unlocked_at for richer context.