Icon box 1
.. followed by some bogus content. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Guía de estilos
Lleva tus proyectos web al siguiente nivel con esta Guía de estilo
Color
Define los colores principales utilizados en el sistema de diseño, garantizando una apariencia cohesiva y consistente en todos los elementos.
Color Primario
Color Secundario
Color Texto
Color Heading
Tintas
Define los colores principales utilizados en el sistema de diseño, garantizando una apariencia cohesiva y consistente en todos los elementos.
Color Primario
fondo-primary-tint-7
Color primary-tint-5
Color primary-tint-1
Tipografía
Estandariza los estilos, tamaños y jerarquías de fuente para una presentación de texto clara y accesible.
Este encabezado utiliza la función de sujeción para crear un tamaño adaptable.
Este encabezado utiliza la función de sujeción para crear un tamaño adaptable.
6XL Primary
5XL Secondary
4XL Secondary
3XL Secondary
2XL Secondary
Titulares
.h1 / --h1
H1 I am a heading
.h2 / --h2
H2 I am a heading
.h3 / --h3
H3 I am a heading
.h4 / --h4
H3 I am a heading
.h5 / --h5
H3 I am a heading
.h6 / --h6
H6 I am a heading
Body Text-l. A curae fermentum placerat bibendum vitae nullam ullamcorper tellus class donec, ligula aptent auctor condimentum iaculis dui phasellus morbi molestie, penatibus dignissim mus euismod cubilia rutrum velit praesent potenti. Maecenas leo platea penatibus nostra integer laoreet nunc senectus, fermentum tempus nibh parturient sociosqu a dictum erat et, tincidunt aptent taciti quis vitae elementum dis. Eleifend aliquet facilisi proin a eros pretium suscipit, ad aliquam inceptos senectus arcu fermentum auctor massa, id luctus accumsan laoreet imperdiet nostra.Here goes your text … Select any part of your text to access the formatting toolbar.
Body Text-m. A curae fermentum placerat bibendum vitae nullam ullamcorper tellus class donec, ligula aptent auctor condimentum iaculis dui phasellus morbi molestie, penatibus dignissim mus euismod cubilia rutrum velit praesent potenti. Maecenas leo platea penatibus nostra integer laoreet nunc senectus, fermentum tempus nibh parturient sociosqu a dictum erat et, tincidunt aptent taciti quis vitae elementum dis. Eleifend aliquet facilisi proin a eros pretium suscipit, ad aliquam inceptos senectus arcu fermentum auctor massa, id luctus accumsan laoreet imperdiet nostra.Here goes your text … Select any part of your text to access the formatting toolbar.
Body Text-s. A curae fermentum placerat bibendum vitae nullam ullamcorper tellus class donec, ligula aptent auctor condimentum iaculis dui phasellus morbi molestie, penatibus dignissim mus euismod cubilia rutrum velit praesent potenti. Maecenas leo platea penatibus nostra integer laoreet nunc senectus, fermentum tempus nibh parturient sociosqu a dictum erat et, tincidunt aptent taciti quis vitae elementum dis. Eleifend aliquet facilisi proin a eros pretium suscipit, ad aliquam inceptos senectus arcu fermentum auctor massa, id luctus accumsan laoreet imperdiet nostra.Here goes your text … Select any part of your text to access the formatting toolbar.
Paddings
Padding-s rutrum iaculis urna id lacinia. Vivamus eget euismod diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean faucibus eros nulla, vel consectetur est condimentum eu. Pellentesque non pharetra magna. Maecenas malesuada urna sed sapien luctus, eget semper turpis ullamcorper. Nullam quis rutrum mauris. Suspendisse pretium, quam eget vulputate volutpat, lacus nunc fermentum magna, id semper neque risus nec nisl. Nulla facilisi. In in justo pharetra, tempor felis at, molestie enim. Donec commodo, nisl vel cursus condimentum, diam leo suscipit mauris, semper tincidunt orci libero vitae orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent pretium quam ex, blandit faucibus urna facilisis quis. Donec laoreet lorem non ante venenatis, auctor suscipit tortor maximus. Donec urna justo, pharetra eu blandit nec, vestibulum eu nunc.
I am a buttonPadding-m Quisque rutrum iaculis urna id lacinia. Vivamus eget euismod diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean faucibus eros nulla, vel consectetur est condimentum eu. Pellentesque non pharetra magna. Maecenas malesuada urna sed sapien luctus, eget semper turpis ullamcorper. Nullam quis rutrum mauris.
Padding-xl Quisque rutrum iaculis urna id lacinia. Vivamus eget euismod diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean faucibus eros nulla, vel consectetur est condimentum eu.
Padding-l Quisque rutrum iaculis urna id lacinia. Vivamus eget euismod diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean faucibus eros nulla, vel consectetur est condimentum eu. Pellentesque non pharetra magna. Maecenas malesuada urna sed sapien luctus, eget semper turpis ullamcorper. Nullam quis rutrum mauris.
Padding-2xl Quisque rutrum iaculis urna id lacinia. Vivamus eget euismod diam. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Botones
Define los colores principales utilizados en el sistema de diseño, garantizando una apariencia cohesiva y consistente en todos los elementos.
Botones Small
Botón primarioBotón secundarioBotón LightBotón darkBotón mutedBotón infoBotón successBotón warningBotón Danger
Botones Medium
Botón primarioBotón secundarioBotón LightBotón darkBotón mutedBotón infoBotón successBotón warningBotón Danger
Botones Large
Botón primarioBotón secundarioBotón LightBotón darkBotón mutedBotón infoBotón successBotón warningBotón Danger
Botones Extra Large
Botón primarioBotón secundarioBotón LightBotón darkBotón mutedBotón infoBotón successBotón warningBotón Danger
Border Radius
Define los colores principales utilizados en el sistema de diseño, garantizando una apariencia cohesiva y consistente en todos los elementos.
Shadows
Define la profundidad y los efectos de capas para tarjetas, modales y otros componentes.
Grids
Variables de cuadrícula disponibles
Esta guía de estilo incluye 5 variables de cuadrícula predefinidas para diseños flexibles. Puede usar las siguientes variables de cuadrícula para crear diseños de 2 a 12 columnas:
Iconos
Establece el estilo y el tamaño de los íconos, garantizando la alineación visual con el diseño general.
Básico
Icon-base
.Icon-base + .Icon-outline
.Icon-base + .icon--filled
Tamaños
Icon-xs
.Icon-m
.Icon-l
.Icon-xl
Primario
Icon-xs
.Icon-m
.Icon-l
.Icon-xl
Secundario
Icon-xs
.Icon-m
.Icon-l
.Icon-xl
Padding secciones
Proporciona pautas para el espaciado interior dentro de las secciones para mantener proporciones adecuadas.