CSS: hero

div[class~="instui-hero"] — Розділ заголовка на всю ширину з назвою, підзаголовком і необов'язковим фоновим зображенням.

✅ Використовуйте Hero, коли:

• Вам потрібен помітний заголовок сторінки з візуальною ієрархією

• Сторінка виграє від великого, привабливого вступного блоку

• Ви хочете включити фонові зображення або градієнтні акценти 🚫 Не використовуйте Hero, коли:

• Потрібно побудувати простий заголовок сторінки — натомість використовуйте Page-Layout

• Hero конкурує з критичним контентом — віддавайте пріоритет читабельності

Доступність

• Переконайтесь, що заголовок знаходиться в тегу <h1> для семантичної структури
• Якщо використовуєте фонові зображення, забезпечте достатню контрастність кольору для тексту
• Уникайте автовідтворення відео або анімації, які можуть відволікати від контенту

Використання

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

Приклади

Слоти

Слот	Опис
subtitle	Вміст підзаголовка Hero
title	Вміст заголовка Hero

Частини

Частина	Опис
.instui-actions	Необов'язкові кнопки дії або посилання.
.instui-background	Необов'язковий фоновий шар (зображення або градієнт).
.instui-content	Контейнер для тексту та дій Hero.
.instui-overlay	Необов'язковий напівпрозорий накладний шар для контрастності тексту.
.instui-subtitle	Необов'язковий допоміжний текст або опис.
.instui-title	Основний заголовок Hero (зазвичай <h1>).

Псевдоелементи

Псевдоелемент	Опис
::before	—

Стані

Стан	Опис
:optional	—

Використано токенів

Token	Тип	Значення
--instui-color-primary-background	—	—
--instui-font-size-hero	<length>	—
--instui-font-size-large	<length>	—
--instui-font-weight-bold	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Пов'язані

• card