Guia de estilo da biblioteca Relume

Versão 1.4 - Cliente-primeiro V2
Documentos do cliente em primeiro lugar
Começar a trabalhar
Tipografia
Etiquetas de títulos HTML
As etiquetas HTML definem os estilos de título predefinidos.
Todos os títulos H1

Rubrica 1

Todos os títulos H2

Rubrica 2

Todos os títulos H3

Rubrica 3

Todos os títulos H4

Rubrica 4

Todos os títulos H5
-- Rubrica 5
Todos os títulos H6
-- Rubrica 6
Classes de título
Classes de título quando o estilo tipográfico não corresponde à etiqueta HTML predefinida.
estilo do cabeçalho-h1

64px | Estilo do cabeçalho-h1

estilo do cabeçalho-h2

48px | Estilo de cabeçalho-h2

estilo do cabeçalho-h3

36px | Estilo do cabeçalho-h3

estilo de cabeçalho-h4

32px | Estilo de cabeçalho-h4

estilo do cabeçalho-h5

24px | Estilo de cabeçalho-h5

estilo de cabeçalho-h6

| Estilo de cabeçalho-h6

Outras etiquetas HTML
As etiquetas HTML definem estilos de texto predefinidos.
Todos os parágrafos

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Todas as ligações
Todas as ligações
Todas as citações de blocos
Citação de bloco
Todas as listas não ordenadas

  • Sem lista de tópicos

  • Sem lista de tópicos

Todas as listas não ordenadas

  • Sem lista de tópicos

  • Sem lista de tópicos

Todas as listas ordenadas

  1. Sem lista de tópicos

  2. Sem lista de tópicos

  3. Sem lista de tópicos

Tamanhos de texto
Classes de tamanhos de texto quando o tamanho da tipografia não corresponde à etiqueta HTML predefinida.
tamanho do texto grande

-- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

tamanho do texto-médio

20px | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

tamanho do texto - regular

16px | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

tamanho do texto pequeno

14px | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

tamanho de texto pequeno

-- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

tamanho do texto-extra-pequeno

-- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Pesos do texto
Classes de peso do texto quando o peso da tipografia não corresponde à etiqueta HTML predefinida.
text-weight-xbold
text-weight-xbold (800)
peso do texto em negrito
peso do texto em negrito (700)
peso do texto semibold
peso do texto semibold (600)
peso médio do texto
peso do texto-médio (500)
peso normal do texto
peso normal do texto (400)
peso do texto leve
peso do texto leve (300)
Estilos de texto
Classes de estilo de texto quando o estilo tipográfico não corresponde à etiqueta HTML predefinida.
estilo de texto - itálico
estilo de texto - itálico
estilo de texto riscado
estilo de texto riscado
estilo do texto - letras maiúsculas
estilo do texto - letras maiúsculas
text-style-nowrap
text-style-nowrap
texto-estilo-citação
texto-estilo-citação
ligação de estilo de texto
ligação de estilo de texto
estilo de texto de 2 linhas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
estilo de texto-3 linhas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
estilo de texto silenciado
estilo de texto silenciado
Alinhamento do texto
Classes de alinhamento do texto quando o alinhamento da tipografia não corresponde à etiqueta HTML predefinida.
alinhamento do texto à esquerda
alinhamento do texto à esquerda
alinhamento do texto ao centro
alinhamento do texto ao centro
alinhamento do texto à direita
alinhamento do texto à direita
Texto rico
texto-rico-texto

Rubrica 1

Rubrica 2

Rubrica 3

Rubrica 4

Rubrica 5
Rubrica 6
Esta é uma citação em bloco

O elemento rich text permite-lhe criar e formatar títulos, parágrafos, citações em bloco, imagens e vídeo num único local, em vez de ter de os adicionar e formatar individualmente. Basta fazer duplo clique e criar facilmente conteúdos.

Esta é uma ligação dentro de um rich text

  • Item da lista
  • Item da lista
  • Item da lista
  1. Item da lista
  2. Item da lista
  3. Item da lista
