Secciones
El componente sección sirve para delimitar secciones en la página
En una sección puedes:
- Añadir un color de fondo
- Añadir una imagen de fondo
- Añadir sombras para delimitar el contenido sin añadir un color de fondo a la sección
- Gestionar los paddings (S = 16px / M = 32px / L = 48px / XL = 64px). → Normalmente tenemos un relleno de 64px entre cada sección
- Gestionar los márgenes (las mismas especificaciones que los paddings) → Usar sólo cuando sea necesario
Background color | Primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a risus quis enim efficitur accumsan a id quam. Fusce cursus urna non fringilla tempus. Vivamus consectetur lectus ut sem maximus mollis. Sed non sodales eros, id mollis enim. Phasellus laoreet augue nisl, non molestie dui dapibus in. Ut sit amet ligula diam. Phasellus condimentum tincidunt sem ac ornare. Quisque sit amet massa metus. Cras molestie odio pellentesque rhoncus vulputate. Maecenas a pulvinar turpis. Sed vulputate quis felis et vehicula. Donec tempus facilisis accumsan. Etiam nibh est, viverra quis ornare eu, posuere nec massa. Donec auctor sit amet quam sed imperdiet.
Background color | Secondary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a risus quis enim efficitur accumsan a id quam. Fusce cursus urna non fringilla tempus. Vivamus consectetur lectus ut sem maximus mollis. Sed non sodales eros, id mollis enim. Phasellus laoreet augue nisl, non molestie dui dapibus in. Ut sit amet ligula diam. Phasellus condimentum tincidunt sem ac ornare. Quisque sit amet massa metus. Cras molestie odio pellentesque rhoncus vulputate. Maecenas a pulvinar turpis. Sed vulputate quis felis et vehicula. Donec tempus facilisis accumsan. Etiam nibh est, viverra quis ornare eu, posuere nec massa. Donec auctor sit amet quam sed imperdiet.
Background color | Grey Light
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a risus quis enim efficitur accumsan a id quam. Fusce cursus urna non fringilla tempus. Vivamus consectetur lectus ut sem maximus mollis. Sed non sodales eros, id mollis enim. Phasellus laoreet augue nisl, non molestie dui dapibus in. Ut sit amet ligula diam. Phasellus condimentum tincidunt sem ac ornare. Quisque sit amet massa metus. Cras molestie odio pellentesque rhoncus vulputate. Maecenas a pulvinar turpis. Sed vulputate quis felis et vehicula. Donec tempus facilisis accumsan. Etiam nibh est, viverra quis ornare eu, posuere nec massa. Donec auctor sit amet quam sed imperdiet.
Background image | Text negative
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a risus quis enim efficitur accumsan a id quam. Fusce cursus urna non fringilla tempus. Vivamus consectetur lectus ut sem maximus mollis. Sed non sodales eros, id mollis enim. Phasellus laoreet augue nisl, non molestie dui dapibus in. Ut sit amet ligula diam. Phasellus condimentum tincidunt sem ac ornare. Quisque sit amet massa metus. Cras molestie odio pellentesque rhoncus vulputate. Maecenas a pulvinar turpis. Sed vulputate quis felis et vehicula. Donec tempus facilisis accumsan. Etiam nibh est, viverra quis ornare eu, posuere nec massa. Donec auctor sit amet quam sed imperdiet.
Background image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a risus quis enim efficitur accumsan a id quam. Fusce cursus urna non fringilla tempus. Vivamus consectetur lectus ut sem maximus mollis. Sed non sodales eros, id mollis enim. Phasellus laoreet augue nisl, non molestie dui dapibus in. Ut sit amet ligula diam. Phasellus condimentum tincidunt sem ac ornare. Quisque sit amet massa metus. Cras molestie odio pellentesque rhoncus vulputate. Maecenas a pulvinar turpis. Sed vulputate quis felis et vehicula. Donec tempus facilisis accumsan. Etiam nibh est, viverra quis ornare eu, posuere nec massa. Donec auctor sit amet quam sed imperdiet.
shadow-inset-top : internal drop shadow on the top of the block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a risus quis enim efficitur accumsan a id quam. Fusce cursus urna non fringilla tempus. Vivamus consectetur lectus ut sem maximus mollis. Sed non sodales eros, id mollis enim. Phasellus laoreet augue nisl, non molestie dui dapibus in. Ut sit amet ligula diam. Phasellus condimentum tincidunt sem ac ornare. Quisque sit amet massa metus. Cras molestie odio pellentesque rhoncus vulputate. Maecenas a pulvinar turpis. Sed vulputate quis felis et vehicula. Donec tempus facilisis accumsan. Etiam nibh est, viverra quis ornare eu, posuere nec massa. Donec auctor sit amet quam sed imperdiet.
shadow-outset-top : outer drop shadow on the top of the block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a risus quis enim efficitur accumsan a id quam. Fusce cursus urna non fringilla tempus. Vivamus consectetur lectus ut sem maximus mollis. Sed non sodales eros, id mollis enim. Phasellus laoreet augue nisl, non molestie dui dapibus in. Ut sit amet ligula diam. Phasellus condimentum tincidunt sem ac ornare. Quisque sit amet massa metus. Cras molestie odio pellentesque rhoncus vulputate. Maecenas a pulvinar turpis. Sed vulputate quis felis et vehicula. Donec tempus facilisis accumsan. Etiam nibh est, viverra quis ornare eu, posuere nec massa. Donec auctor sit amet quam sed imperdiet.
shadow-outset-bottom : outer drop shadow on the bottom of the block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a risus quis enim efficitur accumsan a id quam. Fusce cursus urna non fringilla tempus. Vivamus consectetur lectus ut sem maximus mollis. Sed non sodales eros, id mollis enim. Phasellus laoreet augue nisl, non molestie dui dapibus in. Ut sit amet ligula diam. Phasellus condimentum tincidunt sem ac ornare. Quisque sit amet massa metus. Cras molestie odio pellentesque rhoncus vulputate. Maecenas a pulvinar turpis. Sed vulputate quis felis et vehicula. Donec tempus facilisis accumsan. Etiam nibh est, viverra quis ornare eu, posuere nec massa. Donec auctor sit amet quam sed imperdiet.
shadow-inset-bottom : internal drop shadow on the bottom of the block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a risus quis enim efficitur accumsan a id quam. Fusce cursus urna non fringilla tempus. Vivamus consectetur lectus ut sem maximus mollis. Sed non sodales eros, id mollis enim. Phasellus laoreet augue nisl, non molestie dui dapibus in. Ut sit amet ligula diam. Phasellus condimentum tincidunt sem ac ornare. Quisque sit amet massa metus. Cras molestie odio pellentesque rhoncus vulputate. Maecenas a pulvinar turpis. Sed vulputate quis felis et vehicula. Donec tempus facilisis accumsan. Etiam nibh est, viverra quis ornare eu, posuere nec massa. Donec auctor sit amet quam sed imperdiet.