Guia de Estilo

O Client-First é um conjunto de diretrizes e estratégias criado pela Finsweet para ajudar você a construir sites no Webflow.

Classes de Estrutura

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

page-wrapper

main-wrapper

container-small

container-medium

container-large

padding-global

padding-section-small

padding-section-medium

padding-section-large

button-group

Títulos

As tags HTML definem os estilos de título padrão. Use classes de título quando o estilo tipográfico não corresponder à tag HTML padrão.

Título

Outras tags HTML

As tags HTML definem os estilos de texto padrão.

Todos os parágrafos

Este texto serve como espaço reservado para o conteúdo real que normalmente estaria aqui. O texto de exemplo ajuda você a entender como o texto real pode parecer em seu site. Este texto serve como espaço reservado para o conteúdo real.

Todos os links

Todas as citações

Este texto serve como espaço reservado para o conteúdo real que normalmente estaria aqui. O texto de exemplo ajuda você a entender como o texto real pode parecer em seu site.

Todas as listas ordenadas

Este texto serve como espaço reservado para o conteúdo real que normalmente estaria aqui.
Este texto serve como espaço reservado para o conteúdo real que normalmente estaria aqui.
Este texto serve como espaço reservado para o conteúdo real que normalmente estaria aqui.

Todas as listas não ordenadas

Este texto serve como espaço reservado para o conteúdo real que normalmente estaria aqui.
Este texto serve como espaço reservado para o conteúdo real que normalmente estaria aqui.
Este texto de exemplo está sendo usado como um espaço reservado para o texto real que normalmente estaria presente.

Classes de Texto

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

Tamanhos de Texto

tamanho-texto-muito-grande

Este texto de exemplo está sendo usado como um espaço reservado para o texto real que normalmente estaria presente.

tamanho-texto-grande

Este texto de exemplo está sendo usado como um espaço reservado para o texto real que normalmente estaria presente.

tamanho-texto-medio

Este texto de exemplo está sendo usado como um espaço reservado para o texto real que normalmente estaria presente.

tamanho-texto-regular

Este texto de exemplo está sendo usado como um espaço reservado para o texto real que normalmente estaria presente.

tamanho-texto-pequeno

Este texto de exemplo está sendo usado como um espaço reservado para o texto real que normalmente estaria presente.

tamanho-texto-muito-pequeno

Este texto de exemplo está sendo usado como um espaço reservado para o texto real que normalmente estaria presente.

Estilos de Texto

estilo-texto-tachado

estilo-texto-italico

estilo-texto-suave

estilo-texto-caixa-alta

text-style-nowrap

text-style-link

text-style-wrap-balance

O texto de exemplo é usado como um espaço reservado para o texto real que normalmente estaria presente.

text-style-wrap-pretty

O texto de exemplo é usado como um espaço reservado para o texto real que normalmente estaria presente.

text-style-quote

O texto de exemplo é usado como um espaço reservado.

text-style-2lines

Este estilo CSS não é compatível com Rich Texts no iOS.

text-style-3lines

Este estilo CSS não é compatível com Rich Texts no iOS.

O texto de exemplo é usado como um espaço reservado para o texto real que normalmente estaria presente. O texto de exemplo ajuda você a entender como o texto real pode parecer em seu site. O texto de exemplo é usado como um espaço reservado para o texto real. O texto de exemplo é usado como um espaço reservado para o texto real que normalmente estaria presente. O texto de exemplo ajuda você a entender como o texto real pode parecer em seu site. O texto de exemplo é usado como um espaço reservado para o texto real.

Pesos de fonte

text-weight-xbold

text-weight-bold

text-weight-semibold

text-weight-medium

text-weight-normal

text-weight-light

Alinhamentos de texto

text-align-left

text-align-center

text-align-right

Botões

Sistema de classes combinadas para botões.

button

is-primary

Texto do botão

button

is-primary

is-icon

Texto do botão

button

is-secondary

Texto do botão

button

is-secondary

is-icon

Texto do botão

Cores

Gerencie cores de texto e de fundo recorrentes.

Cores de Texto

text-color-black

text-color-white

text-color-01

Cores de Fundo

background-color-black

background-color-white

background-color-01

Larguras máximas

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

max-width-full

max-width-full-tablet

max-width-full-mobile-portrait

max-width-full-mobile-landscape

max-width-xxlarge

max-width-xlarge

max-width-large

max-width-medium

max-width-small

max-width-xsmall

max-width-xxsmall

Espaçadores

Sistema de espaçamento unificado para o projeto.

Espaçador

Ícones

Padronize os tamanhos dos ícones. icon-height define a altura dos ícones. icon-1x1 define tanto a altura quanto a largura dos ícones.

icon-height-small

icon-height-medium

icon-height-large

icon-1x1-small

icon-1x1-medium

icon-1x1-large

Ícones de Símbolos

Sistemas utilitários úteis

Classes utilitárias que gostamos de usar na maioria dos nossos projetos para construir mais rápido.

hide

Este elemento está oculto

hide-tablet

hide-mobile-portrait

hide-mobile-landscape

show-tablet

show-mobile-landscape

show-mobile-portrait

overflow-visible

overflow-hidden

overflow-auto

overflow-scroll

pointer-events-auto

pointer-events-none

layer

spacing-clean

align-center

z-index-1

z-index-2

display-inlineflex

inherit-color

aspect-ratio-square

aspect-ratio-portrait

aspect-ratio-landscape

aspect-ratio-widescreen

Elementos Webflow

Elementos nativos do Webflow com classes Client-First aplicadas.

form_component

Exemplo de um componente de formulário usando Pastas

Obrigado! Seu envio foi recebido!

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

texto-rich-text

Título 1

Título 2

Título 3

Título 4

Título 5

Título 6

Este texto de exemplo com um link está sendo usado como um espaço reservado para o texto real que normalmente estaria aqui. O texto de exemplo ajuda você a entender como o texto real pode parecer em seu site. Este texto de exemplo está sendo usado como um espaço reservado para o texto real. Este texto de exemplo está sendo usado como um espaço reservado para o texto real. Este texto de exemplo está sendo usado como um espaço reservado para o texto real.

Este texto de exemplo está sendo usado como um espaço reservado para o texto real que normalmente estaria aqui.
Este texto de exemplo está sendo usado como um espaço reservado para o texto real que normalmente estaria aqui.
Este texto de exemplo está sendo usado como um espaço reservado para o texto real que normalmente estaria aqui.

Este texto de exemplo está sendo usado como um espaço reservado para o texto real que normalmente estaria aqui.
Este texto de exemplo está sendo usado como um espaço reservado para o texto real que normalmente estaria aqui.
Este texto de exemplo está sendo usado como um espaço reservado para o texto real que normalmente estaria aqui.

Este texto de exemplo está sendo usado como um espaço reservado para o texto real que normalmente estaria aqui. O texto de exemplo ajuda você a entender como o texto real pode parecer em seu site. Este texto de exemplo está sendo usado como um espaço reservado para o texto real que normalmente estaria aqui.

Componentes Úteis

Trechos de símbolos para adicionar componentes mais rapidamente

Símbolos

Nova Seção

Rich Text

Componente de texto rico

Parágrafo

Este texto de exemplo está sendo usado como um espaço reservado para o texto real que normalmente estaria presente.

Bloco de texto

Este é um texto dentro de um bloco div.

Grupo de botões

Campo de formulário

Imagem global

Vídeo global

Envoltório de ícone

Exemplo de ícone