CSS: hero

div[class~="instui-hero"] — Fullbreidd overskriftsseksjon med tittel, undertittel og valfritt bakgrunnsbilete.

✅ Bruk Hero når:

• Du treng ein framståande sideoverskrift med visuell hierarki

• Sida har nytte av ein stor, iøynefallande opningsseksjon

• Du vil inkludere bakgrunnsbilete eller gradientaksentar 🚫 Bruk ikkje Hero når:

• Bygger ein enkel sideoverskrift — bruk Page-Layout i staden

• Heroen konkurrerer med viktig innhald — prioriter lesbarheit

Tilgjenge

• Sørg for at tittelen ligg i ei <h1>-tag for semantisk struktur
• Ved bruk av bakgrunnsbilete, sørg for tilstrekkeleg fargekontrast for tekst
• Unngå automatisk avspeling av video eller animasjon som kan distrahere frå innhaldet

Bruk

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

Døme

Plassar

Slot	Skildring
subtitle	Hero undertittelinnhald
title	Hero tittelinnhald

Delar

Del	Skildring
.instui-actions	Valfrie handlingsknappar eller lenker.
.instui-background	Valfri bakgrunnslag (bilete eller gradient).
.instui-content	Behaldar for hero-tekst og handlingar.
.instui-overlay	Valfri semigjennomsiktig overlegg for tekstkontrast.
.instui-subtitle	Valfri støttetekst eller skildring.
.instui-title	Hovudtittel for hero (vanlegvis <h1>).

Pseudo-element

Pseudo-element	Skildring
::before	—

Tilstandar

Tilstand	Skildring
:optional	—

Token brukt

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