Typography Styles
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Small Paragraph
.p-s
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum posuere dolor a scelerisque. Vestibulum et malesuada orci. Sed sit amet metus eu erat pellentesque faucibus. Nam congue nibh a posuere consequat. Quisque eu eros porttitor, sodales velit nec, laoreet turpis. Nulla viverra pharetra convallis. Praesent ac cursus nunc. Pellentesque in feugiat ipsum.
Default Paragraph (Medium)
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum posuere dolor a scelerisque. Vestibulum et malesuada orci. Sed sit amet metus eu erat pellentesque faucibus. Nam congue nibh a posuere consequat. Quisque eu eros porttitor, sodales velit nec, laoreet turpis. Nulla viverra pharetra convallis. Praesent ac cursus nunc. Pellentesque in feugiat ipsum.
Large Paragraph
.p-l
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum posuere dolor a scelerisque. Vestibulum et malesuada orci. Sed sit amet metus eu erat pellentesque faucibus. Nam congue nibh a posuere consequat. Quisque eu eros porttitor, sodales velit nec, laoreet turpis. Nulla viverra pharetra convallis. Praesent ac cursus nunc. Pellentesque in feugiat ipsum.
Clases para íconos
Tipos de íconos
Parte con cualquiera de los 4 tipos de botones .btn-[type]
.icon-filled
.icon-outline
.icon-tinted
.icon-clear
Tamaños de íconos
Parte con cualquiera de los 4 tipos de botones .btn-[size]
.icon-s
Default
.icon-l
.icon-xl
.icon-2xl
Esquinas de íconos
Parte con cualquiera de los 4 tipos de botones .rd-[size]
.rd-none
.rd-s
Default
.rd-l
.rd-xl
.rd-full
Ejemplos de íconos
Algunas combinaciones posibles en tamaño por default:
.icon-filled
.icon-filled
.icon-primary
.icon-filled
.icon-secondary
.icon-filled
.icon-success
.icon-filled
.icon-danger
.icon-filled
.icon-warning
.icon-filled
.icon-info
.icon-outline
.icon-outline
.icon-primary
.icon-outline
.icon-secondary
.icon-outline
.icon-success
.icon-outline
.icon-danger
.icon-outline
.icon-warning
.icon-outline
.icon-info
.icon-tinted
.icon-tinted
.icon-primary
.icon-tinted
.icon-secondary
.icon-tinted
.icon-success
.icon-tinted
.icon-danger
.icon-tinted
.icon-warning
.icon-tinted
.icon-info
.icon-clear
.icon-clear
.icon-primary
.icon-clear
.icon-secondary
.icon-clear
.icon-success
.icon-clear
.icon-danger
.icon-clear
.icon-warning
.icon-clear
.icon-info
Clases para botones
Tipos de botones
Parte con cualquiera de los 4 tipos de botones .btn-[type]
.btn-filled
.btn-outline
.btn-tinted
.btn-clear
Tamaño global del botón
Combina con cualquiera de las clases .btn-[size] para modificar el tamaño global:
.btn-s
Default
.btn-l
.btn-xl
Tamaño radius del botón
Combina con cualquiera de las clases .rd-[size] para modificar el border-radius:
.rd-none
.rd-s
Default
.rd-l
.rd-xl
.rd-full
Tamaño relleno del botón
Combina con cualquiera de las clases .pd-[size] para modificar el padding:
.pd-s
Default
.pd-l
.pd-xl
Estilos de botones
Combina con cualquiera de las clases .btn-[style] exclusivas para botones
Default
.btn-primary
.btn-secondary
.btn-sucess
.btn-danger
.btn-warning
.btn-info
Iconografía en botones
Las clases anteriores admiten el uso de iconografía en el botón de Bricks
Para sólo iconografía utilizar la clase .btn-icon
.btn-filled
.btn.icon
.btn-filled
.btn-primary
.btn.icon
.btn-filled
.btn-secondary
.btn.icon
.btn-filled
.btn-success
.btn.icon
.btn-filled
.btn-danger
.btn.icon
.btn-filled
.btn-warning
.btn.icon
.btn-filled
.btn-info
.btn.icon
Puedes combinar con clases de tamaño .btn-[size], clases de radius .rd-[size] y clases de relleno .pd-[size]
.btn-filled
.btn.icon
.btn-l
.rd-full
.btn-outline
.btn-icon
.rd-xl
.pd-s
.btn-tinted
.btn-icon
.btn-s
.pd-s
Otros
Puedes combinar con clases para deshabilitar un botón o subrayar su texto:
.btn-disabled
.btn-underline
Ejemplos
Default
.btn-filled
.btn-filled
.btn-disabled
.btn-outline
.btn-outline
.btn-disabled
.btn-tinted
.btn-tinted
.btn-disabled
.btn-clear
.btn-underlined
.btn-clear
.btn-underlined
.btn-disabled
Primary (action)
.btn-filled
.btn-primary
.btn-filled
.btn-primary
.btn-disabled
.btn-outline
.btn-primary
.btn-outline
.btn-primary
.btn-disabled
.btn-tinted
.btn-primary
.btn-tinted
.btn-primary
.btn-disabled
.btn-clear
.btn-primary
.btn-underlined
.btn-clear
.btn-primary
.btn-underlined
.btn-disabled
Secondary (action)
.btn-filled
.btn-secondary
.btn-filled
.btn-secondary
.btn-disabled
.btn-outline
.btn-secondary
.btn-outline
.btn-secondary
.btn-disabled
.btn-tinted
.btn-secondary
.btn-tinted
.btn-secondary
.btn-disabled
.btn-clear
.btn-secondary
.btn-underlined
.btn-clear
.btn-secondary
.btn-underlined
.btn-disabled
Success
.btn-filled
.btn-success
.btn-filled
.btn-success
.btn-disabled
.btn-outline
.btn-success
.btn-outline
.btn-success
.btn-disabled
.btn-tinted
.btn-success
.btn-tinted
.btn-success
.btn-disabled
.btn-clear
.btn-success
.btn-underlined
.btn-clear
.btn-success
.btn-underlined
.btn-disabled
Danger
.btn-filled
.btn-danger
.btn-filled
.btn-danger
.btn-disabled
.btn-outline
.btn-danger
.btn-outline
.btn-danger
.btn-disabled
.btn-tinted
.btn-danger
.btn-tinted
.btn-danger
.btn-disabled
.btn-clear
.btn-danger
.btn-underlined
.btn-clear
.btn-danger
.btn-underlined
.btn-disabled
Warning
.btn-filled
.btn-warning
.btn-filled
.btn-warning
.btn-disabled
.btn-outline
.btn-warning
.btn-outline
.btn-warning
.btn-disabled
.btn-tinted
.btn-warning
.btn-tinted
.btn-warning
.btn-disabled
.btn-clear
.btn-warning
.btn-underlined
.btn-clear
.btn-warning
.btn-underlined
.btn-disabled
Info
.btn-filled
.btn-info
.btn-filled
.btn-info
.btn-disabled
.btn-outline
.btn-info
.btn-outline
.btn-info
.btn-disabled
.btn-tinted
.btn-info
.btn-tinted
.btn-info
.btn-disabled
.btn-clear
.btn-info
.btn-underlined
.btn-clear
.btn-info
.btn-underlined
.btn-disabled
Surface 0
.bg-surface-0Surface 1
.bg-surface-1
.border
Surface 2
.bg-surface-2
.border
Surface 3
.bg-surface-3
.border
Surface 0 Inverted
.bg-surface-0-inv
Surface 1 Inverted
.bg-surface-1-inv
.border
Surface 2 Inverted
.bg-surface-2-inv
.border
Surface 3 Inverted
.bg-surface-3-inv
.border
Surface 0 Mixed
.bg-surface-0-mix
Surface 1 Mixed
.bg-surface-1-mix
.border
Surface 2 Mixed
.bg-surface-2-mix
.border
Surface 3 Mixed
.bg-surface-3-mix
.border