# Sessùn - Composants pages "Nos engagements" ###### tags: `Liste` `Flow` `Composant` `Sessùn` ## Bannière avec titre ![](https://i.imgur.com/1ebVzSZ.png) --- ## Image visible et long texte ### Image à droite ![](https://i.imgur.com/AtZwkgA.jpg) ### Image à gauche ![](https://i.imgur.com/7KXmcDl.jpg) ### Conseils Pour le bloc de texte: * Si le fond est clair (blanc/beige/crême/...) * Titre en n'importe quelle couleur * Texte en noir * Si le fond est une couleur foncée * Titre en blanc * Texte en blanc --- ## 2 colonnes avec titres et textes ### Taille du texte normale (14px) ![](https://i.imgur.com/GKlGnxx.png) ### Taille du texte plus grande (20px) ![](https://i.imgur.com/glajsy7.png) ### Conseils * S'il y a des titres * Utiliser la taille de texte normale (14px) * S'il n'y a pas de titres et que le composant est utilisé comme un texte chapeau * Utiliser la taille de texte plus grande (20px) --- ## Couleur de fond (page) ![](https://i.imgur.com/YUUXm3x.png) --- ## Carte interractive ![](https://i.imgur.com/XaH2fia.png) --- ## Citation avec marge ![](https://i.imgur.com/SY11Xw9.png) --- ## Viméo et texte ![](https://i.imgur.com/ztYPNZN.png) --- ## Bloc image/vidéo/viméo, texte et 3 images ### Droite ![](https://i.imgur.com/jbw9wn8.png) ### Gauche ![](https://i.imgur.com/fZN54Ry.png) --- ## Nombres avec couleurs ![](https://i.imgur.com/HMjk5YQ.png) --- ## 4 images avec titres et boutons ![](https://i.imgur.com/n1iJI8o.png) ![](https://i.imgur.com/ZSnYTfI.png) --- ## 1 nombre avec description ![](https://i.imgur.com/owZil49.png) --- ## Introduction avec bloc de 3 images et textes ![](https://i.imgur.com/J7cKgGV.png) --- ## Image large, texte et bouton ### Droite ![](https://i.imgur.com/wR1Dtvt.png) ### Gauche ![](https://i.imgur.com/YmyTtWo.png) --- ## 2 bloc d'images titres et boutons ![](https://i.imgur.com/6CuQIDc.png) --- ## Simple CTA ![](https://i.imgur.com/Tzgm2MA.png) --- --- # Conseils globaux ## Viméo ### Afficher un poster sur la vidéo * Sur le compte Viméo * Gérer les vidéos * Cliquer sur la vidéo * Onglet "général" * Vignette (configurer la vignette)