M27 — Text Image

Módulo editorial em duas colunas que combina um bloco de texto com uma imagem lado a lado. Apresenta um rótulo opcional, um título em destaque, um corpo de texto e um botão, sempre emparelhados com uma imagem quadrada. É um dos módulos mais versáteis para páginas de conteúdo do hotel (alojamento, restaurantes, spa, experiências).

Campo	Valor
Módulo	M27 — Text Image
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Zoho Task	P894-T431
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

Savoy Palace

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

O Text Image é um módulo editorial em duas colunas, pensado para páginas de conteúdo do hotel onde texto e imagem trabalham em conjunto. Numa coluna, o editor coloca um pequeno rótulo, um título em destaque, um corpo de texto e, opcionalmente, um botão. Na outra coluna, uma imagem quadrada — geralmente de uma zona do hotel, de uma experiência ou de um ambiente — equilibra a composição.

O editor pode decidir se a imagem aparece à direita ou à esquerda do texto, escolher um fundo claro ou intermédio (cor suave do tema) e selecionar o formato da imagem — cada hotel tem três formatos próprios definidos no design (um mais clássico, um arredondado e um assimétrico/dome), garantindo que o módulo se integra na identidade visual do hotel.

É um módulo tipicamente usado em páginas de alojamento, restaurantes, spa, experiências, “sobre o hotel”, destaques de zona, ou qualquer página de conteúdo onde se quer apresentar informação acompanhada de uma imagem de apoio. Pode ser repetido várias vezes numa mesma página, alternando a posição da imagem (direita/esquerda) para criar um ritmo visual.

Variantes

Variante 1 — Imagem à direita, fundo claro (padrão)

Como visitante, quero ler informação sobre uma zona do hotel ao lado de uma imagem que ilustre essa zona, para compreender melhor o que me está a ser apresentado.

Elementos visíveis:

Fundo claro (branco ou creme, conforme o tema do hotel)
Coluna de texto à esquerda: rótulo opcional, título, corpo de texto e botão opcional
Imagem quadrada à direita, alinhada com a coluna de texto
Formato da imagem segue o tema (pode ser quadrada, arredondada ou em formato especial do hotel)

Critérios de Aceitação:

A imagem aparece à direita do texto em ecrã grande
O fundo do módulo é claro
O rótulo (quando preenchido) aparece por cima do título
O título está em destaque e alinhado com o topo da imagem
O corpo de texto aparece por baixo do título, ligeiramente recuado para a direita
O botão (quando preenchido) aparece por baixo do corpo de texto
Em ecrã pequeno, o texto aparece primeiro e a imagem surge por baixo
Quando não há botão, o espaço não aparece vazio

Variante 2 — Imagem à esquerda, fundo claro

Como visitante, quero alternar a posição da imagem em relação ao texto ao longo da página, para criar um ritmo visual e não ter sempre o mesmo tipo de composição.

Elementos visíveis:

Fundo claro (branco ou creme)
Imagem quadrada à esquerda, alinhada com o topo do texto
Coluna de texto à direita: rótulo, título, corpo e botão opcionais
Mesma estrutura e tipografia da Variante 1, apenas com posições invertidas

Critérios de Aceitação:

A imagem aparece à esquerda do texto em ecrã grande
A coluna de texto aparece à direita
O fundo do módulo é claro
Em ecrã pequeno, o texto aparece primeiro e a imagem surge por baixo (a ordem de leitura é a mesma em qualquer tamanho de ecrã)

Variante 3 — Fundo intermédio

Como visitante, quero perceber que um bloco de conteúdo é uma secção distinta da anterior, através de uma cor de fundo ligeiramente diferente, para facilitar a orientação visual na página.

Elementos visíveis:

Fundo em cor intermédia do tema do hotel (tom creme quente, verde suave, azul claro, navy escuro ou outro, consoante o hotel)
Mesma estrutura da Variante 1 ou 2 (imagem à direita ou à esquerda)
Texto e botão ajustados para manter contraste sobre o novo fundo

Critérios de Aceitação:

O fundo do módulo usa a cor intermédia definida pelo tema do hotel
O texto mantém legibilidade clara sobre o fundo intermédio
O botão mantém-se visível e legível sobre o novo fundo
O contraste entre texto e fundo cumpre os requisitos de acessibilidade visual

Variante 4 — Formatos da imagem (por tema)

