CSS: hero

div[class~="instui-hero"] — Teljes szélességű fejlécszakasz címmel, alcímmel és opcionális háttérképpel.

✅ Használd a Hero-t, amikor:

• Szükséged van egy feltűnő oldalcímre vizuális hierarchiával
• Az oldalnak előnyére válik egy nagy, figyelemfelkeltő nyitórész
• Háttérképet vagy átmenetes (gradiens) díszítést szeretnél hozzáadni 🚫 Ne használd a Hero-t, ha:

Egyszerű oldalfejléc készítése — helyette használja a Page-Layoutot A hero verseng a kritikus tartalommal — az olvashatóságot részesítse előnyben

Hozzáférhetőség

• Győződjön meg róla, hogy a cím egy <h1> elemben van a szemantikai szerkezet érdekében
• Ha háttérképeket használ, biztosítson megfelelő színkontrasztot a szöveg számára
• Kerülje az automatikus lejátszást olyan videóknál vagy animációknál, amelyek elvonhatják a figyelmet a tartalomról

Használat

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

Példák

Slotok

Slot	Leírás
subtitle	Hero alcím tartalma
title	Főcím tartalma

Részek

Rész	Leírás
.instui-actions	Opcionális műveleti gombok vagy linkek.
.instui-background	Választható háttérréteg (kép vagy átmenet).
.instui-content	Konténer a kiemelt (hero) szöveg és műveletek számára.
.instui-overlay	Opcionális, félig átlátszó réteg a szöveg kontrasztjához.
.instui-subtitle	Opcionális kiegészítő szöveg vagy leírás.
.instui-title	Fő hero cím (általában <h1>).

Pseudo-elemek

Pseudo-elem	Leírás
::before	—

Állapotok

Állapot	Leírás
:optional	—

Fogyasztott tokenek

Token	Típus	Érték
--instui-color-primary-background	—	—
--instui-font-size-hero	<length>	—
--instui-font-size-large	<length>	—
--instui-font-weight-bold	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Kapcsolódó

• card