Lineup Grid
ProVisual representation of a team's starting lineup arranged in their tactical formation on a pitch graphic. Player names positioned according to their formation role (4-3-3, 3-5-2, etc.).
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Pitch graphic with player dots/names in formation positions. | Use on match preview and detail pages for visual formation display. |
| With Numbers | Player positions show shirt numbers alongside names. | Use when squad numbers add meaningful context. |
| Comparison | Two formations side by side for head-to-head tactical comparison. | Use on pre-match analysis pages. |
Usage Guidelines
Do
Provide a text-based ordered list as an accessible alternative to the visual formation.
Don't
Rely solely on the visual pitch layout — not all users can perceive spatial arrangements.
Do
Label each player with their name, not just a number or dot.
Don't
Use colour-only differentiation between positions — add position text labels.
Do
State the formation name (e.g., "4-3-3") clearly.
Don't
Animate player positions on load.
Code
Design Tokens
Accessibility
- Visual formation uses role="img" with a descriptive aria-label.
- A hidden ordered list provides the full lineup for screen readers.
- Player names are always text, never just visual dots.