CSS: hero

div[class~="instui-hero"] — Fullbredde toppseksjon med tittel, undertittel og valgfri bakgrunnsbilde.

✅ Bruk Hero når:

• Du trenger en fremtredende sideoverskrift med visuell hierarki

• Siden drar nytte av en stor, iøynefallende åpningsseksjon

• Du vil inkludere bakgrunnsbilder eller gradientaksenter 🚫 Ikke bruk Hero når:

• Du bygger en enkel sideoverskrift — bruk Page-Layout i stedet

• Heroen konkurrerer med kritisk innhold — prioriter lesbarhet

Tilgjengelighet

• Sørg for at tittelen er i en <h1>-tag for semantisk struktur
• Hvis du bruker bakgrunnsbilder, sørg for tilstrekkelig fargekontrast for tekst
• Unngå automatisk avspilling av video eller animasjon som kan distrahere fra innholdet

Bruk

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

Eksempler

Slots

Slot	Beskrivelse
subtitle	Hero undertittelinnhold
title	Hero tittelinnhold

Deler

Del	Beskrivelse
.instui-actions	Valgfrie handlingsknapper eller lenker.
.instui-background	Valgfritt bakgrunnslag (bilde eller gradient).
.instui-content	Beholder for hero-tekst og handlinger.
.instui-overlay	Valgfritt halvgjennomsiktig overlegg for tekstkontrast.
.instui-subtitle	Valgfri støttende tekst eller beskrivelse.
.instui-title	Hovedtittel for hero (vanligvis <h1>).

Pseudo-elementer

Pseudo-element	Beskrivelse
::before	—

Tilstander

Tilstand	Beskrivelse
:optional	—

Forbrukte tokens

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

Relatert

• card