---
# System prepended metadata

title: Maradji - Composants
tags: [Composant, Flow, Maradji, Liste]

---

# Maradji - Composants
###### tags: `Liste` `Flow` `Composant` `Maradji`
## Informations
### Marges des composants
#### Page home et fiche produit
Marge de 120px entre les composants
![](https://i.imgur.com/Xq61tJb.png)
#### Page listing produits (édito)
Marge de 80px entre les composants
![](https://i.imgur.com/jM8bprW.png)
#### Blog
Marge de 60px entre les composants
![](https://i.imgur.com/uxdgjnJ.png)
### Couleur
La couleur dominante peut être modifiée dans la config du site.


## Load screen (Composant ?) -> Pour le lookbook
![](https://i.imgur.com/hFBH3Pp.png)

---
---
## Ban (Générique)
![](https://i.imgur.com/IvvnGT0.jpg)
ou (dans la page)
![](https://i.imgur.com/T179ils.jpg)
### Texte sombre/claire
### Position texte
### Emplacement
### [Composant différent dans le blog](https://hackmd.io/JpJxNEYwTDGy4X48q_WeqA#Citation-Reprendre-le-composants-des-pages-et-ajouter-des-modification-uniquement-pour-blog)

---
---
## Réassurances (Générique / Mobile avec slider)
### Bureau
![](https://i.imgur.com/bFLFvAl.png)
ou
![](https://i.imgur.com/Z7GPFAr.png)
### Mobile - Avec/sans slider
![](https://i.imgur.com/J5iHuya.png)
ou
![](https://i.imgur.com/xSHyOwJ.png)

---
---
## Image/video/slider, logo animé, composition d'images
![](https://i.imgur.com/1Nahxg1.jpg)

---
---
## Citation (Reprendre la structure de pdb et modifications)
![](https://i.imgur.com/Y5LvhN9.png)
### [Composant différent dans le blog](https://hackmd.io/JpJxNEYwTDGy4X48q_WeqA#Citation-Reprendre-le-composants-des-pages-et-ajouter-des-modification-uniquement-pour-blog)

---
---
## Slider de catégories
![](https://i.imgur.com/GmQV2jP.jpg)
### Texte sombre/claire

---
---
## Slider de plusieurs catégories (à faire en générique)
![](https://i.imgur.com/7DYT4sG.jpg)
Les onglets sont déjà créé pas de puplicable
Les produits sont duplicables

---
---
## Texte/Citation, composition d'images et produit
![](https://i.imgur.com/X2J3mRe.png)
ou
![](https://i.imgur.com/JIfOOoC.png)
ou (listing)
![](https://i.imgur.com/fV0MdWY.png)
### Gauche/Droite
### Avec/sans fond
### Block de texte/citation

---
---
## Texte, images/vidéos et produit (Générique, faire des modifications)
![](https://i.imgur.com/jvFMLgU.png)
ou
![](https://i.imgur.com/T9CdFIH.png)
ou
![](https://i.imgur.com/dymLRUl.png)
ou (listing)
![](https://i.imgur.com/dNJAltf.png)
### Gauche/Droite (générique)
### Avec/sans fond (à faire)
### Block de texte/citation (à faire)
### [Composant différent dans le blog](https://hackmd.io/JpJxNEYwTDGy4X48q_WeqA#Texte-imagesvid%C3%A9os-et-produit-Reprendre-le-composants-des-pages-et-ajouter-des-modification-uniquement-pour-blog)


---
---
## Colonnes de textes (Générique, faire des modifications)
![](https://i.imgur.com/U75CSBc.png)

---
---
## Listing - Produits complexes (Générique)
![](https://i.imgur.com/M7pEMeB.png)
ou
![](https://i.imgur.com/WU122IH.jpg)
ou
![](https://i.imgur.com/KBSkXua.jpg)

---
---
## Listing - 3 produits dont 1 grand (Reprendre sur pdb)
![](https://i.imgur.com/FIGl7CF.jpg)
### Gauche/Droite

---
---
## Listing - 1 grand produit
![](https://i.imgur.com/OINxwF4.jpg)
### Texte sombre/claire

---
---
## Composants blog
#### Titre et texte simple (Reprendre sur pdb)
![](https://i.imgur.com/xX0B4dR.png)

---
---
#### Texte, images/vidéos et produit (Reprendre le composants des pages et ajouter des modification uniquement pour blog)
![](https://i.imgur.com/ljRuhVh.png)
ou
![](https://i.imgur.com/pL2DhCd.png)

---
---
#### Ban (Reprendre le composants des pages et ajouter des modification uniquement pour blog)
![](https://i.imgur.com/yhnEdKE.png)

---
---
#### CTA
![](https://i.imgur.com/JQw3ggV.png)
##### CTA à/au gauche/centre/droite

---
---
#### Citation (Reprendre le composants des pages et ajouter des modification uniquement pour blog)
![](https://i.imgur.com/avYAkSo.png)

---
---
## Composants lookbook
#### Texte/Image avec produit
![](https://i.imgur.com/5DzVDBU.png)
ou
![](https://i.imgur.com/14PXIV5.png)
ou
![](https://i.imgur.com/ncAxc79.jpg)
##### Gauche/Droite

---
---
#### 2 images côte à côte avec produits (Reprendre sur pdb)
![](https://i.imgur.com/8b7p2Bm.jpg)

---
---
#### 1 grande image avec produit (Reprendre sur pdb)
![](https://i.imgur.com/xt7XskM.jpg)

---
---
#### 3 images côte à côte avec produits (Reprendre uniquement la structure du composant sur pdb)
![](https://i.imgur.com/8zzedSI.jpg)

---
---