Clases de estructura

Anchuras máximas

Rellenos

Márgenes

Distanciadores

Utilidad

Guía de estilo Relume

Client-First V2.1 - Última actualización 09 de enero de 2024

Documentos orientados al cliente

Tipografía

Etiquetas deencabezado HTML
Las etiquetas HTML definen los estilos de encabezado por defecto.

Todos los títulos H1

Rúbrica 1

Todos los títulos H2

Rúbrica 2

Todos los títulos H3

Rúbrica 3

Todas las rúbricas H4

Rúbrica 4

Todas las rúbricas H5

Rúbrica 5

Todas las rúbricas H6

Rúbrica 6

Clasesde encabezado
Clases de encabezado cuando el estilo tipográfico no coincide con la etiqueta HTML por defecto.

estilo-encabezado-h1

Estilo de encabezamiento-h1

estilo-encabezado-h2

Encabezamiento-estilo-h2

estilo-encabezado-h3

Estilo de encabezamiento-h3

estilo-encabezado-h4

Estilo de encabezamiento-h4

estilo-encabezado-h5

Encabezamiento-estilo-h5

estilo-encabezado-h6

Encabezamiento-estilo-h6

estilo-encabezado-preencabezado

Encabezamiento-estilo-h6

Texto Resaltado
Para el Texto que necesita Destacar en una Página de Aterrizaje que no es un Encabezado.

texto-destacado-pequeño

texto resaltado

texto-destacado-medio

texto resaltado

texto-destacado-grande

texto resaltado

texto-destacado-xl

texto

Otras etiquetas HTML
Las etiquetas HTML definen estilos de texto por defecto.

Todos los párrafos

Todos los enlaces

Todas las citas de Block

Cita en bloque

Todas las listas desordenadas

Sin lista
Sin lista

Todas las listas desordenadas

Sin lista
Sin lista

Todas las listas ordenadas

Sin lista
Sin lista
Sin lista

Tamaños de texto
Clases de tamaños de texto cuando el tamaño de la tipografía no coincide con la etiqueta HTML por defecto.

tamaño-texto-grande

tamaño-texto-medio

tamaño-texto-regular

tamaño-texto-pequeño

text-size-tiny

Pesos del texto
Clases de peso del texto cuando el peso de la tipografía no coincide con la etiqueta HTML por defecto.

peso-texto-semibold

peso-texto-semibold (600)

peso-texto-normal

peso-texto-normal (400)

Estilos de texto
Clases de estilos de texto cuando el estilo tipográfico no coincide con la etiqueta HTML predeterminada.

estilo-texto-cursiva

text-style-strikethrough

text-style-allcaps

text-style-nowrap

cita-estilo-texto

texto-estilo-enlace

text-style-link-no-gradient

Enlace de texto

estilo-texto-2-líneas

estilo-texto-3-líneas

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

texto-estilo-silenciado

Alineación del texto
Clases de alineación del texto cuando la alineación de la tipografía no coincide con la etiqueta HTML predeterminada.

texto-alineado-izquierda

texto-alineado-centro

alineación de texto a la derecha

Texto enriquecido

texto-rico-texto

Rúbrica 1

Rúbrica 2

Rúbrica 3

Rúbrica 4

Rúbrica 5

Rúbrica 6

Esto es una cita en bloque

El elemento de texto enriquecido te permite crear y dar formato a encabezados, párrafos, citas en bloque, imágenes y vídeo, todo en un solo lugar, en lugar de tener que añadirlos y darles formato individualmente. Haz doble clic y crea contenido fácilmente.

Se trata de un enlace dentro de un texto enriquecido

Elemento de la lista
Elemento de la lista
Elemento de la lista

Elemento de la lista
Elemento de la lista
Elemento de la lista

Colores

Color de Fondo
Gestiona los colores de fondo recurrentes.

fondo-color-negro

color de fondo blanco

fondo-color-primario

fondo-color-secundario

fondo-color-terciario

fondo-color-gris-azul oscuro

degradado de fondo-1

fondo-gradiente-2

fondo-gradiente-3

Color de Texto
Gestiona los colores de texto recurrentes.

texto-color-blanco

texto-color-negro

texto-color-primario

texto-color-azul

texto-color-verde

degradado de color del texto

texto-color-gris-azul oscuro

texto-color-TR-primario

Efectos

Sombras de cajas
‍Las sombraste permiten añadir profundidad y realismo a los diseños posicionando los elementos en un eje z.

