CSS: hero

div[class~="instui-hero"] — Kopfbereich in voller Breite mit Titel, Untertitel und optionalem Hintergrundbild.

✅ Verwende Hero, wenn:

• Du einen auffälligen Seitenkopf mit klarer visueller Hierarchie benötigst

• Die Seite von einem großen, ins Auge fallenden Einstiegsbereich profitiert

• Du Hintergrundbilder oder Farbverläufe hinzufügen möchtest 🚫 Nicht verwenden, wenn:

• Du einen einfachen Seitenkopf baust — verwende stattdessen Page-Layout

• Der Hero mit wichtigen Inhalten konkurriert — Priorisiere Lesbarkeit

Barrierefreiheit

• Stelle sicher, dass der Titel in einem <h1>-Tag für semantische Struktur steht
• Wenn Hintergrundbilder verwendet werden, sorge für ausreichenden Farbkontrast zum Text
• Vermeide Autoplay bei Videos oder Animationen, die vom Inhalt ablenken könnten

Verwendung

@import "@pantoken/plugin-layouts/layouts.css";

Slots

Slot	Beschreibung
subtitle	Hero‑Untertitelinhalt
title	Hero‑Titelinhalt

Teile

Teil	Beschreibung
.instui-actions	Optionale Aktionsschaltflächen oder Links.
.instui-background	Optionale Hintergrundebene (Bild oder Verlauf).
.instui-content	Container für Hero‑Text und Aktionen.
.instui-overlay	Optionale halbtransparente Überlagerung für besseren Textkontrast.
.instui-subtitle	Optionaler unterstützender Text oder Beschreibung.
.instui-title	Haupt‑Hero‑Titel (typischerweise <h1>).

Pseudo-Elemente

Pseudo-Element	Beschreibung
::before	—

Zustände

Zustand	Beschreibung
:optional	—

Verbrauchte Tokens

Token	Typ	Wert
--instui-color-primary-background	—	—
--instui-font-size-hero	<length>	—
--instui-font-size-large	<length>	—
--instui-font-weight-bold	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Verwandt

• card