CSS: hero

div[class~="instui-hero"] — Seksyon header lajè konplè ak tit, sou-tit, ak imaj background opsyonèl.

✅ Sèvi ak Hero lè:

• Ou bezwen yon header paj ki vizib avèk yon iyerachi vizyèl

• Paj la benefisye de yon seksyon ouvèti gwo ki atire je

• Ou vle enkli imaj background oswa aksan dégradé 🚫 Pa sèvi ak Hero lè:

• Wap konstwi yon header paj senp — itilize Page-Layout olye

• Hero a konpetisyon ak kontni kritik — bay priyorite pou lizibilite

Aksè

• Asire tit la nan yon <h1> tag pou estrikti semantik
• Si w ap itilize imaj background, bay kontrast koulè ase pou tèks la
• Evite autoplay sou videyo oswa animasyon ki ta ka dezoryante lektè a

Itilizasyon

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

Espas

Espas	Deskripsyon
subtitle	Kontni sou-tit Hero
title	Kontni tit Hero

Pati

Pati	Deskripsyon
.instui-actions	Bouton aksyon oswa lyen opsyonèl.
.instui-background	Kouch background opsyonèl (imaj oswa dégradé).
.instui-content	Kontenè pou tèks Hero ak aksyon.
.instui-overlay	Kouch semi-transparan opsyonèl pou kontrast tèks.
.instui-subtitle	Tèks sipò oswa deskripsyon opsyonèl.
.instui-title	Tit prensipal hero a (tipikman <h1>).

Pseudo-eleman

Pseudo-eleman	Deskripsyon
::before	—

Eta

Eta	Deskripsyon
:optional	—

Tokens konsome

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

Ki gen rapò

• card