CSS: hero

div[class~="instui-hero"] — Sección de encabezado de ancho completo con título, subtítulo y imagen de fondo opcional.

✅ Usar Hero cuando:

• Necesites un encabezado de página prominente con jerarquía visual

• La página se beneficie de una sección de apertura grande y llamativa

• Quieras incluir imágenes de fondo o acentos de degradado 🚫 No usar Hero cuando:

• Estés construyendo un encabezado de página simple — usa Page-Layout en su lugar

• El hero compita con contenido crítico — prioriza la legibilidad

Accesibilidad

• Asegúrate de que el título esté en una etiqueta <h1> para la estructura semántica
• Si usas imágenes de fondo, proporciona suficiente contraste de color para el texto
• Evita la reproducción automática de video o animaciones que puedan distraer del contenido

Uso

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

Ranuras

Ranura	Descripción
subtitle	Contenido del subtítulo del Hero
title	Contenido del título del Hero

Partes

Parte	Descripción
.instui-actions	Botones de acción o enlaces opcionales.
.instui-background	Capa de fondo opcional (imagen o degradado).
.instui-content	Contenedor para el texto y las acciones del hero.
.instui-overlay	Superposición semi-transparente opcional para el contraste del texto.
.instui-subtitle	Texto de apoyo u descripción opcional.
.instui-title	Título principal del hero (típicamente <h1>).

Pseudoelementos

Pseudoelemento	Descripción
::before	—

Estados

Estado	Descripción
:optional	—

Tokens consumidos

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

Relacionado

• card