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

Otras etiquetas HTML
Las etiquetas HTML definen estilos de texto por defecto.
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 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
  1. Sin lista

  2. Sin lista

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

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

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

leyenda

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 del texto
Clases de peso del texto cuando el peso de la tipografía no coincide con la etiqueta HTML por defecto.
text-weight-xbold
text-weight-xbold (800)
texto-peso-negrita
texto-peso-negrita (700)
peso-texto-semibold
peso-texto-semibold (600)
texto-peso-medio
peso-texto-medio (500)
peso-texto-normal
peso-texto-normal (400)
peso-texto-ligero
peso-texto-ligero (300)
Estilos de texto
Clases de estilos de texto cuando el estilo tipográfico no coincide con la etiqueta HTML predeterminada.
estilo-texto-cursiva
estilo-texto-cursiva
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
cita-estilo-texto
cita-estilo-texto
texto-estilo-enlace
estilo-texto-2-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.
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.
estilo-texto-silenciado
estilo-texto-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-izquierda
texto-alineado-centro
texto-alineado-centro
alineación de texto a la derecha
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
  1. Elemento de la lista
  2. Elemento de la lista
  3. Elemento de la lista
El pie de foto va aquí
industrias_rich-text

¿Qué es un elemento de Texto enriquecido?

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.

Edición de contenidos estáticos y dinámicos

Un elemento de texto enriquecido puede utilizarse con contenido estático o dinámico. Para el contenido estático, basta con soltarlo en cualquier página y empezar a editar. Para contenido dinámico, añade un campo de texto enriquecido a cualquier colección y luego conecta un elemento de texto enriquecido a ese campo en el panel de configuración. ¡Listo!

Cómo personalizar el formato de cada texto enriquecido

Los encabezados, párrafos, citas de bloque, figuras, imágenes y pies de figura pueden estilizarse después de añadir una clase al elemento de texto enriquecido mediante el sistema de selectores anidados "Cuando dentro de".

pagos_rich-texto

¿Qué es un elemento de Texto enriquecido?

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.

Edición de contenidos estáticos y dinámicos

texto

texto

Edición de contenidos estáticos y dinámicos

Un elemento de texto enriquecido puede utilizarse con contenido estático o dinámico. Para el contenido estático, basta con soltarlo en cualquier página y empezar a editar. Para contenido dinámico, añade un campo de texto enriquecido a cualquier colección y luego conecta un elemento de texto enriquecido a ese campo en el panel de configuración. ¡Listo!

Cómo personalizar el formato de cada texto enriquecido

Los encabezados, párrafos, citas de bloque, figuras, imágenes y pies de figura pueden estilizarse después de añadir una clase al elemento de texto enriquecido mediante el sistema de selectores anidados "Cuando dentro de".

Colores
Color de fondo
bg-color-blanco
#fff
bg-color-negro
#000
bg-color-1
#889e77
bg-color-2
#9e7777
bg-color-3
#334350
bg-color-4
#f4f4f7
bg-color-5
#ebedee
bg-color-6
#E2E7EE
bg-color-7
#f1f2f4
Color de Texto
Gestiona los colores de texto recurrentes.
texto-color-1
Esto es un texto dentro de un bloque div.
texto-color-2
Esto es un texto dentro de un bloque div.
texto-color-3
Esto es un texto dentro de un bloque div.
texto-color-4
Esto es un texto dentro de un bloque div.
Elementos de IU
Botones
botón
es-secundario
enlace-texto
splide__flechas
posición-izquierda-flechas-deslizantes
splide__flechas
posición-derecha-flechas-deslizantes
splide__flechas
top-left-position-slider-arrows
splide__flechas
abajo-izquierda-posición-flechas-deslizantes
splide__flecha
circle-slider-arrow
splide__arrow--prev
circle-slider-arrow-prev
splide__flecha--siguiente
circle-slider-arrow-next
splide__pagination__page
círculo-punto
splide__pagination__page
círculo-punto
is-active
splide__pagination__page
círculo-punto
splide__pagination__page
círculo-punto
is-active
splide__flecha
circle-slider-arrow-dark
splide__arrow--prev
circle-slider-arrow-prev-dark
splide__flecha--siguiente
circle-slider-arrow-next-dark
splide__paginación
paginación-derecha-slider
Elementos del formulario
etiqueta de campo
formulario-entrada
formulario-entrada
es-área-de-texto
formulario-entrada
es-seleccionar-entrada
formulario-casilla
formulario-radio
botón
Obrigado! Recebemos sua inscrição!
Ops! Algo deu errado ao enviar seu formulário.
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-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-portrait
max-width-full-landscape
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-grande
acolchado-xxlarge
acolchado-enorme
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
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-en
puntero-eventos-apagado
capa
div-cuadrado
espacio-limpio
alinear-centrar
z-índice-1
z-índice-2
pantalla-inlineflex
margin-top-auto
desde-abajo