Karten-Reihe (Scroll) — section.card-row
Horizontale Content-Karten-Reihe mit CSS-Scroll-Snap (kein JS): farbige Karten (Ton per Prop aus Tokens) mit Badge, Titel, Link und optionaler Media-Fläche
Blockv1.1.1Inhaltweb.documentbuilder.preview
Beispiele
Farbige Content-Karten mit Badge, Titel und Link (Scroll-Snap ohne JS)
Ressourcen
Neues aus dem Produkt
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
tone | string: dark | gray | light | "light" |
kicker | string | "" |
title | string | "" |
cards * | array | — |
spacing | string: none | sm | md | lg | xl | "none" |
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--band-surface | transparent |
--band-text | var(--color-text-default) |
--band-muted | var(--color-text-muted) |
--band-line | color-mix(in srgb, var(--band-text) 14%, transparent) |
--card-surface | var(--color-band-dark) |
--card-text | var(--color-band-dark-text) |
Genutzte Design-Tokens
border.hairline color.accent color.action.on-primary color.action.primary color.band.dark color.band.dark-muted color.band.dark-text color.band.gray color.band.gray-muted color.band.gray-text color.surface.page color.text.default color.text.muted container.lg font.family.default font.family.display font.family.mono font.leading.display font.size.display leading.tight radius.sm radius.surface size.12 size.2 size.4 size.5 size.6 size.8 text.md text.sm text.xl text.xs tracking.wide weight.bold weight.semibold