M20 — Item Cards Documents

Grelha de cartões que apresenta vários items do hotel (quartos, restaurantes, serviços) 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	Rascunho
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	—
Aprovada por	—

Screenshots de Referência

Desktop (1440px)

Mobile (375px)

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

Variantes por tema (matrizes de variantes)

Savoy Palace

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

O módulo Item Cards Documents apresenta uma lista de items do hotel (por exemplo: quartos e suites, restaurantes, ou facilidades) organizada em grelha. Cada item é composto por dois blocos visuais — 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 dos outros cartões é a zona de “documentos associados”: cada cartão tem uma lista de tipos de documentos disponíveis para o item (fichas técnicas, brochuras, galerias de fotografias, vídeos), apresentada como ícones com etiquetas. Esta zona serve tanto de resumo do que está disponível, como de acesso rápido aos documentos.

No topo da grelha aparece o título geral do módulo e, opcionalmente, um botão para ver a lista completa numa página dedicada. No fim da grelha pode existir um botão “Carregar Mais” que permite mostrar mais items sem sair da página.

Tipicamente aparece em páginas de listagem de quartos, restaurantes ou serviços, em páginas de imprensa/corporate onde são disponibilizados documentos para parceiros, ou em secções de “Downloads” institucionais.

Variantes

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

Como visitante, quero ver vários items do hotel apresentados em colunas, cada um com a sua descrição, documentos associados e imagem, para comparar as opções de forma rápida.

Elementos visíveis:

Cabeçalho do módulo: etiqueta pequena em maiúsculas (ex: “LOREM IPSUM”), título principal em duas linhas, botão à direita (ex: “BUTTON TEXT”)
Grelha com 3 cartões por linha, alternando duas linhas por item:
- Linha com 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
- Linha com as 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:

Os cartões de informação apresentam-se sempre acima das respetivas imagens (na mesma coluna)
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

Variante 2 — Grelha de 2 colunas

Como visitante, quero ver os items em duas colunas com mais espaço para cada um, para que as descrições e as imagens respirem melhor na página.

Elementos visíveis:

Mesmos elementos da variante de 3 colunas
A grelha apresenta 2 cartões por linha em vez de 3

Critérios de Aceitação:

No computador, a grelha mostra apenas 2 items por linha
Cada cartão fica maior (mais largura disponível)
A imagem associada a cada item fica maior
O comportamento geral (cartão de informação acima da imagem, botões, etiquetas) mantém-se igual

Variante 3 — 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 4 — Sem botão “Carregar Mais”

Como editor, quero poder esconder o botão “Carregar Mais”, para casos em que todos os items relevantes já estão visíveis ou onde existe outro fluxo de navegação.

Elementos visíveis:

Cabeçalho e grelha de items
Não aparece o botão de carregar mais no fim

Critérios de Aceitação:

O botão “Carregar Mais” não é visível
Não há espaço vazio visível por baixo do último item

Variante 5 — 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 visível onde estaria esta zona
O resto do cartão funciona normalmente

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: “BUTTON TEXT”)	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: “BUTTON TEXT” 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 (ex: “DOCUMENTS”, “DOWNLOADS”). 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 (ex: “Premium Suite”, “Galáxia Restaurant”)
Subtítulo	Texto	Não	Texto curto em maiúsculas por cima ou abaixo do título (ex: “ROOMS”, “FINE DINING”)
Descrição	Texto	Não	Breve descrição do item (2 a 4 linhas)
Í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 (ex: nome resumido do item)

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
Número de colunas (no computador)	2 colunas / 3 colunas	3 colunas	Define quantos items aparecem por linha no ecrã grande
Quantos items mostrar inicialmente	Número (ex: 6, 9, 12)	6	Quantos items aparecem antes de ser necessário clicar em “Carregar Mais”
Ativar/Desativar	Ativo / Inativo	Ativo	Permite esconder o módulo sem o apagar

Nota: O número de colunas afeta apenas o ecrã grande (computador). No ecrã pequeno (telemóvel), os items aparecem sempre numa única coluna, independentemente desta configuração.

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	2 ou 3 colunas (conforme configuração)	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

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 hotéis suportados:

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

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.

Changelog

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