UI-Kit
Les titres
Exemple de titre : .page-title
Les Typos
Exemple de titre H1
Font Family
forma-djr-display
Font Weight
700 (Bold)
Font Size
60px (34px mobile)
CSS Class
.h1
Exemple de titre H2
Font Family
forma-djr-display
Font Weight
500 (Medium)
Font Size
32px (28px mobile)
CSS Class
.h2
Exemple de titre H3
Font Family
forma-djr-display
Font Weight
500 (Medium)
Font Size
20px
CSS Class
.h3
Exemple de CTA
Font Family
forma-djr-display
Font Weight
500 (Medium)
Font Size
18px
CSS Class
.cta
Exemple de texte body large
Font Family
DM Sans
Font Weight
400 (Regular)
Font Size
20px
CSS Class
.body-large
Exemple de texte body large strong
Font Family
DM Sans
Font Weight
600 (Semibold)
Font Size
20px
CSS Class
.body-large-strong
Exemple de texte body small
Font Family
DM Sans
Font Weight
400 (Regular)
Font Size
16px
CSS Class
.body-small
Exemple de texte body small strong
Font Family
DM Sans
Font Weight
600 (Semibold)
Font Size
16px
CSS Class
.body-small-strong
Les Couleurs
Dark
#011936
Texte principal, headers
White
#FFFFFF
Arrière-plans, texte inversé
Neutral
#FBFCFE
Arrière-plan léger
Secondary 1
#D64D4D
Boutons primaires, accents
Secondary 2
#27187E
Boutons secondaires, liens
Secondary 3
#F1F2F6
Arrière-plans subtils
Les Boutons
Classes utilitaires pour les boutons
Les Icons
Comment utiliser un icône
{{ svg_icon('icon_name') }}Remplacez icon_name par le nom de l'icône souhaité
Liste des icônes disponibles
Les Cards
Cards Post
{{ include('cards/post.twig', {'post':post}) }}