Tipografia
Tags de títulos HTML
As tags HTML definem os estilos de título padrão.
Todos os cabeçalhos H1

Título 1

Todos os títulos H2

Título 2

Todos os títulos H3

Título 3

Todos os títulos H4

Título 4

Todos os títulos H5
Título 5
Todos os títulos H6
Título 6
Classes de cabeçalho
Classes de cabeçalho quando o estilo da tipografia não corresponde à tag HTML padrão.
estilo do cabeçalho-h1

Estilo de cabeçalho-h1

estilo de título-h2

Estilo de cabeçalho-h2

estilo de título-h3

Estilo de cabeçalho-h3

estilo de cabeçalho-h4

Estilo de cabeçalho-h4

estilo de cabeçalho-h5

Estilo de cabeçalho-h5

estilo de cabeçalho-h6

Estilo de cabeçalho-h6

Outras tags HTML
As tags HTML definem estilos de texto padrão.
Todos os parágrafos

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspender 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. Você pode se sentir bem ao ver o que está acontecendo.

Todos os links
Todos os links
Todas as citações de blocos
Citação de bloco
Todas as listas não ordenadas
  • Sem lista de itens

  • Sem lista de itens

Todas as listas não ordenadas
  • Sem lista de itens

  • Sem lista de itens

Todas as listas ordenadas
  1. Sem lista de itens

  2. Sem lista de itens

  3. Sem lista de itens

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspender 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. Você pode se sentir bem ao ver o que está acontecendo.

tamanho do texto - regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspender 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. Você pode se sentir bem ao ver o que está acontecendo.

tamanho do texto pequeno

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspender 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. Você pode se sentir bem ao ver o que está acontecendo.

legenda

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspender 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. Você pode se sentir bem ao ver o que está acontecendo.

Pesos de texto
Classes de peso de texto quando o peso da tipografia não corresponde à tag HTML padrão.
text-weight-xbold
text-weight-xbold (800)
peso do texto em negrito
text-weight-bold (700)
text-weight-semibold
peso do texto semibold (600)
peso médio do texto
peso do texto médio (500)
peso normal do texto
peso do texto normal (400)
Peso do texto leve
peso do texto leve (300)
Estilos de texto
Classes de estilo de texto quando o estilo de tipografia não corresponde à tag HTML padrão.
estilo de texto - itálico
estilo de texto - itálico
estilo de texto riscado
estilo de texto riscado
estilo de texto-alcaps
estilo de texto-alcaps
text-style-nowrap
text-style-nowrap
estilo de texto-citação
estilo de texto-citação
link de estilo de texto
estilo de texto de 2 linhas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspender 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. Você pode se sentir bem ao ver o que está acontecendo.
estilo de texto - 3 linhas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspender 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. Você pode se sentir mais confortável com o que está acontecendo. 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. Você pode se sentir bem ao ver o que está acontecendo.
estilo de texto silenciado
estilo de texto silenciado
Alinhamento de texto
Classes de alinhamento de texto quando o alinhamento da tipografia não corresponde à tag HTML padrão.
Alinhamento de texto à esquerda
Alinhamento de texto à esquerda
alinhamento de texto no centro
alinhamento de texto no centro
alinhamento de texto à direita
alinhamento de texto à direita
Rich Text
texto-rico-texto

Título 1

Título 2

Título 3

Título 4

Título 5
Título 6
Esta é uma citação em bloco

O elemento rich text permite que você crie e formate títulos, parágrafos, citações em bloco, imagens e vídeos em um só lugar, em vez de ter que adicioná-los e formatá-los individualmente. Basta você clicar duas vezes e criar conteúdo com facilidade.

Este é um link 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
texto_rico dos setores

O que é um elemento Rich Text?

O elemento rich text permite que você crie e formate títulos, parágrafos, citações em bloco, imagens e vídeos em um só lugar, em vez de ter que adicioná-los e formatá-los individualmente. Basta você clicar duas vezes e criar conteúdo com facilidade.

Edição de conteúdo estático e dinâmico

Um elemento rich text pode ser usado com conteúdo estático ou dinâmico. Para conteúdo estático, basta soltá-lo em qualquer página e começar a editar. Para conteúdo dinâmico, adicione um campo de rich text a qualquer coleção e, em seguida, conecte um elemento de rich text a esse campo no painel de configurações. Pronto!

Como personalizar a formatação de cada rich text

Títulos, parágrafos, citações de bloco, figuras, imagens e legendas de figuras podem ser estilizados depois que uma classe é adicionada ao elemento rich text usando o sistema de seletores aninhados "When inside of".

texto_rico_de_pagamentos

O que é um elemento Rich Text?

O elemento rich text permite que você crie e formate títulos, parágrafos, citações em bloco, imagens e vídeos em um só lugar, em vez de ter que adicioná-los e formatá-los individualmente. Basta você clicar duas vezes e criar conteúdo com facilidade.

Edição de conteúdo estático e dinâmico

texto

texto

Edição de conteúdo estático e dinâmico

Um elemento rich text pode ser usado com conteúdo estático ou dinâmico. Para conteúdo estático, basta soltá-lo em qualquer página e começar a editar. Para conteúdo dinâmico, adicione um campo de rich text a qualquer coleção e, em seguida, conecte um elemento de rich text a esse campo no painel de configurações. Pronto!

