CSS: hero

div[class~="instui-hero"] — Nagłówek o pełnej szerokości z tytułem, podtytułem i opcjonalnym obrazem w tle.

✅ Użyj Hero gdy:

• Potrzebujesz wyróżnionego nagłówka strony z hierarchią wizualną

• Strona zyskuje na dużym, przyciągającym uwagę otwierającym fragmencie

• Chcesz dodać obraz tła lub akcenty gradientowe 🚫 Nie używaj Hero gdy:

• Tworzysz prosty nagłówek strony — zamiast tego użyj Page-Layout

• Hero konkuruje z istotną treścią — priorytetem powinna być czytelność

Dostępność

• Upewnij się, że tytuł jest w tagu <h1> dla struktury semantycznej
• Jeśli używasz obrazów w tle, zapewnij wystarczający kontrast kolorów dla tekstu
• Unikaj autoodtwarzania wideo lub animacji, które mogą rozpraszać uwagę od treści

Użycie

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

Sloty

Slot	Opis
subtitle	Treść podtytułu Hero
title	Treść tytułu Hero

Części

Część	Opis
.instui-actions	Opcjonalne przyciski akcji lub linki.
.instui-background	Opcjonalna warstwa tła (obraz lub gradient).
.instui-content	Kontener na tekst i akcje hero.
.instui-overlay	Opcjonalna półprzezroczysta nakładka zwiększająca kontrast tekstu.
.instui-subtitle	Opcjonalny tekst pomocniczy lub opis.
.instui-title	Główny tytuł hero (zazwyczaj <h1>).

Pseudo-elementy

Pseudo-element	Opis
::before	—

Stany

Stan	Opis
:optional	—

Zużyte tokeny

Token	Typ	Wartość
--instui-color-primary-background	—	—
--instui-font-size-hero	<length>	—
--instui-font-size-large	<length>	—
--instui-font-weight-bold	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Powiązane

• card