Guía de estilo de la biblioteca Relume

Versión 1.3 • Cliente primero V2
Documentos de cliente primero
Empezando
Tipografía
Etiquetas de encabezados HTML
Las etiquetas HTML definen los estilos de encabezado predeterminados.
Todos los encabezados H1

Título 1

Todos los encabezados H2

Título 2

Todos los encabezados H3

Título 3

Todos los encabezados H4

Título 4

Todos los encabezados H5
Título 5
Todos los encabezados H6
Título 6
Clases de encabezado
Clases de encabezado cuando el estilo de tipografía no coincide con la etiqueta HTML predeterminada.
estilo-título-h1

Título-estilo-h1

encabezado-estilo-h2

Título-estilo-h2

encabezado-estilo-h3

Título-estilo-h3

estilo-título-h4

Título-estilo-h4

encabezado-estilo-h5

Título-estilo-h5

estilo-título-h6

Título-estilo-h6

Otras etiquetas HTML
Las etiquetas HTML definen estilos de texto predeterminados.
Todos los párrafos

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.

Todos los enlaces
Todos los enlaces
Todas las cotizaciones en bloque
Cotización en bloque
Todas las listas desordenadas

  • Sin lista de viñetas

  • Sin lista de viñetas

Todas las listas desordenadas

  • Sin lista de viñetas

  • Sin lista de viñetas

Todas las listas ordenadas

  1. Sin lista de viñetas

  2. Sin lista de viñetas

  3. Sin lista de viñetas

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

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-tamaño-medio

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.

tamaño-de-texto-regular

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-tamaño-pequeño

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.

tamaño-de-texto-pequeño

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.

Pesos de texto
Clases de peso de texto cuando el peso de la tipografía no coincide con la etiqueta HTML predeterminada.
texto-peso-xbold
texto-peso-xbold (800)
texto-peso-negrita
texto-peso-negrita (700)
texto-peso-seminegrita
texto-peso-seminegrita (600)
texto-peso-medio
texto-peso-medio (500)
texto-peso-normal
texto-peso-normal (400)
texto-peso-ligero
texto-peso-ligero (300)
Estilos de texto
Clases de estilo de texto cuando el estilo de tipografía no coincide con la etiqueta HTML predeterminada.
estilo-texto-cursiva
estilo-texto-cursiva
estilo-de-texto-tachado
estilo-de-texto-tachado
estilo-de-texto-en-mayúsculas
estilo-de-texto-en-mayúsculas
estilo-de-texto-ahora
estilo-de-texto-ahora
cita de estilo de texto
cita de estilo de texto
enlace de estilo de texto
enlace de estilo de texto
texto-estilo-2lí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.
texto-estilo-3lí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.
estilo de texto silenciado
estilo de texto silenciado
Alineación del texto
Clases de alineación de texto cuando la alineación de la tipografía no coincide con la etiqueta HTML predeterminada.
texto-alinear-izquierda
texto-alinear-izquierda
texto-alinear-centro
texto-alinear-centro
texto-alinear-derecha
texto-alinear-derecha
Texto rico
texto-texto-enriquecido

Título 1

Título 2

Título 3

Título 4

Título 5
Título 6
Esta es una cita en bloque

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

Este es un enlace dentro de un texto enriquecido

  • elemento de la lista
  • elemento de la lista
  • elemento de la lista
  1. elemento de la lista
  2. elemento de la lista
  3. elemento de la lista
