Tags & Badges
Kompakte Kennzeichnungen für Hersteller, Kategorien und Verfügbarkeit im Shop-Kontext
Brand Tag
BRAND TAG · bg var(--ce-zinc-200) · Pressura Mono 12px/500 · color var(--ce-zinc-600) · radius 4px · padding 4px 8px · Small: 10px, padding 2px 6px
Default
La MarzoccoECMEurekaProfitec
Small
La MarzoccoECMEurekaProfitec
Category Tag mit Anzahl
CATEGORY TAG · Pressura Mono 13px/500 · Anzahl in Klammern, color var(--ce-red-500) · Small: 11px
Default
Siebträger (12)Kaffeemühlen (8)Barmaschinen (5)
Small
Siebträger (12)Kaffeemühlen (8)Barmaschinen (5)
Sale / Status Badge
STATUS BADGE · Pressura Mono 11px/500 · uppercase · radius 4px · padding 2px 8px · Small: 9px, padding 1px 6px
Default
SALENEUAUSVERKAUFT
Small
SALENEUAUSVERKAUFT
Tag Group (Produktkarte)
TAG GROUP · Kombination auf Produktkarte · flex, gap-2
SALELa MarzoccoSiebträger (12)
Linea Classic S
2-Gruppen Siebträgermaschine, Dual Boiler
Spezifikationen
| Variante | Font | Background | Text | Radius | Padding |
|---|---|---|---|---|---|
| Brand Tag | Pressura Mono 12px/500 | var(--ce-zinc-200) | var(--ce-zinc-600) | 4px | 4px 8px |
| Brand Tag Small | Pressura Mono 10px/500 | var(--ce-zinc-200) | var(--ce-zinc-600) | 4px | 2px 6px |
| Category Tag | Pressura Mono 13px/500 | — | var(--ce-zinc-600), Count: var(--ce-red-500) | — | — |
| Category Tag Small | Pressura Mono 11px/500 | — | var(--ce-zinc-600), Count: var(--ce-red-500) | — | — |
| Sale Badge | Pressura Mono 11px/500 uppercase | var(--ce-red-500) | #FFFFFF | 4px | 2px 8px |
| Neu Badge | Pressura Mono 11px/500 uppercase | var(--ce-zinc-950) | #FFFFFF | 4px | 2px 8px |
| Ausverkauft Badge | Pressura Mono 11px/500 uppercase | var(--ce-zinc-500) | #FFFFFF | 4px | 2px 8px |
| Status Badge Small | Pressura Mono 9px/500 uppercase | (wie Default) | (wie Default) | 4px | 1px 6px |