M17 — Slider Cross-Content Cards

Módulo versátil que apresenta um conjunto de cartões de conteúdo misto — tipicamente combinando diferentes temas do hotel (um quarto, um restaurante, uma experiência, o spa) lado a lado. Cada cartão tem um título, subtítulo, descrição, dois destaques curtos, uma imagem e até dois botões. Com 3 cartões ou menos num computador, os cartões aparecem alinhados numa grelha estática; com 4 ou mais cartões (ou em qualquer telemóvel), o módulo passa a ser um carrossel navegável.

Campo	Valor
Módulo	M17 — Slider Cross-Content Cards
Tipo	Módulo interativo (carrossel em certas variantes)
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Library (página)	Abrir no Figma
Zoho Task	P894-T644
Criada	2026-04-23
Aprovada	—
Aprovada por	—

Screenshots de Referência

Desktop (1440px) — Estado base

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 Slider Cross-Content Cards é um módulo de apresentação pensado para páginas onde se quer mostrar em conjunto vários tipos de conteúdo do hotel — por exemplo, um quarto, um restaurante e uma experiência. A designação “cross-content” vem precisamente daí: cada cartão pode apontar para uma zona diferente do site, mas são mostrados em conjunto para encorajar o visitante a explorar mais do que uma área.

O módulo tem duas zonas distintas:

Cabeçalho (opcional) — uma pequena etiqueta em maiúsculas, um título em destaque, um corpo de texto curto e um botão de acção (tipicamente “Ver tudo” ou equivalente). No ecrã grande, o botão aparece alinhado à direita do título; no telemóvel, aparece por baixo do texto e ocupa toda a largura.
Zona dos cartões — um conjunto de cartões em linha, cada um com título, subtítulo curto, breve descrição, dois destaques rápidos (por exemplo “Vista Mar” e “120 m²”), uma imagem quadrada, um botão principal preenchido e um botão secundário sublinhado.

A zona dos cartões usa o componente C12, com várias variações de posicionamento e formato. O número mínimo de cartões é 2 — com menos de 2 cartões o módulo não é publicável.

O comportamento da zona dos cartões depende do número de cartões e do tamanho do ecrã:

Computador, 2–3 cartões: os cartões aparecem numa grelha fixa, todos visíveis em simultâneo.
Computador, 4 ou mais cartões: os cartões passam para um carrossel navegável, com cerca de 3 visíveis a cada momento e “espreitadela” do seguinte no lado direito.
Telemóvel (qualquer número): o módulo é sempre um carrossel, com um cartão por vez e os adjacentes parcialmente visíveis dos lados.

É um módulo tipicamente usado em páginas principais de alojamento, páginas temáticas (gastronomia, bem-estar, experiências) e páginas de destino para encorajar a exploração cruzada entre secções do hotel.

O módulo tem uma animação de entrada: o cabeçalho aparece primeiro com um efeito “appear up” fluído e rápido, seguido dos cartões. Referência: https://www.mellem.ca/blogue — cards de artigos.

Variantes

Variante 1 — Grelha estática com 3 cartões (computador)

Como visitante num computador, quero ver três opções de conteúdo lado a lado para poder comparar rapidamente e escolher aquela que me interessa mais.

Elementos visíveis:

Etiqueta curta em maiúsculas no canto superior esquerdo
Título grande ao lado, com destaque na tipografia
Botão no canto superior direito, alinhado ao fim do título
Corpo de texto opcional no cabeçalho
Três cartões dispostos em grelha, todos visíveis em simultâneo
Cada cartão com: título, subtítulo em maiúsculas, descrição, dois destaques, botão principal preenchido, botão secundário sublinhado e imagem quadrada por baixo
Nenhumas setas de navegação (não há para onde avançar — todos os cartões já estão visíveis)

Critérios de Aceitação:

O cabeçalho (etiqueta, título, corpo e botão) aparece no topo do módulo
Os três cartões aparecem lado a lado, com a mesma altura e largura
As imagens dos cartões aparecem todas com a mesma dimensão
O módulo não apresenta setas de navegação nem deslizamento horizontal
Cada botão redireciona para a página indicada pelo editor

Variante 2 — Carrossel com 4 ou mais cartões (computador)

