M28 — Icon List

Módulo de grelha de cartões para apresentar funcionalidades, comodidades, serviços ou passos de um processo. Cada cartão pode combinar até sete elementos opcionais — uma pequena etiqueta, uma imagem grande, um ícone pequeno, um número em grande formato tipográfico, um título, um texto descritivo e um botão. O editor controla, para toda a grelha ao mesmo tempo, quais destes elementos aparecem em cada cartão.

Campo	Valor
Módulo	M28 — Icon List
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Library (página)	Abrir no Figma
Zoho Task	P894-T632
Criada	2026-04-21
Aprovada	—
Aprovada por	—

Screenshots de Referência

Desktop (1440px)

Mobile (375px)

Abrir screenshot mobile (375px) em nova janela →</a>

Variantes por tema

Savoy Palace

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

O Icon List é um módulo versátil de apresentação em grelha. Começa, opcionalmente, com um bloco de texto no topo (uma pequena etiqueta em maiúsculas, um título grande e um parágrafo de descrição) e depois apresenta uma série de cartões organizados em colunas. No computador, os cartões aparecem em quatro colunas; no telemóvel, em duas colunas.

Cada cartão é uma “peça” visual independente, tipicamente usada para:

Apresentar comodidades do hotel (spa, piscina, restaurante, jardins…)
Listar passos ou etapas de um processo (1, 2, 3…)
Destacar benefícios ou características de um serviço
Mostrar prémios, certificações ou afiliações

O editor decide, para a grelha toda, quais dos sete elementos de cartão aparecem: etiqueta, imagem grande, ícone pequeno, número grande, título, texto e botão. Isto permite, sem duplicar módulos, obter configurações muito diferentes — desde cartões densos com imagem, número e texto, até cartões apenas com número e título a servir como uma lista de passos numerados.

No fim da grelha pode aparecer um botão principal (em forma de pílula) e, opcionalmente, um botão secundário em texto sublinhado — útil para levar o visitante a uma página com mais detalhe ou a uma reserva.

Variantes

Variante 1 — Cartões completos com todos os elementos

Como visitante num computador, quero ver uma grelha de cartões com imagem, número e texto para reconhecer rapidamente cada área do hotel e saber o que posso explorar a seguir.

Elementos visíveis:

Bloco de texto no topo: pequena etiqueta em maiúsculas, título grande centrado e um parágrafo de descrição
Grelha de cartões (4 colunas no computador; 2 no telemóvel)
Em cada cartão: pequena etiqueta, imagem grande, ícone pequeno, número em formato tipográfico grande (ex: “01”), título, texto descritivo e um botão sublinhado
No fundo do módulo: um botão principal em forma de pílula e um botão secundário com texto sublinhado (opcional)

Critérios de Aceitação:

O bloco de texto no topo aparece centrado, com etiqueta, título e descrição
A grelha apresenta-se com 4 colunas no computador e 2 colunas no telemóvel
Cada cartão mostra todos os elementos configurados
O número em grande formato aparece por baixo do ícone pequeno
O botão sublinhado do cartão leva o visitante à página indicada
O botão principal no fundo aparece em forma de pílula, com a cor do hotel
O botão secundário aparece apenas quando o botão principal também está preenchido

Variante 2 — Cartões com imagem e texto (sem número)

Como editor de conteúdo, quero mostrar comodidades apenas com imagem e descrição, sem a numeração, quando a ordem não é relevante e quero dar mais destaque visual à fotografia.

Elementos visíveis:

Bloco de texto no topo
Em cada cartão: etiqueta, imagem grande, ícone pequeno, título, texto descritivo e botão
O número em grande formato não aparece
Botão principal opcional no fundo

Critérios de Aceitação:

Quando o número é ocultado na configuração, os cartões apresentam-se sem a numeração grande
O espaço vertical do cartão ajusta-se naturalmente (não fica um vazio onde o número estaria)
A grelha mantém-se equilibrada em altura e alinhamento

Variante 3 — Lista numerada (sem imagens)

Como visitante, quero ver uma sequência numerada clara, por exemplo “01, 02, 03, 04”, para perceber os passos de uma experiência ou as vantagens de um serviço.

Elementos visíveis:

Bloco de texto no topo
Em cada cartão: número em grande formato tipográfico, título, texto descritivo e botão sublinhado
Não aparecem imagens grandes nem ícones pequenos
Botão principal opcional no fundo

Critérios de Aceitação:

Os cartões apresentam apenas número, título, texto e botão sublinhado
As imagens e ícones pequenos não aparecem e não deixam espaço vazio
Os números continuam a ser gerados automaticamente a partir da posição do cartão (01, 02, 03…) se não forem escritos manualmente pelo editor
A grelha continua equilibrada visualmente

Variante 4 — Só imagem grande

