M08 — Item Cards (Accommodations)

Grelha de cartões que apresenta os quartos e suites do hotel, com galeria de imagens, detalhes resumidos (capacidade, tipo de cama, área, vista), comodidades e botões de ação. Permite filtrar por categoria (ex: “Rooms” / “Suites”) e carregar mais cartões progressivamente.

Campo	Valor
Módulo	M08 — Item Cards (Accommodations)
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Library (página)	Abrir no Figma
Zoho Task	P894-T491
Criada	2026-04-23
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 (Accommodations) apresenta a oferta de alojamento do hotel — quartos, suites, apartamentos — organizada numa grelha visual rica. Cada cartão mostra uma galeria de fotografias do quarto, o nome, uma lista de detalhes essenciais (capacidade, tipo de cama, área, vista), uma breve descrição, a lista de comodidades e dois botões de ação (reservar e ver detalhes).

No topo da grelha pode aparecer uma barra de separadores (tabs) que permite ao visitante filtrar os cartões por categoria — por exemplo “All / Rooms / Suites”. Por baixo da grelha, quando existem mais cartões do que os inicialmente visíveis, aparece um botão “Carregar Mais” que mostra mais cartões sem sair da página.

Os cartões são alimentados automaticamente a partir das páginas de detalhe de quarto que estão por baixo de uma página-mãe de alojamento (tipicamente “Accommodation”). O editor não adiciona quartos manualmente ao módulo — basta apontar o módulo para a página-mãe e o sistema vai buscar todos os quartos publicados.

Este módulo aparece tipicamente na página principal de Alojamento do hotel (ex: /pt/alojamento), onde o visitante explora toda a oferta de quartos antes de decidir onde reservar. Também pode ser usado em páginas intermédias (ex: “Suites” ou “Quartos Premium”) sempre que exista uma página-mãe a agregar os vários tipos de alojamento.

Variantes

Variante 1 — Grelha em 2 colunas com fundo decorativo (padrão no computador)

Como visitante, quero ver todos os tipos de alojamento lado a lado, com fotografias grandes e informação essencial visível logo à primeira vista, para poder comparar os quartos e escolher rapidamente qual prefiro.

Elementos visíveis:

Barra de fundo decorativa no topo do módulo (tom claro ou cor de acento) que cobre a zona dos separadores e a metade superior da primeira fila de imagens
Separadores de filtro por cima da grelha (ex: “All / Rooms / Suites”)
Grelha com 2 cartões por linha, cada um contendo:
- Galeria de imagens com indicador de contagem (ex: “1/4”) e setas de navegação laterais
- Título do quarto (ex: “Room”)
- Lista de detalhes com ícones: Capacidade, Tipo de cama, Área, Vista
- Breve descrição (2 a 4 linhas)
- Etiqueta “PRINCIPAIS AMENITIES” e lista de comodidades (em duas colunas)
- Botão principal preenchido (ex: “Reservar”)
- Botão secundário sublinhado (ex: “Ver Detalhes”)
Botão “Carregar Mais” centrado por baixo da grelha, quando existem mais quartos para mostrar

Critérios de Aceitação:

No computador, a grelha mostra 2 cartões por linha
A barra decorativa superior cobre a zona dos separadores e vai até meio das primeiras imagens
Todos os cartões mantêm a mesma altura visual quando estão na mesma linha
Ao clicar num separador, a grelha atualiza-se para mostrar apenas os quartos dessa categoria
O botão “Carregar Mais” aparece centrado no fim e desaparece quando já não há mais quartos a mostrar
A galeria de imagens dentro de cada cartão pode ser navegada pelas setas ou pelo indicador

Variante 2 — Grelha sem fundo decorativo (fundo branco)

Como editor, quero poder mostrar a grelha sobre um fundo branco limpo, para páginas onde já existe uma secção anterior com destaque visual ou para manter a página mais sóbria.

Elementos visíveis:

Mesma estrutura da variante 1 (separadores, cartões, botão “Carregar Mais”)
Fundo uniforme sem barra decorativa no topo

Critérios de Aceitação:

Não aparece a barra de fundo decorativa por cima das primeiras imagens
O fundo do módulo é branco (ou a cor de fundo do tema do hotel)
O resto dos elementos (separadores, cartões, botões, galeria) mantém-se igual

