Hero.

Componente estrutural para abrir páginas com palco visual, imagem principal, título em linhas e marcadores editoriais.

Classes

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

ClasseTipoUso
pen-hero-sectionComponente

Seção de abertura com palco visual, imagem principal, chamada e marcadores.

pen-hero-section__stageElemento

Palco visual do hero, com imagem opcional, stickers e título sobreposto.

pen-hero-section__imageElemento

Imagem de fundo ou apoio visual da abertura.

pen-hero-section__ornamentElemento

Imagem decorativa opcional posicionada sobre o palco visual.

pen-hero-section__titleElemento

Título fragmentado em linhas, com suporte a ênfases cromáticas.

pen-hero-section__emphasisElemento

Trecho destacado dentro do título.

pen-hero-stickerElemento

Marcador editorial posicionado sobre o palco visual.

Hero editorial

Use no início de páginas que precisam combinar imagem, chamada forte e marcadores visuais.

Estudante sorrindo segurando cadernos.DiagnósticoMetaPerformanceExecução

Sua aprovação não é sorte é método

renderHeroSection({
  title: [
    { text: "Sua" },
    { text: "aprovação" },
    {
      segments: [
        { text: "não é " },
        { text: "sorte", emphasis: "blue" },
      ],
    },
    {
      segments: [
        { text: "é " },
        { text: "método", emphasis: "yellow" },
      ],
    },
  ],
  image: {
    src: "/component-assets/hero/student.png",
    alt: "Estudante sorrindo segurando cadernos.",
  },
  ornaments: [
    { src: "/component-assets/hero/star.svg", alt: "", placement: "bottom-right" },
  ],
  stickers: [
    { label: "Diagnóstico", tone: "pink" },
    { label: "Meta", tone: "green" },
    { label: "Performance", tone: "yellow" },
    { label: "Execução", tone: "orange" },
  ],
});