Como editor, quero escolher entre três formatos de imagem diferentes (definidos pelo design de cada hotel), para variar o ritmo visual da página sem sair da identidade do hotel.

O que varia:

Cada tema de hotel define três formatos de imagem próprios — tipicamente um mais clássico (quadrado ou ligeiramente arredondado), um arredondado (círculo ou quadrado com cantos bem arredondados) e um assimétrico/dome (um lado reto e outro em arco)
Exemplos observados:
- Savoy Palace — quadrado · assimétrico (três cantos arredondados, um reto) · dome (topo em arco)
- Saccharum — quadrado · formato “folha” (um canto reto, outros arredondados) · dome suave
- Calheta Beach — quadrado com cantos ligeiramente arredondados · círculo completo · quadrado com cantos médios
- Hotel Next — quadrado com cantos arredondados · círculo completo · quadrado com cantos médios
- Savoy Signature — sempre quadrado puro (sem cantos arredondados)
O formato padrão é o definido pelo tema do hotel. O editor pode optar por um dos três formatos específicos (quadrado, arredondado, assimétrico) caso queira sobrepor o padrão

Critérios de Aceitação:

Por defeito, o formato da imagem segue o estilo visual do tema do hotel ativo
O editor pode escolher explicitamente um formato alternativo (quadrado, arredondado ou assimétrico)
O formato escolhido é aplicado à imagem em todos os tamanhos de ecrã
Cada tema apresenta um conjunto de formatos coerente com a sua identidade visual

Interações do Utilizador

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

As únicas ações possíveis para o visitante são:

Ação	O que acontece
Clicar no botão	O visitante é encaminhado para a página indicada pelo editor
Clicar numa ligação dentro do corpo de texto	O visitante é encaminhado para a página ou recurso indicado pela ligação

Elementos

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

Elemento	Tipo	Obrigatório	Descrição
Rótulo	Título	Não	Texto curto em maiúsculas, tipicamente uma categoria ou secção (ex: “Alojamento”, “Restaurantes”). O editor escolhe o nível de cabeçalho.
Título principal	Título	Não	Título em destaque do módulo. Suporta negritos dentro do texto. O editor escolhe o nível de cabeçalho (por exemplo, H2 para secções principais de uma página).
Corpo de texto	Texto com formatação rica	Não	Texto descritivo com parágrafos, negritos, itálicos, ligações e listas. Pensado para descrições breves a médias (tipicamente um a três parágrafos).
Imagem para computador	Imagem	Não	Imagem exibida em ecrãs grandes. Formato quadrado (recomendado). Cria um par visual com o texto.
Imagem para telemóvel	Imagem	Não	Imagem exibida em ecrãs pequenos. Caso não seja preenchida, é usada automaticamente a imagem para computador.
Descrição da imagem	Texto	Sim (quando há imagem)	Descrição textual da imagem, usada por leitores de ecrã e quando a imagem não carrega. Obrigatório sempre que exista imagem.
Botão	Botão	Não	Botão com texto curto e uma ligação para outra página. Aparece por baixo do corpo de texto.

Nota: Todos os elementos de conteúdo são opcionais, exceto a descrição da imagem (que é obrigatória sempre que exista imagem). Se o editor não preencher a imagem, o módulo apresenta apenas a coluna de texto. Se não preencher o texto, apresenta apenas a imagem. O módulo adapta-se automaticamente à ausência de campos opcionais — 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 esconder o módulo sem o apagar.
Posição da imagem	Direita / Esquerda	Direita	Define de que lado do texto aparece a imagem em ecrã grande. Em ecrã pequeno, o texto aparece sempre primeiro e a imagem por baixo.
Tipo de fundo	Claro / Intermédio	Claro	Escolhe entre o fundo neutro claro do tema (branco ou creme) ou um tom intermédio definido pelo tema do hotel.
Formato da imagem	Padrão do tema / Quadrado / Arredondado / Assimétrico	Padrão do tema	Define o formato dos cantos da imagem. O “Padrão do tema” usa o estilo definido pelo hotel. As outras opções forçam um formato específico (ex: quadrado puro, cantos arredondados ou dome assimétrico).