El subtítulo va aquí
Colores
Paleta de color
es negro
es blanco
es-gris
Agregue paletas de colores prefabricadas
Obtenga acceso a paletas de colores prefabricadas y péguelas a continuación.
Ver paletas de colores
Haga clic y pegue la paleta de colores
Color de fondo
Administre colores de fondo recurrentes.
fondo-color-negro
fondo-color-blanco
fondo-color-gris
Agregue colores de fondo prefabricados
Obtenga acceso a paletas de colores prefabricadas y péguelas a continuación.
Ver colores de fondo
Haga clic y pegue la paleta de colores
Color de texto
Administrar colores de texto recurrentes.
texto-color-blanco
texto-color-blanco
texto-color-negro
texto-color-negro
Agregue colores de texto prefabricados
Obtenga acceso a los colores de texto prefabricados y péguelos a continuación.
Ver colores de texto
Haga clic y pegue la paleta de colores
Efectos
Sombras de caja
‍Las sombras le permiten agregar profundidad y realismo a los diseños colocando elementos en un eje z.
¿Quiere aprender a usar las clases de sombra de la manera Cliente primero?
Ver el tutorial
shadow-xxsmall
shadow-xsmall
pequeña sombra
medio de sombra
sombra-grande
sombra-xlarge
sombra-xxlarge
Elementos de la interfaz de usuario
Botones
botón
Botón
botón
es pequeño
Botón
botón
es-secundario
Botón
botón
es-secundario
es pequeño
Botón
botón
es-enlace
Botón
Para usar en un fondo oscuro, simplemente use la clase adicionales-alternativo
botón
es-alternativo
Botón
botón
es-alternativo
es pequeño
Botón
botón
es-secundario
es-alternativo
Botón
botón
es-secundario
es pequeño
es-alternativo
Botón
botón
es-enlace
es-alternativo
Botón
Botones Con Iconos
botón
es-icono
Botón
botón
es pequeño
es-icono
Botón
botón
es-secundario
es-icono
Botón
botón
es-secundario
es pequeño
es-icono
Botón
botón
es-enlace
es-icono
Botón
Elementos de formulario
Etiqueta de campo
formulario de entrada
formulario de entrada
es-área de texto
formulario de entrada
es-seleccionar-entrada
formulario-casilla de verificación
forma-radio
botón
¡Gracias! ¡Su propuesta ha sido recibida!
Iconos (Imagen)

icono-altura-xxpequeña

icono-altura-xpequeña

icono-altura-pequeño

icono-altura-media

icono-altura-grande

icono-altura-xlarge

icono-altura-personalizado1

icono-1x1-xxpequeño

icono-1x1-xpequeño

icono-1x1-pequeño

icono-1x1-medio

icono-1x1-grande

icono-1x1-xgrande

icono-1x1-personalizado1

Iconos (HTML incrustado)
Los íconos incrustados de HTML le permiten controlar el color del ícono al pasar el mouse.

icono-incrustar-xxsmall

icono-incrustar-xpequeño

icono-incrustar-pequeño

icono-incrustar-medio

icono-incrustar-grande

icono-incrustar-xlarge

icono-incrustar-personalizado1

Clases de estructura
Estructura central definida y flexible que podemos usar en todas o la mayoría de las páginas.
envoltorio de página
envoltorio principal
contenedor-pequeño
contenedor-medio
contenedor-grande
padding-global
acolchado-sección-pequeño
acolchado-sección-medio
acolchado-sección-grande
grupo de botones
Anchos máximos
Use la propiedad CSS max-width para contener contenido interno a un ancho máximo.
max-ancho-completo
max-width-full-tablet
máximo-ancho-retrato-completo
max-width-full-landscape
max-ancho-xxlarge
max-width-xlarge
max-ancho-grande
max-ancho-medio
max-ancho-pequeño
max-ancho-xpequeño
max-ancho-xxpequeño
acolchados
Clases de dirección
fondo acolchado
acolchado superior
acolchado-vertical
acolchado-horizontal
relleno-izquierda
acolchado-derecho
Clases de tamaño
relleno-0
relleno-pequeño
acolchado-xxsmall
relleno-xsmall
acolchado-pequeño
acolchado medio
acolchado-grande
relleno-xlarge
relleno-xxlarge
acolchado-enorme
acolchado-xenorme
relleno-xxhuge
acolchado-personalizado1
padding-custom2
acolchado-personalizado3
Márgenes
Clases de dirección
margen inferior
margen superior
margen-vertical
margen-horizontal
margen izquierdo
margen derecho
Clases de tamaño
margen-0
margen-pequeño
margen-xxsmall
margen-xsmall
margen-pequeño
margen medio
margen grande
margen-xlarge
margen-xxlarge
margen enorme
margen-xenorme
margen-xxenorme
margen-personalizado1
margen-personalizado2
margen-personalizado3
Clases de utilidad
Clases de utilidad útiles que nos gusta usar en la mayoría de nuestros proyectos para construir más rápido.
esconder
Este elemento está oculto
ocultar-tableta
ocultar-movil-retrato
ocultar-movil-paisaje
desbordamiento-visible
desbordamiento-oculto
desbordamiento automático
desplazamiento de desbordamiento
puntero-eventos-en
puntero-eventos-off
capa
div-cuadrado
espaciado-limpio
Alinear al centro
índice z-1
índice z-2
display-inlineflex
margen-superior-auto