Bloco Carrossel
Uma galeria de imagens deslizável, controlada inteiramente por CSS — sem JavaScript, então funciona em todo cliente que suporta a técnica :checked subjacente, e degrada para uma única imagem clara em qualquer outro lugar.
Como funciona
O nível cinético é uma máquina de estados baseada em botões de rádio: cada slide recebe um input de rádio oculto compartilhando um mesmo nome de grupo, um rótulo renderizado como um ponto, e um quadro cuja visibilidade é controlada por um seletor irmão :checked ~. Tocar em um ponto (ou, onde suportado, deslizar) marca seu rádio, e o quadro correspondente se torna visível enquanto os outros permanecem com display:none. O rádio do primeiro slide começa marcado, então o bloco sempre abre no slide um. Esse é o mesmo mecanismo em que os blocos de acordeão e raspadinha se baseiam, apenas aplicado a uma fileira de quadros mutuamente exclusivos em vez de alternâncias independentes.
Onde essa técnica de CSS não é respeitada (o motor de renderização baseado no Word do Outlook, e qualquer cliente que remove blocos <style> ou ignora seletores irmãos), o bloco recorre a um cartão estático. Esse cartão mostra apenas a imagem e a legenda do primeiro slide, além de um link "Ver todos os N slides" para a visualização ao vivo hospedada. A visualização ao vivo é uma página web real, então lá cada slide fica a um toque de distância, em vez de ficar perdido; ela reutiliza exatamente a mesma marcação :checked, já que um navegador real sempre a suporta. Um carrossel com apenas um slide pula toda a máquina de estados e é renderizado como uma única imagem estática; não há galeria para percorrer.
Campos configuráveis, todos no próprio painel do inspetor do bloco:
- Cor de fundo — o fundo próprio do cartão, independente do tema do e-mail.
- Espaçamento interno — o espaçamento interno do bloco.
- Borda — largura, estilo e cor ao redor de todo o cartão.
- Raio da borda no cartão.
- Cor da legenda e tamanho da fonte da legenda — aplicados uniformemente ao texto da legenda de todo slide.
Cada slide (um filho do carrossel, adicionado/reordenado como qualquer outro item da árvore) carrega seus próprios três campos: uma imagem (escolhida na sua biblioteca de mídia), uma legenda, e uma URL de link opcional. Se definida, tocar na imagem do slide abre esse link, independentemente da navegação por pontos usada para mover entre slides.
Slides não são eventos de interação — um destinatário percorrendo um carrossel não envia nada, então nada sobre a navegação do carrossel aparece no painel de respostas, na exportação CSV ou em um webhook de projeto. O link de um slide, se definido, é um elemento portador de link simples: recebe uma ação "click" roteada através do redirecionamento rastreado do destinatário, da mesma forma que um botão ou uma imagem com link, e entra no mapa de calor de cliques do projeto.
Exemplos
Subject
New arrivals just landed
Um e-mail de lançamento de produto pode usar um carrossel para mostrar três ou quatro ângulos de um item novo, cada slide vinculado à página daquela variante específica — útil em qualquer lugar onde uma única imagem de destaque subestima o produto. Veja Ecommerce e lançamentos de produtos para o padrão mais amplo de gerar cliques diretamente a partir de um envio promocional. Um resumo "novidades do mês" pode trazer um slide por recurso ou artigo, cada um legendado e vinculado ao texto completo, para que o resumo inteiro caiba em um único bloco fácil de escanear em vez de uma longa pilha vertical. Um recapitulativo de evento pode percorrer fotos da última sessão com legendas nomeando o momento. Destinatários que querem ver tudo simplesmente tocam para avançar, e quem tiver um cliente que não consegue animá-lo ainda recebe a foto de capa e um link para o restante.
Como é o fallback estático
<div style="margin:12px 0;background-color:transparent">
<div class="carousel-fallback">
<div class="lv-frame lv-frame-0">
<a href="https://example.com/product-a">
<img src="https://cdn.example.com/slide1.jpg" alt="Slide 1" style="width:100%;max-width:100%">
</a>
<p style="margin:8px 0 0;font-size:14px;color:#374151">Slide 1</p>
</div>
<p style="margin:8px 0 0;font-size:13px">
<a href="https://mailinapp.com/v/eyJhbGci..." style="color:#4f46e5">See all 4 slides →</a>
</p>
</div>
</div>
É isso que um cliente da classe Outlook renderiza: o primeiro slide, sua legenda, e um link para a visualização ao vivo hospedada, onde o restante da galeria pode ser acessado. Em um cliente que respeita o nível cinético, essa mesma marcação está presente, mas oculta por CSS, e a máquina de estados de rádio/ponto assume o controle.