CSS: hero

div[class~="instui-hero"] — Glava v polni širini s naslovom, podnaslovom in izbirno ozadno sliko.

✅ Uporabite Hero, kadar:

• Potrebujete poudarjeno glavo strani z vizualno hierarhijo

• Stran ima koristi od velike, vpadljive uvodne sekcije

• Želite vključiti ozadne slike ali gradientne poudarke 🚫 Ne uporabljajte Hero, kadar:

• Gradite preprosto glavo strani — namesto tega uporabite Page-Layout

• Hero tekmuje s ključnimi vsebinami — dajte prednost berljivosti

Dostopnost

• Prepričajte se, da je naslov v oznaki <h1> za semantično strukturo
• Če uporabljate ozadne slike, zagotovite zadosten kontrast barv za besedilo
• Izogibajte se samodejnemu predvajanju videa ali animacij, ki bi lahko odvračale pozornost od vsebine

Uporaba

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

Primeri

Sloti

Slot	Opis
subtitle	Vsebina podnaslova heroja
title	Vsebina naslova heroja

Delii

Del	Opis
.instui-actions	Izbirni gumbi za dejanja ali povezave.
.instui-background	Izbirna ozadna plast (slika ali gradient).
.instui-content	Kontejner za besedilo in dejanja heroja.
.instui-overlay	Izbirni polprosojni prekrivni sloj za kontrast besedila.
.instui-subtitle	Izbirno podporno besedilo ali opis.
.instui-title	Glavni naslov heroja (običajno <h1>).

Psevdo-elementi

Psevdo-element	Opis
::before	—

Stanja

Stanje	Opis
:optional	—

Porabljeni žetoni

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

Sorodno

• card