global
Variables
Utilidades
ESTILOS PERSONALIZADOS

Guía de estilos

Client-First es un conjunto de pautas y estrategias creadas por Finsweet para ayudarte a construir sitios web en Webflow.

Clases de estructura

Estructura central definida y flexible que podemos utilizar en todas o en la mayoría de las 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

Encabezados

Las etiquetas HTML definen los estilos de encabezado predeterminados. Utiliza clases de encabezado cuando el estilo tipográfico no coincida con la etiqueta HTML predeterminada.

H1

Encabezado

H2

Encabezado

H3

Encabezado

H4

Encabezado

H5
Encabezado
H6
Encabezado

Otras etiquetas HTML

Las etiquetas HTML definen los estilos de texto predeterminados.

Todos los párrafos

Este texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparece aquí. El texto de muestra le ayuda a entender cómo se verá el texto real en su sitio web. Este texto de muestra se utiliza como marcador de posición para el texto real.

Todos los enlaces
Todos los enlaces
Todas las citas
Este texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparece aquí. El texto de muestra le ayuda a entender cómo se verá el texto real en su sitio web.
Todas las listas numeradas
  1. Este texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparece aquí.
  2. Este texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparece aquí.
  3. Este texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparece aquí.
Todas las listas sin viñetas
  • Este texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparece aquí.
  • Este texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparece aquí.
  • El texto de muestra se utiliza como marcador de posición para el texto real que normalmente está presente.

Clases de texto

Clases de texto cuando el estilo de tipografía no coincide con la etiqueta HTML predeterminada.

Tamaños de texto

tamaño-de-texto-muy-grande

El texto de muestra se utiliza como marcador de posición para el texto real que normalmente está presente.

tamaño-de-texto-grande

El texto de muestra se utiliza como marcador de posición para el texto real que normalmente está presente.

tamaño-de-texto-mediano

El texto de muestra se utiliza como marcador de posición para el texto real que normalmente está presente.

tamaño-de-texto-normal

El texto de muestra se utiliza como marcador de posición para el texto real que normalmente está presente.

tamaño-de-texto-pequeño

El texto de muestra se utiliza como marcador de posición para el texto real que normalmente está presente.

tamaño-de-texto-muy-pequeño

El texto de muestra se utiliza como marcador de posición para el texto real que normalmente está presente.

Estilos de texto

estilo-de-texto-tachado

estilo-de-texto-tachado

estilo-de-texto-cursiva

estilo-de-texto-cursiva

estilo-de-texto-atenuado

estilo-de-texto-atenuado

estilo-de-texto-mayúsculas

estilo-de-texto-mayúsculas

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-style-wrap-balance

El texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparece.

text-style-wrap-pretty

El texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparece.

text-style-quote

El texto de muestra se utiliza como marcador de posición.

text-style-2lines
Este estilo CSS no es compatible con textos enriquecidos en iOS.

El texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparece. El texto de muestra le ayuda a entender cómo se verá el texto real en su sitio web. El texto de muestra se utiliza como marcador de posición para el texto real text-style-2lines

text-style-3lines
Este estilo CSS no es compatible con textos enriquecidos en iOS.

El texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparece. El texto de muestra le ayuda a entender cómo se verá el texto real en su sitio web. El texto de muestra se utiliza como marcador de posición para el texto real. El texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparece. El texto de muestra le ayuda a entender cómo se verá el texto real en su sitio web. El texto de muestra se utiliza como marcador de posición para el texto real.

Grosores de texto

text-weight-xbold
text-weight-xbold
text-weight-bold
peso-texto-negrita
peso-texto-seminegrita
peso-texto-seminegrita
peso-texto-medio
peso-texto-medio
peso-texto-normal
peso-texto-normal
peso-texto-ligero
peso-texto-ligero

Alineaciones de texto

alinear-texto-izquierda
alinear-texto-izquierda
alinear-texto-centro
alinear-texto-centro
alinear-texto-derecha
alinear-texto-derecha

Botones

Sistema de clases combinadas para botones.

botón
es-primario
Texto del botón
button
is-primary
is-icon
Texto del botón
button
is-secondary
Texto del botón
button
is-secondary
is-icon
Texto del botón

Colores

Administra los colores de texto y fondo recurrentes.

Colores de texto

text-color-black
text-color-black
text-color-white
text-color-white
text-color-01
text-color-01

Colores de fondo

background-color-black
background-color-white
background-color-01

Anchos máximos

Utiliza la propiedad CSS max-width para limitar el contenido interno a un ancho máximo.

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

Espaciadores

Sistema de espaciado unificado para el proyecto.

Espaciador

Iconos

Unifica los tamaños de los iconos. icon-height establece la altura de los iconos. icon-1x1 establece tanto la altura como el ancho de los iconos.

icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large
Iconos de símbolos

Sistemas de utilidad útiles

Clases de utilidad que solemos usar en la mayoría de nuestros proyectos para trabajar más 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 de Webflow

Elementos nativos de Webflow con clases de Client-First aplicadas.

form_component

Ejemplo de un componente de formulario usando carpetas

¡Gracias! Hemos recibido tu información.
¡Ups! Algo salió mal al enviar el formulario.
texto-enriquecido

Encabezado 1

Encabezado 2

Encabezado 3

Encabezado 4

Encabezado 5
Encabezado 6

Este texto de muestra con un enlace se utiliza como marcador de posición para el texto real que normalmente aparecería aquí. El texto de muestra te ayuda a visualizar cómo se verá el texto real en tu sitio web. Este texto de muestra se utiliza como marcador de posición para el texto real. Este texto de muestra se utiliza como marcador de posición para el texto real. Este texto de muestra se utiliza como marcador de posición para el texto real.

  • Este texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparecería aquí.
  • Este texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparecería aquí.
  • Este texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparecería aquí.
  1. Este texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparecería aquí.
  2. Este texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparecería aquí.
  3. Este texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparecería aquí.
Este texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparecería aquí. El texto de muestra te ayuda a visualizar cómo se verá el texto real en tu sitio web. Este texto de muestra se utiliza como marcador de posición para el texto real que normalmente aparecería aquí.

Componentes útiles

Fragmentos de símbolos para añadir componentes más rápido

Símbolos

Nueva sección
Texto enriquecido

Componente de texto enriquecido

Párrafo

El texto de muestra se utiliza como marcador de posición para el texto real que normalmente está presente.

Bloque de texto
Este es un texto dentro de un bloque div.
Grupo de botones
Campo de formulario
Imagen global
Video global
Contenedor de icono
Ejemplo de icono