Player Card
ProProfile card for individual players showing photo, name, position, key statistics, and team affiliation. Designed for squad pages, search results, and player comparison interfaces.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Full card with photo, name, position, and team badge. | Use on squad listing pages and player directory views. |
| Compact | Inline layout with small avatar, name, and position. | Use in lineup lists, substitution menus, and search dropdowns. |
| With Stats | Extended card with key performance statistics below the player info. | Use on player profile pages and comparison interfaces. |
Usage Guidelines
Do
Provide descriptive alt text for player photos (e.g., "Portrait of John Smith").
Don't
Use player photos without alt text — they carry identity information.
Do
Display stats in a definition list for semantic structure.
Don't
Display more than 4-5 key stats on the card — link to full profile for more.
Do
Show position as text, not just a number.
Don't
Truncate player names — use smaller font or wrap if needed.
Code
Design Tokens
Accessibility
- Player photo alt text includes the player name.
- Stats use <dl>/<dt>/<dd> for semantic pairing.
- Card has aria-label with name and position.