TYPOGRAPHIE
Titre principal
h1-title
Titre de section
h2-section-title
Titre de bloc
h3-block
Paragraphe sous H1
p-h1
Paragraphe sous H2
p-h2-section
Paragraphe sous H3
p-h3-block
Petit texte principal
text-main
Petit texte secondaire
text-secondary
Titre petit texte
text-title
Avis clients pour la preuve sociale
blockquote-testimonial
" Ceci est la mise en forme pour les citations inspirantes. "
blockquote-citation
Lorem ipsumlink-ok
CLASSES UTILITAIRES
Centrer le texte
text-center
Mettre en gras forcé
font-bold
Mettre en régulier forcé
font-regular
Espace intérieur à gauche et à droite (24 px)
padding-x-24
Espace intérieur à gauche et à droite (32 px)
padding-x-32
Espace intérieur à gauche et à droite (64 px)
padding-x-64
Micro-espacement entre petits éléments
spacer-xs
Séparation légère, ex. bouton/texte
spacer-sm
Espacement standard dans un bloc
spacer-md
Séparer visuellement deux zones
spacer-lg
Créer une vraie respiration entre sections
spacer-xl
Grand espace, effet "aéré", design premium
spacer-2xl
CTA
Bouton plus gros ?
Bouton spécial ?
Color
These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.
Text colors
font color - dark grey
#121212
font color - white
#ffffff
Main colors
BLUE
#142A3E
DARK GREY
#121212
YELLOW
#e4a94b
CREAM
#ffefd5
Neutral colors
LIGHT GREY 1
#142A3E
N/a
#FFFFFF
LIGHT GREY 2
#142A3E
N/A
#FFFFFF
Logo
Components
These are a few example components.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.