M10 — Highlight

Secção de destaque com duas imagens em composição assimétrica, título central, texto descritivo e botões de ação. Usada para realçar visualmente uma experiência, um serviço, uma área do hotel ou uma história, com forte peso editorial e tratamento fotográfico duplo.

Campo	Valor
Módulo	M10 — Highlight
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Library (página)	Abrir no Figma
Zoho Task	Abrir no Zoho
Criada	2026-04-23
Aprovada	—
Aprovada por	—

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 Highlight é um módulo editorial com forte carga visual: combina um cabeçalho centrado (etiqueta e título), duas fotografias em composição assimétrica e um parágrafo de texto acompanhado por botões de ação.

A imagem principal (proporção 4:5) tem uma imagem decorativa sobreposta (proporção 1:1), carregada pelo editor no backoffice. Esta imagem pode aparecer à esquerda, à direita, ou estar ausente, consoante a configuração do módulo. Em mobile, a imagem decorativa aparece sempre à esquerda, independentemente da posição configurada para desktop.

Cada uma das duas imagens pode ter uma legenda própria, apresentada logo abaixo com um pequeno símbolo em forma de estrela. No topo do módulo, uma etiqueta opcional (ex: “Alojamento”, “Restauração”, “Bem-Estar”) aparece centrada entre dois elementos decorativos horizontais.

Este módulo é usado em páginas de destino, páginas de apresentação de hotel e páginas temáticas para dar protagonismo a um tema ou área, com maior densidade visual do que um banner simples. Funciona bem para contar uma história com duas imagens complementares (ex: vista geral + pormenor, exterior + interior, piscina + suite).

O módulo é mais alto do que a altura standard do viewport — o visitante precisa de fazer scroll para ver todo o conteúdo. As imagens têm um efeito de parallax durante o scroll.

Variantes

Variante 1 — Completa (com todos os elementos)

Como visitante, quero ver um destaque visual rico com duas fotografias, título, texto descritivo e botões de ação, para conhecer em profundidade uma experiência ou área do hotel e poder aceder a mais informação.

Elementos visíveis:

Etiqueta superior centrada, com dois elementos decorativos horizontais (setas/símbolos) de cada lado
Título principal centrado, em destaque, podendo conter palavras em negrito
Imagem principal (à esquerda no computador), alta e de maior dimensão
Miniatura decorativa sobreposta no canto superior esquerdo da imagem principal
Legenda da imagem principal, com pequeno símbolo em forma de estrela
Parágrafo de texto descritivo (à direita no computador)
Botão principal (preenchido, em forma de cápsula) — ex: “Explorar Quartos”
Botão secundário (sublinhado) — ex: “Ver Suites”
Imagem secundária (quadrada, mais pequena) abaixo dos botões
Legenda da imagem secundária, com pequeno símbolo (icon é opcional e definido no tema do hotel)

Critérios de Aceitação:

A etiqueta aparece centrada no topo, entre dois elementos decorativos
O título aparece centrado, imediatamente abaixo da etiqueta
No computador, a imagem principal ocupa a coluna da esquerda
A miniatura decorativa aparece sobreposta no canto superior esquerdo da imagem principal
No computador, o texto, botões e imagem secundária aparecem na coluna da direita
O botão principal redireciona para a página indicada
O botão secundário redireciona para a página indicada
As legendas aparecem abaixo de cada imagem, precedidas de um pequeno símbolo (icon é opcional e definido no tema do hotel)
Em mobile, os elementos seguem genericamente a ordem de leitura do desktop (esquerda para a direita, de cima para baixo), com a excepção do bloco de texto, que desce uma posição e aparece depois da imagem grande da coluna esquerda.

Variante 2 — Sem botões

Como visitante, quero que o destaque funcione apenas como bloco editorial (imagens + título + texto), sem botões, quando não há uma ação prioritária a propor.

Elementos visíveis:

Todos os elementos da variante completa EXCETO os dois botões
A secção de botões não aparece

Critérios de Aceitação:

