O que é?

Accordion é um grupo vertical de cabeçalhos interativos, que permitem abrir e fechar um bloco de conteúdo. Serve para dar mais controle sobre o conteúdo para as pessoas usuárias e também para reduzir a necessidade de rolagem da página.

Anatomia

1. Cabeçalhos / Headers

Bloco contendo título e seta. A seta deve apontar para a direção na qual o conteúdo será mostrado ou recolhido, variando de acordo com o estado do cabeçalho.

2. Conteúdo

Bloco de conteúdo associado a um cabeçalho. É comum conter parágrafos, listas e botões (button text ou button link).

Tipos de Accordion

Existem duas variações de accordion:

Title 3

Padrão. Recomendado para uso nos produtos da plataforma.

<section class="accordions">
  <article class="accordion">
    <div class="accordion-header">
      Label
      <button class="toggle" aria-label="toggle"></button>
    </div>
    <div class="accordion-body">
      <div class="accordion-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
      </div>
    </div>
  </article>
</section>

Title 2

Foi criado para flexibilizar o componente para uso em landing pages e no site.

<section class="accordions">
  <article class="accordion">
    <div class="accordion-header is-large">
      Label
      <button class="toggle" aria-label="toggle"></button>
    </div>
    <div class="accordion-body">
      <div class="accordion-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
      </div>
    </div>
  </article>
</section>

Aplicação

Interação

Por padrão, quando um conteúdo estiver aberto, os demais estarão fechados, alternando de acordo com a interação da pessoa usuária. O designer responsável pelo projeto deve avaliar se é necessário que mais de um conteúdo esteja aberto ao mesmo tempo. Se o contexto exigir isso, pode ser utilizada a propriedade open-multiple do web component.

Boas práticas

• Conteúdos essenciais para o usuário não devem ser escondidos em um accordion. Nesse caso, é melhor mostrar as informações direto na página.
• A pessoa usuária pode desejar imprimir esse conteúdo? Se sim, evite o uso de accordion, pois eles exigem que sejam feitas várias impressões. Um exemplo são os relatórios.
• Recomendamos que sejam feitos testes de usabilidade para avaliar se os benefícios do uso do accordion superam as possíveis desvantagens de esconder o conteúdo.
• Evite o uso de accordion dentro de modais.

Dos e Don’ts

Os accordions não devem utilizar estado desabilitado. Se não houver conteúdo para uma seção, remova o cabeçalho.