Bloco Acordeão
Seções expansíveis para manter um e-mail longo fácil de escanear — FAQs, detalhes de pedidos, termos — sem forçar todo destinatário a ler tudo, precisando ou não.
Como funciona
O e-mail e a visualização ao vivo hospedada usam deliberadamente duas implementações diferentes, não uma única árvore de marcação compartilhada. Na visualização ao vivo, um navegador de verdade, cada item é um elemento nativo <details>/<summary>. Isso é mais acessível do que um truque de CSS: é operável por teclado, carrega um indicador nativo de divulgação, e funciona com leitores de tela prontamente, então não há motivo para abrir mão disso só para compartilhar código com o renderizador de e-mail.
No HTML enviado por e-mail, o suporte a <details> é inconsistente entre clientes de e-mail, então cada item usa em vez disso a mesma técnica de caixa de seleção escondida mais rótulo com :checked que os blocos de carrossel e raspadinha usam. Isso é uma caixa de seleção escondida, um <label> estilizado como o título clicável, e um <div> de conteúdo que é display:none até que sua caixa de seleção seja marcada. Nesse momento, uma regra #item-id:checked ~ .acc-content{display:block} o revela. Cada item alterna de forma independente; não há comportamento de "apenas um aberto por vez".
Onde quer que essa técnica de CSS não seja respeitada (o mecanismo Word do Outlook, ou um cliente que remove blocos <style>), o fallback não é um link em outro lugar — é o padrão mais seguro possível: todo item é renderizado já expandido. Nada fica escondido atrás de um gesto que um cliente não consegue executar, então um destinatário em um cliente reduzido vê o FAQ completo ou os detalhes completos do pedido de imediato, só sem o recurso de recolher/expandir. Isso espelha o mesmo padrão de "padrão seguro" que o bloco de raspadinha usa para a revelação do seu prêmio.
Campos configuráveis:
- Cor de fundo, preenchimento interno, borda (largura/estilo/cor) e raio da borda — aplicam-se ao cartão externo do acordeão, compartilhado entre todos os itens.
Cada item do acordeão (um nó filho, adicionado/reordenado de forma independente) carrega:
- Título — o texto do cabeçalho sempre visível, tocável para expandir/recolher.
- Conteúdo — o texto do corpo revelado por baixo, renderizado preservando as quebras de linha.
- Cor do título/tamanho de fonte do título e cor do conteúdo/tamanho de fonte do conteúdo independentes por item, para que um aviso ou uma entrada de FAQ em destaque possa se sobressair em relação às vizinhas.
Um acordeão é conteúdo puro, como um bloco de texto ou imagem — expandir um item não é um evento de interação. Nada sobre quais itens um destinatário abriu é registrado, e o bloco nunca aparece no painel de respostas, na exportação de CSV, ou em um webhook do projeto.
Exemplos
Subject
Your order questions, answered
Uma seção de FAQ no final de um e-mail de lançamento de produto ou de integração mantém a mensagem principal curta, ao mesmo tempo em que responde às cinco perguntas que todo mundo faz. Destinatários que não precisam do detalhe nunca o veem expandido, e destinatários que precisam ainda recebem um fallback totalmente expandido caso o cliente deles não consiga recolhê-lo de início. Um e-mail de confirmação de pedido pode dobrar detalhes de envio, política de devolução e preços detalhados em três seções recolhidas, em vez de uma parede de texto. Um resumo de newsletter pode usar um item por matéria, com a manchete como título e um resumo de duas frases como conteúdo, permitindo que os destinatários folheiem as manchetes e expandam apenas o que lhes interessa.
Como é o fallback estático
<div style="border:1px solid #e5e7eb;border-radius:6px;padding:10px 14px;margin-bottom:8px" id="em-acc-1">
<label for="em-acc-1-t" style="display:block;margin:0;font-weight:600;font-size:15px;color:#111827;cursor:pointer">
Do you offer refunds?
</label>
<div class="acc-content" style="margin:8px 0 0;font-size:14px;color:#111827">
Yes — within 30 days of purchase, no questions asked.
</div>
</div>
A caixa de seleção escondida e sua regra de estilo :checked são omitidas aqui, já que estão envolvidas em um nível apenas cinético — em um cliente que as ignora, .acc-content não tem nenhuma regra escondendo-a, então ela é renderizada expandida por padrão, exatamente como mostrado.