A legenda está aqui
Cores
Paleta de cores
é cor-de-rosa
é branco
é-cinzento
Adicionar paletas de cores pré-fabricadas
Obtenha acesso a paletas de cores pré-fabricadas e cole-as abaixo.
Ver paletas de cores
Clique e cole a paleta de cores
Cor de fundo
Gerir cores de fundo recorrentes.
cor de fundo cor-de-rosa
‍ ‍
cor de fundo castanho-escuro
cor de fundo castanho-claro
‍
cor de fundo castanha
Adicionar cores de fundo pré-fabricadas
Obtenha acesso a paletas de cores pré-fabricadas e cole-as abaixo.
Ver cores de fundo
Clique e cole a paleta de cores
Cor do texto
Gerir cores de texto recorrentes.
cor do texto - branco
cor do texto - branco
cor do texto-branco-80
cor do texto-branco-80
cor do texto-branco50
cor do texto-branco-50
cor do texto-preto60
cor do texto-preto60
cor do texto-preto50
cor do texto-preto50
cor do texto - preto20
cor do texto - preto20
cor do texto - castanho
cor do texto - castanho
Adicionar cores de texto pré-fabricadas
Obtenha acesso a cores de texto pré-fabricadas e cole-as abaixo.
Ver cores do texto
Clique e cole a paleta de cores
Efeitos
Sombras de caixa
‍As sombraspermitem-lhe adicionar profundidade e realismo aos desenhos, posicionando elementos num eixo z.
Quer aprender a utilizar as classes de sombra da forma que o Cliente dá prioridade?
Assistir ao tutorial
sombra-xxsmall
shadow-xsmall
sombra-pequena
sombra-média
sombra-grande
shadow-xlarge
shadow-xxlarge
Animações
slideIn-1
De: Fundo
Atraso: 0
slideIn-2
De: Fundo
Atraso: 200
slideIn-3
De: Fundo
Atraso: 400
slideIn-4
De: Fundo
Atraso: 600
slideIn-5
slideIn-6
slideIn-7
Elementos da IU
Botões
botão
Botão
botão
é pequeno
--Botão
botão
é-secundário
Botão
botão
é-secundário
é pequeno
--Botão
botão
é-link
Botão
Para utilizar num fundo escuro, basta utilizar a classe de suplemento is-alternate
botão
é alternativo
Botão
botão
é alternativo
é pequeno
--Botão
botão
é-secundário
é alternativo
-- Botão
botão
é-secundário
é pequeno
é alternativo
--Botão
botão
é-link
é alternativo
--Botão
Botões com ícones
botão
ícone-is
Botão
botão
é pequeno
ícone-is
Botão
botão
é-secundário
ícone-is
Botão
Botão
botão
é-secundário
é pequeno
ícone-is
Botão
botão
é-link
ícone-is
Botão
Elementos do formulário
etiqueta de campo
formulário-entrada
formulário-entrada
is-text-area
formulário-entrada
is-select-input
formulário-caixa de verificação
formulário-rádio
botão
Obrigado! A sua candidatura foi recebida!
Oops! Algo correu mal ao submeter o formulário.
Ícones (Imagem)

icon-height-xxsmall

icon-height-xsmall

icon-height-small

icon-height-medium

icon-height-large

icon-height-xlarge

icon-height-custom1

icon-1x1-xxsmall

icon-1x1-xsmall

ícone-1x1-pequeno

icon-1x1-medio

ícone-1x1-grande

icon-1x1-xlarge

ícone-1x1-personalizado1

Ícones (HTML Embed)
Os ícones HTML embed permitem-lhe controlar a cor do ícone ao passar o rato.

ícone-embed-xxsmall

icon-embed-xsmall

ícone-embutido-pequeno

ícone-embutido-médio

ícone-embutido-grande

icon-embed-xlarge

ícone-embutido-personalizado1