Como visitante num computador, quero que o módulo se transforme num carrossel quando há mais cartões do que os que cabem no ecrã, para poder explorar sem carregar noutra página.

Elementos visíveis:

Cabeçalho igual à Variante 1
Três cartões completos visíveis em simultâneo
“Espreitadela” parcial do quarto cartão à direita, a convidar ao deslizamento
Setas redondas de avançar e recuar (se o editor as ativar)
Cartões com o mesmo conteúdo que na Variante 1
Slider bar (barra de progresso horizontal) por baixo dos cartões, que o visitante pode arrastar para navegar
Cursor de drag visível sobre os cartões quando a opção de drag está ativa no backoffice. Referência visual: https://preview.themeforest.net/item/salient-responsive-multipurpose-theme/full_screen_preview/4363266

Critérios de Aceitação:

Quando há 4 ou mais cartões, o módulo torna-se um carrossel automaticamente
Três cartões são visíveis na totalidade; o quarto aparece parcialmente à direita
Ao clicar na seta “seguinte”, o carrossel avança para o próximo cartão
Ao clicar na seta “anterior”, o carrossel recua para o cartão anterior
Ao chegar ao último cartão, a seta “seguinte” volta ao início (navegação circular)
As setas são circulares e aparecem sob o carrossel
A slider bar move-se à medida que o carrossel avança, e o visitante pode arrastá-la para saltar para uma posição específica
O cursor de drag aparece sobre os cartões apenas quando a opção de drag está ativa no BO

Variante 3 — Telemóvel (sempre carrossel)

Como visitante num telemóvel, quero ver um cartão de cada vez em destaque e perceber facilmente que existem mais cartões para explorar com um deslizar de dedo.

Abrir screenshot mobile (375px) em nova janela →

Elementos visíveis:

Cabeçalho no topo, com a etiqueta, título, corpo e botão empilhados verticalmente
Botão do cabeçalho ocupa toda a largura do ecrã
Um cartão central em destaque, ocupando quase toda a largura
Cartão adjacente (seguinte) parcialmente visível à direita, como “espreitadela”
Conteúdo do cartão adaptado ao formato mais estreito

Critérios de Aceitação:

O módulo é sempre um carrossel no telemóvel, independentemente do número de cartões
É visível um cartão por vez, com uma espreitadela do seguinte
É possível navegar entre cartões deslizando o dedo
O botão do cabeçalho ocupa toda a largura do ecrã
O módulo não cria scroll horizontal na página

Variante 4 — Sem cabeçalho

Como editor de conteúdo, quero poder usar apenas os cartões, sem etiqueta, título, texto nem botão no topo, quando o contexto da página já introduz o conteúdo.

Elementos visíveis:

O cabeçalho completo (etiqueta, título, corpo e botão) não aparece
Os cartões começam logo no topo do módulo
O resto do comportamento (grelha ou carrossel) mantém-se

Critérios de Aceitação:

Quando os campos do cabeçalho (etiqueta, título, corpo e botão) estão todos vazios, o bloco do cabeçalho não aparece
Os cartões começam no topo do módulo sem deixar espaço vazio
A experiência de navegação entre cartões mantém-se igual

Variante 5 — Apenas título ou apenas botão no cabeçalho

Como editor de conteúdo, quero poder mostrar só alguns elementos do cabeçalho (por exemplo, só o título, ou só um botão lateral), conforme a página o exija.

Elementos visíveis:

Apenas os elementos do cabeçalho que estão preenchidos são apresentados
Os outros elementos não deixam espaço vazio — o espaçamento ajusta-se automaticamente

Critérios de Aceitação:

Quando apenas o título está preenchido, só aparece o título no cabeçalho
Quando o botão do cabeçalho não está preenchido, não aparece (e o título ocupa todo o espaço)
Quando a etiqueta ou o corpo não estão preenchidos, não aparecem

Variante 6 — Imagem do cartão acima ou abaixo do texto

Como editor de conteúdo, quero poder escolher se a imagem do cartão aparece em cima ou em baixo do texto, para adaptar o ritmo visual da página. (componente C12-c)

Elementos visíveis:

