Padrões — 01

Hero

Blocos de entrada de página. Estabelecem a proposta de valor, hierarquia de CTA e identidade visual da força. Três variações: claro, escuro e com urgência.

Contrato do bloco

Hero

Prioridade high

Variantes

  • light
  • brand-dark
  • urgent

Anatomia

  • eyebrow
  • badge-group
  • headline
  • supporting-copy
  • primary-cta
  • secondary-cta
  • alert-optional

Tokens

  • --font-display
  • --font-body
  • --accent
  • --surface-brand
  • --fire
  • --paper

Regras responsivas

  • headline deve reduzir por clamp em telas menores
  • grupo de CTA precisa quebrar linha em mobile
  • badge-group deve aceitar wrap sem perder hierarquia

Campos CMS

  • eyebrow — text
  • badgeGroup — list
  • headline * — text
  • supportingCopy * — richText
  • primaryCta * — cta
  • secondaryCta — cta
  • urgencyAlert — text
01.1

Hero Claro

Fundo paper, headline em display, CTA primário verde + secundário. Padrão para páginas institucionais e de força.

Variação clara — fundo paper

ExércitoMarinhaAeronáuticaPolícia MilitarBombeiros

Prepare-se para
as Forças Armadas

Trilhas de estudo por força, banco de questões comentadas e simulados cronometrados. Do zero à aprovação.

Composto por:ButtonBadge
01.2

Hero Escuro — Brand

Fundo verde da marca, texto inverse. Para páginas de conversão de alto impacto.

Variação escura — fundo brand

ExércitoMarinhaAeronáuticaPMBombeiros

Sua aprovação
começa aqui

Método validado por mais de 12.000 aprovados. Estude com quem conhece o concurso.

Composto por:Button (brand-inverse, ghost)
01.3

Hero com Urgência

Alert urgent no topo + CTA laranja. Reserve para quando há prazo real de inscrições.

Com alerta de urgência — vagas limitadas

ExércitoMarinhaAeronáuticaPolícia MilitarBombeiros

Última turma
do semestre

Acesso imediato ao curso completo para Sargento do Exército com suporte até a prova.

Composto por:Alert (urgent)Button (urgent, ghost)Badge
01.4

Diretrizes de uso

Headline sempre em Barlow Condensed 900 uppercase--font-display
↳ Mantenha o hero com hierarquia de entrada forte.
Uma única ação primária por heroButton hierarchy
↳ Não use dois botões primary no mesmo agrupamento.
Urgência real apenas--fire (parcimônia)
↳ Não use Hero 01.3 como padrão decorativo.
Subtítulo em Barlow regular, máximo 2 linhas--font-body
↳ Evite heros verbosos ou com quebra excessiva.
Force badges orientam o usuárioBadge (ex/mb/fab...)
↳ Sempre presente quando há múltiplas forças.