Pular para o conteúdo
Faculdade PhorteDesign System

FAQ

Em andamento

Seção "Dúvidas Frequentes": título e descrição centrados, as perguntas num Accordion e, com hrefTodasAsPerguntas, o link "Ver todas as perguntas", em tema escuro (padrão) ou claro. Vem com quatro perguntas de exemplo.

Função
Conteúdo
Também chamado de
perguntas frequentes, dúvidas, faq
Mora em
app/components/organisms/FAQ.tsx
Última mudança
2026-09-29
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

1280px, em tamanho real

Pular a prévia
Variante Escuro, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Escuro
  2. Claro
  3. Sem destino

Quando usar

Perto do fim de uma página de curso ou da página inicial, para responder o que o candidato pergunta antes de se inscrever.

Faça

  • Passe as perguntas reais do curso: sem elas, entram as quatro de exemplo.
  • Escreva cada pergunta como o candidato perguntaria.
  • Use tema="claro" quando a seção anterior já for escura.
  • Passe hrefTodasAsPerguntas quando houver uma página de dúvidas; sem ele, a seção termina no acordeão.

Evite

  • Publicar com as perguntas de exemplo.
  • Mais de oito ou dez perguntas: aí é uma página de dúvidas.

Quando não usar. Para recolhíveis dentro de outro conteúdo, sem título de seção, use o Accordion. Para a grade curricular, o CurriculumAccordion.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Seção — `<section>` com fundo `--ink` (escuro) ou `--background` (claro), até 800px de largura.
  2. Título — Um SectionTitle centrado: "Dúvidas Frequentes" e a descrição.
  3. Perguntas — Um Accordion, uma pergunta aberta por vez.
  4. Ver todas — Só com `hrefTodasAsPerguntas` (E74): Button `outline` com `href`, redondo; branco no escuro.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
EscuroPadrão: fundo --ink, título branco, acordeão escuro com anel de foco claro.
ClaroFundo --background, título --ink, acordeão claro.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Abrir uma perguntaFecha a que estava aberta (o Accordion sem allowMultiple).
"Ver todas as perguntas"Leva ao hrefTodasAsPerguntas; sem a prop, não aparece (E74, decisão de 2026-09-28) — testado na ficha.

Relacionados