Configuração “Imagem em baixo” (padrão): primeiro aparece o texto do cartão, depois a imagem
Configuração “Imagem em cima”: primeiro aparece a imagem, depois o texto

Critérios de Aceitação:

O editor pode escolher entre “Imagem em cima” e “Imagem em baixo” no backoffice
Todos os cartões do módulo seguem a mesma configuração (não é por cartão)
O conteúdo do cartão (título, subtítulo, descrição, destaques, botões) mantém-se igual

Variante 7 — Cartão com imagem decorativa sobre a imagem

Como editor de conteúdo, quero poder colocar um logótipo do hotel ou uma imagem sobre a imagem do cartão, para reforçar a identidade visual em cartões especiais.

Elementos visíveis:

Todos os elementos do cartão ficam iguais
Acrescenta-se uma pequena imagem colocado sobre a imagem do cartão (tipicamente no canto inferior esquerdo)

Critérios de Aceitação:

Quando o editor carrega a imagem pequena para o cartão, ele aparece sobre a imagem
Quando o editor não carrega a imagem pequena, a imagem aparece sem nada por cima

Variante 8 — Cartão com menos informação

Como editor de conteúdo, quero poder criar cartões simples, só com título e imagem, para situações em que não é preciso tanto detalhe.

Elementos visíveis:

Apenas o título e a imagem aparecem
Os restantes elementos (subtítulo, descrição, destaques, botões) não aparecem

Critérios de Aceitação:

Quando só o título e a imagem estão preenchidos, só esses aparecem no cartão
O cartão ajusta a altura ao conteúdo que efectivamente tem
Os cartões irmãos continuam com o mesmo alinhamento visual

Variante 9 — Adaptação por tema do hotel

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

Elementos que mudam entre temas:

Cor do título, etiqueta, botões do cabeçalho e setas de navegação
Cor do botão principal nos cartões (preenchido) e do botão secundário (sublinhado)
Tipografia do título e do corpo de texto (cada hotel tem as suas fontes)
Fundo do módulo mantém-se neutro, seguindo o tom do tema

Critérios de Aceitação:

O módulo é apresentado em cada um dos 8 hotéis com as cores e tipografias próprias
Os contrastes entre texto e fundo mantêm-se legíveis em todos os temas

Interações do Utilizador

Interação	Descrição
Clicar na seta “seguinte”	Avança o carrossel para o próximo cartão. No fim, volta ao início.
Clicar na seta “anterior”	Recua o carrossel para o cartão anterior. No início, vai para o último.
Deslizar o dedo no telemóvel	Navega entre cartões com gesto natural de swipe.
Carregar na tecla “seta esquerda” (teclado)	Recua para o cartão anterior (quando o carrossel está selecionado).
Carregar na tecla “seta direita” (teclado)	Avança para o próximo cartão (quando o carrossel está selecionado).
Clicar no botão do cabeçalho	Redireciona o visitante para a página indicada pelo editor.
Clicar no botão principal do cartão	Redireciona o visitante para a página indicada pelo editor para esse cartão.
Clicar no botão secundário do cartão	Redireciona o visitante para a página indicada como segunda acção do cartão.
Arrastar a slider bar	Move o carrossel diretamente para a posição correspondente.
Arrastar os cartões com o rato (quando drag está ativo)	Arrasta os cartões horizontalmente para navegar no carrossel

Nota: Quando há 3 ou menos cartões num computador, o módulo é estático (sem setas nem deslizamento) — a navegação por carrossel só é aplicada no telemóvel ou quando há 4 ou mais cartões no computador.

Elementos

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

Cabeçalho (opcional, em conjunto ou isoladamente)

Elemento	Tipo	Obrigatório	Descrição
Etiqueta	Título	Não	Texto curto em maiúsculas acima do título (ex: “Experiências”, “Destaques”). O editor escolhe o nível de cabeçalho.
Título	Título	Não	Título principal do módulo, em destaque visual. O editor escolhe o nível de cabeçalho. Suporta RTE simplificado: negrito, itálico, sublinhado, link.
Corpo de texto	Texto	Não	Parágrafo curto por baixo do título (visível apenas em computador). Suporta RTE simplificado: negrito, itálico, sublinhado, link.
Botão do cabeçalho	Botão	Não	Botão lateral com texto e ligação para uma página do site.

