CSS: hero

div[class~="instui-hero"] — Header-sektuvdna vuođđuid lađaid, title, subtitle ja valjuhit fápmuovttoluohkái.

✅ Gulahit Hero go:

• Don báhtá guhkat álggihan-header maid leat váldit visuoála hierarchy

• Sidu boađehahttá leat buorre olggobealde, suurta ja ožžon dahje njuoga čuovgga sektion

• Don háliidat oktavuođat fápmušvuođa dahje gradient-accents 🚫 Álkit gulahit Hero go:

• Gávdnot ealli header — gulahit Page-Layout nástta

• Hero háliida dáiddalaččat buoremus-ávžžut sátniččoahkkin — prioritere čállinbáikkit

Accessibility

• Earáha titli leat <h1> tagas semantihkalaš struktuvrra
• Jus don lohkát fápmuovttot, dávjá gelddolaš gávdnat color-contrasti čállinbáikkis
• Ađđit álkit autoplay videos dahje animašuvnna mii galgá bargat dovdduin sivdnáid

Buktáhašvuohta

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

Exempla

Slottat

Slott	Description
subtitle	Hero subtitle ođđahttin
title	Hero title ođđahttin

Dála

Dála	Description
.instui-actions	Valjuhit action-buttongat dahje linkkat.
.instui-background	Valjuhit fápmuovttoluohkain (image dahje gradient).
.instui-content	Konteener hero-textta ja action-buttongain.
.instui-overlay	Valjuhit semi-transparent overlay textta kontrastusráigu mii leaba ožžon.
.instui-subtitle	Valjuhit álgejuvvan texta dahje deskripšuvdna.
.instui-title	Ovddas-heddji title (guovtti <h1>).

Pseudo-elementtat

Pseudo-element	Description
::before	—

Stáhtat

State	Description
:optional	—

Tokenat gaskkalit

Token	Type	Vaššun
--instui-color-primary-background	—	—
--instui-font-size-hero	<length>	—
--instui-font-size-large	<length>	—
--instui-font-weight-bold	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Dálkkodat

• card