M20 — Item Cards Documents

Grelha de cartões que apresenta vários items, com o seu texto descritivo e acesso rápido aos documentos associados (fichas técnicas, brochuras, fotografias, vídeos). Cada item combina um cartão de informação com uma imagem representativa.

Campo	Valor
Módulo	M20 — Item Cards Documents
Estado	Aprovada
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Library (página)	Abrir no Figma
Zoho Task	P894-T638
Criada	2026-04-21
Aprovada	2026-06-11
Aprovada por	Savoy (cliente)

Screenshots de Referência

Desktop (1440px)

Mobile (375px)

Abrir screenshot mobile (375px) em nova janela →

Variantes por hotel

Savoy Palace

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

O módulo Item Cards Documents apresenta uma lista de conteúdos de travel trade organizada em grelha — tipicamente quartos, suites e facilidades disponíveis para parceiros de viagem (agências, operadores, media). Cada item é composto por dois blocos: um cartão com texto (título, subtítulo, descrição e botões) e uma imagem representativa com uma etiqueta sobreposta.

O que distingue este módulo é a zona de documentos associados: cada cartão tem quatro tipos de documentos fixos — fichas técnicas, brochura, fotografias e vídeos — apresentados como ícones com etiquetas clicáveis. O editor configura o link de cada tipo de documento no backoffice; tipos sem link não aparecem no cartão.

A grelha mostra 3 items por linha em ecrã grande. Quando o número de items ultrapassa 6, aparece automaticamente um botão “Carregar Mais” que permite mostrar os restantes sem sair da página.

O módulo suporta imagens nos formatos JPG, PNG, WEBP, SVG e GIF animado. Os GIFs reproduzem automaticamente em loop.

Variantes

Variante 1 — Grelha de 3 colunas (padrão no computador)

Como parceiro de viagem (agência, operador ou jornalista), quero ver os items disponíveis organizados em colunas, cada um com a descrição, os documentos para download e a imagem, para identificar rapidamente o que preciso e aceder aos materiais.

Elementos visíveis:

Cabeçalho do módulo: etiqueta pequena em maiúsculas (ex: “DOCUMENTOS”), título principal, botão à direita (ex: “Ver todos”)
Grelha com 3 cartões por linha, cartões de informação — título, subtítulo em maiúsculas, descrição, ícones dos documentos disponíveis, botão principal e botão secundário e imagens correspondentes — imagem grande com uma etiqueta sobreposta (canto inferior esquerdo).
Botão “Carregar Mais” centrado no fim da grelha

Critérios de Aceitação:

No computador, a grelha mostra 3 items por linha
A descrição, os ícones dos documentos e os botões mantêm-se alinhados entre cartões da mesma linha
O botão “Carregar Mais” aparece centrado por baixo de todos os items
O cabeçalho superior (etiqueta, título, botão) mantém-se fixo no topo do módulo
A descrição é truncada com reticências quando excede o número de linhas máximo, para manter a altura consistente
Os ícones de documentos aparecem apenas para os tipos que têm link configurado no BO
O botão “Carregar Mais” aparece automaticamente quando há mais de 6 items
A animação de entrada mostra primeiro o cabeçalho e depois os cards, com um efeito “appear up” fluído

Variante 2 — Sem cabeçalho do módulo

Como visitante, quero ver a lista de items sem cabeçalho geral, para páginas onde o título já vem do bloco anterior.

Elementos visíveis:

Apenas a grelha de items e o botão “Carregar Mais”

Critérios de Aceitação:

Não aparecem a etiqueta, o título principal, nem o botão superior
A grelha começa diretamente no topo do bloco

Variante 3 — Cartão de item sem documentos disponíveis

Como editor, quero que um item possa não mostrar documentos associados, quando ainda não existem documentos para aquele item.

Elementos visíveis:

Título, subtítulo, descrição e botões do cartão
A zona dos ícones de documentos não aparece

Critérios de Aceitação:

A zona dos ícones de documentos (Fichas técnicas, Brochura, Fotos, Vídeos) não aparece
Não há espaço vazio onde estaria a zona de ícones
O resto do cartão e a altura da linha mantêm-se equilibrados

Interações do Utilizador

Este módulo tem algumas interações ligadas aos botões e ao carregamento progressivo de items.

Interação	Descrição
Clicar no botão superior (ex: “Ver todos”)	Redireciona para uma página com a lista completa ou uma página relacionada
Clicar num ícone de documento (ex: “FACTSHEETS”, “BROCHURE”)	Abre o documento associado ou a galeria correspondente (numa nova página ou janela)
Clicar no botão principal do cartão (ex: botão preenchido)	Redireciona para a página de detalhe do item
Clicar no botão secundário do cartão (link sublinhado)	Redireciona para uma página relacionada (ex: reservar)
Clicar na imagem ou na etiqueta sobreposta	Redireciona para a página de detalhe do item
Clicar em “Carregar Mais”	Mostra mais items na grelha, sem sair da página

