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