Sections
The section component is used to delimit sections in the page
On a section you can:
- Add a background colour
- Add a background image
- Add drop shadows to delimit content without adding a background colour to the section
- Manage paddings (S = 16px / M = 32px / L = 48px / XL = 64px)
→ We usually have a padding of 64px between each section
- Manage margins (same specs as paddings)
→ Use only when necessary
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.