CSS: hero

div[class~="instui-hero"] — Seção de cabeçalho em largura total com título, subtítulo e imagem de fundo opcional.

✅ Use Hero quando:

• Você precisa de um cabeçalho de página proeminente com hierarquia visual

• A página se beneficia de uma seção inicial grande e chamativa

• Você quer incluir imagens de fundo ou acentos em gradiente 🚫 Não use Hero quando:

• Está construindo um cabeçalho de página simples — use Page-Layout em vez disso

• O hero compete com conteúdo crítico — priorize a legibilidade

Acessibilidade

• Garanta que o título esteja em uma tag <h1> para estrutura semântica
• Se usar imagens de fundo, forneça contraste de cor suficiente para o texto
• Evite autoplay em vídeo ou animação que possa distrair do conteúdo

Uso

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

Slots

Slot	Descrição
subtitle	Conteúdo do subtítulo do Hero
title	Conteúdo do título do Hero

Partes

Parte	Descrição
.instui-actions	Botões de ação ou links opcionais.
.instui-background	Camada de fundo opcional (imagem ou gradiente).
.instui-content	Contêiner para texto e ações do hero.
.instui-overlay	Sobreposição semi-transparente opcional para contraste do texto.
.instui-subtitle	Texto de apoio ou descrição opcional.
.instui-title	Título principal do hero (normalmente <h1>).

Pseudo-elementos

Pseudo-elemento	Descrição
::before	—

Estados

Estado	Descrição
: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