Como editor de conteúdo, quero destacar apenas a imagem principal em cada cartão, com um título e uma breve descrição, sem outros elementos a competir pela atenção.

Elementos visíveis:

Bloco de texto no topo
Em cada cartão: imagem grande, título e texto descritivo
Não aparece etiqueta, ícone pequeno, número nem botão

Critérios de Aceitação:

Apenas a imagem grande, título e texto são visíveis em cada cartão
A grelha apresenta-se limpa, com foco na imagem
Os espaços vazios dos elementos ocultados são eliminados

Variante 5 — Só ícone pequeno com número

Como editor de conteúdo, quero apresentar uma lista visual de passos ou certificações usando só um pequeno ícone e um número, para criar uma linha simples de símbolos numerados.

Elementos visíveis:

Bloco de texto no topo (opcional)
Em cada cartão: ícone pequeno (símbolo) e número em grande formato
Pode ou não aparecer o título e o texto descritivo, consoante a configuração
Não aparecem imagens grandes

Critérios de Aceitação:

Os cartões apresentam apenas ícone pequeno e número (com ou sem título/texto, consoante a configuração)
Os cartões continuam centrados e equilibrados em altura
O efeito visual transmite uma lista simples de símbolos numerados

Variante 6 — Só texto (sem imagens nem números)

Como editor de conteúdo, quero apresentar uma grelha minimalista apenas com título, texto e botão, para uma lista de benefícios ou argumentos puramente textuais.

Elementos visíveis:

Bloco de texto no topo (opcional)
Em cada cartão: etiqueta, título, texto descritivo e botão sublinhado
Nenhum elemento visual (sem imagens nem número grande)

Critérios de Aceitação:

Os cartões apresentam-se apenas com texto
A grelha mantém o alinhamento e o ritmo visual, mesmo sem imagens
O foco é o conteúdo escrito

Variante 7 — Sem bloco de texto no topo

Como editor de conteúdo, quero mostrar apenas a grelha de cartões, sem etiqueta, título nem descrição no topo, quando o contexto da página já introduz o conteúdo.

Elementos visíveis:

A grelha de cartões aparece no topo do módulo, sem bloco de texto antes
Restantes elementos (cartões e botões no fundo) continuam conforme configurados

Critérios de Aceitação:

Quando a etiqueta, o título e a descrição do topo estão todos vazios, o bloco de texto superior não aparece
A grelha ocupa a posição natural, sem deixar área vazia acima

Variante 8 — Sem botões no fundo

Como editor de conteúdo, quero usar o módulo apenas como apresentação, sem qualquer botão de ação no fundo.

Elementos visíveis:

Bloco de texto no topo e grelha de cartões conforme configurados
Não aparece botão principal nem botão secundário no fundo

Critérios de Aceitação:

Quando o botão principal não está preenchido, não aparece nenhum botão no fundo
O botão secundário nunca aparece sozinho — só acompanha o botão principal
O módulo termina naturalmente na última linha de cartões

Variante 9 — Mobile (2 colunas)

Como visitante num telemóvel, quero ver os cartões em duas colunas, para aproveitar melhor o ecrã estreito e continuar a ver vários cartões ao mesmo tempo.

Abrir screenshot mobile (375px) em nova janela →</a>

Elementos visíveis:

Bloco de texto no topo empilhado verticalmente, com menos largura
Grelha de cartões em 2 colunas
Conteúdo de cada cartão mantém-se igual ao do computador (na mesma ordem)
Botões no fundo também adaptados à largura do ecrã

Critérios de Aceitação:

No telemóvel, os cartões aparecem em 2 colunas (em vez de 4)
Cada cartão mantém o mesmo conteúdo e a mesma ordem interna
O módulo ocupa a largura do ecrã sem criar deslocamento horizontal
Os botões do fundo passam a ocupar a largura disponível e ficam empilhados um por cima do outro

Variante 10 — Adaptação por tema do hotel

Como visitante de qualquer hotel Savoy Signature, quero que o módulo reflita visualmente a identidade desse hotel para reforçar a coerência de marca.

Elementos que mudam entre temas:

Cores do título, da etiqueta, do número grande, dos textos e dos botões
Tipografia dos títulos e do corpo de texto
Forma e cor dos botões no fundo (alguns temas usam pílulas cheias, outros um rectângulo mais discreto)
Cor do ícone pequeno e da etiqueta dos cartões
Em alguns temas (por exemplo, o Savoy Signature Corporativo), o fundo do módulo é escuro e os textos apresentam-se em tons claros

Critérios de Aceitação:

Todas as cores (texto, números, botões) seguem o tema do hotel ativo
A tipografia dos títulos e do corpo de texto corresponde ao tema
Os botões no fundo assumem a forma e a cor específicas do tema
A estrutura e o comportamento mantêm-se iguais entre todos os temas

