Componente Acordeão
O bloco Acordeão foi pensado para organizar conteúdo em painéis expansíveis, permitindo apresentar várias respostas, detalhes técnicos ou secções editoriais sem sobrecarregar a leitura inicial da página. O componente combina controlo estrutural, tema visual e comportamento de abertura por item.
Informações gerais
O bloco Acordeão é uma solução direta para apresentar informação por camadas, em que cada item tem um título visível e um corpo de conteúdo que pode ser expandido quando necessário. É especialmente útil para FAQs, especificações, políticas, listas de condições, apoio ao cliente ou secções de leitura faseada.
Cada bloco pode incluir:
- vários itens com Título e campo Texto em editor rico
- controlo por item para definir se começa aberto através de Item Open
- ajustes globais como Skin, No Gap, Full Width e Offset
- personalização da linguagem visual com Border radius, Icon type e cores do tema
- campos de apoio como Block ID, Extra Class, Margin, Padding e animação
Utiliza este componente quando a prioridade é facilitar a consulta progressiva da informação e reduzir ruído visual, mantendo o conteúdo disponível sem o mostrar todo de uma vez.
Exemplos visuais do bloco
Três leituras recorrentes do componente
O bloco Acordeão pode assumir leituras muito diferentes consoante a combinação de tema, tipo de ícone, espaçamento e estado inicial dos itens. Os três exemplos abaixo mostram formas comuns de aplicar o componente sem sair da mesma lógica estrutural.
Quando usar / Quando evitar
Aplicação correta do componente
Quando usar
- Para organizar respostas, condições, políticas ou detalhes técnicos em blocos consultáveis
- Quando o conteúdo precisa de existir na página, mas não deve aparecer todo aberto à primeira vista
- Para secções em que a leitura por camadas melhora a compreensão e reduz ruído visual
- Quando precisas de um padrão repetível para vários itens com a mesma lógica estrutural
Quando evitar
- Quando existem apenas um ou dois blocos de conteúdo curtos e a expansão não acrescenta valor
- Quando o utilizador precisa de comparar vários pontos ao mesmo tempo e não em sequência
- Quando os títulos dos itens são vagos e obrigam a abrir tudo para perceber o conteúdo
Como configurar na prática
Estrutura de trabalho recomendada
Definir a estrutura
- Decidir quantos itens precisam realmente de existir no bloco
- Separar os temas por títulos claros e mutuamente distintos
- Reservar o acordeão para conteúdos que beneficiam de leitura progressiva
Escrever os títulos
- Usar títulos diretos, específicos e fáceis de percorrer em scan visual
- Evitar formulações genéricas como “Mais informação” ou “Detalhes”
- Garantir que cada cabeçalho promete com precisão o que será aberto
Montar o conteúdo
- Preencher o campo Texto com editor rico, mas sem criar blocos demasiado extensos
- Usar listas, subtítulos ou parágrafos curtos para facilitar a consulta
- Definir Item Open apenas nos casos em que faz sentido começar com um ponto expandido
Validar a experiência
- Verificar ritmo visual, contraste e consistência entre itens
- Testar o bloco em mobile para confirmar que a interação continua clara
- Garantir que o tema visual não compromete a legibilidade do cabeçalho e do texto
Boas práticas de conteúdo
Clareza, hierarquia e utilidade
Títulos dos itens
- O título deve funcionar como promessa clara do conteúdo interno
- Quanto mais consultável for a lista de cabeçalhos, mais eficaz será o acordeão
- Títulos longos demais prejudicam scan e ocupam demasiado espaço visual
- Se vários itens parecem dizer a mesma coisa, a estrutura provavelmente precisa de revisão
Texto expandido
- O corpo do item deve resolver rapidamente a dúvida que o título levanta
- Parágrafos curtos, listas e pequenos blocos visuais ajudam muito a leitura
- Evita transformar o acordeão num contentor de texto excessivamente longo
- Se um item precisa de muita profundidade, pode valer a pena encaminhar para uma página dedicada
Configurações avançadas do componente Acordeão
Estrutura geral, tema e comportamento visual
Este ecrã concentra os controlos globais do bloco: estrutura base, tipo de ícone, espaçamentos, tema cromático e animação de entrada.
Estrutura base
- Skin define a variante base do bloco
- Disabled block desativa o bloco sem o apagar
- No Gap remove o espaçamento entre itens para uma leitura mais compacta
- Full Width faz o bloco ocupar toda a largura disponível
- Offset ajuda a ajustar o posicionamento dentro da composição da página
Estilo visual
- Border radius (rem) controla o arredondamento geral dos painéis
- Icon type define a linguagem visual do indicador de abertura
- Os campos de tema permitem ajustar Background, Border, Header, Text e Icon color
Espaçamento e animação
- Block ID e Extra Class ajudam em âncoras, ajustes específicos e integração com CSS
- Margin e Padding afinam o encaixe do bloco no ritmo da página
- Animation on/off e Scroll animation type controlam a entrada visual do componente
Configuração do conteúdo principal
Título, texto e estado inicial de cada item
Dentro de cada item defines o Título, o campo Texto com editor rico e se esse item começa aberto através de Item Open.
Título e texto
- O campo Título funciona como cabeçalho clicável do item
- O campo Texto recebe o conteúdo expandido com editor rico, permitindo listas, formatação e blocos mais estruturados
- É importante manter coerência de tom e profundidade entre itens do mesmo bloco
Item Open
- Item Open define se o item começa aberto no carregamento inicial
- Usa esta opção com critério, normalmente para destacar o primeiro ponto ou a informação mais importante
- Se vários itens abrirem de forma desnecessária, o bloco perde a lógica de leitura progressiva
Comportamento visual do acordeão
Decisões que mudam a leitura do componente
No Gap
- Cria uma leitura mais densa e contínua entre itens
- Costuma resultar bem em FAQs extensas, documentos técnicos e listas utilitárias
Icon type
- Ajuda a reforçar a perceção de interação e o tipo de linguagem visual da página
- Setas sugerem navegação; sinais de mais e menos reforçam a lógica de abrir e fechar
Tema cromático
- As cores do cabeçalho, texto e ícone determinam o peso visual do bloco
- Temas mais contrastados transformam o acordeão num elemento de destaque; temas suaves deixam-no mais neutro
Guias relacionados
Blocos com lógicas próximas de estrutura e leitura