sombra-xxpequeña

sombra-xpequeña

sombra-pequeña

sombra-media

sombra-grande

sombra-xlarge

sombra-xxlarge

Elementos de IU

Botones

botón

Botón

botón

es-pequeño

Botón

botón

es-oscuro-gris-azul

Botón

botón

es-oscuro-gris-azul

es-pequeño

Botón

botón

es-secundario

Botón

botón

es-secundario

es-pequeño

Botón

botón

is-terario

Botón

botón

is-terario

es-pequeño

Botón

botón

is-link

Botón

Botones con iconos

botón

is-icon

Botón

botón

es-pequeño

is-icon

Botón

botón

es-secundario

is-icon

Botón

botón

es-secundario

es-pequeño

is-icon

Botón

botón

is-link

is-icon

Botón

botón

is-icon-only

botón

es-pequeño

is-icon-only

botón

es-secundario

is-icon-only

botón

es-secundario

es-pequeño

is-icon-only

botón

is-terario

is-icon-only

botón

is-terario

es-pequeño

is-icon-only

botón

is-link

is-icon-only

Elementos de forma

¡Gracias! Hemos recibido tu envío.

¡Uy! Algo ha ido mal al enviar el formulario.

Iconos (Imagen)

icon-height-xxsmall

icon-height-xsmall

icon-height-small

icon-height-medium

icon-height-large

icon-height-xlarge

icono-altura-personalizado1

icono-1x1-xxpequeño

icono-1x1-xpequeño

icono-1x1-pequeño

icono-1x1-medio

icono-1x1-grande

icono-1x1-personalizado1

Iconos (HTML Embed)
Los iconos HTML embed te permiten controlar el color del icono al pasar el ratón por encima.

icon-embed-xxsmall

icon-embed-xsmall

icono-embed-small

icon-embed-medium

icono-embed-large

icono-embed-xlarge

icono-embed-personalizado1

Clases de estructura

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

envoltorio de página

envoltorio principal

contenedor-pequeño

contenedor-medio

contenedor-grande

acolchado-global

relleno-sección-pequeño

relleno-sección-medio

acolchado-sección-grande

grupo de botones

Anchuras máximas

Utiliza la propiedad CSS max-width para contener el contenido interior a una anchura máxima.

max-width-full

max-width-full-tablet

max-width-full-mobile-landscape

max-width-full-mobile-portrait

max-width-xxlarge

max-width-xlarge

max-width-large

max-width-medium

max-width-small

max-width-xsmall

max-width-xxsmall

Rellenos

Clases de dirección

padding-bottom

padding-top

acolchado-vertical

relleno-horizontal

acolchado-izquierdo

padding-right

Clases de tamaño

acolchado-0

acolchado-diminuto

acolchado-xxpequeño

acolchado-xpequeño

acolchado-pequeño

acolchado-medio

acolchado-grande

acolchado-xxlarge

acolchado-enorme

acolchado-xxgrande

acolchado-personalizado1

acolchado-personalizado2

acolchado-personalizado3

Márgenes

Clases de dirección

margin-bottom

margin-top

margen-vertical

margen-horizontal

margen-izquierda

margen-derecha

Clases de tamaño

margen-0

margin-tiny

margen-xxpequeño

margin-xsmall

margen-pequeño

margen-medio

margen-grande

margin-xlarge

margin-xxlarge

margen-grande

margin-xhuge

margin-xxhuge

margen-personal1

margen-personal2

margen-personal3

Distanciadores

Sistema espaciador unificado para el proyecto.

espaciador-diminuto

separador-xpequeño

espaciador-pequeño

espaciador-medio

espaciador-grande

espaciador-xxlarge

espaciador-grande

separador-xhuge

espaciador-xxhuge

Clases útiles

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

oculta

Este elemento está oculto

tableta ocultable

ocultar-retrato-móvil

ocultar-paisaje-móvil

desbordamiento-visible

desbordamiento-oculto

desbordamiento-auto

desbordamiento-desplazamiento

puntero-eventos-auto

puntero-eventos-ninguno

capa

espacio-limpio

alinear-centrar

z-índice-1

z-índice-2

pantalla-inlineflex

margin-top-auto

relación de aspecto-cuadrado

relación de aspecto-retrato

relación de aspecto-paisaje

relación de aspecto-pantalla ancha

color heredado