CSS: hero

div[class~="instui-hero"] — Täysleveä otsikkosektio, jossa on otsikko, alaotsikko ja valinnainen taustakuva.

✅ Käytä Heroa kun:

• Tarvitset huomattavan sivun otsikon, joka luo visuaalisen hierarkian

• Sivusta hyötyy suuri ja silmiinpistävä avausosio

• Haluat sisällyttää taustakuvia tai liukuvärejä 🚫 Älä käytä Heroa kun:

• Rakennat yksinkertaista sivun otsikkoa — käytä sen sijaan Page-Layoutia

• Hero kilpailee tärkeän sisällön kanssa — priorisoi luettavuus

Saavutettavuus

• Varmista, että otsikko on <h1>-tagin sisällä semanttisen rakenteen vuoksi
• Jos käytät taustakuvia, varmista riittävä värikontrasti tekstille
• Vältä automaattista toistoa videoissa tai animaatioissa, jotka voivat häiritä sisältöä

Käyttö

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

Esimerkit

Slotit

Paikka	Kuvaus
subtitle	Heron alaotsikon sisältö
title	Heron otsikon sisältö

Osat

Osa	Kuvaus
.instui-actions	Valinnaiset toimintopainikkeet tai linkit.
.instui-background	Valinnainen taustakerros (kuva tai liukuväri).
.instui-content	Säiliö herotekstille ja toiminnoille.
.instui-overlay	Valinnainen puoliläpinäkyvä peite tekstin kontrastia varten.
.instui-subtitle	Valinnainen tukiteksti tai kuvaus.
.instui-title	Päähero-otsikko (tyypillisesti <h1>).

Pseudo-elementit

Pseudo-elementti	Kuvaus
::before	—

Tilat

Tila	Kuvaus
:optional	—

Käytetyt tokenit

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

Liittyvät

• card