Rust Ecommerce Grid
A bold, industrial-themed product content grid designed for artisan marketplaces, home goods stores, and craft ecommerce brands.
Features
- Industrial palette — Deep charcoal (#1a1714) background with rust/terracotta (#c4703f) and copper accents
- Bold typography — Archivo Black for uppercase headings and prices, Work Sans for body text
- 8 product cards — Asymmetric masonry-style column layout with varying heights
- Product details — Category badges, star ratings, review counts, price tags with sale strikethrough
- Interactive cards — Hover reveals quick-view overlay and add-to-cart button
- Industrial texture — SVG grid pattern with dot accents in the background
- Bottom stats — 4 metrics with left-border accent styling
- Responsive — 1 → 2 → 3 → 4 column masonry grid
Dependencies
@/components/ui/badge — Shadcn Badge@/components/ui/button — Shadcn Button@/components/ui/card — Shadcn Card, CardContent, CardFooter@remixicon/react — RiShoppingCartLine, RiFireLine, RiStarFill- Google Fonts — Archivo Black, Work Sans
Customization
- Accent color: Replace
#c4703f (terracotta/rust) with your brand accent
- Products: Edit the
products array — change names, prices, colors, categories
- Card heights: Adjust
height property (tall, medium, short) for masonry variation
- Background: Swap for any dark neutral
