CSS: hero

div[class~="instui-hero"] — Heildbreiddar yfirsögn með titli, undirtitli og valfrjálsri bakgrunnsmynd.

✅ Notaðu Hero þegar:

• Þú þarft áberandi síðuhaus með sjónrænum forgangsröðun

• Síðan nýtur góðs af stórri, athygli-grípandi opnunarskeiði

• Þú vilt innihalda bakgrunnsmyndir eða litablöndu 🚫 Ekki nota Hero þegar:

• Að byggja einfaldan síðuhaus — notaðu Page-Layout í staðinn

• Hero keppir við mikilvægt efni — forgangsraða læsileika

Aðgengi

• Gakktu úr skugga um að titillinn sé í <h1> taggi fyrir merkingarbyggingu
• Ef bakgrunnsmyndir eru notaðar, sjáðu til að litamunur texta sé nægur
• Forðastu sjálfvirka uppspilun á myndböndu eða hreyfimyndum sem gætu truflað efnið

Notkun

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

Dæmi

Raufar

Rauf	Lýsing
subtitle	Efni undirtitils Hero
title	Efni titils Hero

Hlutar

Hluti	Lýsing
.instui-actions	Valfrjálsar aðgerðahnappir eða tenglar.
.instui-background	Valfrjáls bakgrunnslag (mynd eða litablending).
.instui-content	Ílát fyrir Hero-texta og aðgerðir.
.instui-overlay	Valfrjáls hálfgagnsæ skygging fyrir textamun.
.instui-subtitle	Valfrjáls stuðnings- eða lýsandi texti.
.instui-title	Aðal-Hero-titill (venjulega <h1>).

Sýndareiningar

Sýndareining	Lýsing
::before	—

Stöður

Staða	Lýsing
:optional	—

Notuð tákn

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

Tengdar

• card