CSS: hero

div[class~="instui-hero"] — Header-sektion i fuld bredde med titel, undertitel og valgfrit baggrundsbillede.

✅ Brug Hero når:

• Du har brug for en fremtrædende sideoverskrift med visuel hierarki

• Siden har fordel af en stor, iøjnefaldende åbningssektion

• Du vil inkludere baggrundsbilleder eller gradient-accenter 🚫 Brug ikke Hero når:

• Bygger du en simpel sideoverskrift — brug i stedet Page-Layout

• Hero'en konkurrerer med kritisk indhold — prioriter læsbarhed

Tilgængelighed

• Sørg for, at titlen er i en <h1> tag for semantisk struktur
• Hvis du bruger baggrundsbilleder, sørg for tilstrækkelig farvekontrast for tekst
• Undgå automatisk afspilning af video eller animation, der kan distrahere fra indholdet

Brug

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

Slots

Slot	Beskrivelse
subtitle	Hero undertitelindhold
title	Hero titelindhold

Dele

Del	Beskrivelse
.instui-actions	Valgfri handlingsknapper eller links.
.instui-background	Valgfrit baggrundslag (billede eller gradient).
.instui-content	Container til hero-tekst og handlinger.
.instui-overlay	Valgfri semitransparent overlay for tekstkontrast.
.instui-subtitle	Valgfri understøttende tekst eller beskrivelse.
.instui-title	Hoved-hero-titel (typisk <h1>).

Pseudo-elementer

Pseudo-element	Beskrivelse
::before	—

Tilstande

Tilstand	Beskrivelse
:optional	—

Forbrugte tokens

Token	Type	Værdi
--instui-color-primary-background	—	—
--instui-font-size-hero	<length>	—
--instui-font-size-large	<length>	—
--instui-font-weight-bold	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Relateret

• card