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 | 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
Section titled “Screenshots de Referência”Desktop (1440px)
Section titled “Desktop (1440px)”
Mobile (375px)
Section titled “Mobile (375px)”Abrir screenshot mobile (375px) em nova janela →
Variantes por hotel
Section titled “Variantes por hotel”Savoy Palace
Section titled “Savoy Palace”
Saccharum
Section titled “Saccharum”
Calheta Beach
Section titled “Calheta Beach”
Hotel Next
Section titled “Hotel Next”
Savoy Signature
Section titled “Savoy Signature”
Links Figma: Desktop | Mobile | Savoy Palace | Saccharum | Calheta Beach | Next | Savoy Signature
Descrição Geral
Section titled “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
Section titled “Variantes”Variante 1 — Grelha de 3 colunas (padrão no computador)
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “Elementos”Conteúdos geridos no backoffice para este módulo:
Cabeçalho do módulo
Section titled “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)
Section titled “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)
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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.
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.
Formatos de Imagem Aceites
Section titled “Formatos de Imagem Aceites”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
Section titled “Changelog”| Data | Estado | Descrição |
|---|---|---|
| 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) |