Como personalizar a formatação de cada rich text

Títulos, parágrafos, citações de bloco, figuras, imagens e legendas de figuras podem ser estilizados depois que uma classe é adicionada ao elemento rich text usando o sistema de seletores aninhados "When inside of".

Cores
Cor de fundo
bg-color-white
#fff
bg-color-black
#000
bg-color-1
#889e77
bg-color-2
#9e7777
bg-color-3
#334350
bg-color-4
#f4f4f7
bg-color-5
#ebedee
bg-color-6
#E2E7EE
bg-color-7
#f1f2f4
Cor do texto
Gerencie cores de texto recorrentes.
cor do texto-1
Este é um texto dentro de um bloco de div.
cor do texto-2
Este é um texto dentro de um bloco de div.
cor do texto-3
Este é um texto dentro de um bloco de div.
cor do texto-4
Este é um texto dentro de um bloco de div.
Elementos da interface do usuário
Botões
botão
é secundário
link-texto
splide__arrows
Posição esquerda das setas do controle deslizante
splide__arrows
posição direita das setas do controle deslizante
splide__arrows
posição superior esquerda do controle deslizante - setas
splide__arrows
bottom-left-position-slider-arrows
seta de divisão
seta da barra deslizante circular
splide__arrow--prev
circle-slider-arrow-prev
splide__arrow--next
círculo-slider-seta seguinte
splide__pagination__page
círculo-ponto
splide__pagination__page
círculo-ponto
está ativo
splide__pagination__page
círculo-ponto
splide__pagination__page
círculo-ponto
está ativo
seta de divisão
controle deslizante circular-seta-escura
splide__arrow--prev
circle-slider-arrow-prev-dark
splide__arrow--next
circle-slider-arrow-next-dark
splide__paginação
paginação do controle deslizante direito
Elementos do formulário
rótulo de campo
entrada de formulário
entrada de formulário
is-text-area
entrada de formulário
is-select-input
caixa de seleção de formulário
rádio-forma
botão
Obrigado! Recebemos sua inscrição!
Ops! Algo deu errado ao enviar seu formulário.
Ícones (Imagem)

icon-height-xxsmall

icon-height-xsmall

ícone de altura pequena

ícone de altura média

ícone de altura grande

ícone de altura grande

ícone de altura personalizada1

icon-1x1-xxsmall

icon-1x1-xsmall

ícone-1x1-pequeno

icon-1x1-medium

ícone-1x1-grande

icon-1x1-xlarge

ícone-1x1-custom1

Ícones (HTML Embed)
Os ícones HTML embed permitem que você controle a cor do ícone ao passar o mouse.

ícone-embed-xxsmall

ícone-embed-xsmall

ícone-embed-small

ícone-embed-medium

ícone-embed-large

ícone-embed-xlarge

ícone-embed-custom1

Classes de estrutura
Estrutura central definida e flexível que você pode usar em todas ou na maioria das páginas.
Envolvente de página
invólucro principal
contêiner pequeno
contêiner-médio
contêiner grande
preenchimento global
Preenchimento da seção pequena
seção de preenchimento-médio
seção de preenchimento - grande
grupo de botões
Larguras máximas
Use a propriedade CSS max-width para conter o conteúdo interno em uma largura máxima.
largura máxima total
largura máxima do tablet completo
largura máxima de retrato completo
largura máxima de paisagem completa
largura máxima-xxlarge
largura máxima-xlarge
largura máxima grande
largura máxima-média
largura máxima-pequena
largura máxima-xsmall
largura máxima-xxsmall
Preenchimentos
Aulas de direção
preenchimento-inferior
acolchoamento superior
Preenchimento vertical
preenchimento horizontal
preenchimento à esquerda
Preenchimento à direita
Classes de tamanho
preenchimento-0
acolchoado-pequeno
preenchimento-xxsmall
preenchimento-xsmall
preenchimento-pequeno
acolchoamento-médio
acolchoamento grande
acolchoamento-xlarge
acolchoamento-xxlarge
preenchimento grande
preenchimento-xhuge
preenchimento-xxhuge
preenchimento personalizado1
preenchimento personalizado2
preenchimento-personalizado3
Margens
Aulas de direção
margem inferior
margem superior
margem-vertical
margem horizontal
margem esquerda
margem-direita
Classes de tamanho
margem-0
margem-pequena
margem-xxsmall
margin-xsmall
margem-pequena
margem-média
margem-grande
margem-xlarge
margem-xxlarge
margem enorme
margin-xhuge
margem-xxhuge
margin-custom1
margin-custom2
margin-custom3
Classes de utilidade
Classes de utilitários úteis que gostamos de usar na maioria dos nossos projetos para criar mais rapidamente.
esconder
Esse elemento está oculto
ocultar tablet
ocultar retrato móvel
ocultar paisagem móvel
visível para transbordamento
oculto por excesso
transbordamento automático
rolagem de estouro
eventos de ponteiro
eventos de ponteiro desligados
camada
div-square
espaçamento-limpo
alinhar ao centro
z-index-1
z-index-2
display-inlineflex
margin-top-auto
de baixo para cima