CSS: hero

div[class~="instui-hero"] — Secció d'encapçalament d'amplada completa amb títol, subtítol i imatge de fons opcional.

✅ Utilitza Hero quan:

• Necessites un encapçalament de pàgina destacat amb jerarquia visual

• La pàgina es beneficia d'una secció d'obertura gran i cridanera

• Vols incloure imatges de fons o accents de degradat 🚫 No utilitzis Hero quan:

• Estàs construint un encapçalament de pàgina senzill — utilitza Page-Layout en comptes

• El hero competeix amb contingut crític — prioritza la llegibilitat

Accessibilitat

• Assegura't que el títol està en una etiqueta <h1> per a l'estructura semàntica
• Si utilitzes imatges de fons, proporciona contrast de color suficient per al text
• Evita la reproducció automàtica de vídeo o animacions que puguin distreure del contingut

Ús

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

Exemples

Slots

Slot	Descripció
subtitle	Contingut del subtítol del Hero
title	Contingut del títol del Hero

Parts

Part	Descripció
.instui-actions	Botons o enllaços d'acció opcionals.
.instui-background	Capa de fons opcional (imatge o degradat).
.instui-content	Contenidor per al text i les accions del hero.
.instui-overlay	Superposició semi-transparente opcional per al contrast del text.
.instui-subtitle	Text de suport o descripció opcional.
.instui-title	Títol principal del hero (normalment <h1>).

Pseudoelements

Pseudoelement	Descripció
::before	—

Estats

Estat	Descripció
:optional	—

Tokens consumits

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

Relacionat

• card