Quando usar

• Topo de tela de onboarding — primeira coisa que o usuário lê, define o tom da entrada.
• Landing page e campanhas — onde a voz do Peppe precisa de espaço pra respirar e criar presença antes de qualquer ação.
• Hero de dashboard (opcional) — quando a tela tem contexto suficiente pra merecer uma saudação personalizada acima dos cards (ex.: saudação com nome do usuário + resumo do dia).
• Abertura de seção marcante dentro de uma tela longa — quando uma nova área temática dentro do scroll precisa de âncora visual e textual clara.

Quando não usar

• Tela de listagem densa. O hero rouba espaço útil de dados; em telas como histórico de transações ou agenda de vencimentos, o usuário veio buscar informação, não uma abertura de cena. Começar direto no conteúdo.
• Tela de erro crítico ou DebtState. Tom grave pede abertura seca, não hero — nenhuma superfície de dívida, inadimplência ou risco alto abre com display serif. Ver visual-language.md §3: V-A puro, estado funcional crítico, proporção 100/0.
• Confirmações rotineiras e notificações. Contextos onde o dado tem que vir primeiro não têm espaço para headline de apresentação.

Anatomia

Quatro slots, dois obrigatórios. O componente nunca inverte a ordem vertical dos slots.

• eyebrow (opcional) — posicionamento em caps curto. Máximo 3 palavras. Exemplo: "ONBOARDING", "HOJE", "MEU MAPA". Marca o contexto antes do título.
• title (obrigatório) — voz do Peppe. Sempre em --type-family-serif porque é o momento em que o sistema fala como personagem, não como UI. Marcado como <h1> quando é o título principal da tela.
• subtitle (obrigatório) — apoio ao título. 1–2 linhas, sem redundância. Traz o dado, o convite ou o contexto que o título não entregou sozinho.
• actions (opcional) — 0, 1 ou 2 Buttons em flex-row. Máximo 2; com 3 ou mais o componente vira menu de navegação, que é papel de outra estrutura.

Variantes

Duas variantes de display. A diferença está no tamanho do token de tipografia do title.

Variantes por canal. app: Section Hero renderizado com display serif + subhead sans (default). voz: entrega linear — title + subtitle lidos em sequência; eyebrow e actions omitidos. whatsapp: título em negrito + body em prosa curta + quick-replies (0–2 ações); eyebrow vira etiqueta em caps opcional. e-mail: bloco HTML com h1+p+p (CSS inline de fallback). sms: só o title, máximo 160 chars.

Estados

Estado único: default. O Section Hero é estrutural e estático — não tem estados de loading, hover ou erro próprios. O esqueleto de loading, quando necessário na tela que o hospeda, é responsabilidade do container pai, não do componente.

Tokens aplicáveis

Nota sobre a serif. O limiar de uso da --type-family-serif é ≥ 32px (visual-language.md §4.4). O menor tamanho de display do Section Hero é 56px (tablet+mobile), acima do limiar — a regra está sempre satisfeita neste componente. Em subtitle (20px) e eyebrow (12px) a serif é proibida; ambos usam sans.

Conteúdo

eyebrow é posicionamento — caps curto que situa o usuário antes de ler o título. Máximo 3 palavras. Exemplos válidos: "ONBOARDING", "HOJE", "MEU MAPA", "NOVIDADE". Nunca uma frase completa.

title é voz. Serif porque é o momento em que o Peppe fala diretamente — não como UI, como personagem. A cópia deve ser curta e ter voz direta: "Boa noite, João." funciona; "Bem-vindo de volta ao seu painel financeiro inteligente!" não funciona. Referência de registro: voice-and-tone.md §3.1 linha "Onboarding" — tom acolhedor-funcional, Registro B com pitada.

subtitle é apoio. Deve carregar um dado, um convite ou um contexto que o title não entregou. Nunca repita o title com outras palavras. 1–2 linhas no máximo. Exemplo válido: "Hoje tem 3 compromissos e o mês está no azul." Exemplo inválido: "Olá, João! Bem-vindo de volta!" (eco do title sem dado novo).

actions são ações contextuais da abertura de cena — o que o usuário faz a seguir. Máximo 2. Se houver 2, a hierarquia é secondary (principal) + tertiary (secundária). Nunca 3 ou mais: o componente não é menu.

