Accordion

Accordion é um componente que permite expandir ou recolher seções de conteúdo, otimizando o espaço em tela e facilitando a leitura de informações organizadas em tópicos.

Figma

---

Uso

Use o Accordion quando houver necessidade de exibir múltiplos blocos de conteúdo de forma colapsada, especialmente em contextos como perguntas frequentes (FAQ). Ele é útil para reduzir a carga cognitiva, evitando a exibição de textos longos de forma permanente, e permite que o usuário escolha o que deseja expandir.

---

Anatomia

❖. Container

• Agrupa todos os elementos internos do Accordion.

• Pode conter um ou mais itens independentes.

• Não recebe conteúdo diretamente, mas organiza visualmente os demais elementos.

1. Label

• Recebe o texto da pergunta ou título do conteúdo.

• Obrigatório.

• Deve ser breve e descritivo, permitindo identificar rapidamente o conteúdo ao qual se refere.

• Em listas, recomenda-se manter consistência na formatação.

2. Text

• Recebe o conteúdo descritivo ou explicação correspondente ao Label.

• Obrigatório.

• Deve suportar blocos de texto com diferentes comprimentos.

• Pode conter quebras de linha e outros elementos inline (como links), conforme o conteúdo exigir.

3. Divider

• Elemento visual embutido que separa os itens da lista.

• Não aparece no último item da sequência.

• Não recebe conteúdo, apenas reforça a separação visual.

4. Chevron Icon

• Indica visualmente a ação de expandir/recolher o conteúdo.

• Não recebe conteúdo diretamente, mas pode ser rotacionado conforme o estado (aberto ou fechado).

• Deve ser claramente visível e seguir padrões de acessibilidade visual.

---

Histórico de Atualizações

Figma	Gitbook	Android	iOS	Web
14/07/2025	18/07/2025			Ver na tabela

Percebeu um erro, ficou com dúvida ou tem uma sugestão?

Contribua com o Kósmos preenchendo nosso formulário de contribuição — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo para todo o time.