---
# System prepended metadata

title: Sessùn - Composants pages "Nos engagements"
tags: [Composant, Flow, Sessùn, Liste]

---

# 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)