Nota: O comportamento dos ícones de documentos depende do tipo de documento: uma ficha técnica descarrega um ficheiro PDF, uma galeria de fotografias abre numa nova página ou numa vista ampliada, e um vídeo abre o vídeo correspondente.

Elementos

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

Cabeçalho do módulo

Elemento	Tipo	Obrigatório	Descrição
Etiqueta	Título	Não	Texto curto em maiúsculas por cima do título. O editor escolhe o nível de cabeçalho
Título do módulo	Título	Não	Título principal da grelha. O editor escolhe o nível de cabeçalho
Botão superior	Botão	Não	Botão à direita do cabeçalho que liga a outra página (ex: lista completa, arquivo)

Cartão de item (a grelha contém vários items)

Elemento	Tipo	Obrigatório	Descrição
Título do item	Título	Sim	Nome do item. Suporta RTE simplificado: negrito, itálico, sublinhado, link.
Subtítulo	Texto	Não	Texto curto em maiúsculas por cima ou abaixo do título
Descrição	Texto	Não	Breve descrição do item. Suporta RTE simplificado: negrito, itálico, sublinhado, link. Truncada com reticências se exceder o número máximo de linhas definido para manter altura consistente entre cartões.
Ícones de documentos	Lista de ícones	Não	Tipos de documentos disponíveis (ver tabela abaixo)
Botão principal	Botão	Não	Botão preenchido com a ação principal do item (ex: “Ver mais”, “Reservar”)
Botão secundário	Botão	Não	Link sublinhado com uma ação adicional (ex: “Explorar”)
Imagem representativa (computador)	Imagem	Sim	Fotografia do item, apresentada por baixo do cartão de informação
Imagem representativa (telemóvel)	Imagem	Sim	Versão da imagem para ecrãs pequenos
Etiqueta na imagem	Texto	Não	Etiqueta curta sobreposta na imagem, canto inferior esquerdo.

Tipos de ícones de documentos suportados (com base no Figma)

Ícone	Tipo de documento
FACTSHEETS	Fichas técnicas (PDF)
BROCHURE	Brochura (PDF)
PHOTOS	Galeria de fotografias
VIDEOS	Vídeos

Rodapé do módulo

Elemento	Tipo	Obrigatório	Descrição
Botão “Carregar Mais”	Botão	Não	Botão centrado no fim da grelha para mostrar mais items

Nota: Pelo menos um item tem de existir na grelha. O cabeçalho, o subtítulo de cada item, a descrição, os ícones de documentos, os botões e o botão “Carregar Mais” são todos opcionais. O módulo adapta-se à ausência de qualquer campo opcional — os espaços ajustam-se sem deixar áreas vazias. A etiqueta sobreposta na imagem só aparece se tiver texto.

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 ativar ou desativar o módulo sem o apagar — quando inativo, o módulo deixa de aparecer no site mas toda a configuração é mantida.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Cabeçalho do módulo	Etiqueta e título à esquerda, botão à direita na mesma linha	Etiqueta e título no topo, botão por baixo ocupando toda a largura
Título principal	Tamanho grande, pode ocupar duas linhas	Tamanho adaptado, quebra naturalmente
Grelha de items	3 colunas	1 coluna (items empilhados verticalmente)
Cartão de informação + imagem	Cartão de informação numa linha, imagem imediatamente por baixo na mesma coluna	Cartão + imagem seguem-se um ao outro, na mesma coluna única
Botões do cartão	Lado a lado (principal + secundário)	Empilhados verticalmente ou botão principal a ocupar toda a largura
Imagem	Proporção ampla (paisagem)	Proporção adaptada, ocupa toda a largura do ecrã
Botão “Carregar Mais”	Centrado no fim da grelha	Centrado, pode ocupar mais largura

Estados Visuais

Estado	Descrição
Inicial	A grelha aparece com o número inicial de items configurado
Ao passar o rato num cartão	O cartão eleva-se ligeiramente ou os botões mudam de cor para indicar que é clicável
Ao passar o rato num ícone de documento	O ícone muda de cor ou ganha um sublinhado
Ao passar o rato na imagem	A imagem tem uma ligeira ampliação ou escurecimento para indicar que é clicável
Ao passar o rato no botão “Carregar Mais”	O botão muda ligeiramente de cor ou preenchimento
Depois de clicar em “Carregar Mais”	Mais items aparecem por baixo dos existentes; o botão mantém-se visível enquanto houver mais items para mostrar
Quando não há mais items	O botão “Carregar Mais” desaparece automaticamente
Sem ícones de documentos	A zona dos documentos não aparece no cartão; a distância entre a descrição e os botões ajusta-se
Sem descrição	O espaço da descrição não aparece; os ícones de documentos sobem
Descrição muito longa	A descrição pode ser cortada com reticências a partir de um certo número de linhas, para manter todos os cartões da mesma linha com a mesma altura

Animação