Interações do Utilizador

Este módulo é maioritariamente estático. As únicas interações disponíveis são com os botões (do cartão e do fundo do módulo):

Interação	Descrição
Clicar no botão sublinhado de um cartão	Navega para a página indicada pelo editor (por exemplo, detalhe de uma comodidade, reserva, página de experiência)
Clicar no botão principal no fundo	Navega para a página indicada pelo editor (por exemplo, página com todas as comodidades, página de reservas)
Clicar no botão secundário no fundo	Navega para uma página alternativa
Passar o rato por cima dos botões	Os botões ganham um pequeno destaque visual (mudam de cor, de fundo ou ganham um sublinhado mais visível) para indicar que são clicáveis
Usar a tecla Tab	Permite saltar entre todos os botões do módulo pela ordem em que aparecem

Elementos

Conteúdos geridos no backoffice para este módulo.

Bloco de texto no topo (opcional)

Elemento	Tipo	Obrigatório	Descrição
Etiqueta	Título	Não	Texto curto em maiúsculas, apresentado acima do título principal. O editor escolhe o nível de cabeçalho.
Título	Título	Não	Texto em destaque no topo do módulo (suporta negrito). O editor escolhe o nível de cabeçalho.
Descrição	Texto	Não	Pequeno parágrafo explicativo apresentado por baixo do título.

Lista de cartões (obrigatório)

Pelo menos um cartão é necessário — sem cartões o módulo não é mostrado. Cada cartão pode conter, todos opcionais:

Elemento	Tipo	Obrigatório	Descrição
Etiqueta do cartão	Texto	Não	Texto curto em maiúsculas, apresentado por cima dos outros elementos do cartão.
Imagem grande	Imagem	Não	Imagem principal do cartão, com proporção horizontal (largura o dobro da altura).
Ícone pequeno	Imagem	Não	Pequeno símbolo ou ícone apresentado por baixo da imagem grande (tipicamente um ícone quadrado de cerca de 64 px).
Número	Texto	Não	Número em grande formato tipográfico (ex: “01”, “42”). Se não for preenchido, é gerado automaticamente a partir da posição do cartão (01, 02, 03…).
Título do cartão	Título	Não	Título do cartão (suporta negrito).
Texto do cartão	Texto	Não	Pequeno parágrafo descritivo.
Botão do cartão	Botão	Não	Botão com texto sublinhado (liga a uma página).

Botões no fundo do módulo (opcionais)

Elemento	Tipo	Obrigatório	Descrição
Botão principal	Botão	Não	Botão em destaque, em forma de pílula, com texto e ligação para uma página.
Botão secundário	Botão	Não	Botão secundário em texto sublinhado. Só aparece quando o botão principal também está preenchido — o secundário nunca aparece sozinho.

Nota: Todos os elementos do bloco de texto no topo e de cada cartão são opcionais. A lista de cartões é o único campo obrigatório. O módulo adapta-se automaticamente à ausência de campos opcionais — os espaços ajustam-se sem deixar áreas vazias.

Opções de Configuração

Opções disponíveis no backoffice para personalizar o comportamento e aspeto do módulo:

Opção	Valores possíveis	Valor padrão	Descrição
Ativar/Desativar	Ativo / Inativo	Ativo	Permite esconder o módulo sem o apagar.
Mostrar etiqueta dos cartões	Sim / Não	Sim	Se ativar/desativar a etiqueta em todos os cartões da grelha ao mesmo tempo.
Mostrar imagem grande	Sim / Não	Sim	Se ativar/desativar a imagem grande em todos os cartões.
Mostrar ícone pequeno	Sim / Não	Sim	Se ativar/desativar o ícone pequeno em todos os cartões.
Mostrar número	Sim / Não	Sim	Se ativar/desativar o número em grande formato em todos os cartões.
Mostrar título do cartão	Sim / Não	Sim	Se ativar/desativar o título em todos os cartões.
Mostrar texto do cartão	Sim / Não	Sim	Se ativar/desativar o parágrafo em todos os cartões.
Mostrar botão do cartão	Sim / Não	Sim	Se ativar/desativar o botão sublinhado em todos os cartões.