Os botões não aparecem na coluna de texto
O espaço vertical entre o texto e a imagem secundária ajusta-se naturalmente, sem deixar áreas vazias
O layout mantém-se visualmente equilibrado

Variante 3 — Apenas botão principal

Como visitante, quero que o destaque possa ter apenas um botão de ação, quando há uma única ação clara a propor.

Elementos visíveis:

Todos os elementos da variante completa EXCETO o botão secundário
Apenas o botão principal (preenchido) aparece

Critérios de Aceitação:

O botão principal aparece na coluna de texto
O botão secundário não aparece
O layout mantém-se visualmente equilibrado

Variante 4 — Sem legendas

Como visitante, quero que as imagens possam ser apresentadas sem legendas adicionais, quando as próprias imagens já são autoexplicativas.

Elementos visíveis:

Todos os elementos da variante completa EXCETO as legendas das imagens
As duas imagens aparecem sem qualquer texto abaixo

Critérios de Aceitação:

As imagens não mostram texto abaixo nem símbolo em forma de estrela
O espaçamento entre os blocos ajusta-se naturalmente

Variante 5 — Sem cabeçalho (apenas imagens e texto)

Como visitante, quero que o módulo possa funcionar sem etiqueta nem título, quando já existe um cabeçalho noutro módulo da página e queremos evitar repetição.

Elementos visíveis:

A secção do cabeçalho (etiqueta + título) não aparece
O módulo começa diretamente pelas duas imagens e o texto

Critérios de Aceitação:

A secção do cabeçalho centrado não aparece
O módulo inicia com as imagens e o texto
Não há espaço vazio onde estaria o cabeçalho

Variante 6 — Conteúdo mínimo (apenas imagens)

Como visitante, quero que o módulo funcione apenas com as duas imagens, quando o tema é puramente visual e dispensa texto explicativo.

Elementos visíveis:

As duas imagens (principal e secundária)
Miniatura decorativa sobreposta no canto da imagem principal

Critérios de Aceitação:

O módulo apresenta-se corretamente apenas com as duas imagens
Não há espaços vazios onde estariam o título, texto ou botões
A composição visual mantém-se equilibrada

Interações do Utilizador

Este módulo apresenta apenas conteúdo estático gerido pelo backoffice. Não contém interações com o utilizador.

Os botões de ação (quando presentes) direcionam o visitante para outras páginas do site, mas o módulo em si não tem comportamentos dinâmicos como carrosséis, acordeões ou formulários.

Elementos

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

Elemento	Tipo	Obrigatório	Descrição
Etiqueta superior	Título	Não	Texto curto no topo do módulo. Suporta RTE simplificado: negrito, itálico, sublinhado, link. O ícone decorativo junto à etiqueta é definido pelo tema do hotel e pode estar desativado (ex: Saccharum não usa ícone).
Título principal	Título	Não	Texto em destaque abaixo da etiqueta (Suporta RTE simplificado: negrito, itálico, sublinhado, link.). O editor escolhe o nível de cabeçalho.
Texto descritivo	Texto	Não	Parágrafo de texto na coluna direita (no computador) ou abaixo das imagens (no telemóvel). Suporta RTE simplificado: negrito, itálico, sublinhado, link.
Imagem decorativa sobreposta	Imagem	Não	Imagem em proporção 1:1 (120×120px) sobreposta na imagem principal. Suporta JPEG, PNG, WEBP, SVG. A posição (esquerda, direita ou nenhuma) é definida na opção de configuração. Em mobile aparece sempre à esquerda.
Descrição da imagem decorativa	Texto	Não	Alt text para leitores de ecrã. Quando é um elemento puramente decorativo, pode ser deixado vazio para ser ignorado pelos leitores de ecrã.
Imagem principal (computador)	Imagem	Sim	Proporção 4:5. Suporta JPEG, PNG, WEBP, SVG e GIF animado. GIFs reproduzem automaticamente em loop. Tamanho máximo de 750kb.
Imagem principal (telemóvel)	Imagem	Sim	Versão para ecrã pequeno. Se não fornecida, usa a versão desktop.
Descrição da imagem principal	Texto	Não	Alt text para leitores de ecrã.
Legenda da imagem principal	Texto	Não	Texto curto apresentado abaixo da imagem. O ícone decorativo junto à legenda é definido pelo tema do hotel e pode estar desativado.
Imagem secundária (computador)	Imagem	Sim	Proporção 1:1. Suporta JPEG, PNG, WEBP, SVG e GIF animado. Tamanho máximo de 750kb.
Imagem secundária (telemóvel)	Imagem	Sim	Versão para ecrã pequeno. Se não fornecida, usa a versão desktop.
Descrição da imagem secundária	Texto	Não	Alt text para leitores de ecrã.
Legenda da imagem secundária	Texto	Não	Texto curto abaixo da imagem secundária. Ícone igual à legenda principal.
Botão principal	Botão	Não	Botão preenchido.
Botão secundário	Botão	Não	Botão preenchido.