Classes de estrutura
Estrutura central definida e flexível que pode ser utilizada em todas ou na maioria das páginas.
invólucro de página
invólucro principal
contentor-pequeno
contentor-médio
contentor-grande
preenchimento-global
Preenchimento da secção pequena
secção de preenchimento-média
secção de preenchimento grande
grupo de botões
Larguras máximas
Utilize a propriedade CSS max-width para conter o conteúdo interior com uma largura máxima.
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait
max-width-xxlarge
max-width-xlarge
max-width-large
largura máxima-média
max-width-small
max-width-xsmall
max-width-xxsmall
Preenchimentos
Classes de direção
enchimento-inferior
acolchoamento superior
preenchimento-vertical
acolchoado-horizontal
preenchimento à esquerda
enchimento-direito
Classes de tamanho
enchimento-0
acolchoado-pequeno
preenchimento-xxsmall
enchimento-xpequeno
enchimento-pequeno
acolchoamento-médio
almofadado-grande
enchimento-xlarge
enchimento-xxlarge
enchimento-grande
acolchoamento-grande
preenchimento-xxhuge
enchimento-personalizado1
enchimento-personalizado2
enchimento-personalizado3
Margens
Classes de direção
margem inferior
margem superior
margem-vertical
margem-horizontal
margem esquerda
margem-direita
Classes de tamanho
margem-0
margem-pequena
margem-xxsmall
margem-xpequena
margem-pequena
margem-média
margem-grande
margin-xlarge
margem-xxlarga
margem-grande
margin-xhuge
margem-xxhuge
margem-personalizada1
margem-personalizada2
margem-personalizada3
Espaçadores
Sistema de espaçadores unificado para o projeto.
espaçador-pequeno
espaçador-xxsmall
espaçador-xpequeno
espaçador-pequeno
espaçador-médio
espaçador-grande
espaçador-xlarge
espaçador-xxlarge
espaçador-grande
espaçador-xhuge
espaçador-xxhuge
Classes de utilidade
Classes utilitárias úteis que gostamos de utilizar na maioria dos nossos projectos para construir mais rapidamente.
esconder
Este elemento está oculto
ocultar o tablet
esconder-mobile-portrait
esconder-paisagem-móvel
visível em excesso
oculto por excesso
transbordamento-auto
rolagem de transbordamento
eventos de ponteiro
eventos de ponteiro desligados
camada
div-quadrado
espaçamento-limpo
alinhamento-centro
z-index-1
z-index-2
display-inlineflex
margin-top-auto
Manchetes
Classes utilitárias úteis que gostamos de utilizar na maioria dos nossos projectos para construir mais rapidamente.
centro + grande

O nosso objetivo

Cuidamos de si, dos seus viajantes e da sua empresa.

Na Intermundial, há 30 anos que somos líderes em soluções de viagem, acompanhando-o em todas as fases do seu negócio e da viagem dos seus viajantes, para que possa desfrutar de uma viagem sem preocupações. Estamos ao seu lado, assegurando que cada passo e cada seguro fazem a diferença, garantindo a proteção e satisfação dos seus clientes, bem como o crescimento do seu negócio. Assegurando-lhe uma experiência única com a confiança de que juntos superaremos todas as expectativas.

esquerda + grande

Para todos os sectores de atividade

Soluções personalizadas para a sua empresa

centro + pequeno

Simplifique a sua administração

Only Safer possui funcionalidades avançadas que permitem às grandes empresas gerir todas as suas operações de seguros de uma forma escalável.

Serviço de excelência para agentes e viajantes

No nosso compromisso com a qualidade, e sempre em colaboração com a Servisegur, garantimos que as nossas equipas darão a melhor resposta em cada situação ou incidente.

Assistência médica
Gestão de sinistros
Atenção às agências
Serviço profissional: Servisuccess

Faça crescer a sua empresa com um seguro de viagem

Otimizar as suas vendas

A nossa equipa de especialistas em produtos aconselhá-lo-á sobre todas as dúvidas, questões ou procedimentos que possa ter em relação aos seguros, para que possa oferecer a alternativa que melhor se adapta às necessidades do seu cliente.

Fidelizar os clientes

Ofereça aos seus clientes o melhor serviço e garanta que eles desfrutam da melhor experiência de viagem, independentemente dos problemas que enfrentam.
Serviços ligados ao seguro de viagem

Gerimos cada caso do início ao fim para prestar um serviço de excelência.

Tratamento exaustivo dos sinistros

  • Equipa de tratamento interna, especialista em serviços.
  • Tempos de resolução mais curtos.
  • Um único agente para cada caso, do início ao fim.
  • Gestor, segurado, agente e seguradora em contacto.

+26k reclamações

SLA 2 contactos

Assistência médica internacional

  • Especialistas na coordenação e gestão de incidentes de viagem.
  • Apoio médico interno 24h a partir da nossa sede em Madrid.
  • Gestão direta da assistência.
  • Telemedicina: pedido imediato, consulta por vídeo e prescrição.

+16k assistências

Atenção às empresas e aos viajantes

  • Aconselhamento e assistência na contratação.
  • Contacto direto multicanal com as empresas: telefone, chat expresso e mensagens directas.
  • Apoio técnico antes, durante e após a viagem.

+25k chamadas