Guia de estilo

Classes de estrutura

Estrutura central definida e flexível que podemos usar em todas ou na maioria das páginas.

invólucro de página

embalagem principal

contêiner pequeno

contêiner médio

recipiente grande

preenchimento global

seção de acolchoamento pequena

seção de acolchoamento média

seção de acolchoamento grande

seção de preenchimento - xlarge

grupo de botões

Tags de cabeçalho HTML

As tags HTML definem estilos de título padrão.

O texto de amostra ajuda você a entender como o texto real pode parecer. O texto de amostra está sendo usado como espaço reservado.

O texto de amostra ajuda você a entender a aparência real do texto em seu site. O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente.

O texto de amostra está sendo usado como espaço reservado. O texto de amostra ajuda você a entender como o texto real pode parecer. O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente.

O texto de amostra está sendo usado como espaço reservado. O texto de amostra ajuda você a entender como o texto real pode parecer. O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente. O texto de amostra ajuda você a entender como o texto real pode parecer.

O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente. O texto de amostra ajuda você a entender como o texto real pode parecer. O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente. O texto de amostra ajuda você a entender como o texto real pode parecer.

Outras tags HTML

As tags HTML definem estilos de texto padrão.

Todos os parágrafos

Todos os links

Todas as citações

O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente. O texto de amostra ajuda você a entender a aparência real do texto em seu site.

Todas as listas ordenadas

O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente.
O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente.
O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente.

Todas as listas não ordenadas

O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente.
O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente.
O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente.

Estilos de título

Classes de cabeçalho quando o estilo de tipografia não corresponde à tag HTML padrão.

estilo de cabeçalho-h1_hero

Título do H1 Hero

estilo de cabeçalho-h2_hero

Título do H2 Hero

estilo de cabeçalho-h1

Título H1

estilo de cabeçalho-h2

Título H2

estilo de cabeçalho-h3

Título H3

estilo de cabeçalho-h4

Título H4

estilo de cabeçalho-h5

Título H5

estilo de cabeçalho-h6

Título H6

Classes de texto

Classes de texto quando o estilo de tipografia não corresponde à tag HTML padrão.

Tamanhos de texto

tamanho do texto grande

O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente.

tamanho de texto médio

O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente em seu site.

tamanho de texto normal

O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente. O texto de amostra ajuda você a entender a aparência real do texto em seu site.

tamanho do texto pequeno

O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente em seu site. O texto de amostra ajuda você a entender a aparência real do texto em seu site.

tamanho do texto minúsculo

Estilos de texto

estilos de texto s1

Legenda S1

estilos de texto s2

Legenda S2

estilos de texto s3

Legenda S3

estilos de texto-s4

Legenda S4

estilo de texto-l1

etiqueta l1

estilo de texto-l2

etiqueta l1

estilo de texto-l3

etiqueta l1

estilo de texto-l4

etiqueta l1

Estilos de texto

tachado em estilo de texto

estilo de texto em itálico

estilo de texto silenciado

estilo de texto - tudo em maiúsculas

estilo de texto - agora rap

link de estilo de texto

citação em estilo de texto

O texto de amostra está sendo usado como espaço reservado.

estilo de texto - 2 linhas

estilo de texto - 3 linhas

O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente. O texto de amostra ajuda você a entender a aparência real do texto em seu site. O texto de amostra está sendo usado como espaço reservado para texto real. O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente. O texto de amostra ajuda você a entender a aparência real do texto em seu site. O texto de amostra está sendo usado como espaço reservado para texto real.

Pesos de texto

text-weight-xbold

peso do texto em negrito

semibold de peso de texto

peso de texto médio

peso de texto normal

peso-de-texto-luz

Alinhamentos de texto

text-align-left

centro de alinhamento de texto

text-align-right

Botões

Sistema de classes combinadas de botões.

botão

Entre em contato conosco

botão

é pequeno

Entre em contato conosco

botão

é grande

Entre em contato conosco

botão

é secundário

Texto do botão

botão

é texto

Button Text

botão

é um ícone de texto

Button Text

botão

é o ícone

Texto do botão

Rótulos

