Guía de estilo

Clases de estructura

Estructura central definida y flexible que podemos usar en todas o en la mayoría de las páginas.

envoltorio de página
envoltorio principal
contenedor pequeño
contenedor-medio
contenedor grande
padding-global
sección de acolchado pequeña
sección de acolchado mediana
sección de acolchado grande
sección de acolchado xlarge
grupo de botones

Etiquetas de encabezado HTML

Las etiquetas HTML definen los estilos de encabezado predeterminados.

H1

El texto de ejemplo le ayuda a comprender el aspecto que puede tener un texto real. El texto de ejemplo se utiliza como marcador de posición.

H2

El texto de ejemplo le ayuda a comprender el aspecto que puede tener el texto real en su sitio web. El texto de muestra se utiliza como marcador de posición para el texto real que normalmente está presente.

H3

El texto de ejemplo le ayuda a comprender el aspecto que puede tener el texto real en su sitio web. El texto de muestra se utiliza como marcador de posición para el texto real que normalmente está presente.

H4

El texto de ejemplo se utiliza como marcador de posición. El texto de ejemplo ayuda a comprender el aspecto que puede tener un texto real. El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente.

H5
El texto de ejemplo se utiliza como marcador de posición. El texto de ejemplo ayuda a comprender el aspecto que puede tener un texto real. El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente. El texto de ejemplo ayuda a comprender el aspecto que puede tener un texto real.
H6
El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente. El texto de ejemplo ayuda a comprender el aspecto que puede tener un texto real. El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente. El texto de ejemplo ayuda a comprender el aspecto que puede tener un texto real.

Otras etiquetas HTML

Las etiquetas HTML definen los estilos de texto predeterminados.

Todos los párrafos

El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente. El texto de ejemplo le ayuda a comprender el aspecto que puede tener el texto real en su sitio web. El texto de muestra se utiliza como marcador de posición para el texto real.

Todos los enlaces
Todos los enlaces
Todas las cotizaciones
El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente. El texto de ejemplo le ayuda a comprender el aspecto que puede tener el texto real en su sitio web.
Todas las listas ordenadas
  1. El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente.
  2. El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente.
  3. El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente.
Todas las listas desordenadas
  • El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente.
  • El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente.
  • El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente.

Estilos de encabezados

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

estilo de encabezado-h1_hero

Título de H1 Hero

estilo de encabezado-h2_hero

Título de H2 Hero

estilo de encabezado-h1

Título H1

estilo de encabezado-h2

Título H2

estilo de encabezado-h3

Título H3

estilo de encabezado-h4

Título H4

estilo de encabezado-h5

Título H5

estilo de encabezado-h6

Título H6

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 grande

El texto de ejemplo 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 en su sitio web.

tamaño de texto normal

El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente. El texto de ejemplo le ayuda a comprender el aspecto que puede tener el texto real en su sitio web.

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 en su sitio web. El texto de ejemplo te ayuda a entender el aspecto que puede tener el texto real en tu sitio web.

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 en su sitio web. El texto de ejemplo te ayuda a entender el aspecto que puede tener el texto real en tu sitio web.

Estilos de texto

estilo de texto-s1

Subtítulo S1

estilo de texto-s2

Subtítulo S2

estilo de texto-s3

Subtítulo S3

estilo de texto-s4

Subtítulo 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

estilo de texto tachado

estilo de texto tachado

estilo de texto en cursiva

estilo de texto en cursiva

estilo de texto silenciado

estilo de texto silenciado

estilo de texto, todo en mayúsculas

estilo de texto, todo en mayúsculas

text-style-nowrap

text-style-nowrap

enlace de estilo de texto

enlace de estilo de texto

cita de estilo de texto

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

estilo de texto: 2 líneas

El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente. El texto de ejemplo le ayuda a comprender el aspecto que puede tener el texto real en su sitio web. El texto de muestra se utiliza como marcador de posición para texto real (estilo texto de 2 líneas)

estilo de texto: 3 líneas

El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente. El texto de ejemplo le ayuda a comprender el aspecto que puede tener 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 ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente. El texto de ejemplo le ayuda a comprender el aspecto que puede tener el texto real en su sitio web. El texto de muestra se utiliza como marcador de posición para el texto real.

Pesos de texto

peso del texto-xbold
peso del texto-xbold
peso del texto en negrita
peso del texto en negrita
peso del texto en semirnegrita
peso del texto en semirnegrita
peso del texto medio
peso del texto medio
peso del texto normal
peso del texto normal
texto, peso ligero
texto, peso ligero

Alineaciones de texto

alinear texto a la izquierda
alinear texto a la izquierda
centro de alineación de texto
centro de alineación de texto
alinear texto a la derecha
alinear texto a la derecha