Cartão (pode ter vários — a lista é construída no backoffice)

Elemento	Tipo	Obrigatório	Descrição
Título do cartão	Título	Não	Título principal do cartão (ex: “Terrace Suite”).
Subtítulo do cartão	Título	Não	Texto curto em maiúsculas por baixo do título (ex: “Suítes de Luxo”). Suporta RTE simplificado: negrito, itálico, sublinhado, link.
Descrição do cartão	Texto	Não	Parágrafo curto com mais detalhe sobre o conteúdo do cartão. Suporta RTE simplificado: negrito, itálico, sublinhado, link.
Destaques	Texto (até 2 itens)	Não	Dois pontos curtos em destaque (ex: “Vista Mar”, “120 m²”). Suporta RTE simplificado: negrito, itálico, sublinhado, link.
Imagem para computador	Imagem	Sim	Imagem apresentada no cartão em ecrãs grandes. Suporta JPEG, PNG, WEBP, SVG e GIF animado. GIFs reproduzem automaticamente em loop.
Imagem para telemóvel	Imagem	Sim	Imagem apresentada no cartão em ecrãs pequenos. Suporta JPEG, PNG, WEBP, SVG e GIF animado. GIFs reproduzem automaticamente em loop.
Imagem pequena sobre imagem (computador e telemóvel)	Imagem	Não	Imagem pequena opcional colocada por cima da imagem do cartão. Suporta JPEG, PNG, WEBP, SVG e GIF animado. GIFs reproduzem automaticamente em loop.
Descrição da imagem pequena	Texto	Não	Texto alternativo da imagem pequena para leitores de ecrã.
Botão principal do cartão	Botão	Não	Botão preenchido com ligação para uma página (ex: “Reservar”).
Botão secundário do cartão	Botão	Não	Botão sublinhado com ligação para outra página (ex: “Ver mais”).

Nota: Quase todos os elementos são opcionais — apenas as duas imagens do cartão (computador e telemóvel) são obrigatórias para cada cartão ser apresentado. O módulo adapta-se à ausência de qualquer campo opcional, não deixando espaços vazios.

O mínimo de cartões é 2 — o módulo não é publicável com menos. Apenas as duas imagens de cada cartão são obrigatórias. Os cartões são baseados no componente C12, com as suas variações de formato e posicionamento. Todos os cartões do módulo devem ter a mesma altura — o conteúdo alinha-se entre colunas.

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 módulo	Ativo / Inativo	Ativo	Controla se o módulo é apresentado na página. Quando inativo, não aparece.
Mostrar setas de navegação	Sim / Não	Sim	Controla se as setas de “anterior/seguinte” aparecem quando o módulo funciona como carrossel.
Posição da imagem do cartão	Em cima / Em baixo	Em baixo	Define se a imagem aparece por cima ou por baixo do texto dentro de cada cartão.
Margem superior	Valores entre -100 e 100	—	Espaço extra acima do módulo (em pixeis).
Margem inferior	Valores entre -100 e 100	—	Espaço extra abaixo do módulo.
Preenchimento superior	Valores entre -100 e 100	—	Espaço interno acima do conteúdo do módulo.
Preenchimento inferior	Valores entre -100 e 100	—	Espaço interno abaixo do conteúdo do módulo.
Drag no carrossel	Ativo / Inativo	Inativo	Quando ativo, aparece um cursor de drag sobre os cartões indicando que é possível arrastar. Aplicável apenas no modo carrossel (4+ cartões em desktop, sempre em mobile).
Padding do corpo de texto	Com padding / Sem padding	Com padding	Controla se o corpo de texto do cabeçalho tem indentação lateral.
Posição da imagem do cartão	Em cima / Em baixo	Em baixo	Define se a imagem aparece por cima ou por baixo do texto em cada cartão. (comportamento componente c12-c)

