Mémo Design System B2C
Ajouter la classe directement sur l'élément texte (balise ou widget CE). Exemple : ds-h1-l sur un <span>, un <p> ou le titre CE → même rendu visuel qu'un <h1>, en taille large.
Seuls les titres H1 à H6 ont une échelle S / M / L. Sans suffixe ou avec -m = taille medium (défaut). -s = small, -l = large. Les titres ne sont pas forcés en majuscules — la casse vient du contenu. ds-h3-s à ds-h6-s : graisse 500.
Boutons : ds-btn-primary, ds-btn-secondary, ds-btn-add-to-cart — sur le lien ou le bouton.
Couleurs (variables CSS — variables.css)
Titres sémantiques (<h1>–<h6> — taille M par défaut)
Titre H1 — Lorem ipsum
Titre H2 — Lorem ipsum
Titre H3 — Lorem ipsum
Titre H4 — Lorem ipsum
Titre H5 — Lorem ipsum
Titre H6 — Lorem ipsum
Titres via classes DS (ds-h*-s / ds-h*-m / ds-h*-l)
Même rendu que les titres ci-dessus, mais applicable sur n'importe quelle balise. Exemple : ds-h1-l = profil H1 en taille large (44px).
ds-h1-s — Profil H1, taille S (26px)
ds-h1-m — Profil H1, taille M (32px)
ds-h1-l — Profil H1, taille L (44px)
ds-h2-s — Profil H2, taille S (18px)
ds-h2-m — Profil H2, taille M (21px)
ds-h2-l — Profil H2, taille L (36px)
ds-h3-s — Profil H3, taille S (16px)
ds-h3-m — Profil H3, taille M (18px)
ds-h3-l — Profil H3, taille L (24px)
ds-h4-s — Profil H4, taille S (15px)
ds-h4-m — Profil H4, taille M (16px)
ds-h4-l — Profil H4, taille L (18px)
ds-h5-s — Profil H5, taille S (13px)
ds-h5-m — Profil H5, taille M (14px)
ds-h5-l — Profil H5, taille L (15px)
ds-h6-s — Profil H6, taille S (10px)
ds-h6-m — Profil H6, taille M (11px)
ds-h6-l — Profil H6, taille L (12px)
Paragraphes
Paragraphe standard — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraphe chapo (p.strong) — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Texte justifié, graisse 700.
Paragraphe découvrir (p.discover) — En savoir plus sur notre gamme
Paragraphe primary (p.primary) — Texte en couleur primary
Prix
p.price — 129,00 € TTC
span.price — 129,00 € TTC
Listes à puces
Style automatique dans les zones de contenu (CMS, blog, fiches produit, widgets CE). Puce carrée couleur primary.
- Premier élément de liste
- Deuxième élément de liste
- Troisième élément de liste
Boutons DS (classes ds-btn-*)
Flèche caret incluse automatiquement (primary & secondary). États : normal, hover, clic.
Boutons PrestaShop natif (référence — modules & templates PS)
Récapitulatif des classes
Titres (avec échelle S / M / L) : ds-h1-s … ds-h6-l
Chapo : p.strong
Paragraphe : (aucune classe — style automatique)
Découvrir : p.discover
Couleur primary : p.primary
Prix : .price
Listes : (aucune classe — style automatique dans le contenu)
Boutons : ds-btn-primary, ds-btn-secondary, ds-btn-add-to-cart