Variante 3 — Sem separadores de filtro

Como editor, quero poder esconder os separadores quando o módulo aparece numa página dedicada a uma categoria específica (ex: só suites), para evitar filtros redundantes.

Elementos visíveis:

Grelha com todos os cartões sem filtro por cima
Botão “Carregar Mais” por baixo quando aplicável

Critérios de Aceitação:

Os separadores de filtro não aparecem
A grelha começa diretamente no topo do módulo (com ou sem a barra decorativa, conforme a configuração)
Todos os cartões são visíveis na ordem em que vêm da página-mãe, sem filtragem

Variante 4 — Um único cartão (linha com apenas 1 cartão)

Como visitante, quando a página-mãe só tem um tipo de alojamento publicado ou quando o filtro restringe a um único quarto, quero ver esse cartão bem apresentado sem parecer que falta conteúdo.

Elementos visíveis:

Um cartão apresentado com a mesma estrutura (galeria, título, detalhes, descrição, amenities, botões)

Critérios de Aceitação:

O cartão fica alinhado à esquerda na grelha (não ocupa a largura toda)
Não existe espaço vazio visível à direita que sugira que falta conteúdo
O botão “Carregar Mais” não aparece

Variante 5 — Grelha com mais de 4 cartões (Carregar Mais ativo)

Como visitante, quando o hotel tem muitos tipos de quarto, quero começar por ver alguns e depois decidir se quero ver mais, para não ficar sobrecarregado de informação logo à chegada.

Elementos visíveis:

Grelha com os primeiros cartões visíveis (ex: 4)
Botão “Carregar Mais” centrado por baixo da grelha
Após clicar, aparecem mais cartões na continuação da grelha

Critérios de Aceitação:

Inicialmente aparecem apenas o número de cartões configurado (ex: 4)
O botão “Carregar Mais” é visível
Ao clicar, a grelha cresce com mais cartões sem recarregar a página
O botão desaparece quando todos os cartões estão visíveis
Ao mudar de separador, a contagem é reiniciada (volta a mostrar apenas os iniciais)

Variante 6 — Cartão sem galeria (apenas imagem principal)

Como editor, quando um quarto só tem uma fotografia disponível, quero que o cartão funcione na mesma sem mostrar setas de navegação ou contagem, para não sugerir que há mais imagens.

Elementos visíveis:

Imagem única sem setas nem indicador de contagem
Restantes elementos do cartão iguais (título, detalhes, descrição, amenities, botões)

Critérios de Aceitação:

Não aparecem as setas de navegação
Não aparece o indicador “1/1”
A imagem ocupa o espaço normalmente previsto para a galeria

Variante 7 — Cartão sem comodidades (amenities)

Como editor, quando um quarto não tem lista de comodidades preenchida, quero que o cartão se ajuste automaticamente sem deixar espaço vazio.

Elementos visíveis:

Cartão com galeria, título, detalhes, descrição e botões
Zona das comodidades (etiqueta + lista) não aparece

Critérios de Aceitação:

A etiqueta “PRINCIPAIS AMENITIES” não aparece
A lista de comodidades não aparece
A distância entre a descrição e os botões ajusta-se sem deixar espaço vazio

Interações do Utilizador

Este módulo é interativo e oferece várias formas de navegação e filtragem.

Interação	Descrição
Clicar num separador de filtro (ex: “Suites”)	A grelha atualiza-se para mostrar apenas os quartos dessa categoria. O contador de “Carregar Mais” é reiniciado
Clicar nas setas da galeria dentro de um cartão	A imagem seguinte ou anterior fica visível; o indicador de contagem (ex: “2/4”) atualiza-se
Clicar no indicador de contagem da galeria	Pode navegar diretamente para uma imagem específica (conforme comportamento do componente de galeria)
Deslizar com o dedo na galeria (telemóvel)	Avança para a imagem seguinte ou volta à anterior
Clicar no botão principal do cartão (ex: “Reservar”)	Redireciona para a página indicada pelo editor (tipicamente o motor de reservas)
Clicar no botão secundário do cartão (ex: “Ver Detalhes”)	Redireciona para a página de detalhe do quarto
Clicar em “Carregar Mais”	Mostra mais cartões na grelha, sem recarregar a página