Nota: Os cartões individuais podem também ser ativados ou desativados um a um — cartões inativos não aparecem no módulo, mesmo que todos os campos estejam preenchidos.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Cabeçalho	Título à esquerda, botão alinhado à direita; corpo de texto abaixo do título	Tudo empilhado verticalmente; botão ocupa toda a largura
Corpo de texto do cabeçalho	Visível abaixo do título	Não aparece
Cartões (até 3)	Três cartões lado a lado em grelha fixa	Carrossel com um cartão por vez
Cartões (4 ou mais)	Carrossel com três cartões visíveis e espreitadela do quarto	Carrossel com um cartão por vez
Imagem do cartão	Imagem em formato quadrado grande	Imagem quadrada ajustada à largura do cartão
Setas de navegação	Aparecem por baixo dos cartões, alinhadas à esquerda	Aparecem por baixo dos cartões, alinhadas à esquerda
Botão principal do cartão	Alinhado à esquerda do cartão	Alinhado à esquerda do cartão
Espaçamento entre cartões	24 pixeis entre cartões	16 pixeis entre cartões

Estados Visuais

Estado	Descrição
Inicial	O módulo aparece com o cabeçalho e o primeiro conjunto de cartões visíveis. O carrossel está parado na posição 0.
Ao passar o rato sobre o botão do cabeçalho	O botão muda de cor (fundo preenchido com a cor do tema e texto em cor de destaque).
Ao passar o rato sobre as setas	A seta muda de cor (fundo preenchido com a cor do tema e ícone em cor de destaque).
Ao passar o rato sobre o botão do cartão	O botão principal muda de cor; o botão secundário mostra a linha de sublinhado mais espessa.
Quando selecionado pelo teclado	As setas e botões mostram um contorno visível para indicar o elemento em foco.
Cabeçalho vazio	Quando nenhum dos campos do cabeçalho está preenchido, o bloco do cabeçalho não aparece e os cartões começam no topo.
Cartão com conteúdo mínimo	Se um cartão tem apenas título e imagem, o cartão ajusta a altura ao conteúdo e continua alinhado com os restantes.
Um único cartão	BO não permite apenas 1 cartão, mínimo 2.
Deslizamento em curso (telemóvel)	Os cartões movem-se suavemente com o gesto do dedo, com ligeira inércia.
Movimento reduzido	Para visitantes com preferência por movimento reduzido ativada no sistema, a animação do carrossel é instantânea (sem transição visível).

Animação de Entrada

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

O cabeçalho (etiqueta, título, corpo, botão) aparece primeiro com um efeito “appear up” fluído e rápido

Os cartões aparecem a seguir, com o mesmo efeito, 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

O módulo pode ser navegado apenas com o teclado — as setas de “anterior” e “seguinte” podem ser acedidas com a tecla Tab e ativadas com Enter ou Espaço
Quando o carrossel está selecionado pelo teclado, é possível navegar entre cartões com as teclas “seta esquerda” e “seta direita”
Os botões de navegação têm descrições legíveis por leitor de ecrã (por exemplo, “Slide anterior”, “Próximo slide”)
O conjunto de cartões é anunciado como carrossel pelos leitores de ecrã, com o número total de cartões
Todas as imagens têm uma descrição alternativa para utilizadores com leitor de ecrã
Os elementos interativos (botões e setas) têm indicação visual clara quando estão selecionados pelo teclado
Respeita a preferência “Reduzir movimento” do sistema operativo — quando ativa, as transições do carrossel são instantâneas
O contraste entre o texto e o fundo cumpre os requisitos mínimos de acessibilidade visual em todos os 8 temas

Temas

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)

O módulo adapta-se visualmente a cada hotel:

Savoy Signature — identidade corporativa neutra, em ambiente sóbrio
Savoy Palace — paleta quente com tons de dourado e púrpura escuro
Royal Savoy — identidade clássica com acentos elegantes
Saccharum — verde suave inspirado na natureza envolvente
The Reserve — paleta refinada e reservada
Calheta Beach — tons costeiros e frescos
Gardens — verdes e beges orgânicos
Hotel Next — paleta moderna e minimalista

Em cada tema, mudam: as cores de fundo, título, etiqueta, corpo de texto e botões, assim como a tipografia dos títulos e do corpo de texto. A estrutura visual (posição dos cartões, dimensões, comportamento do carrossel) mantém-se igual em todos os hotéis.

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

Data	Estado	Descrição
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-23	Rascunho	Versão inicial criada a partir do Figma