Badge Showcase

name: "Badge Showcase"
short_description: A grid of earned and locked community badges with tier-coloured medallions and lock overlays.
long_visual_description: >
  A responsive grid (three columns on mobile, four from the small breakpoint up) of badge tiles. Each
  tile centres a round medallion holding an icon, tinted by tier — amber for bronze, neutral for
  silver, a ringed amber for gold — above a label and an optional one-line description. Unearned
  badges are dimmed and carry a lock glyph over the medallion so progress reads at a glance.

use_cases:
  - Earned achievements grid on a member profile.
  - Community badges panel on a gamified dashboard.
  - Progress wall showing locked and unlocked rewards.
  - Contributor accolades on an about or bio page.
  - Milestone showcase for a member's anniversary.
  - Tiered reward collection on a loyalty page.

recommended_for:
  - Displaying a collection of achievements with earned state.
  - Motivating members by showing locked next badges.
avoid_for:
  - A single numeric reputation figure (use reputation-card).
  - A live activity feed (use a feed or timeline).

markets:
  - Global

example_usage: >
  Pass a badges array of { label, description, icon, earned, tier }. Provide a raw SVG icon per badge
  (a default medal renders otherwise), set tier for the medallion colour, and mark earned false to dim
  the tile and add a lock overlay.

props:
  badges: "The badges, in order. Each: label, description (optional), icon (optional raw SVG), earned (boolean; false dims and locks), tier (bronze, silver or gold)."

example_prompts:
  - "Show a badge showcase mixing earned bronze, silver and gold badges with locked ones."
  - "Add an achievements grid to the profile with locked badges dimmed."
  - "Display community rewards with tier-coloured medallions."

lifecycle: experimental
content_model: A collection of badges, each with a label, optional description and icon, an earned state and a tier.

theming:
  tokens_used:
    - --color-surface
    - --color-surface-raised
    - --color-on-surface
    - --color-on-surface-muted
    - --color-warning
    - --radius-pill

editorial_guidance: >
  Keep badge labels short and descriptions to a single earning condition. Order earned badges before
  locked ones, and reserve the gold tier for genuinely rare achievements.

relationships:
  related:
    - community/reputation-card
    - community/online-members
    - community/pinned-post

categorization:
  category: Community
  subcategory: Reputation
  atomic_type: organism
  usage_type: [grid]
  maturity: ai-generated
  wcag:
    level: AA
    notes: Earned state is shown by both dimming and a lock glyph plus the label, not colour alone; medallion icons are decorative and each tile carries a text label.
  keyboard_support: None — static, non-interactive.
  seo_score: 30
  text_direction: both