Use when implementing product display cards for e-commerce.
Product display cards for e-commerce
A Product Card pattern helps teams create a reliable way to summarize a product clearly enough that users can decide whether to inspect it, compare it, or add it immediately. It is most useful when teams need category and search result listings. Compared with adjacent patterns, this pattern should reduce friction without hiding the state, rules, or recovery paths people need to keep moving.
references/pattern.md, then choose the smallest viable variation.aria-describedby or structural headings when useful.The Problem: Counts, totals, identities, and policies are often the main thing users are checking before acting.
How to Fix It? Design trust signals into the main hierarchy instead of leaving them as tiny secondary text.
The Problem: Aggressive prompts can increase taps while harming completion quality or long-term trust.
How to Fix It? Measure the full journey, including reversals, refunds, reports, and hidden dissatisfaction.
The Problem: Social and commerce surfaces invite misuse as soon as they create visible value.
How to Fix It? Plan rate limits, authorization checks, moderation, and audit trails as part of the pattern itself.
For full implementation detail, examples, and testing notes, see references/pattern.md.
Pattern page: https://uxpatterns.dev/patterns/e-commerce/product-card