Botones

Sistema de clases con combinación de botones.

botón
Póngase en contacto con nosotros
botón
es pequeño
Póngase en contacto con nosotros
botón
es grande
Póngase en contacto con nosotros
botón
es secundario
Texto del botón
botón
es texto
Texto del botón
botón
es un icono de texto
Texto del botón
botón
es un icono
Texto del botón

Etiquetas

etiqueta
Próximos lanzamientos

Colores

Gestiona los colores de texto y fondo recurrentes.

Terciario

#17161C
#23212C
#000000

Primaria

#FEF5D3
#FFE182
#FFCC29
#F1BF20
#C99900

Secundaria

#F2E8FF
#AF77FF
#7A1DFF
#6012D0
#5206BF

Tema básico y ligero

#F8F7FC
#F3F2F7
#E4E1ED
#B2AEBD
#888596

Colores de texto

color del texto: negro
color del texto: negro
color del texto: gris
color del texto: gris
color del texto: blanco
color del texto: blanco

Colores de fondo

color de fondo-negro
color de fondo-gris
color de fondo-blanco
color de fondo-negro
color de fondo-gris
color de fondo-blanco

Anchos máximos

Utilice la propiedad CSS de ancho máximo para contener el contenido interno con un ancho máximo.

ancho máximo-completo
tableta completa de ancho máximo
retrato móvil completo de ancho máximo
paisaje móvil completo de ancho máximo
ancho máximo-XXL
ancho máximo-xlarge
ancho máximo-grande
ancho máximo-medio
ancho máximo-pequeño
ancho máximo-pequeño
ancho máximo-XXL

Acolchados

Sistema de espaciado utilitario: clases de acolchado. [dirección del relleno] + [tamaño del relleno].

Clases de dirección

fondo acolchado
top acolchado
acolchado vertical
acolchado horizontal
acolchado a la izquierda
acolchado a la derecha

Clases de tallas

acolchado-0
acolchado pequeño
padding-xxsmall
acolchado xsmall
acolchado pequeño
acolchado medio
acolchado grande
acolchado xlarge
acolchado XXL
acolchado enorme
acolchado
padding-xxhuge
padding-custom1
padding-custom 2
padding-custom 3

Márgenes

Sistema de espaciado utilitario: clases de acolchado. [dirección del margen] + [tamaño del margen].

Clases de dirección

margen inferior
margen superior
margen vertical
margen-horizontal
margen izquierdo
margen derecho

Clases de tallas

margen-0
margen pequeño
margin-xxsmall
margen pequeño
margen pequeño
margen medio
margen grande
margen x grande
margen XXL
margen enorme
margen x enorme
margin-xxhuge
margen-personalizado1
margin-custom2
margen personalizado 3

Iconos

Unifica los tamaños de los iconos. altura del icono establece la altura de los iconos. icono-1x1 establece la altura y el ancho de los iconos.

icono-altura-pequeña
icono-altura-mediana
icono-altura-grande
icon-1x1-pequeño
icon-1x1-medium
icono, 1 x 1 grande

Sistemas de servicios públicos útiles

Clases de utilidades que nos gusta usar en la mayoría de nuestros proyectos para crear más rápido.

esconder
Este elemento está oculto
ocultar tableta
ocultar-móvil-retrato
ocultar-movil-paisaje
desbordamiento visible
desbordamiento oculto
overflow-auto
pergamino desbordante
puntero-events-on
puntero de eventos desactivados
capa
div-cuadrado
espacio limpio
alinear centro
índice z-1
índice z-2
display-inlineflex

Elementos de flujo web

Elementos nativos de Webflow con clases centradas en el cliente aplicadas.

componente_formulario

Ejemplo de un componente de formulario que utiliza carpetas

¡Gracias! ¡Su presentación ha sido recibida!
¡Uy! Algo salió mal al enviar el formulario.
texto rico en texto

Título 1

Epígrafe 2

Título 3

Título 4

Epígrafe 5
Epígrafe 6

Texto de ejemplo con eslabón se utiliza como marcador de posición para el texto real que normalmente está presente. El texto de ejemplo le ayuda a comprender el aspecto que puede tener 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 ejemplo se utiliza como marcador de posición para el texto real. El texto de ejemplo se utiliza como marcador de posición para el texto real.

  • El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente.
  • El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente.
  • El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente.
  1. El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente.
  2. El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente.
  3. El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente.
El texto de ejemplo se utiliza como marcador de posición para el texto real que normalmente está presente. El texto de ejemplo le ayuda a comprender el aspecto que puede tener el texto real en su sitio web. El texto de muestra se utiliza como marcador de posición para el texto real que normalmente está presente.