M26 — RTE

Módulo editorial de texto longo, pensado para páginas de conteúdo onde a palavra tem protagonismo. Apresenta um bloco tipográfico — com etiqueta opcional, título, subtítulo e um corpo de texto rico — seguido de um ou dois botões. Todo o aspeto visual (fundo, alinhamento, tipografia, botões) adapta-se à identidade do hotel.

Campo	Valor
Módulo	M26 — RTE
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Zoho Task	Ver tarefa no Zoho
Criada	2026-04-21
Aprovada	—
Aprovada por	—

Screenshots de Referência

Desktop (1440px) — Savoy Palace

Mobile (375px) — Savoy Palace

Abrir screenshot mobile (375px) em nova janela →</a>

Variantes por tema

Savoy Palace

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

O RTE (Rich Text Editor) é um módulo totalmente tipográfico que serve para apresentar textos longos com estrutura — páginas editoriais, descrições de spa, histórias do hotel, narrativas de restaurantes ou qualquer conteúdo onde o texto é o elemento principal. Não inclui imagens: o protagonismo é do conteúdo escrito.

O editor pode optar por colocar um pequeno rótulo em destaque, um título, um subtítulo e, a seguir, um corpo de texto com formatação rica — incluindo parágrafos, citações, listas, texto destacado, ligações, notas de rodapé e separadores horizontais. Por baixo do texto pode ainda colocar um ou dois botões que encaminham o visitante para outras páginas.

O módulo oferece ao editor três cores de fundo (claro, intermédio e escuro) e dois alinhamentos de texto (esquerda ou centrado), permitindo adaptar o tom visual à secção da página onde é usado. É ideal para páginas como “Sobre o hotel”, “Nossa história”, descrições detalhadas de experiências, termos e condições, políticas, e qualquer outra página de conteúdo editorial extenso.

Variantes

Variante 1 — Fundo claro, alinhado à esquerda

Como visitante, quero ler textos longos sobre o hotel num ambiente visual limpo e neutro, para manter a atenção focada no conteúdo.

Elementos visíveis:

Fundo em cor clara (branco ou creme, consoante o tema)
Rótulo opcional em letras maiúsculas e tamanho pequeno, no topo
Título principal em destaque, alinhado à esquerda
Subtítulo opcional por baixo do título, também alinhado à esquerda
Corpo de texto com parágrafos, citações, listas e outros elementos de formatação
Um ou dois botões opcionais por baixo do texto, alinhados à esquerda

Critérios de Aceitação:

O fundo do módulo é claro
O rótulo (quando preenchido) aparece por cima do título
Todos os textos aparecem alinhados à esquerda
O corpo de texto preserva a formatação escolhida pelo editor (negritos, itálicos, ligações, citações, listas, texto destacado)
Os botões aparecem por baixo do texto e encaminham para as páginas indicadas
Quando não há botões, o espaço não aparece vazio
Quando não há rótulo, título ou subtítulo, o espaço não aparece vazio

Variante 2 — Fundo claro, centrado

Como visitante, quero ler um bloco editorial curto apresentado de forma simétrica e elegante, para dar ênfase a mensagens-chave do hotel.

Elementos visíveis:

Fundo em cor clara (branco ou creme)
Rótulo opcional centrado no topo
Título principal centrado, em destaque
Subtítulo opcional centrado
Corpo de texto centrado (parágrafos, listas, etc.)
Um ou dois botões opcionais centrados por baixo do texto

Critérios de Aceitação:

O fundo do módulo é claro
Todos os textos aparecem centrados horizontalmente
O rótulo, título e subtítulo (quando preenchidos) aparecem centrados
Os botões (quando preenchidos) aparecem centrados
Em ecrãs pequenos, o texto mantém-se legível e centrado

Variante 3 — Fundo intermédio, alinhado à esquerda

Como visitante, quero distinguir blocos de conteúdo editorial com um fundo suave, para perceber que se trata de uma secção diferente da anterior.

Elementos visíveis:

Fundo em cor intermédia (tom quente ou neutro, consoante o tema do hotel)
Mesma estrutura da Variante 1 (rótulo, título, subtítulo, corpo, botões) alinhados à esquerda

Critérios de Aceitação:

O fundo do módulo usa uma cor intermédia do tema do hotel
O contraste entre texto e fundo cumpre os requisitos de acessibilidade visual
Todos os textos aparecem alinhados à esquerda
Os botões mantêm-se visíveis e legíveis sobre o fundo intermédio

Variante 4 — Fundo intermédio, centrado

Como visitante, quero ver uma secção editorial centrada num ambiente visual acolhedor, para dar destaque a mensagens importantes com um tom mais quente.

Elementos visíveis:

Fundo em cor intermédia
Rótulo, título, subtítulo, corpo e botões — todos centrados

Critérios de Aceitação:

O fundo do módulo usa uma cor intermédia do tema do hotel
Todos os textos aparecem centrados
Os botões (quando preenchidos) aparecem centrados
Em ecrãs pequenos, o alinhamento centrado é mantido

Variante 5 — Fundo escuro, alinhado à esquerda

Como visitante, quero ler textos editoriais com grande contraste visual, para dar solenidade a secções como citações, história do hotel ou comunicados importantes.

Elementos visíveis:

Fundo em cor escura (tipicamente a cor principal do hotel)
Texto em cor clara, ajustada para garantir legibilidade
Mesma estrutura dos restantes (rótulo, título, subtítulo, corpo, botões) alinhados à esquerda
Botões adaptados à cor de fundo escura

Critérios de Aceitação:

