Hero

Gestalten Sie den Standard-Hintergrund und die Textfarben des Hero-Banners auf Landing-Pages.

1 MIN READ

Hero wird oben auf einer Landing-Page gerendert. Siehe Landing-Pages für die Markdown-Syntax. Jede von ihm verwendete Farbe ist eine website-weite Design-Entscheidung, die hier in CSS festgelegt wird; der {% hero %}-Tag selbst hat keine eigenen Farbattribute.

Die Override-Datei öffnen

Text

config/styles/hero.css

Tokens

Token	Was es steuert
`--hero-bg`	Einfarbiger Hintergrund, verwendet, wenn ein Hero kein `background`-Bild hat. Standardmäßig transparent, sodass der Seitenhintergrund durchscheint.
`--hero-title-color`	Titel-Textfarbe. Standardmäßig `--color-fg`.
`--hero-title-accent-color`	Farbe der Akzentzeile des Titels (`titleAccent` in Markdown).
`--hero-desc-color`	Beschreibungs-Textfarbe. Standardmäßig `--color-fg-muted`.
`--hero-image-radius`	Eckenradius des Vordergrundbilds eines Heros, falls vorhanden.
`--hero-image-shadow`	Schlagschatten unter diesem Vordergrundbild.

Beispiel hero.css

Eine config/styles/hero.css, die jeden Token auf dieser Seite festlegt, für Hell- und Dunkelmodus:

Css

:root {
  --hero-bg: #f8fafc;
  --hero-title-color: #1c1c1c;
  --hero-title-accent-color: #0f766e;
  --hero-desc-color: #6b7280;
  --hero-image-radius: 10px;
  --hero-image-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
}

.dark {
  --hero-bg: #0f172a;
  --hero-title-color: #ebebeb;
  --hero-title-accent-color: #2dd4bf;
  --hero-desc-color: #9ca3af;
}

Nächster Schritt

Abschnitte gestalten.