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
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 →</a>
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 | Hotel Next | Savoy Signature
Descrição Geral
Section titled “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.
No computador, a imagem principal (alta e de maior dimensão) fica à esquerda, ocupando a maior parte da coluna, enquanto o texto e a imagem secundária (mais pequena, em formato quadrado) aparecem à direita. No canto superior esquerdo da imagem principal há uma pequena miniatura decorativa sobreposta, que reforça o enquadramento visual.
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).
Variantes
Section titled “Variantes”Variante 1 — Completa (com todos os elementos)
Section titled “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 em forma de estrela
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 em forma de estrela
Variante 2 — Sem botões
Section titled “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
Section titled “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
Section titled “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)
Section titled “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)
Section titled “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
Section titled “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
Section titled “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 (ex: “Alojamento”, “Restauração”). Apresentado em caixa alta, centrado, entre dois elementos decorativos horizontais. O editor escolhe o nível de cabeçalho. |
| Título principal | Título | Não | Texto em destaque abaixo da etiqueta (suporta negrito). 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) |
| Imagem principal (computador) | Imagem | Sim | Fotografia grande e alta apresentada à esquerda no computador |
| Imagem principal (telemóvel) | Imagem | Sim | Versão da imagem principal para ecrã pequeno |
| Descrição da imagem principal | Texto | Não | Descrição alternativa para leitores de ecrã |
| Legenda da imagem principal | Texto | Não | Frase curta apresentada abaixo da imagem principal, com um pequeno símbolo em forma de estrela |
| Imagem secundária (computador) | Imagem | Sim | Fotografia quadrada, mais pequena, apresentada à direita no computador |
| Imagem secundária (telemóvel) | Imagem | Sim | Versão da imagem secundária para ecrã pequeno |
| Descrição da imagem secundária | Texto | Não | Descrição alternativa para leitores de ecrã |
| Legenda da imagem secundária | Texto | Não | Frase curta apresentada abaixo da imagem secundária, com um pequeno símbolo em forma de estrela |
| Botão principal | Botão | Não | Botão preenchido em forma de cápsula com texto e ligação para outra página |
| Botão secundário | Botão | Não | Botão sublinhado com texto e ligação para outra página |
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
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 esconder o módulo sem o apagar |
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
Section titled “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
Section titled “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 |
Acessibilidade
Section titled “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.
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 hotéis suportados:
- Savoy Signature
- Savoy Palace
- Royal Savoy
- Saccharum
- The Reserve
- Calheta Beach
- Gardens
- Hotel Next
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.
Changelog
Section titled “Changelog”| Data | Estado | Descrição |
|---|---|---|
| 2026-04-23 | Rascunho | Versão inicial criada a partir do Figma e do código implementado |
| 2026-04-23 | Publicada | Publicada no Docmost (nova página) |