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.

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.

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.

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 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.

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

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

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.

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

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

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 en cursiva

estilo de texto silenciado

estilo de texto, todo en mayúsculas

text-style-nowrap

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

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 en negrita

peso del texto en semirnegrita

peso del texto medio

peso del texto normal

texto, peso ligero

Alineaciones de texto

alinear texto a la izquierda

centro de alineación de texto

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: gris

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-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 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.

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.

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.