- Cette page présente toutes les configurations possibles du Generic Block 2026, FAQ 2026 et Citation.
- Note : Les images doivent être ajoutées manuellement via le CMS Nova après le seeding.
[1] Image Left + Text Right (White Wrapper)
Sous-titre entre titre et description
Ce bloc montre le style Image à gauche, Texte à droite avec un fond gris clair pour le wrapper. Le badge jaune est visible au-dessus.
-
Checkmark jaune avec texte descriptif
-
Deuxième élément de la liste
-
Troisième élément de démonstration
Texte complémentaire sous le CTA
[2] Image Right + Text Left (Blue Wrapper) avec titre secondaire
Bloc bleu avec image à droite. Le titre secondaire est en jaune et en italique. Les checkmarks jaunes contrastent sur le fond sombre.
-
Avantage numéro 1 en texte blanc
-
Avantage numéro 2 sur fond bleu
[3] Text Top + Image Bottom (No Wrapper, Orange BG)
Le fond est orange très léger sans wrapper
Ce style place le texte centré au-dessus et l'image en dessous. Idéal pour les sections qui mettent en avant du contenu textuel avec une illustration de support.
Gratuit et sans engagement
[4] Image Top + Text Bottom (Full Screen)
Bloc en pleine largeur avec l'image au-dessus du texte. Le titre est en sans-serif noir. Aucun wrapper n'est appliqué.
[5] Badge Plain Text (Centré)
Le badge est en texte simple blanc, centré au-dessus du titre. Fond bleu primary.
[6] Badge Yellow Box (Gauche)
Le badge est dans un encadré jaune avec du texte blanc. Positionné à gauche.
[7] Titre Serif avec complément italic jaune
Sous-titre gris sous le titre principal
Démonstration d'un titre serif avec un complément en italic jaune et un sous-titre gris.
[8] Titre Sans-Serif - complément non-italic bleu
Sous-titre en bleu primary
Titre sans-serif noir avec un complément non-italic en bleu. Le sous-titre est aussi bleu.
[9] CTA Blue - Sous le texte
Le bouton bleu (primary) apparaît directement sous le texte, aligné à gauche.
Sous-texte du CTA
[10] CTA Yellow - Sous le wrapper
Le bouton jaune apparaît centré sous le wrapper entier (image + texte).
Gratuit et sans engagement
[11] Image No Margin (touche les bords)
L'image touche les bords du wrapper bleu, sans aucune marge ni radius aux coins du wrapper.
[12] Image Small Margin (avec radius)
L'image a une petite marge et conserve des coins arrondis. Similaire à l'ancien no-margin mais avec radius.
[13] Image Large Margin
L'image a une grande marge autour, créant un effet de "cadre" avec beaucoup d'espace.
[14] Video à gauche + Texte à droite
L'image est remplacée par une vidéo YouTube avec un bouton play overlay. Cliquer lance la lecture.
[15] Texte à gauche + Video à droite
Configuration idéale pour un bloc commercial avec témoignage vidéo.
-
Accompagnement humain
-
Démarches simplifiées
[16] Fond gris clair (#f7f7fc)
Bloc avec fond gris clair, sans wrapper.
[17] Fond blanc + wrapper blanc
Wrapper blanc sur fond blanc - utile quand on veut le padding du wrapper mais pas de changement de couleur.
“Choisir un lieu de dispersion, c'est avant tout choisir un dernier geste qui vous ressemble, tout en respectant la loi.”
“Ceci est un exemple de citation simple avec un dégradé violet à gauche. Idéal pour mettre en avant un témoignage ou une phrase forte.”
— Guillaume Brun, CEO Everlife
Voici un exemple de bloc d'information "Le saviez-vous" avec une bordure bleue à gauche et un fond bleu très clair. Parfait pour les faits intéressants ou les notes importantes.
Bloc info sans titre - juste le texte avec la bordure bleue et le fond clair. Utile pour des notes de bas de section.
FAQ 2026 Showcase
6 questions avec chevrons et titre centré en haut
Answer #1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Answer #2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Answer #3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Answer #4: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Answer #5: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Answer #6: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