Referência de voz por superfície: onboarding = Registro B com pitada (acolhedor-funcional); landing/campanha = Registro B com mais licença (ambíguo por design, ironia fina sobre o problema); hero de dashboard = Registro A mais seco (dado direto, saudação funcional). Ver voice-and-tone.md §3.1.

Acessibilidade

• Semântica do title. O title é marcado como <h1> quando é o título principal da tela (onboarding, landing, dashboard). Quando é abertura de seção dentro de uma tela que já tem <h1>, usar <h2>. A classe .peppe-section-hero__title não define o nível — o consumidor escolhe o elemento correto.
• eyebrow semântico. O eyebrow é marcado como <p>. Quando o eyebrow contextualiza o title de forma relevante para leitores de tela (ex.: "ONBOARDING" antes de "Boa noite, João."), adicionar id no eyebrow e aria-describedby apontando para ele no <section> ou no title.
• actions focáveis em ordem lógica. Tab percorre eyebrow (não focável) → title (não focável) → subtitle (não focável) → action primária → action secundária. A ordem visual e a ordem de foco são idênticas.
• Fallback de canal — voz. Em canal de voz, o SDUI entrega apenas title + subtitle. A leitura é linear e já cobre o essencial; eyebrow e actions são omitidos.
• Fallback de canal — SMS. Entrega apenas o title. Máximo 160 caracteres; title curto e direto já cobre o canal.
• Contraste. Title em --color-ink-primary (#171717) sobre --color-surface-base (#F7F7F7) — WCAG AA satisfeito. Subtitle em --color-ink-secondary (#6B6B6B) sobre --color-surface-base ou --color-surface-shell (#FFFFFF) — contraste ~5.8:1, WCAG AA satisfeito em 20px regular. O Section Hero só é suportado sobre superfícies V-A (base/shell/raised); fundos fora dessa escala exigem override de cor do subtitle pelo consumidor, já que --color-ink-secondary só garante AA sobre base/shell.

Do / Don't

Componentes relacionados

• Button — os elementos do slot actions são instâncias de Button. Variantes válidas no Section Hero: secondary (ação principal) e tertiary (saída secundária).
• Card — quando o Section Hero precede um dashboard, os cards que seguem abaixo (Commitment Card, Balance Card) são filhos do container pai, não do Section Hero. O hero não contém cards — ele os anuncia.

Markup de referência

HTML namespaced copiável. Slots opcionais podem ser omitidos sem quebrar o componente.

<!-- Section Hero — variante display (default) --> <section className="peppe-section-hero" aria-labelledby="hero-title"> <!-- eyebrow: opcional — omita se não houver posicionamento --> <p className="peppe-section-hero__eyebrow">PRIMEIROS PASSOS</p> <!-- title: h1 quando é o principal da tela; h2 dentro de seção --> <h1 className="peppe-section-hero__title" id="hero-title"> Boa noite, João. </h1> <!-- subtitle: obrigatório — entrega o dado ou convite --> <p className="peppe-section-hero__subtitle"> Hoje tem 3 compromissos e o mês está no azul. </p> <!-- actions: opcional — máximo 2 botões --> <div className="peppe-section-hero__actions"> <button className="peppe-button peppe-button--secondary" type="button"> <span className="peppe-button__label">Ver compromissos</span> </button> <button className="peppe-button peppe-button--tertiary" type="button"> <span className="peppe-button__label">Deixa pra depois</span> </button> </div> </section> <!-- Section Hero — variante display-lg (ratificado 2026-05-05) --> <section className="peppe-section-hero peppe-section-hero--display-lg" aria-labelledby="hero-title-lg"> <h1 className="peppe-section-hero__title" id="hero-title-lg"> Seu dinheiro explicado. </h1> <p className="peppe-section-hero__subtitle"> Sem planilha. Sem cobrança. </p> <div className="peppe-section-hero__actions"> <button className="peppe-button peppe-button--secondary" type="button"> <span className="peppe-button__label">Começar agora</span> </button> </div> </section> <!-- Section Hero mínimo — sem eyebrow, sem actions --> <section className="peppe-section-hero" aria-labelledby="hero-title-min"> <h2 className="peppe-section-hero__title" id="hero-title-min"> Tudo em ordem. </h2> <p className="peppe-section-hero__subtitle"> Nenhum vencimento nos próximos 7 dias. </p> </section>