Styleguide
Colores
Color principal: var(--color-primary)
Color secundario: var(--color-secondary)
Color acento: var(--color-accent)
Tipografía
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Texto base: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tamaño grande: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Negrita: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur et minus doloremque, corporis porro, eos distinctio facilis maxime commodi accusantium consequatur, fuga quod quo dolor. Facilis facere velit ducimus iste.
Lorem ipsum dolor sit
Listas
Definition list
- Definition List Title
- This is a definition list division.
Ordered List
- List Item 1
-
List Item 2
- List Item 1
-
List Item 2
- List Item 1
- List Item 2
- List Item 3
- List Item 3
- List Item 3
Unordered List
- List Item 1
-
List Item 2
- List Item 1
-
List Item 2
- List Item 1
- List Item 2
- List Item 3
- List Item 3
- List Item 3
Details & Summary
Expand for details
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique voluptatibus dicta consequuntur animi. Quaerat facilis quidem unde eos! Ipsa.
Address
Address direction08000
BCN
Horizontal rules
Tables
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 4 | Table Footer 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Select menus
Checkboxes
Radio buttons
Textarea
HTML5 inputs
DataList
Range
Buttons
Borders
Borde delgado
Borde mediano
Borde grueso
Shadows
Sombra pequeña
Sombra mediana
Sombra grande
Sombra extra grande
Containers
Contenedor pequeño
Contenedor mediano
Contenedor grande
Contenedor extra grande