Componentes — 08

Accordion

Conteúdo expansível com transição suave. Modo exclusivo (um por vez) ou múltiplo. Ícone +/− animado e hover no header.

08.1

Básico — modo exclusivo

Por padrão, abrir um item fecha o anterior. Clique para alternar.

FAQ simples
<Accordion items={[
  { title: "Pergunta 1", content: "Resposta..." },
  { title: "Pergunta 2", content: "Resposta...", defaultOpen: true },
]} />
08.2

defaultOpen — item aberto por padrão

Passe defaultOpen: true no item para que ele inicie expandido.

Item 3 inicia aberto via defaultOpen: true
O curso é 100% online e estruturado por força e concurso. Inclui videoaulas, questões comentadas, simulados cronometrados e acompanhamento de desempenho por módulo. Você estuda no seu ritmo, com acesso por 12 meses.
08.3

allowMultiple — vários abertos simultaneamente

Com allowMultiple, cada item controla seu próprio estado independentemente.

Etapas do concurso — múltiplos abertos
<Accordion allowMultiple items={etapas} />
08.4

Conteúdo rico

O campo content aceita qualquer ReactNode — use Badge, listas ou texto formatado.

Com Badge e lista
ExércitoMarinhaFABPMBombeiros

Cada força possui trilha de estudo dedicada com questões de provas anteriores, simulados e cronograma de revisão adaptado ao edital vigente.

08.5

Tokens Usados

container border--border-strong2px solid #433c34
container shadow--shadow-sm2px 2px 0 var(--ink)
header bg (open)--paper-deep#e3d8bd
header bg (hover)--paper#ede4cf
item separator--border-strong2px solid
content separator--border-default1px solid #c8bda5
icon (open)--accentvar(--b-700)
icon (closed)--pencil#7d7164
content color--pencil#7d7164
transitionmax-height200ms ease