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
- GĂ©rer les paddings*
Desktop : S = 16px / M = 32px / L = 64px / XL = 120px
Mobile : S = 16px / M = 24px / L = 32px / XL = 80px - GĂ©rer les margins (mĂŞmes specs que les paddings)
→ Ă€ utiliser qu’en cas de nĂ©cessitĂ©
*Nous avons opté pour une mise en page plus aérée et épurée.
L’espacement recommandĂ© entre les sections est de 120 px sur desktop et 80 px sur mobile (padding XL).
En pratique, alternez généralement les paddings None / XL afin de conserver un rythme visuel harmonieux.
L’objectif reste toutefois de prĂ©server un espacement cohĂ©rent entre les sections, en privilĂ©giant un padding XL lorsque cela est possible.
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 | Blue 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 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 | Neutral Grey
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.