Nota: As duas imagens (principal e secundária) são obrigatórias — o módulo precisa de ambas para manter a composição assimétrica característica. Todos os outros elementos são opcionais; o módulo adapta-se automaticamente à ausência de campos opcionais e os espaços ajustam-se sem deixar áreas vazias.

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.
Posição do texto	Direita / Esquerda	Direita	Define em que lado do módulo aparece a coluna de texto (e os botões e imagem secundária). A imagem principal ocupa o lado oposto.
Tipo de fundo	Background=A (Cor 1 full) / Background=B (Cor 1 a 60% + Cor 2 a 40%) / Background=C (Cor 2 a 60% + Cor 1 a 40%) / Background=D (Cor 2 full)	Background=A	Controla o esquema de cor de fundo. Os tipos B e C criam fundos bicolores — em desktop, a divisão é horizontal (60% em cima, 40% em baixo); em mobile é 70% em cima e 30% em baixo.
Posição da imagem decorativa	Esquerda / Direita / Nenhum	Esquerda	Define a posição da imagem decorativa sobreposta na imagem principal. Em mobile, a imagem aparece sempre à esquerda independentemente desta opção. Quando definido como “Nenhum”, o campo de upload não aparece e a imagem não é apresentada mesmo que tenha sido carregada.
Formato da imagem principal	Opção 1 (padrão do tema) / Opção 2 / Opção 3	Opção 1	Cada hotel tem três formatos de máscara para a imagem grande. (borders)
Formato da imagem secundária	Opção 1 (padrão do tema) / Opção 2 / Opção 3	Opção 1	Cada hotel tem três formatos de máscara para a imagem pequena. (borders)

Os espaçamentos verticais acima e abaixo do módulo (margem e preenchimento superior/inferior) também são configuráveis — permitem ajustar a distância entre este módulo e os restantes na mesma página.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Etiqueta superior	Centrada, entre dois elementos decorativos horizontais com cerca de 64 píxeis de largura	Centrada, elementos decorativos mais compactos
Título principal	Centrado, em grande destaque	Centrado, tamanho adaptado
Imagem principal	Ocupa a coluna da esquerda, com formato vertical alto	Ocupa toda a largura, com formato mais compacto
Miniatura decorativa	Sobreposta no canto superior esquerdo da imagem principal	Sobreposta no canto superior esquerdo da imagem principal
Legenda da imagem principal	Abaixo da imagem, alinhada à esquerda	Abaixo da imagem, alinhada à esquerda
Texto descritivo	Na coluna da direita, abaixo do espaço onde está a imagem principal	Abaixo da imagem principal, ocupa toda a largura
Botões	Alinhados lado a lado, à esquerda da coluna de texto	Empilhados, ocupam toda a largura
Imagem secundária	Abaixo dos botões, na coluna da direita, formato quadrado	Ocupa toda a largura, formato quadrado
Legenda da imagem secundária	Abaixo da imagem secundária, alinhada à esquerda	Abaixo da imagem secundária, alinhada à esquerda
Disposição geral	Duas colunas lado a lado (imagem principal à esquerda; texto, botões e imagem secundária à direita)	Tudo empilhado verticalmente numa única coluna pela seguinte ordem: cabeçalho, imagem principal, legenda, texto, botões, imagem secundária, legenda

