CSS: hero

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

✅ Используйте Hero когда:

• Нужен заметный заголовок страницы с визуальной иерархией

• Странице пойдет на пользу большой, привлекающий внимание начальный блок

• Хотите включить фоновое изображение или градиентные акценты 🚫 Не используйте Hero когда:

• Создаёте простой заголовок страницы — используйте Page-Layout

• Герой конкурирует с критичным контентом — отдавайте приоритет читаемости

Доступность

• Убедитесь, что заголовок заключён в тег <h1> для семантической структуры
• Если используются фоновые изображения, обеспечьте достаточный контраст текста
• Избегайте автозапуска видео или анимации, отвлекающих от контента

Использование

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

Примеры

Слоты

Слот	Описание
subtitle	Подзаголовок героя
title	Заголовок героя

Части

Часть	Описание
.instui-actions	Необязательные кнопки действий или ссылки.
.instui-background	Необязательный фоновый слой (изображение или градиент).
.instui-content	Контейнер для текста героя и действий.
.instui-overlay	Необязательный полупрозрачный оверлей для контраста текста.
.instui-subtitle	Необязательный вспомогательный текст или описание.
.instui-title	Основной заголовок героя (обычно <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