Biblioteca de componentes

Índice
BotonesTipografíaContenedorTarjetaTarjeta de presupuesto

Botones

Principal
Secundaria
Enlace
Discapacitados
Por defecto
Hable con un experto
Nombre de la clase: (DR / CTA / primaria)
Icono-izquierda
Botón
Nombre de clase: (DR / CTA / primary) & (icon-left)
Icono-derecha
Nombre de la clase: (DR / CTA / primary) & (icon-right)
Por defecto
Nombre de la clase: (DR / CTA / primaria)
Icono-izquierda
Nombre de clase: (DR / CTA / primary) & (icon-left)
Icono-derecha
Nombre de la clase: (DR / CTA / primary) & (icon-right)
Por defecto
Botón
Nombre de la clase: (DR / CTA / secundaria)
Icono-izquierda
Botón
Nombre de clase: (DR / CTA / secondary) & (icon-left)
Icono-derecha
Botón
Nombre de la clase: (DR / CTA / secundario) & (icono-derecha)
Por defecto
Botón
Nombre de la clase: (DR / CTA / secundaria)
Icono-izquierda
Botón
Nombre de clase: (DR / CTA / secondary) & (icon-left)
Icono-derecha
Botón
Nombre de la clase: (DR / CTA / secundario) & (icono-derecha)
Por defecto
Nombre de la clase: (DR / CTA / enlace)
Icono-izquierda
Nombre de clase: (DR / CTA / link) & (icon-left)
Icono-derecha
Nombre de clase: (DR / CTA / enlace) & (icono-derecha)
Por defecto
Botón
Nombre de la clase: (DR / CTA / enlace)
Icono-izquierda
Botón
Nombre de clase: (DR / CTA / link) & (icon-left)
Icono-derecha
Botón
Nombre de clase: (DR / CTA / enlace) & (icono-derecha)
Por defecto
Botón
Nombre de la clase: (DR / CTA / discapacitados)
Icono-izquierda
Botón
Nombre de clase: (DR / CTA / disabled) & (icon-left)
Icono-derecha
Botón
Nombre de clase: (DR / CTA / disabled) & (icon-right)
Por defecto
Nombre de la clase: (DR / CTA / discapacitados)
Icono-izquierda
Nombre de clase: (DR / CTA / disabled) & (icon-left)
Icono-derecha
Nombre de clase: (DR / CTA / disabled) & (icon-right)

Tipografía

Cabeceras

H1
H2
H3
H4
Negrita Grande
Negrita Pequeña
Cuadro
Subencabezado
Blog

Utilizado en:

Nombre de la clase: (DR / H1)

Aa

Poppins Semi Bold

Tamaño 72px / 5rem

Altura de línea: 80px / 5rem

Nombre de la clase: (DR / H1) & (blanco)

Aa

Poppins Semi Bold

Tamaño 72px / 5rem

Altura de línea: 80px / 5rem

Utilizado en:

Nombre de la clase: como arriba

Aa

Poppins Semi Bold

Tamaño 32px / 2rem

Altura de línea: 44px / 3rem

Aa

Poppins Semi Bold

Tamaño 32px / 2rem

Altura de línea: 44px / 3rem

Utilizado en:

Nombre de la clase: (DR / H2)

Aa

Poppins Semi Bold

Tamaño: 44px / 3rem

Altura de línea: 56px / 4rem

Nombre de la clase: (DR / H2) & (blanco)

Aa

Poppins Semi Bold

Tamaño: 44px / 3rem

Altura de línea: 56px / 4rem

Utilizado en:

Nombre de la clase: como arriba

Aa

Poppins Semi Bold

Tamaño: 24px / 1.5rem

Altura de línea: 32px / 2rem

Aa

Poppins Semi Bold

Tamaño: 24px / 1.5rem

Altura de línea: 32px / 2rem

Utilizado en:

Nombre de la clase: (DR / H3)

Aa

Poppins Semi Bold

Tamaño 32px / 2rem

Altura de línea: 44px / 3rem

Nombre de la clase: (DR / H3) & (blanco)

Aa

Poppins Semi Bold

Tamaño 32px / 2rem

Altura de línea: 44px / 3rem

Utilizado en:

Nombre de la clase: como arriba

Aa

Poppins Semi Bold

Tamaño 20px / 1.3rem

Altura de línea: 32px / 2rem

Aa

Poppins Semi Bold

Tamaño 20px / 1.3rem

Altura de línea: 32px / 2rem

Utilizado en:

Nombre de la clase: (DR / H4)

Aa

Poppins Semi Bold

Tamaño 25px / 1.6rem

Altura de línea: 36px / 2rem

Nombre de la clase: (DR / H4) & (blanco)

Aa

Poppins Semi Bold

Tamaño 25px / 1.6rem

Altura de línea: 36px / 2rem

Utilizado en:

Nombre de la clase: como arriba

Aa

Poppins Semi Bold

Tamaño 16px / 1rem

Altura de línea: 25px / 1.6rem

Aa

Poppins Semi Bold

Tamaño 16px / 1rem

Altura de línea: 25px / 1.6rem

Utilizado en:

Nombre de la clase: (DR / texto / negrita) & (grande)

Aa

Poppins Semi Bold

Tamaño 30px / 1.3rem

