Sections

Guide d’utilisation et bonnes pratiques pour la gestions des espaces (padding/margin) et fonds.

Les composants se trouvent dans des sections, il y a plusieurs façons de les délimiter dans la page

Sur une section on peut :

Ajouter une couleur de fond
Ajouter une image de fond
Ajouter des ombres portées pour délimiter du contenu sans mettre de couleur de fond à la section
Gérer les paddings (S = 16px / M = 32px / L = 48px / XL = 64px)
→ Nous avons l’habitude d’avoir un padding de 64px entre chaque section
Gérer les margins (mêmes specs que les paddings)
→ À utiliser qu’en cas de nécessité

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.

shadow-inset-top : ombre portée interne sur le haut du bloc

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 : ombre portée externe sur le haut du bloc

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 : ombre portée externe sur le bas du bloc

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.