Product Cards
Shop-Produktkarten in zwei Varianten – WooCommerce-Grid und Review-Layout
1. Shop Product Card
BRAND TAG · IMAGE (OBJECT-CONTAIN) · TITLE PRESSURA 18px/500 · PRICE MONO 14px · GANZE CARD KLICKBAR
2. Review Product Card
BRAND LABEL · IMAGE (OBJECT-CONTAIN) · TITLE H3 · DESCRIPTION · PRICE · GANZE CARD KLICKBAR
Spezifikationen: Shop Card
| Element | Specification | Resolved Value |
|---|---|---|
| Card Container | rounded-[16px], border border-default, shadow-card | radius 16px, border #EDEEEF, shadow 0px 8px 36px rgba(0,0,0,0.08) |
| Brand Badge | Pressura Mono 11px, uppercase tracking-wider | text-tertiary #69727D |
| Title | Pressura 18px/500 | text-heading #18191A |
| Price | Pressura Mono 14px | text-secondary #575A61 |
| VAT Label | Pressura Mono 11px | text-tertiary #69727D |
| Image Container | h-[200px] flex center p-4 | object-contain |
| Card Padding | p-5 | 20px |
| Card Link | Gesamte Card klickbar via <a> Tag | no-underline, block |
Spezifikationen: Review Card
| Element | Specification | Resolved Value |
|---|---|---|
| Card Container | rounded-[16px], border border-default, shadow-card | radius 16px, border #EDEEEF, shadow 0px 8px 36px rgba(0,0,0,0.08) |
| Brand Badge | Pressura Mono 11px, uppercase tracking-wider | text-tertiary #69727D |
| Title | Pressura 16px/500 | text-heading #18191A |
| Description | Inter 14px | text-secondary #575A61 |
| Price | Pressura Mono 15px/500 | text-heading #18191A |
| Image Container | h-[200px] flex center p-4 | object-contain |
| Card Padding | p-4 | 16px |
| Card Link | Gesamte Card klickbar via <a> Tag | no-underline, flex-col |
States
| State | Specification | Resolved Value |
|---|---|---|
| Default | shadow-card | 0.08 opacity |
| Hover | shadow-card-hover | 0.16 opacity |
| Transition | transition-shadow | 200ms ease |
Responsive
| Breakpoint | Columns | Query Type |
|---|---|---|
| Default | 1 col | Base |
| @3xl | 2 col | Container Query |
| @4xl | 3 col | Container Query |
| @5xl | 4 col | Container Query |
Agent Checklist
- □Alle Werte aus Spezifikationstabelle uebernommen
- □Shadow-Tokens korrekt (card + card-hover)
- □Hover State implementiert (shadow transition)
- □Dark Mode getestet (Token-Swap, Shadow-Opacity)
- □Image: object-contain, h-200px
- □Gesamte Card klickbar (<a> Tag, kein Button)
- □Responsive Grid: Container Queries (@3xl, @4xl, @5xl)
- □shopify theme check → 0 Errors
Agent-Checkliste
Alle Werte aus Spezifikationstabelle uebernommen
Responsive Breakpoints implementiert (mobile / md / xl)
Hover/Focus/Active/Disabled States implementiert
Dark Mode getestet (Token-Swap funktioniert)
Konsistenz mit Guidelines geprueft (Font-Zuordnung, Spacing-Grid, Farb-Tokens)
Keine verbotenen Patterns (Card-in-Card, eigene Shadows, Nicht-Grid-Spacing)