CSS: hero

div[class~="instui-hero"] — Fullbredds rubriksektion med titel, undertitel och valfri bakgrundsbild.

✅ Använd Hero när:

• Du behöver en framträdande sidhuvud med visuell hierarki

• Sidan har nytta av en stor, iögonfallande öppningssektion

• Du vill inkludera bakgrundsbilder eller gradientaccenter 🚫 Använd inte Hero när:

• Bygger ett enkelt sidhuvud — använd Page-Layout istället

• Hero konkurrerar med kritiskt innehåll — prioritera läsbarhet

Tillgänglighet

• Se till att titeln ligger i en <h1>-tagg för semantisk struktur
• Om du använder bakgrundsbilder, ge tillräcklig färgkontrast för texten
• Undvik autoplay på video eller animation som kan distrahera från innehållet

Användning

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

Exempel

Platser

Slot	Beskrivning
subtitle	Innehåll för Hero-undertitel
title	Innehåll för Hero-titel

Delar

Del	Beskrivning
.instui-actions	Valfria åtgärdsknappar eller länkar.
.instui-background	Valfritt bakgrundsskikt (bild eller gradient).
.instui-content	Behållare för hero-text och åtgärder.
.instui-overlay	Valfritt semitransparent överlägg för textkontrast.
.instui-subtitle	Valfri stödjande text eller beskrivning.
.instui-title	Huvudtitel för hero (vanligtvis <h1>).

Pseudo-element

Pseudo-element	Beskrivning
::before	—

Tillstånd

Tillstånd	Beskrivning
:optional	—

Förbrukade tokens

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

Relaterat

• card