The Scenario
A Johannesburg-based online grocer, "FreshFetch", needs a responsive product card grid for their store. The product cards display price in ZAR, discounts, product image, badge, rating, and an "Add to Cart" button. The layout must adapt from mobile screens to large desktop monitors.
The Brief
Document the layout rules, spacing tokens, responsive behaviors, and text-truncation logic for the product card. Ensure developer handoff is unambiguous regarding grid behavior.
Deliverables
- Card layout blueprint detailing exact internal spacing (padding, gaps) and absolute dimensions (or flexible bounds)
- Text-wrapping and truncation rules for long product titles (e.g. "Organic Free-Range Extra Large Eggs 12 Pack")
- Responsive layout rules: grid columns and gaps at 3 standard breakpoints (320px, 768px, 1200px)
- Interactive behaviors for the cart button (e.g., hover, loading, added state)
Submission Guidance
Write this as if it were a direct ticket for a frontend engineer. Address edge cases like slow-loading images and extremely long titles.
Submit Your Work
Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.