FAQ

Perguntas frequentes de uma campanha em acordeão: abrir uma pergunta fecha a anterior. Serve como seção da home ou como a página de FAQ do hotsite. Usa Container, Typography e ícones, com cores dos tokens, então segue a marca e o modo da página.

Exemplo: Faq, Default

const Default = () => <Faq
    title="Perguntas frequentes"
    items={[
      {
        question: 'Como faço para participar?',
        answer: (
          <p style={{ margin: 0 }}>
            Compre os produtos participantes, cadastre o cupom fiscal no site da promoção e acompanhe seus números da
            sorte na área do participante.
          </p>
        ),
      },
      {
        question: 'Quem pode participar da promoção?',
        answer: <p style={{ margin: 0 }}>Pessoas físicas maiores de 18 anos, residentes e domiciliadas no Brasil.</p>,
      },
      {
        question: 'Qual é o prazo para participar?',
        answer: <p style={{ margin: 0 }}>Os cupons podem ser cadastrados até a data final informada no regulamento.</p>,
      },
      {
        question: 'Quais são os prêmios?',
        answer: (
          <ul style={{ margin: 0, paddingInlineStart: 20 }}>
            <li>Sorteios semanais de vale-compras;</li>
            <li>Um prêmio final entre todos os participantes.</li>
          </ul>
        ),
      },
      {
        question: 'Não encontrei minha dúvida, o que eu faço?',
        answer: <p style={{ margin: 0 }}>Fale com o atendimento pelo formulário de contato do site da promoção.</p>,
      },
    ]} />;

O que adaptar

Prop	O que é
title	Título da seção (h2).
items	Lista de perguntas: question (texto do botão) e answer (aceita parágrafos, listas e links).

Acessibilidade

Cada pergunta é um botão dentro de um h3, com aria-expanded e aria-controls; a resposta é uma região rotulada pela pergunta. Enter e Espaço abrem e fecham, como o clique.