Destaque
Cartão editorial com foco em benefício
Boa leitura para apresentar propostas de valor, vantagens ou categorias com uma mensagem curta e objetiva.
Studio Help · Blocos
Componente Lista de Cartões
O bloco Lista de Cartões foi pensado para organizar conjuntos repetidos de cartões com imagem, título, texto, botão, ficheiro e ligação dentro de uma grelha responsiva ou de uma lógica de carousel. Permite controlar colunas por dispositivo, alinhamento, cores, raios, navegação e comportamento do bloco sem perder consistência editorial.
Informações gerais
O bloco Lista de Cartões é uma solução modular para apresentar vários conteúdos com a mesma hierarquia visual: uma imagem, um pequeno enquadramento, um texto de apoio e uma ação associada. Funciona bem para serviços, benefícios, categorias, recursos, downloads, campanhas, equipas, testemunhos curtos ou qualquer coleção que precise de repetição com ordem visual.
Este bloco pode incluir:
- um Título geral para a secção e vários cartões repetidos dentro da mesma estrutura
- campos de Imagem, Label, Texto, BT Label e File em cada cartão
- ligações através de Link, Target e URL ext, com suporte a destinos internos e externos
- controlo de Background color, Text color, Button Style, Image border radius e Card border radius
- definição do número de colunas em Tablet, Laptop e Desktop
- regras independentes de carousel para Desktop, Laptop, Tablet e Mobile, além de Skin, Offset, Full Width e animação
Utiliza este componente quando precisas de uma coleção de cartões com ritmo visual consistente e com capacidade de adaptação por dispositivo. É especialmente útil quando queres equilibrar repetição, flexibilidade e uma navegação mais dinâmica sem recorrer a um bloco feito apenas para uma única peça de destaque.
Exemplos visuais do bloco
3 leituras recorrentes da estrutura
O bloco Lista de Cartões pode funcionar como grelha estática, conjunto promocional com navegação ou coleção de recursos com ações diferentes por cartão. Os três exemplos abaixo sintetizam formas comuns de usar a mesma base do componente em contextos distintos.
Quando usar / Quando evitar
Aplicação correta do componente
Quando usar
- Para apresentar serviços, benefícios, categorias, recursos, equipas, destaques ou campanhas com a mesma lógica visual repetida
- Quando faz sentido combinar Imagem, Texto, BT Label e ligação em vários cartões dentro da mesma secção
- Para coleções que precisam de mudar o número de colunas por dispositivo e, em alguns breakpoints, passar para carousel
- Quando a consistência entre cartões é mais importante do que o protagonismo isolado de uma única peça
Quando evitar
- Quando só tens um único conteúdo de destaque e não precisas de repetição nem de comparação entre vários cartões
- Quando cada item tem estrutura demasiado diferente e o conjunto deixaria de funcionar como família visual coerente
- Quando o texto de cada cartão é longo demais e o bloco começa a comportar-se mais como listagem editorial pesada do que como coleção visual
Nesse caso: se a secção tiver apenas uma imagem com copy de apoio, um bloco Imagem, Mosaico ou Vídeo + Texto pode ser mais direto. A Lista de Cartões ganha valor quando existe uma lógica de repetição real entre vários conteúdos.
Como configurar na prática
Sequência de trabalho recomendada
Definir a hierarquia
- Começa por decidir qual é o papel do Título geral da secção e o que cada cartão precisa realmente de comunicar
- Se todos os cartões não tiverem o mesmo tipo de peso visual, vale a pena rever a composição antes de construir a grelha
Preparar o conteúdo
- Organiza Imagem, Label, Texto, BT Label e File de forma consistente entre os vários cartões
- Confirma se cada cartão vai apontar para Link, Target ou URL ext e se essa decisão faz sentido para o utilizador
Definir a grelha
- Ajusta o número de colunas por dispositivo e decide onde a grelha deve permanecer estática ou passar para carousel
- Afina Align, Align Content, cores e raios para garantir uma leitura limpa e coerente
Validar o comportamento
- Testa a secção em Desktop, Laptop, Tablet e Mobile para perceber se a densidade de cartões continua equilibrada
- Se houver carousel ativo, confirma se a navegação, a altura e o ritmo de scroll ajudam realmente a leitura
Boas práticas de conteúdo
Clareza editorial, consistência e ação
Estrutura de cada cartão
- O Label deve ajudar a categorizar ou contextualizar, sem competir com o título principal do cartão
- O texto deve ser curto, claro e proporcional ao espaço disponível; a Lista de Cartões não ganha com blocos excessivamente densos
- O BT Label deve nomear a ação com precisão, em vez de recorrer a chamadas vagas ou genéricas
Imagem, ligação e coerência
- A imagem deve reforçar o conteúdo do cartão e manter qualidade semelhante nas várias peças da coleção
- Se um cartão incluir File, deixa claro que a ação envolve download ou acesso a um recurso complementar
- As cores de fundo, texto e botão devem preservar contraste suficiente para que o conjunto permaneça legível em qualquer estado do layout
Boa prática: tenta fazer com que cada cartão possa ser lido em poucos segundos. Se a coleção inteira for clara mesmo em leitura rápida, o bloco está a cumprir bem o seu papel.
Configurações avançadas do componente Lista de Cartões
Estrutura global, colunas, estilos e navegação
Este ecrã concentra a estrutura base do bloco, o número de colunas por dispositivo, os estilos visuais dos cartões e a lógica de carousel em cada breakpoint.
Estrutura do bloco
- Skin, Disabled block, Offset, Full Width, Block ID e Extra Class definem o enquadramento estrutural da secção
- Estas opções ajudam a encaixar o componente na página e a coordená-lo com âncoras, estilos ou regras específicas
Colunas por dispositivo
- Nº of Columns, Nº of Columns Tablet, Nº of Columns Laptop e Nº of Columns Desktop definem a densidade da grelha em cada camada
- Quanto maior o número de colunas, maior a necessidade de copy curta e imagens visualmente consistentes
Estilo visual
- Margin, Padding, Align e Align Content ajustam o respiro e a organização interna
- Background color, Text color, Button Style, Image border radius e Card border radius afinam a identidade visual do conjunto
Carousel por breakpoint
- Desktop, Laptop, Tablet e Mobile podem ter carousel ativo ou desligado de forma independente
- Dots, Arrows, Center Mode, Adaptive Height, Slides To Show, Slides To Scroll, Rows e Slides Per Row controlam navegação e densidade
Configuração do conteúdo principal
Título da secção, cartões, ficheiro e ligações
Na configuração principal defines o título geral da secção e, dentro de cada item, organizas a imagem, o texto, a ação do botão, ficheiros de apoio e a lógica de destino do cartão.
Título da secção
- O campo Título no topo funciona como enquadramento editorial para todo o conjunto
- Deve introduzir a coleção de cartões e preparar a leitura dos vários itens sem roubar protagonismo a cada peça individual
Imagem e Label
- Cada cartão pode receber Imagem com ALT e TÍTULO, além de um campo Label para categorizar o conteúdo
- Convém manter a mesma lógica visual entre imagens para que a grelha pareça coesa
Texto, botão e ficheiro
- O campo Texto resume o conteúdo do cartão, enquanto BT Label define a ação principal
- O campo File pode ser usado para anexar downloads, documentos ou materiais complementares ao conteúdo
Destino e cores
- Link, Target e URL ext controlam o destino interno ou externo do cartão
- Background color e Text color permitem ajustar visualmente cada item sem perder contraste e legibilidade
Colunas e carousel por dispositivo
Desktop, Laptop, Tablet e Mobile
A mesma coleção pode comportar-se como grelha estática ou como carousel, dependendo do dispositivo. Este controlo fino é importante para preservar equilíbrio, legibilidade e ritmo de navegação em cada breakpoint.
Desktop
- Normalmente é o breakpoint com maior capacidade para mostrar mais colunas ou mais slides em simultâneo
- É também onde Rows e Slides Per Row podem criar composições mais densas sem comprometer demasiado a leitura
Laptop
- Funciona como uma camada intermédia, útil para reduzir ligeiramente a densidade face ao desktop
- Muitas vezes compensa rever Slides To Show e Slides To Scroll para evitar cartões demasiado comprimidos
Tablet
- No tablet costuma ser mais importante proteger a leitura do texto e a área tocável da navegação
- Adaptive Height pode ajudar quando os vários cartões não têm o mesmo volume de texto
Mobile
- Em mobile tende a fazer sentido reduzir a densidade e simplificar a experiência para uma leitura mais linear
- Se houver carousel ativo, convém confirmar se Dots e Arrows continuam a ser úteis e não apenas decorativos
Boa prática: trata as configurações por dispositivo como decisões editoriais, e não apenas técnicas. O que funciona com quatro cartões em desktop pode não funcionar de todo em mobile, mesmo com o mesmo conteúdo.
Guias relacionados
Contexto complementar para este bloco