Nota: As opções de visibilidade aplicam-se à grelha toda — não se configuram cartão a cartão. Para ocultar um elemento apenas num cartão, basta deixar esse campo em branco nesse cartão específico (o módulo detecta automaticamente que não há conteúdo e omite-o). O restante aspeto visual (cores, tipografia, forma dos botões, tamanho das imagens) é controlado automaticamente pelo tema do hotel.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Bloco de texto no topo	Centrado, com largura máxima equivalente a cerca de metade do ecrã	Centrado, com margens laterais adaptadas ao telemóvel
Grelha de cartões	4 colunas, com espaçamento horizontal e vertical maior	2 colunas, com espaçamento ajustado
Imagem grande no cartão	Ocupa toda a largura do cartão, proporção horizontal	Mantém a mesma proporção, a largura ajusta-se à coluna do telemóvel
Ícone pequeno no cartão	Tamanho de cerca de 64 × 64 px	Tamanho de cerca de 48 × 48 px
Número no cartão	Tamanho tipográfico maior	Tamanho tipográfico reduzido, mas mantendo o protagonismo visual
Botões no fundo	Lado a lado, horizontalmente	Empilhados um por cima do outro, ocupando a largura do ecrã
Módulo inteiro	Margem interna maior, mais espaço à volta	Margem interna menor, adaptada ao ecrã estreito

Estados Visuais

Estado	Descrição
Inicial	O módulo aparece com o bloco de texto (se preenchido) seguido da grelha de cartões. Os números automáticos contam 01, 02, 03… conforme a ordem dos cartões.
Ao passar o rato num cartão com botão	O botão sublinhado do cartão ganha um pequeno destaque visual (mudança de cor ou sublinhado mais marcado).
Ao passar o rato no botão principal	O botão muda ligeiramente de cor ou de intensidade para indicar que é clicável.
Ao passar o rato no botão secundário	O texto sublinhado ganha destaque ou muda de cor.
Sem lista de cartões	O módulo não aparece (é omitido totalmente da página).
Sem bloco de texto no topo	Apenas a grelha de cartões é mostrada, sem espaço vazio acima.
Sem botão principal	Nenhum botão aparece no fundo (o secundário depende do principal).
Elementos do cartão em branco	Os campos não preenchidos não aparecem no cartão — o cartão adapta a altura ao conteúdo existente.
Cartões com diferente quantidade de conteúdo	A grelha mantém todos os cartões com largura igual por coluna, mas cada cartão pode ter altura diferente consoante o seu conteúdo.
Muitos cartões (ex: 12 ou mais)	A grelha continua com 4 colunas no computador (2 no telemóvel) e distribui os cartões por várias linhas.

Acessibilidade

Pode ser navegado inteiramente com o teclado: tecla Tab para saltar entre os botões dos cartões e os botões do fundo, Enter para ativar.
Todos os elementos interativos (botões dos cartões e botões do fundo) têm uma indicação visual clara quando estão selecionados pelo teclado.
Os títulos do módulo são apresentados com os níveis semânticos escolhidos pelo editor (por exemplo, H2, H3, H4), para que leitores de ecrã entendam a hierarquia do conteúdo.
As imagens grandes e os ícones pequenos têm uma descrição alternativa legível por leitores de ecrã, preenchida pelo editor no backoffice.
Quando uma imagem é puramente decorativa (por exemplo, um símbolo abstrato), o editor pode deixar a descrição vazia e a imagem é anunciada como decorativa.
Os botões têm sempre texto visível (nunca apenas ícones) para serem legíveis por leitores de ecrã.
O contraste entre o texto e o fundo cumpre os requisitos de acessibilidade visual em todos os temas — incluindo o tema escuro do Savoy Signature Corporativo.
Quando o número é gerado automaticamente (01, 02, 03…) ele é tratado como um elemento visual e não interfere com a leitura do título por parte dos leitores de ecrã.

Temas

O módulo adapta-se visualmente a cada hotel: cores de fundo, texto e botões seguem a identidade visual do hotel, assim como a tipografia dos títulos e do corpo de texto.

Os 8 hotéis suportados:

Savoy Signature
Savoy Palace
Royal Savoy
Saccharum
The Reserve
Calheta Beach
Gardens
Hotel Next

Diferenças visíveis entre temas (exemplos observados no Figma):

Savoy Palace — tons neutros e dourados; botão principal em castanho escuro, botão secundário com sublinhado dourado; números em cor dourada.
Saccharum — paleta quente com acento verde-sálvia nos botões e etiquetas; tipografia serifada com carácter mais suave.
Calheta Beach — paleta clara com acento vermelho-coral nos botões, nos números e nas etiquetas dos cartões.
Hotel Next — paleta contemporânea com acento em azul-claro; botões com aspeto mais moderno.
Savoy Signature — tema escuro (fundo escuro, texto em tons claros), com acentos dourados discretos nos botões e elementos interativos.

A estrutura (grelha de 4 colunas no computador, 2 no telemóvel), o comportamento e as opções de configuração mantêm-se iguais em todos os temas — apenas as cores, a tipografia e a forma dos botões mudam para seguir a identidade de cada hotel.

Changelog

Data	Estado	Descrição
2026-04-21	Rascunho	Versão inicial criada a partir do Figma e do código já implementado
2026-04-21	Publicada	Publicada no Docmost (nova página)