Estados Visuais

Estado	Descrição
Inicial	O módulo aparece com todos os elementos visíveis ao carregar a página
Ao passar o rato no botão principal	O botão fica ligeiramente mais claro para indicar que é clicável
Ao passar o rato no botão secundário	O texto do botão fica ligeiramente mais transparente
Sem etiqueta superior	O espaço da etiqueta não aparece; o título sobe
Sem título	O espaço do título não aparece; o cabeçalho desaparece se também não houver etiqueta
Sem texto descritivo	A coluna de texto fica mais curta; os botões aparecem mais próximos do topo
Sem botões	A secção de botões não aparece; a imagem secundária sobe
Sem legendas	As legendas e os símbolos em forma de estrela não aparecem
Título com negrito	As palavras marcadas como negrito aparecem mais pretas e espessas dentro do título
Conteúdo de texto longo	O módulo cresce em altura para acomodar todo o texto, sem o cortar
Texto curto	O módulo mantém espaçamentos equilibrados sem criar grandes áreas vazias

Animações

O módulo tem duas animações distintas:

1. Entrada do texto — headline slide up mask: a etiqueta e o título entram com efeito de slide up com máscara ao carregar a página.

Referência: https://www.mellem.ca/ — ver “Bienvenue à l’ère des locataires.”

2. Parallax nas imagens: durante o scroll, a imagem principal e a imagem secundária movem-se a velocidades ligeiramente diferentes da página, criando profundidade. A imagem do lado esquerdo entra primeiro com o efeito de slide up mask, seguida da imagem do lado direito.

Referência: https://www.eriro.at/en/ — ver “Rooted in its origins” e “Travel back to the beginning of everything”

Para utilizadores com prefers-reduced-motion ativo, ambas as animações são desativadas.

Acessibilidade

Pode ser navegado apenas com o teclado (tecla Tab para saltar entre botões, Enter para ativar).
A etiqueta superior e o título mantêm a hierarquia semântica escolhida pelo editor (h1, h2, h3, etc.) — importante para leitores de ecrã e para a organização da página.
As imagens principal e secundária têm descrição alternativa para utilizadores com leitor de ecrã.
A miniatura decorativa sobreposta na imagem principal é apresentada como elemento meramente visual (ignorada por leitores de ecrã).
Os elementos decorativos horizontais ao lado da etiqueta são também ignorados por leitores de ecrã.
Os símbolos em forma de estrela ao lado das legendas são puramente decorativos.
Os botões têm texto legível por leitores de ecrã.
O contraste entre o texto e o fundo cumpre os requisitos de acessibilidade visual (mínimo 4.5:1) em todos os temas.
Os botões têm indicação visual clara quando estão selecionados pelo teclado.

Temas

O módulo adapta-se visualmente a cada hotel: cores de fundo, texto e botões seguem a identidade visual do hotel, assim como a tipografia dos títulos e do corpo de texto.

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)

Em todos os temas, a composição assimétrica (imagem principal alta à esquerda + texto e imagem secundária à direita no computador) mantém-se consistente. A cor do título, da etiqueta, do botão principal e do texto adaptam-se ao tema do hotel. Na variante Savoy Signature, o módulo pode apresentar-se sobre fundos escuros (azul-marinho) com texto claro; nos temas Saccharum, Calheta Beach e Hotel Next, podem aparecer fundos suaves em tons pastel (verde, azul-turquesa, azul-claro) como acento visual.

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.

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.

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-06	Validação Tech	Atualizado e validado por Rui Rosa
2026-05-05	Validação Design	Atualizado e validado por Liliana Moreira
2026-04-23	Rascunho	Versão inicial criada a partir do Figma e do código implementado