Barras.

Faixas de ação para conectar uma seção visual a uma próxima etapa sem acoplar composição completa ao componente de layout.

Classes

Classes públicas disponíveis em `@carvalhorafael/proenem-css/patterns`.

ClasseTipoUso
pen-hero-action-barComponente

Faixa de apoio para hero, com texto contextual e área de CTA.

pen-hero-action-bar__actionElemento

Área destacada que contém o botão de ação principal.

HeroActionBar

Use logo após o Hero visual para adicionar contexto curto e uma próxima ação.

renderHeroActionBar({
  text: [
    { text: "O " },
    { text: "Método PRO", strong: true },
    { text: " não é apenas um cronograma, é uma engenharia de resultados dividida em 4 pilares: " },
    { text: "Meta. Diagnóstico. Execução. Performance.", strong: true },
  ],
  action: {
    href: "#metodo",
    label: "Conheça o Método PRO",
    labelSegments: [{ text: "Conheça o " }, { text: "Método PRO", strong: true }],
  },
});