O restante aspeto visual (cores, tipografia dos títulos e do corpo, cor e formato do botão, espaçamentos internos) é controlado automaticamente pelo tema do hotel e não precisa de configuração no módulo.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Disposição geral	Duas colunas lado a lado (texto + imagem)	Uma coluna empilhada: texto por cima, imagem por baixo
Posição da imagem	Direita ou esquerda, conforme escolha do editor	Sempre por baixo do texto (a opção de posição não afeta ecrãs pequenos)
Imagem	Quadrada, ocupa a metade do módulo	Quadrada, ocupa toda a largura útil do ecrã
Rótulo e título	Alinhados com o topo da imagem	Alinhados com a margem esquerda do ecrã
Corpo de texto	Recuado ligeiramente para a direita, largura confortável para leitura	Sem recuo; ocupa toda a largura útil
Botão	Alinhado com o corpo de texto, largura ajustada ao seu conteúdo	Largura total ou quase total, alinhado com o corpo de texto
Espaçamentos internos	Generosos entre elementos	Reduzidos para aproveitar o espaço do ecrã

Estados Visuais

Estado	Descrição
Inicial	O módulo aparece com os dois blocos (texto e imagem) lado a lado, conforme a configuração escolhida.
Ao passar o rato no botão	O botão destaca-se visualmente (muda ligeiramente de cor ou de fundo) para indicar que é clicável.
Ao passar o rato numa ligação do texto	A ligação muda de aparência (normalmente sublinhado ou alteração de cor) para indicar que é clicável.
Imagem com ponto focal definido	Se o editor definiu um ponto focal na imagem no backoffice, o enquadramento respeita esse ponto em ambos os tamanhos de ecrã.
Sem imagem	O módulo apresenta apenas a coluna de texto, ocupando o espaço disponível.
Sem texto	O módulo apresenta apenas a imagem, ocupando o espaço disponível.
Sem botão	A área de botão é omitida; o módulo termina no fim do corpo de texto.
Sem rótulo ou título	Os blocos omitidos não aparecem — o módulo adapta-se para não deixar espaço vazio.
Corpo de texto muito longo	O texto estende-se verticalmente conforme necessário. A imagem mantém-se quadrada e alinha com o topo.
Enquanto a imagem carrega	É apresentado um espaço reservado (placeholder) com as mesmas dimensões da imagem, para evitar saltos de layout.

Acessibilidade

O conteúdo pode ser lido por leitores de ecrã com a estrutura correta — o rótulo e o título usam os níveis de cabeçalho escolhidos pelo editor (ex: H2 para título principal, H3 para subsecções).
A imagem tem uma descrição textual (obrigatória sempre que exista imagem) que é lida por leitores de ecrã e aparece caso a imagem não carregue.
Os botões e as ligações dentro do corpo de texto são totalmente navegáveis por teclado (tecla Tab) e ativáveis com Enter.
Todos os elementos interativos têm indicação visual clara quando estão selecionados pelo teclado.
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 em ambas as cores de fundo (claro e intermédio) e em todos os temas de hotel.
A ordem de leitura em ecrãs pequenos é sempre texto → imagem, independentemente da posição escolhida para ecrã grande, para garantir consistência na leitura por leitores de ecrã.

Temas

O módulo adapta-se visualmente a cada hotel: cores de fundo (claro e intermédio), cores do texto, tipografia dos títulos e do corpo de texto, cor e formato dos botões, e especialmente o formato da imagem seguem a identidade visual de cada hotel.

Os 8 hotéis suportados:

Savoy Signature
Savoy Palace
Royal Savoy
Saccharum
The Reserve
Calheta Beach
Gardens
Hotel Next

Diferenças visíveis entre temas (exemplos observados no Figma):

Savoy Palace — tipografia serifada clássica, cor de destaque dourada/ocre nos botões, fundo intermédio em tom creme quente; formatos de imagem: quadrado, assimétrico e dome arqueado
Saccharum — paleta em tons naturais, tipografia sóbria, fundo intermédio em verde pálido; formatos de imagem: quadrado, formato “folha” e dome suave
Calheta Beach — paleta inspirada no mar, botões em tom vermelho, fundo intermédio em azul-claro/aqua; formatos de imagem: quadrado arredondado, círculo e quadrado de cantos médios
Hotel Next — paleta contemporânea, botões em tom escuro, fundo intermédio em azul céu; formatos de imagem: quadrado arredondado, círculo e quadrado de cantos médios
Savoy Signature — paleta institucional, tipografia elegante, fundo intermédio em navy escuro com texto claro; formatos de imagem: sempre quadrado puro

A estrutura do módulo (disposição em duas colunas, hierarquia do texto, comportamento responsivo) mantém-se igual em todos os temas para garantir uma experiência consistente.

Changelog

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