O módulo tem uma animação de entrada em duas fases:

O cabeçalho (etiqueta, título, botão) aparece primeiro com um efeito “appear up”

Os cards aparecem a seguir, com o mesmo efeito fluído e rápido, em sequência

Referência: https://www.mellem.ca/blogue — cards de artigos

Para utilizadores com prefers-reduced-motion ativo, todos os elementos aparecem instantaneamente sem animação.

Acessibilidade

Pode ser navegado apenas com o teclado: tecla Tab para passar entre botões, links e ícones de documentos; tecla Enter para ativar.
Cada ícone de documento é anunciado por leitores de ecrã com o tipo e o nome do item correspondente (ex: “Brochura do Premium Suite”).
As imagens dos items têm descrição alternativa para utilizadores com leitor de ecrã.
Os botões e links têm texto legível por leitores de ecrã.
O contraste entre o texto e o fundo cumpre os requisitos de acessibilidade visual em todos os temas (mínimo 4.5:1), tanto nas variantes claras como na escura (Savoy Signature).
A etiqueta sobreposta na imagem tem fundo com opacidade suficiente para garantir contraste do texto sobre qualquer imagem.
Os elementos interativos têm indicação visual clara quando estão selecionados pelo teclado.
O botão “Carregar Mais”, após ser clicado, anuncia aos leitores de ecrã que novos items foram adicionados à lista.

Temas

O módulo adapta-se visualmente a cada hotel: cor de fundo, cor do texto, cor dos botões, cor dos ícones de documentos, cor das etiquetas sobrepostas nas imagens e tipografia dos títulos e do corpo de texto seguem a identidade visual do hotel.

Os 8 sites suportados:

Savoy Palace
Saccharum
Calheta Beach
Hotel Next
Savoy Signature (site do grupo)
Gardens (por desenvolver)
The Reserve (por desenvolver)
Royal Savoy (por desenvolver)

Notas por tema (com base no Figma):

Savoy Palace — fundos claros, títulos em tom dourado/terra, etiqueta superior em violeta, botão principal em tom dourado escuro
Saccharum — fundos claros, acentos em tom natural/terroso
Calheta Beach — acentos em tom fresco (turquesa/coral)
Hotel Next — acentos em azul forte e laranja
Savoy Signature — fundo em azul-marinho escuro, elementos em tons claros (tema escuro)

O esquema estrutural (cabeçalho, grelha, cartão acima da imagem, botões, carregar mais) mantém-se consistente entre todos os hotéis.

Imagens e Notas:

Imagem para desktop e mobile: O editor pode carregar uma imagem específica para desktop e outra para mobile. Quando a imagem para mobile não está preenchida, o módulo utiliza automaticamente a imagem de desktop em todos os tamanhos de ecrã.

Enquadramento (crop): Para cada imagem carregada, o editor pode escolher o enquadramento mais adequado a esta utilização — destacando a zona da imagem que melhor funciona, sem alterar o ficheiro original.

As imagens carregadas no backoffice para este módulo aceitam os formatos JPG, PNG, SVG, GIF e WEBP.

JPG — preferencial para fotografias e imagens com tratamento fotográfico.
SVG — preferencial para imagens vetoriais (logótipos, ícones, símbolos, ilustrações simples).
WEBP — alternativa otimizada para fotografia/gráficos quando se procura melhor performance.
PNG — para imagens com transparência ou detalhe gráfico que não seja vetorial.
GIF — apenas quando é necessária animação simples.

Este módulo permite a inserção de imagens em formato GIF. Atenção: dado que estes ficheiros podem ter um peso elevado, é essencial uma gestão cuidada no backoffice — caso contrário, a performance do website poderá ser seriamente comprometida.

Changelog

Data	Estado	Descrição
2026-05-19	Atualização	Renomeada secção ‘Formatos de Imagem Aceites’ → ‘Imagens e Notas:’ e formatos envolvidos em callout informativo
2026-05-19	Atualização	Adicionado alerta sobre imagem desktop/mobile e crop
2026-05-19	Revisão PM (Gabriela)	Revisado sem comentários
2026-05-19	Revisão CD (Michelle)
2026-05-18	Revisão Rui Rosa	Revisto e validado por Rui Rosa. Pequenas alterações.
2026-05-18	Análise QA (Agentic QA)	Análise de incoerências, formatação, lógica, e conteúdo. Revisto e alterado.
2026-05-14	Revisão Design + Tech	Análise de Liliana Moreira e Rui Rosa comparando as recomendações de FA
2026-05-11	Revisão Functional Analyst	Análise e recomendações da equipa de Análise Funcional.
2026-05-05	Validação Design	Atualizado e validado por Liliana Moreira
2026-04-21	Rascunho	Versão inicial criada a partir do Figma (módulo ainda não implementado no código)
2026-06-11	Aprovada	Aprovação do cliente (Savoy) confirmada — estado “approved” no Docmost + Excel de controle