Tipografía
Etiquetas deencabezado HTML
Las etiquetas HTML definen los estilos de encabezado por defecto.
Todos los títulos H1

Rúbrica 1

Todas las rúbricas 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 predeterminada.
estilo-encabezado-h1

Encabezamiento-estilo-h1

encabezamiento-estilo-h2

Encabezamiento-estilo-h2

estilo-encabezado-h3

Estilo de encabezamiento-h3

estilo-encabezado-h4

Encabezamiento-estilo-h4

estilo-encabezado-h5

Encabezamiento-estilo-h5

encabezamiento-estilo-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 predeterminada.
text-size-large

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

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

text-size-small

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-size-tiny

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 Weights
Clases de peso de 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
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
texto-peso-medio (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
Estilos de texto
Clases de estilos de texto cuando el estilo tipográfico no coincide con la etiqueta HTML predeterminada.
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
estilo de texto-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.
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
texto-estilo-silenciado
text-style-tagline
text-style-tagline
texto-color-blanco
texto-color-blanco
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.
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Texto enriquecido
texto-rico-texto

Rúbrica 1

Rúbrica 2

Rúbrica 3

Rúbrica 4

Rúbrica 5
Rúbrica 6
Esta es una cita en bloque

El elemento de texto enriquecido le permite crear y dar formato a encabezados, párrafos, citas en bloque, imágenes y vídeo, todo en un mismo 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í
Colores
Esquemas de color
Gestione sus colores fácilmente con esquemas de color globales simplemente añadiendo la clase de esquema de color a la sección a la que desea que se aplique.
esquema de color-1
Esquema 1

Color del texto

Elementos de interfaz de usuario
Botones
botón
botón
es-pequeño
botón
es-secundario
botón
es-secundario
es-pequeño
botón
is-link
Para utilizarlo sobre un fondo oscuro, basta con utilizar la clase de complemento is-alternate
botón
es-alternativo
botón
es-alternativo
es-pequeño
botón
es-secundario
es-alternativo
botón
es-secundario
es-pequeño
es-alternativo
botón
is-link
es-alternativo
Botón
Botones con iconos
botón
is-icon
botón
es-pequeño
is-icon
botón
es-secundario
is-icon
botón
es-secundario
es-pequeño
is-icon
botón
is-link
is-icon
botón
is-icon
es-alternativo
botón
es-pequeño
is-icon
es-alternativo
botón
es-secundario
is-icon
es-alternativo
botón
es-secundario
es-pequeño
is-icon
es-alternativo
botón
is-link
is-icon
es-alternativo
Otros elementos de la interfaz de usuario
categoría-filtro-enlace
flecha deslizante
Etiquetas
Etiquetas enlazables que categorizan o resaltan información en tarjetas, productos y entradas.
etiqueta
Etiqueta
etiqueta
es-texto
Etiqueta
etiqueta
es-alternativo
Etiqueta
etiqueta
es-texto
es-alternativo
Etiqueta
Elementos de formulario
form_field-label
formulario_entrada
formulario_entrada
is-text-area
formulario_entrada
is-select-input
form_checkbox
formulario_radio
botón
Muchas gracias. Hemos recibido su envío.
¡Uy! Algo ha ido mal al enviar el formulario.
Para utilizar Formularios sobre un fondo oscuro, basta con utilizar la clase de complemento is-alternate
form_field-label
formulario_entrada
formulario_entrada
is-text-area
formulario_entrada
is-select-input
form_checkbox
formulario_radio
botón
Muchas gracias. Hemos recibido su 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

icon-height-custom1

icono-1x1-xxpequeño

icono-1x1-xpequeño

icono-1x1-pequeño

icon-1x1-mediano

icono-1x1-grande

icono-1x1-grande

icono-1x1-personalizado1

Iconos (HTML Embed)
Los iconos HTML embed 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

Radio
Grande
‍Elradio grandese aplica a elementos que tienen 1 o 2 columnas de ancho.
Medio
‍Elradio mediose aplica a los elementos que tienen entre 2 y 3 columnas de ancho.
Pequeño
‍Elradio pequeñose aplica a los elementos cuya anchura es inferior a 4 columnas.
Efectos
Sombras de cajas
‍Las sombraspermiten 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
shadow-xxlarge
Clases de estructura
Estructura central definida y flexible que podemos utilizar en todas o en la mayoría de las páginas.
page-wrapper
envoltorio principal
contenedor-pequeño
contenedor-medio
contenedor-grande
acolchado-global
padding-section-small
padding-section-medium
padding-section-large
grupo de botones
Anchuras máximas
Utilice 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
padding-horizontal
padding-left
padding-right
Clases de tamaño
acolchado-0
padding-tiny
acolchado-xxpequeño
acolchado-xpequeño
acolchado-pequeño
acolchado-medio
padding-large
acolchado-grande
acolchado-xxlarge
acolchado-enorme
acolchado-xhuge
acolchado-xxhuge
acolchado-personalizado1
acolchado-personalizado2
acolchado-personalizado3
Márgenes
Clases de dirección
margin-bottom
margin-top
margen-vertical
margen-horizontal
margin-left
margen-derecha
Clases de tamaño
margen-0
margin-tiny
margin-xxsmall
margin-xsmall
margen-pequeño
margen-medio
margin-large
margin-xlarge
margin-xxlarge
margen-grande
margin-xhuge
margin-xxhuge
margen-personalizado1
margen-personalizado2
margen-personalizado3
Separadores
Sistema espaciador unificado para el proyecto.
espaciador-diminuto
espaciador-xxpequeño
espaciador-xpequeño
espaciador-pequeño
espaciador-medio
espaciador-grande
espaciador-grande
espaciador-xxlarge
espaciador-grande
separador-xhuge
separador-xxhuge
Clases útiles
Clases útiles que nos gusta utilizar en la mayoría de nuestros proyectos para construir más rápido.
ocultar
Este elemento está oculto
hide-tablet
ocultar-retrato-móvil
ocultar-paisaje-móvil
desbordamiento-visible
desbordamiento-oculto
desbordamiento-auto
overflow-scroll
puntero-eventos-auto
puntero-eventos-ninguno
capa
espacio-limpio
alinear-centrar
z-index-1
z-index-2
pantalla-inlineflex
margin-top-auto
relación de aspecto-cuadrado
aspect-ratio-portrait
relación de aspecto-paisaje
aspect-ratio-widescreen
color heredado