O fundo do módulo usa a cor escura principal do tema do hotel
O texto é apresentado numa cor clara de alto contraste
O rótulo, título, subtítulo, corpo e botões continuam visíveis e legíveis
Os botões ajustam automaticamente a sua cor para serem visíveis sobre o fundo escuro
O contraste entre texto e fundo cumpre os requisitos de acessibilidade 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 numa ligação dentro do texto	O visitante é encaminhado para a página ou recurso indicado pela ligação
Clicar no botão principal	O visitante é encaminhado para a página indicada pelo editor
Clicar no botão secundário	O visitante é encaminhado para uma segunda página indicada pelo editor

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 que aparece por cima do título principal (ex: “Spa & Bem-Estar”, “História”). 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).
Subtítulo	Título	Não	Texto secundário por baixo do título principal, útil para contextualizar ou complementar. O editor escolhe o nível de cabeçalho.
Corpo de texto	Texto com formatação rica	Não	Texto editorial longo com formatação: parágrafos, cabeçalhos internos (H2, H3), citações em destaque, parágrafos com tamanho maior, notas de rodapé, texto destacado com cor, listas simples e numeradas, negritos, itálicos, sublinhado, riscado, ligações e separadores horizontais.
Botão principal	Botão	Não	Botão de destaque por baixo do texto, com um texto curto e uma ligação para outra página.
Botão secundário	Botão	Não	Segundo botão por baixo do texto (geralmente em estilo menos destacado), com um texto curto e uma ligação.

Nota: Todos os elementos são opcionais — o editor pode preencher apenas os que precisa. 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.
Tipo de fundo	Claro / Intermédio / Escuro	Claro	Escolhe a cor de fundo do módulo. “Claro” usa tons neutros (branco ou creme), “Intermédio” usa um tom quente ou neutro do tema, e “Escuro” usa a cor principal do hotel com texto em tom claro.
Alinhamento do texto	Esquerda / Centrado	Esquerda	Define se o texto, rótulos, título, subtítulo e botões aparecem alinhados à esquerda ou centrados.

O restante aspeto visual (cores do texto, tipografia dos títulos e do corpo, espaçamentos, estilo dos botões, formatação dentro do corpo de texto — como citações, listas e texto destacado) é 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	Bloco centrado com largura máxima controlada	Ocupa toda a largura do ecrã, com margens laterais reduzidas
Rótulo, título e subtítulo	Alinhados conforme a opção escolhida (esquerda ou centrado)	Mantêm o alinhamento escolhido; tamanhos ajustam-se para melhor legibilidade
Corpo de texto	Largura confortável para leitura	Largura total do ecrã; tamanhos de texto adaptados
Botões	Ficam em linha, um ao lado do outro	Podem ficar empilhados verticalmente, um por cima do outro
Espaçamentos internos	Generosos	Reduzidos para aproveitar o espaço do ecrã

Estados Visuais

Estado	Descrição
Inicial	O módulo aparece com todos os elementos preenchidos. O fundo é aplicado conforme a opção escolhida.
Ao passar o rato num 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.
Citação em destaque	Aparece com um estilo visual diferenciado (tipografia maior, espaçamento próprio, possível marca lateral) para se distinguir dos parágrafos normais.
Texto destacado (highlight)	Aparece sobre um fundo colorido subtil para chamar a atenção.
Nota de rodapé	Aparece em tamanho mais reduzido e com tom mais suave, tipicamente no final do texto.
Lista simples ou numerada	Itens aparecem com marcadores ou números próprios do tema do hotel.
Separador horizontal	Aparece como uma linha fina que divide visualmente duas secções do corpo de texto.
Campos vazios (rótulo, título, subtítulo)	Os blocos não aparecem — o módulo adapta-se para não deixar espaço vazio.
Sem botões	A área de botões é omitida; o módulo termina no fim do corpo de texto.
Apenas um botão	O botão secundário é omitido; apenas o principal aparece.
Corpo de texto muito longo	O módulo estende-se verticalmente conforme necessário, mantendo a legibilidade.

Acessibilidade

O conteúdo pode ser lido por leitores de ecrã com a estrutura correta — o rótulo, o título, o subtítulo e o corpo de texto usam os níveis de cabeçalho escolhidos pelo editor.
O editor escolhe o nível de cabeçalho (H1 a H6, ou parágrafo) de cada título, garantindo que a hierarquia de conteúdo é semântica e coerente com o resto da página.
As ligações dentro do corpo de texto e os botões 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 todas as combinações de fundo (claro, intermédio e escuro) e em todos os temas de hotel.
No modo com fundo escuro, o texto é apresentado em cor clara para manter alto contraste.
A formatação dentro do corpo de texto (citações, listas, texto destacado) preserva a estrutura semântica correta para que seja interpretada adequadamente por leitores de ecrã.

Temas

O módulo adapta-se visualmente a cada hotel: cores de fundo (nos três modos), cores do texto, tipografia dos títulos e do corpo de texto, estilo dos botões e aspeto dos elementos de formatação dentro do corpo (citações, destaques, listas, notas de rodapé) 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):

Savoy Palace — tons neutros e dourados, tipografia serifada clássica nos títulos, fundo escuro em cor bordeaux
Saccharum — paleta em tons naturais e terrosos, tipografia moderna, fundo escuro em verde profundo
Calheta Beach — paleta inspirada no mar, tons claros e arejados, fundo escuro em tom azul-mar
Hotel Next — paleta contemporânea e vibrante, tipografia moderna, fundo escuro em azul-escuro ou preto
Savoy Signature — paleta neutra institucional, tipografia sóbria e elegante

A estrutura do módulo (posição dos elementos, 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-21	Rascunho	Versão inicial criada a partir do Figma
2026-04-21	Publicada	Publicada no Docmost (nova página)