Cards
Weiße Bento-Cards auf hellgrauem Grund als zentrales Ordnungsprinzip für Content und Produkte
Globale Card-Regeln
- Shadow: 0px 8px 36px rgba(0,0,0,0.08) → hover: rgba(0,0,0,0.16)
- Border: border border-[var(--ce-border-default)]
- Background: Alle Cards bg-[var(--ce-surface-card)], rounded-[16px]
- Showcase: Cards sitzen auf ce-zinc-50 Hintergrund
- Interaktion: cursor-pointer auf allen klickbaren Cards, transition-shadow duration-200
1. Category Card
Image + Title + Description + Outline Button · bg white · border · shadow · rounded-[16px] · Button px-5 py-2.5
Barmaschine
Entdeckt im Showroom unsere La Marzocco Highlights und weitere Premium-Barmaschinen.
Eversys
Perfekt für Gastronomie, Büro oder Catering. Vollautomaten mit Barista-Qualität.
Home Equipment
Hochwertige Espressomaschinen und Mühlen für den Heimgebrauch.
2. Category Card Variant (Padded Image)
Wie Category Card, aber Image mit p-4 Padding und rounded-md innerhalb der Card
Barmaschine
Entdeckt im Showroom unsere La Marzocco Highlights und weitere Premium-Barmaschinen.
Eversys
Perfekt für Gastronomie, Büro oder Catering. Vollautomaten mit Barista-Qualität.
Home Equipment
Hochwertige Espressomaschinen und Mühlen für den Heimgebrauch.
3. Product Card (Shop)
Hersteller-Badge oben links · Image Placeholder · Titel Pressura 16px/500 · Preis Pressura Mono 15px ce-red-500
ATOM Specialty 65
879,00 €
E65S
1.950,00 €
GS3 AV
7.590,00 €
4. Service Price Card
Variante 1: Einfache Card · Titel Pressura 20px/500 · Preis Pressura Mono 15px/500 ce-red-500
Einkreiser
ab 250 €
inkl. MwSt.
Zweikreiser
ab 300 €
inkl. MwSt.
Dualboiler
ab 350 €
inkl. MwSt.
La Marzocco
ab 400 €
inkl. MwSt.
Variante 2: Inner Border (1:1 coffee-elements.de/service/) · Padding + innerer Div mit Border
Service
alle Preise inkl. MwSt.
5. Team Card
Foto rounded-md (nicht rund) · Name Pressura 16px/500 · Rolle Pressura Mono 13px/400
Tobias
Beratung Köln
Nils
Beratung Köln
Frederik
Beratung Münster
Marius
Beratung
6. Speisekarte / Menu Card
Variante 1: Dotted Border · Name links, Preis rechts · Inter 16px + Pressura Mono 15px
Heißgetränke
Variante 2: Inner Border (1:1 coffee-elements.de/cafe/) · Padding + innerer Div mit Border
Cafe Kliewe
Das Mitbringen eigener Speisen und Getränke ist nicht gestattet.
7. Course Info Card
Titel Pressura 20px/500 · Liste mit Bullet Points · Schedule Pressura Mono 13px ce-zinc-500
Barista Grundkurs
- ·Espresso-Extraktion und Mahlgrad
- ·Milchschäumtechnik und Latte Art
- ·Reinigung und Pflege der Maschine
- ·Wasser und Einfluss auf den Geschmack
Samstags 10–14 Uhr · 4 Stunden · max. 6 Teilnehmer
Latte Art Kurs
- ·Herz, Tulpe und Rosetta gießen
- ·Milchkonsistenz und Temperatur
- ·Freies Üben mit Feedback
Sonntags 11–15 Uhr · 4 Stunden · max. 4 Teilnehmer
Card Rules
| Card-Typ | Radius | Besonderheiten |
|---|---|---|
| Alle Cards (Global) | 16px | bg-[var(--ce-surface-card)], border ce-zinc-200, shadow 0.08 → hover 0.16, cursor-pointer, transition-shadow |
| Category Card | 16px | Image edge-to-edge, Button px-5 py-2.5 |
| Category Variant | 16px | Image mit p-4 Padding, Image rounded-md |
| Product Card | 16px | Hersteller-Badge (ce-zinc-100, Mono 12px), Preis ce-red-500 |
| Service Price (V1) | 16px | Titel + Preis + Subtitle, 4-Spalten-Grid |
| Service Price (V2) | 16px / 12px inner | Inner Border (p-3 + innerer Div mit Border), Preisliste vertikal |
| Team Card | — | Foto rounded-md (nicht rund!), echte Bilder |
| Menu (V1) | 16px | Dotted border-top zwischen Items |
| Menu (V2) | 16px / 12px inner | Inner Border, Hinweis-Text am Ende |
| Course Info | 16px | Middot-Bullets (gleiche Farbe/Größe wie Text), Schedule Mono 13px |
| Showcase-Hintergrund: ce-zinc-50 · Kein schwarzer Rand auf hover · Shadow verdoppelt nur Opacity | ||
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)