Description
Implement the Badges Card component as defined in Figma. This component is used on user profile pages to surface earned badges, highlighting specific skills, roles, or areas of community contribution.
The component presents badge data in a card-based layout with a heading, and either an empty state prompt or a grid of earned badges depending on whether the user has any badges. Each badge displays an icon token, name, and earned date.
Figma Link
Scope
Variants
- Empty — no badges earned
- Filled — one or more badges earned
Component Structure
Each Badges Card includes:
- Section heading ("Badges")
- Empty state: decorative icon row, description text, and CTA button ("Explore available badges and how to earn them")
- Filled state: 3-column grid of badge entries, each containing an icon token, badge name, and earned date
States
Implementation Requirements
- Use design tokens for background and surface colours, typography, spacing, border radius, and button styling
- Medal icons must use the icon tokens provided per badge — do not hardcode or derive from badge data
- CTA button must consume the existing Button component
- Empty vs filled state must be derived from whether the
badges prop is populated
- Badge grid must support a variable number of entries without breaking layout
- Data rendering logic must be separated from data fetching (data passed via props)
Props
| Prop |
Type |
Required |
Description |
| badges |
Badge[] |
No |
Array of earned badge objects. Empty or undefined triggers empty state. |
Out of Scope
- API integration or data fetching
- Badge filtering or sorting
- Pagination of badge lists
- Badge detail views or modals
- Analytics event wiring
Acceptance Criteria
Component
- Empty state renders with icon row, description text, and CTA button
- Filled state renders all badges in a 3-column grid
- Each badge entry displays the correct icon token, name, and earned date
- CTA button renders correctly in the empty state
- Grid handles variable number of badges without layout breaking
- Component is responsive down to 320px width
Storybook
- Badges Card component is documented in Storybook
- Demonstrates:
- Empty state
- Filled state
- Variable badge counts
- With and without CTA button
- Code snippets are provided
Accessibility and Analytics
- Semantic structure — Use appropriate structural elements (e.g.
section, headings) for the card container
- Accessible badge list — Badge grid must be accessible via keyboard and screen reader (e.g. use a list element with meaningful labels)
- Analytics readiness — Component must allow analytics-related attributes or identifiers to be passed via props without internal modification
Dependencies / Assumptions
- Required design tokens are implemented
- Icon tokens for all badge types are available
- Button component is available
- Figma is the source of truth for layout and spacing
Definition of Done
- Badges Card component implemented and reusable
- Empty and filled variants verified
- Icon token usage reviewed
- Storybook documentation complete
- Task reviewed and approved
Description
Implement the Badges Card component as defined in Figma. This component is used on user profile pages to surface earned badges, highlighting specific skills, roles, or areas of community contribution.
The component presents badge data in a card-based layout with a heading, and either an empty state prompt or a grid of earned badges depending on whether the user has any badges. Each badge displays an icon token, name, and earned date.
Figma LinkScope
Variants
Component Structure
Each Badges Card includes:
States
Implementation Requirements
badgesprop is populatedProps
Out of Scope
Acceptance Criteria
Component
Storybook
Accessibility and Analytics
section, headings) for the card containerDependencies / Assumptions
Definition of Done