Altura de línea: 44px / 3rem

Nombre de clase: (DR / texto / negrita) , (grande) & (blanco)

Aa

Poppins Semi Bold

Tamaño 30px / 1.3rem

Altura de línea: 44px / 3rem

Utilizado en:

Nombre de la clase: como arriba

Aa

Poppins Semi Bold

Tamaño 20px / 1.3rem

Altura de línea: 32px / 2rem

Aa

Poppins Semi Bold

Tamaño 20px / 1.3rem

Altura de línea: 32px / 2rem

Utilizado en:

Nombre de la clase: (DR / texto / negrita) & (pequeño)

Aa

Poppins Semi Bold

Tamaño 16px / 1rem

Altura de línea: 25px / 1.6rem

Nombre de clase: (DR / texto / negrita), (pequeño) y (blanco)

Aa

Poppins Semi Bold

Tamaño: 16px / 1rem

Altura de línea: 25px / 1.6rem

Utilizado en:

Nombre de la clase: N/A

N/D

Poppins Semi Bold

Tamaño N/A

Altura de la línea: N/A

N/A

Poppins Semi Bold

Tamaño: N/A

Altura de la línea: N/A

Utilizado en:

Nombre de la clase: (DR / Texto / Tabla)

AA

Poppins Semi Bold

Tamaño: 16px / 1rem

Altura de línea: 25px / 1.6rem

Nombre de clase: (DR / Texto / Tabla) & (blanco)

AA

Poppins Semi Bold

Tamaño: 16px / 1rem

Altura de línea: 25px / 1.6rem

Utilizado en:

Nombre de la clase: N/A

N/A

Poppins Semi Bold

Tamaño: N/A

Altura de línea: 25px / 1.6rem

N/A

Poppins Semi Bold

Tamaño: N/A

Altura de la línea: N/A

Utilizado en:

Nombre de la clase: (DR / SubHeader)

AA

Poppins Light (con mayúsculas)

Tamaño 18px / 1.1rem

Altura de línea: 28px / 1.8rem

Nombre de la clase: (DR / SubHeader) & (blanco)

AA

Poppins Semi Bold

Tamaño 18px / 1.1rem

Altura de línea: 28px / 1.8rem

Utilizado en:

Nombre de la clase: N/A

N/A

Poppins Light (con mayúsculas)

Tamaño N/A

Altura de la línea: N/A

N/A

Poppins Semi Bold

Tamaño N/A

Altura de la línea: N/A

Utilizado en:

Nombre de la clase: (DR / blog / H1)

Aa

Poppins Semi Bold

Tamaño 40px / 2.5rem

Altura de línea: 52px / 3.25rem

Nombre de la clase: (DR / blog / H1) & (blanco)

Aa

Poppins Semi Bold

Tamaño 40px / 2.5rem

Altura de línea: 52px / 3.25rem

Utilizado en:

Nombre de la clase: N/A

Aa

Poppins Semi Bold

Tamaño 32px / 2rem

Altura de línea: 44px / 3rem

Aa

Poppins Semi Bold

Tamaño 32px / 2rem

Altura de línea: 44px / 3rem

Otra tipografía

Párrafo

Utilizado en:

Nombre de la clase: (DR / párrafo)

Aa

Cuerpo principal del texto, párrafos

Poppins Light

Tamaño: 16px / 1rem

Altura de línea: 25px / 1.6rem

Aa

Cuerpo principal del texto, párrafos

Poppins Light

Tamaño 16px / 1rem

Altura de línea: 25px / 1.6rem

Estilos productivos

Utilizado en:

Nombre de la clase: (DR / etiqueta / leyenda)

Aa

Para etiquetas de campo en componentes y mensajes de error
Para subtítulos o contenido legal en un diseño

Poppins Light

Tamaño 15px / 0.9rem

Altura de línea: 25px / 1.6rem

Nombre de la clase: (DR / etiqueta / leyenda) & (blanco)

Aa

Para etiquetas de campo en componentes y mensajes de error
Para subtítulos o contenido legal en un diseño

Poppins Light

Tamaño 15px / 0.9rem

Altura de línea: 25px / 1.6rem

Botón

Utilizado en:

Nombre de la clase: (DR / etiqueta / leyenda)

Aa

Esto es para las etiquetas de los botones

Poppins Light

Tamaño 18px / 1.1rem

Altura de línea: 28px / 1.8rem

Aa

Esto es para las etiquetas de los botones

Poppins Light

Tamaño 18px / 1.1rem

Altura de línea: 28px / 1.8rem

Contenedor

Un contenedor con max-width: 1300px limita el ancho del contenido para una mejor legibilidad y un diseño equilibrado en pantallas grandes, mientras que mantiene el diseño sensible y centrado en pantallas más pequeñas. No se limite a copiar el cuadro de abajo, escriba DR / Container en el selector de estilo en el cuadro de herramientas de la derecha.

Nombre de la clase: (DR / contenedor)

Tarjetas

Nombre de la clase: (DR / tarjeta)

Nombre de la clase: (DR / tarjeta) & (alternativa)

Tarjeta de presupuesto

"Los clientes de Driftrock vieron un aumento del 210% en los clientes potenciales de VE procedentes de la red de editores de automoción de Driftrock".
Hable con un experto