etiqueta

Próximos lançamentos

Cores

Gerencie as cores recorrentes do texto e do plano de fundo.

Terciário

#17161C

#23212C

#000000

Primário

#FEF5D3

#FFE182

#FFCC29

#F1BF20

#C99900

Secundário

#F2E8FF

#AF77FF

#7A1DFF

#6012D0

#5206BF

Tema básico/claro

#F8F7FC

#F3F2F7

#E4E1ED

#B2AEBD

#888596

Cores do texto

cor do texto-preto

cor do texto-cinza

cor do texto-branco

Cores de fundo

cor de fundo-preto

cor de fundo-cinza

cor de fundo branco

cor de fundo-preto

cor de fundo-cinza

cor de fundo branco

Larguras máximas

Use a propriedade CSS max-width para conter conteúdo interno em uma largura máxima.

largura máxima total

tablet de largura máxima

retrato totalmente móvel de largura máxima

paisagem totalmente móvel de largura máxima

largura máxima-xx-grande

largura máxima x grande

largura máxima grande

largura-máxima média

largura máxima - pequena

largura máxa-xx-pequena

Acolchoamentos

Sistema de espaçamento utilitário - classes de preenchimento. [direção do preenchimento] + [tamanho do preenchimento].

Aulas de direção

fundo acolchoado

tampo acolchoado

acolchoamento vertical

acolchoamento horizontal

acolchoando para a esquerda

preenchimento direito

Classes de tamanho

preenchimento-0

acolchoamento minúsculo

acolchoamento - xxsmall

acolchoamento - pequeno

acolchoamento pequeno

meio de acolchoamento

acolchoamento - grande

padding-xlarge

acolchoamento - xxlarge

acolchoamento enorme

padding-xhuge

preenchimento - xxhuge

acolchoamento personalizado 1

acolchoamento personalizado 2

acolchoamento personalizado 3

Margens

Sistema de espaçamento utilitário - classes de preenchimento. [direção da margem] + [tamanho da margem].

Aulas de direção

margem inferior

margem superior

margem vertical

margem horizontal

margem esquerda

margem direita

Classes de tamanho

margem 0

margem minúscula

margem - xx pequena

margem pequena

margem média

margem grande

margin-xlarge

margem x x grande

margem enorme

margin-xhuge

margem - xxhuge

margem customizada1

margem personalizada 2

margem personalizada 3

Ícones

Unifique os tamanhos dos ícones. altura do ícone define a altura dos ícones. ícone-1x1 define a altura e a largura dos ícones.

altura do ícone - pequeno

ícone-altura-média

ícone-altura-grande

ícone - 1x1 - pequeno

icon-1x1-medium

ícone - 1x1 - grande

Sistemas utilitários úteis

Classes utilitárias que gostamos de usar na maioria dos nossos projetos para criar mais rapidamente.

esconder

Este elemento está oculto

ocultar tablet

esconde-mobile-retrato

paisagem móvel de ocultar

visível ao transbordamento

transbordamento escondido

transbordamento automático

rolagem transbordante

eventos ponteiros

camada

quadrado div.

espaçamento limpo

alinhar o centro

índice z-1

índice z-2

reflexo de exibição em linha

Elementos do Webflow

Elementos nativos do Webflow com classes Client-First aplicadas.

form_componente

Exemplo de um componente de formulário usando pastas

Obrigado! Seu envio foi recebido!

Opa! Algo deu errado ao enviar o formulário.

texto rico em texto

Título 1

Título 2

Título 3

Título 4

Título 5

Título 6

Exemplo de texto com um vincular está sendo usado como espaço reservado para texto real que normalmente está presente. O texto de amostra ajuda você a entender a aparência real do texto em seu site. O texto de amostra está sendo usado como espaço reservado para texto real. O texto de amostra está sendo usado como espaço reservado para texto real. O texto de amostra está sendo usado como espaço reservado para texto real.

O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente.
O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente.
O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente.

O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente.
O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente.
O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente.

O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente. O texto de amostra ajuda você a entender a aparência real do texto em seu site. O texto de amostra está sendo usado como espaço reservado para texto real que normalmente está presente.