Nota: A troca de separador e o “Carregar Mais” acontecem sempre na mesma página — não há navegação para outros sítios, nem a página é recarregada. O conteúdo ajusta-se de forma suave.

Elementos

Este módulo combina conteúdo gerido diretamente no módulo com conteúdo puxado automaticamente das páginas de quarto.

Conteúdo gerido no módulo

Elemento	Tipo	Obrigatório	Descrição
Página-mãe dos quartos	Campo de ligação	Sim	O editor escolhe a página que agrega os quartos (ex: “Accommodation”). O módulo vai automaticamente buscar todos os quartos publicados por baixo dessa página

Conteúdo puxado automaticamente de cada página de quarto

Cada cartão na grelha corresponde a uma página de quarto publicada, e os elementos visíveis são lidos dos campos dessa página:

Elemento	Tipo	Obrigatório	Descrição
Nome do quarto	Título	Sim	Nome do quarto ou suite (ex: “Deluxe Ocean Suite”)
Imagem principal	Imagem	Sim	Fotografia principal do quarto, usada como primeira imagem da galeria
Galeria adicional	Imagens	Não	Fotografias adicionais do quarto que aparecem na galeria do cartão
Categoria	Texto	Não	Categoria do quarto (ex: “Rooms”, “Suites”). Usada para criar os separadores de filtro
Capacidade máxima	Texto	Não	Número de hóspedes (ex: “2 Adultos + 1 Criança”)
Tipo de cama	Texto	Não	Tipo e tamanho da cama (ex: “King-size”)
Área	Texto	Não	Área do quarto em metros quadrados (ex: “65m²”)
Vista	Texto	Não	Vista do quarto (ex: “Oceano Atlântico”)
Descrição breve	Texto	Não	Descrição curta do quarto (2 a 4 linhas)
Etiqueta das comodidades	Texto	Não	Título da secção de comodidades (ex: “Principais Amenities”, “Comodidades do Quarto”)
Lista de comodidades	Texto (lista)	Não	Comodidades do quarto (ex: Wi-Fi gratuito, Minibar, Cofre)
Botão principal	Botão	Não	Botão preenchido com ação principal (ex: “Reservar”). Se não for definido, o cartão pode aparecer sem botão principal
Botão secundário	Botão	Não	Botão sublinhado com ação secundária (ex: “Ver Detalhes”). Quando não é definido, aponta automaticamente para a página do quarto

Nota: O único campo obrigatório do próprio módulo é a página-mãe dos quartos. Todos os restantes elementos vêm das páginas de cada quarto. Se um campo opcional não estiver preenchido na página do quarto, o cartão ajusta-se automaticamente sem deixar espaço vazio (ex: sem comodidades, sem vista, sem botão secundário).

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
Fundo do módulo	Com barra decorativa / Branco	Com barra decorativa	Controla se aparece a barra de fundo decorativa por cima da primeira fila (barra clara ou cor de acento do tema)
Mostrar separadores de filtro	Sim / Não	Sim	Ativa ou desativa a barra de separadores (All / Rooms / Suites) por cima da grelha
Quantos cartões mostrar inicialmente	Número (ex: 2, 4, 6)	4	Quantos cartões aparecem antes de ser necessário clicar em “Carregar Mais”
Nível de cabeçalho do título do cartão	H2 / H3 / H4	H3	Controla o nível de importância do título do quarto para efeitos de estrutura da página e acessibilidade
Ativar/Desativar	Ativo / Inativo	Ativo	Permite esconder o módulo sem o apagar

Nota: Os separadores são gerados automaticamente a partir das categorias dos quartos. Se todos os quartos forem da mesma categoria, os separadores podem não aparecer mesmo com esta opção ativada (só faz sentido mostrar filtros quando há mais do que uma categoria).

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Barra de separadores	Alinhada ao centro por cima da grelha	Alinhada ao centro, pode ajustar-se à largura do ecrã
Grelha de cartões	2 cartões por linha, lado a lado	1 cartão por linha (cartões empilhados)
Cartão	Galeria ocupa toda a largura do cartão; texto e botões por baixo	Galeria ocupa toda a largura do ecrã; texto e botões por baixo
Galeria de imagens	Setas nas laterais visíveis; pode navegar com o rato	Navegação por gesto (deslizar); setas podem estar ocultas ou mais discretas
Lista de detalhes (Capacidade, Cama, Área)	Lista em uma ou duas colunas, conforme largura disponível	Lista em uma coluna, com ícones alinhados à esquerda
Lista de comodidades	Em duas colunas lado a lado	Em uma coluna (comodidades empilhadas)
Botões do cartão	Lado a lado (principal + secundário)	Lado a lado ou empilhados, conforme largura
Barra decorativa de fundo	Mais alta, cobre zona dos separadores + metade superior das primeiras imagens	Altura adaptada ao layout vertical
Botão “Carregar Mais”	Centrado, com margens generosas	Centrado, pode ocupar mais largura

