● Patterns / ProjectCard
ProjectCard.
ProjectCard is the system’s linked work-row pattern. It packages project metadata, a title, and a short description into a single scannable destination card.
How the pattern behaves
ProjectCard is built for scanning first. Each card gives just enough information to help a reader choose where to go next without overloading the list with detail.
In the production UI it appears on the work index, where cards stack into a simple editorial list. The interaction is intentionally quiet: subtle hover fill, title emphasis, and a small arrow to confirm navigation.
Source of truth
ProjectCard is a single-anchor pattern with a small API: number, title, year, href, optional status, and description content. Its strength comes from repeatable structure more than visual complexity.
Pattern roles
ProjectCard is a list pattern, not a general content block. These are the jobs it does best.
Work list item
Represents a single project inside a list of case studies or portfolio entries.
Linked summary
Wraps metadata, title, and description inside one interactive row so the whole card is the target.
Editorial index pattern
Balances structure and personality through numbered labels, serif headings, and restrained hover treatment.
Anatomy
The card is a small composition of metadata, heading, body, and navigation cue. Each part supports quick scanning across a list.
Number label
A small mono label that gives each project a stable position in the sequence.
Meta row
Carries the year, an optional status, and the short divider rule that sets up the card structure.
Project title
The primary focal point of the card, rendered in serif and shifting to primary on hover.
Description slot
Holds a short summary that explains the project without turning the card into a full case study.
Directional cue
The arrow on the right reinforces that the row is a linked destination.
Guidelines
- Use ProjectCard for scannable project indexes or portfolio lists, not for dense content blocks with multiple actions.
- Keep descriptions short enough to scan quickly; the card should invite deeper reading on the destination page, not replace it.
- Use status sparingly for notable states like in progress, shipped, or coming soon.
- Wrap cards in a shared list container so the border rhythm reads as a single sequence.
- Let the whole row stay clickable instead of adding competing nested actions inside the card.
In practice
Is this a list of projects or case studies?
Use ProjectCard.
Does the whole row lead to one destination?
Keep the card as a single anchor.
Is the description getting too long?
Trim it and move detail into the destination page.
Does the item need a visible state like shipped or in progress?
Use the optional status prop.
Does this entry need multiple buttons or controls?
Use a different pattern instead of forcing it into ProjectCard.