CSS: hero

div[class~="instui-hero"] — Sezione header a tutta larghezza con titolo, sottotitolo e immagine di sfondo opzionale.

✅ Usa Hero quando:

• Hai bisogno di un'intestazione di pagina prominente con gerarchia visiva

• La pagina beneficia di una sezione iniziale ampia e d'impatto

• Vuoi includere immagini di sfondo o accenti a gradiente 🚫 Non usare Hero quando:

• Stai costruendo un'intestazione di pagina semplice — usa Page-Layout invece

• L'hero entra in competizione con contenuti critici — dai priorità alla leggibilità

Accessibilità

• Assicurati che il titolo sia in un tag <h1> per la struttura semantica
• Se usi immagini di sfondo, assicurati di avere sufficiente contrasto cromatico per il testo
• Evita autoplay su video o animazioni che possano distrarre dal contenuto

Uso

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

Slot

Slot	Descrizione
subtitle	Contenuto del sottotitolo dell'Hero
title	Contenuto del titolo dell'Hero

Parti

Parte	Descrizione
.instui-actions	Pulsanti di azione o link opzionali.
.instui-background	Livello di sfondo opzionale (immagine o gradiente).
.instui-content	Contenitore per il testo e le azioni dell'hero.
.instui-overlay	Sovrapposizione semi-trasparente opzionale per il contrasto del testo.
.instui-subtitle	Testo di supporto o descrizione opzionale.
.instui-title	Titolo principale dell'hero (tipicamente <h1>).

Pseudo-elementi

Pseudo-elemento	Descrizione
::before	—

Stati

Stato	Descrizione
:optional	—

Token consumati

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

Correlati

• card