lumora

Guía de estilo

Estructura Clases

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

página-envoltura

envoltura manual

contenedor pequeño

contenedor mediano

contenedor grande

contenedor lleno

relleno global

relleno-sección-pequeño

relleno-sección-mediano

relleno-sección-grande

Encabezados

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

Encabezado 1

h1

Título 2

h2

Título 3

h3

Encabezado 4

h4

Encabezado 5

h5

Encabezado 6

h6

Otras etiquetas HTML

Las etiquetas HTML definen los estilos de texto predeterminados.

Todos los párrafos

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

Todos los enlaces

Todas las citas

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

Todas las listas ordenadas

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

Todas las listas sin ordenar

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

Tamaños de texto

texto-xs

Muestra

texto-sm

Muestra

base de texto

Muestra

texto-lg

Muestra

text-xl

Muestra

texto-2xl

Muestra

texto-3xl

Muestra

texto-4xl

Muestra

texto-5xl

Muestra

texto-6xl

Muestra

Estilos de texto

estilo de texto tachado

estilo de texto cursiva

estilo de texto atenuado

estilo-texto-mayúsculas

estilo de texto sin ajuste

estilo-de-texto-enlace

estilo-de-cita

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

Peso del texto

peso del texto ligero

peso del texto normal

peso del texto medio

peso del texto semigraso

peso del texto medio

texto-peso-negrita

peso del texto medio

Alineaciones de texto

alineación de texto a la izquierda

alineación de texto centrada

alineación de texto a la derecha

Botones

Sistema de clases combinadas.

botón

Texto del botón

botón

is-secondary

Texto del botón

botón

is-icon

Texto del botón

Colores

Gestiona los colores recurrentes del texto y del fondo.

color-primario-del-texto

color secundario del texto

color-texto-sutil

color-texto-alternativo

color-texto-amarillo

color-texto-alternativo

color-del-texto-en-primario

color-texto-alternativo

Colores Bg

bg-predeterminado

bg-primario

bg-secundario

bg-sutil

bg-hover

Espaciadores

Sistema espaciador unificado para el proyecto.

espaciador pequeño

espaciador-xxsmall

espaciador-xsmall

espaciador pequeño

espaciador mediano

espaciador ancho

spacer-xlarge

espaciador-xxlarge

espaciador enorme

spacer-xhuge

Iconos

Unificar tamaños de iconos. icon-height establece la altura de los iconos. icon-1x1 establece tanto la altura como la anchura de los iconos.

icon-1x1-pequeño

icon-1x1-mediano

icon-1x1-grande

Imágenes

Utiliza siempre unimg-wrap para contener las dimensiones de la imagen.

img

Sistemas de utilidad útiles

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

ocultar

Este elemento está oculto.

ocultar tableta

ocultar-móvil-paisaje

ocultar-móvil-retrato

overflow-visible

overflow-hidden

overflow-auto

desbordamiento-desplazamiento

puntero-eventos-automático

pointer-events-none

capa

espaciado limpio

alineación centrada

display-inlineflex

color heredado

Elementos Webflow

Elementos nativos de Webflow con clases Client-First aplicadas.

Espaciador

Los espaciadores son útiles cuando necesitas espacio adicional en un diseño, pero no deseas crear un nuevo contenedor o clase para ello.

form_component

Ejemplo de un componente de formulario que utiliza carpetas

¡Gracias! ¡Hemos recibido tu envío!

¡Vaya! Se ha producido un error al enviar el formulario.

texto-texto enriquecido

Encabezado 1

Título 2

Título 3

Encabezado 4

Encabezado 5

Encabezado 6

El texto de ejemplo con un enlace se utiliza como marcador de posición para el texto real que normalmente está presente. El texto de ejemplo le ayuda a comprender cómo se verá el texto real en su sitio web. 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.

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

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

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