Boutons et cartes

Boutons

Bouton principal (CTA)

Desktop : Arrondi : 32px | Ombre sur hover : 4px 4px 10px rgba (0,0,0,0.1) | Texte : 1.1rem | Marge interne : 16px 32px

Mobile : Arrondi : 32px | Texte : 1rem | Marge interne : 12px 24px

Bouton secondaire : action alternative ou complémentaire (ex : voir plus,)

Desktop : Arrondi : 32px | Ombre sur hover : 4px 4px 10px rgba (0,0,0,0.1) | Texte : 0.95rem | Marge interne : 14px 28px

Mobile : Arrondi : 32px | Ombre sur hover : 4px 4px 10px rgba (0,0,0,0.1) | Texte : 0.9rem | Marge interne : 10px 22px

Marges et Espacements autour des boutons

Desktop

Entre deux boutons côte à côte : 16px à 24px
Entre un bouton et un texte au-dessus : 24px à 32px
Entre un bouton et le bas d’un bloc : 32px minimum pour laisser respirer

Mobile

Entre deux boutons côte à côte : 8px
Entre un bouton et un autre élément (texte, image, etc.) : 16px
Dans une section CTA (comme un bouton sous un texte explicatif) : 24px
Dans une liste verticale (ex : plusieurs boutons d’action) : 12px

Ancres Haut de page

CTA

Le CTA (Call-To-Action) est un élément clé de conversion qui guide l’utilisateur vers une action spécifique : inscription, exploration, page secondaire mise en avant… Placé stratégiquement, il capte l’attention et facilite la navigation en orientant le parcours utilisateur.

Desktop

Container gauche : Espacement ligne 24px; Titre H2 : 3.5rem (tablette 3rem) ; Graisse : 800; Interlignage : 1.1em | Baseline : Corps (texte principal) | Bouton Principal

Container droit : Image : 500x625px; Arrondi : 16px; Ombre : Couleur principal de la photo rgba(0, 0, 0, 0.15); Horizontal et vertical 10, flou 30

Mobile

Container Principal : Alignement vertical (image container haut – Texte container bas) | Espace entre éléments : 20px

Container haut (image) : Image : 500x625px; Arrondi : 16px; Ombre : Couleur principal de la photo rgba(0, 0, 0, 0.15); Horizontal et vertical 10, flou 30

Container bas (texte) : Titre H2 : 1.8rem; Graisse : 800; Interlignage : 1.1em | Baseline : Corps (texte principal) | Bouton Principal

Modèle CTA pleine largeur

Obtenez plus de détails et faites avancer
vos projets,

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Modèles de fiches