Clases de Estructura

Guía de Estilo Relume

Client-First V2.1 • Última actualización 09 ene 2024

Documentación Client-First

Tipografía

Etiquetas de Encabezados HTML
Las etiquetas HTML definen los estilos de Encabezado predeterminados.

Todos los Encabezados H1

Encabezado 1

Todos los Encabezados H2

Encabezado 2

Todos los Encabezados H3

Encabezado 3

Todos los Encabezados H4

Encabezado 4

Todos los Encabezados H5

Encabezado 5

Todos los encabezados H6

Encabezado 6

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

encabezado-estilo-h1

Encabezado-estilo-h1

encabezado-estilo-h2

Encabezado-estilo-h2

encabezado-estilo-h3

Encabezado-estilo-h3

encabezado-estilo-h4

Encabezado-estilo-h4

encabezado-estilo-h5

Encabezado-estilo-h5

encabezado-estilo-h6

Encabezado-estilo-h6

Otras etiquetas HTML
Las etiquetas HTML definen estilos de texto predeterminados.

Todos los párrafos

Todos los enlaces

Todas las citas en bloque

Cita en bloque

Todas las listas desordenadas

Sin lista con viñetas
Sin lista con viñetas

Todas las listas desordenadas

Sin lista con viñetas
Sin lista con viñetas

Todas las listas ordenadas

Sin lista con viñetas
Sin lista con viñetas
Sin lista con viñetas

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

tamaño-texto-grande

tamaño-texto-medio

text-size-regular

text-size-small

text-size-tiny

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

text-weight-xbold

text-weight-xbold (800)

text-weight-bold

text-weight-bold (700)

text-weight-semibold

text-weight-semibold (600)

text-weight-medium

text-weight-medium (500)

text-weight-normal

text-weight-normal (400)

text-weight-light

text-weight-light (300)

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

text-style-italic

text-style-strikethrough

text-style-allcaps

text-style-nowrap

text-style-quote

text-style-link

text-style-2lines

text-style-3lines

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.

text-style-muted

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

text-align-left

text-align-center

text-align-right

Texto enriquecido

text-rich-text

Encabezado 1

Encabezado 2

Encabezado 3

Encabezado 4

Encabezado 5

Encabezado 6

Esta es una cita de bloque

El elemento de texto enriquecido te permite crear y formatear encabezados, párrafos, citas de bloque, imágenes y videos en un solo lugar en lugar de tener que agregarlos y formatearlos individualmente. Simplemente haz doble clic y crea contenido fácilmente.

Este es un enlace dentro de un texto enriquecido

Elemento de lista
Elemento de lista
Elemento de lista

Elemento de lista
Elemento de lista
Elemento de lista

Icono de imagen de marcador de posición con fondo gris y un símbolo de montaña y sol en el centro. — Aquí va el pie de foto

Colores

Aprende a usar variables para gestionar colores

Proyecto de ejemplo

Color de fondo
Gestiona colores de fondo recurrentes.

color-de-fondo-negro

color-de-fondo-blanco

color-de-fondo-primario

color-de-fondo-secundario

color-de-fondo-terciario

color-de-fondo-alternativo

Color de texto
Administrar colores de texto recurrentes.

color-texto-blanco

color-texto-negro

color-texto-primario

color-texto-secundario

color-texto-alterno

Efectos

Sombras de caja
‍Las sombras te permiten añadir profundidad y realismo a los diseños al posicionar elementos en un eje z.

sombra-xxpequeña

sombra-xpequeña

sombra-pequeña

sombra-mediana

sombra-grande

sombra-xgrande

sombra-xxlarge

Elementos de interfaz de usuario

Botones

button

Botón

button

es-pequeño

Botón

button

es-secundario

Botón

button

es-secundario

es-pequeño

Botón

button

es-terciario

Botón

button

es-terciario

es-pequeño

Botón

button

es-enlace

Botón

Para usar en un fondo oscuro, simplemente usa la clase adicional es-alternativo

button

es-alternativo

Botón

button

es-alternativo

es-pequeño

Botón

button

es-secundario

es-alternativo

Botón

button

es-secundario

es-pequeño

es-alternativo

Botón

button

es-enlace

es-alternativo

Botón

Botones con iconos

button

es-icono

Botón

button

es-pequeño

es-icono

Botón

button

es-secundario

es-icono

Botón

button

es-secundario

es-pequeño

es-icono

Botón

button

es-enlace

es-icono

Botón

button

es-enlace

es-icono

color-texto-rojo

Botón

button

solo-icono

button

es-pequeño

solo-icono

button

es-secundario

solo-icono

button

es-secundario

es-pequeño

solo-icono

button

es-terciario

solo-icono

button

es-terciario

es-pequeño

solo-icono

button

es-enlace

solo-icono

Elementos de formulario

etiqueta_campo_formulario

form_input

.form_field-label

form_input

is-text-area

.form_field-label

form_input

is-select-input

.form_field-label

form_checkbox

Casilla de verificación

form_radio

Radio

button

¡Gracias! ¡Tu envío ha sido recibido!

¡Oops! Algo salió 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

icon-height-custom1

icon-1x1-xxsmall

icon-1x1-xsmall

icon-1x1-small

icon-1x1-medium

icon-1x1-large

icon-1x1-xlarge

icon-1x1-custom1

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

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom1

Clases de Estructura

Estructura central definida y flexible que podemos usar en todas o 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

Anchos Máximos

Utilice 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-landscape

max-width-full-mobile-portrait

max-width-xxlarge

max-width-xlarge

ancho-max-grande

ancho-max-mediano

ancho-max-pequeño

ancho-max-xpequeño

ancho-max-xxpequeño

Rellenos

Clases de Dirección

relleno-inferior

relleno-superior

relleno-vertical

relleno-horizontal

relleno-izquierdo

relleno-derecho

Clases de Tamaño

relleno-0

relleno-diminuto

relleno-xxpequeño

relleno-xpequeño

relleno-pequeño

relleno-mediano

padding-large

padding-xlarge

padding-xxlarge

padding-huge

padding-xhuge

padding-xxhuge

padding-custom1

padding-custom2

padding-custom3

Márgenes

Clases de Dirección

margin-bottom

margin-top

margin-vertical

margin-horizontal

margin-left

margin-right

Clases de Tamaño

margin-0

margin-tiny

margen-xxpequeño

margen-xpequeño

margen-pequeño

margen-mediano

margen-grande

margen-xgrande

margen-xxgrande

margen-enorme

margen-xenorme

margen-xxenorme

margen-personalizado1

margen-personalizado2

margen-personalizado3

Separadores

Sistema unificado de separadores para el proyecto.

separador-diminuto

separador-xxpequeño

separador-xpequeño

separador-pequeño

separador-mediano

spacer-large

spacer-xlarge

spacer-xxlarge

spacer-huge

spacer-xhuge

spacer-xxhuge

Clases de Utilidad

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

ocultar

Este elemento está oculto

ocultar-tablet

ocultar-movil-retrato

ocultar-movil-paisaje

desbordamiento-visible

desbordamiento-oculto

desbordamiento-auto

desbordamiento-scroll

eventos-puntero-auto

eventos-puntero-ninguno

capa

espaciado-limpio

alinear-centro

z-index-1

z-index-2

mostrar-flexinline

margen-superior-auto

relacion-aspecto-cuadrado

relacion-aspecto-retrato

relacion-aspecto-paisaje

relacion-aspecto-panoramico

heredar-color