Estados Visuais

Estado	Descrição
Inicial	A grelha aparece com o separador “All” selecionado e o número inicial de cartões configurado
Ao passar o rato num cartão	O cartão ou alguns dos seus elementos (botões, imagem) podem mudar ligeiramente para indicar que é clicável
Ao passar o rato num separador	O separador muda de cor ou ganha sublinhado para indicar que é clicável
Separador selecionado	O separador ativo é claramente destacado (cor de fundo, sublinhado mais forte, ou peso de texto)
Ao passar o rato nos botões do cartão	Os botões mudam de cor de fundo e/ou de texto
Ao passar o rato na galeria de imagens	As setas de navegação podem tornar-se mais visíveis; a imagem pode ganhar um ligeiro escurecimento
Depois de clicar em “Carregar Mais”	Mais cartões aparecem no fim da grelha; o botão mantém-se visível enquanto houver mais cartões
Quando não há mais cartões para mostrar	O botão “Carregar Mais” desaparece automaticamente
Ao mudar de separador	A grelha atualiza-se imediatamente; a contagem visível volta ao valor inicial
Quando a categoria filtrada não tem cartões	A grelha fica vazia (sem cartões visíveis); o botão “Carregar Mais” não aparece
Cartão sem comodidades	A etiqueta e a lista de comodidades não aparecem; a distância entre descrição e botões ajusta-se
Cartão sem botão secundário	O botão secundário aponta automaticamente para a página de detalhe do quarto, caso ela exista; se não existir, não aparece
Descrição muito longa	A descrição pode ser cortada para manter a altura dos cartões consistente na mesma linha

Acessibilidade

Pode ser navegado apenas com o teclado: tecla Tab para passar entre separadores, setas da galeria, botões do cartão e “Carregar Mais”; tecla Enter ou Barra de Espaço para ativar
Os separadores respeitam o padrão de navegação por separadores com teclado (setas esquerda/direita para mudar de separador)
O separador ativo é anunciado por leitores de ecrã como “selecionado”
A grelha de cartões é anunciada como uma região dinâmica — os leitores de ecrã informam o utilizador quando o conteúdo muda (ao mudar de separador ou ao carregar mais cartões)
As imagens dos quartos têm descrição alternativa lida por leitores de ecrã
A galeria de imagens pode ser navegada pelo teclado e comunica a posição atual (ex: “imagem 2 de 4”)
Os botões principais e secundários têm texto legível por leitores de ecrã (ex: “Reservar Deluxe Ocean Suite”)
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)
Os elementos interativos têm indicação visual clara quando estão selecionados pelo teclado
O botão “Carregar Mais”, após ser clicado, mantém o foco de teclado próximo dos novos cartões para o utilizador poder continuar a navegação sem se perder

Temas

O módulo adapta-se visualmente a cada hotel: cor da barra de fundo decorativa, cor do texto, cor dos separadores (ativo e inativo), cor dos botões principais e secundários, cor das setas da galeria 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 — barra decorativa em tom bege-claro, títulos em tom violeta, botão principal preenchido em violeta, botão secundário sublinhado
Saccharum — barra decorativa em tom natural/terroso, botões em tom quente
Calheta Beach — barra decorativa em tom turquesa suave, botão principal em coral/vermelho
Hotel Next — barra decorativa em tom claro, botão principal em azul forte, acentos em laranja
Savoy Signature — fundo geral em azul-marinho escuro (tema escuro), cartões em tom muito escuro com texto claro, botões em dourado claro

O esquema estrutural (barra decorativa superior, separadores, grelha em 2 colunas no computador, galeria + informação + comodidades + botões por cartão, botão “Carregar Mais” centrado) mantém-se consistente entre todos os hotéis.

Changelog

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