Media-Split — section.media-split
Text-Bild-Wechselzeile: Display-Titel + Text + Text-Link-CTA neben einer Media-Fläche (Bild oder Platzhalter-Fläche), Seite wählbar
Beispiele
Text links, Media-Fläche rechts (Platzhalter ohne Bild-URL)
Slides Studio
Presentation-ready in one prompt
Echte Typografie, kuratierte Paletten. Der nächste All-Hands-Termin ist in Minuten fertig — ohne eine Folie anzufassen.
Mehr erfahren →Eigenschaften
| Prop | Typ | Default |
|---|---|---|
tone | string: dark | gray | light | "light" |
align | string: left | right | "right" |
kicker | string | "" |
title * | string | — |
text | string | "" |
ctaLabel | string | "" |
ctaUrl | string | "" |
imageUrl | string | "" |
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-area | color-mix(in srgb, var(--band-text) 6%, transparent) |
--band-line | color-mix(in srgb, var(--band-text) 14%, transparent) |
--grid-gap | var(--size-10) |
Genutzte Design-Tokens
border.hairline color.accent color.action.primary color.action.primary-hover color.band.dark color.band.dark-muted color.band.dark-text color.band.gray color.band.gray-muted color.band.gray-text color.text.default color.text.muted container.sm font.family.default font.family.display font.family.mono font.leading.display font.size.display leading.loose radius.surface size.10 size.12 size.4 size.6 size.8 text.md text.reading text.sm tracking.wide weight.bold weight.semibold