UI-Kit

Les titres

Exemple de titre : .page-title

Les Typos

Exemple de titre H1

Font Family

Oswald

Font Weight

500 (Medium)

Font Size

70px (34px mobile)

CSS Class

.h1

Exemple de titre H2

Font Family

Oswald

Font Weight

500 (Medium)

Font Size

32px (28px mobile)

CSS Class

.h2

Exemple de titre H3

Font Family

Oswald

Font Weight

500 (Medium)

Font Size

20px

CSS Class

.h3

Exemple de CTA

Font Family

Oswald

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

#051439

Texte principal, headers

White

#FFFFFF

Arrière-plans, texte inversé

Neutral

#FBFCFE

Arrière-plan léger

Primary

#EC5B22

Boutons primaires, accents

Secondary 2

#27187E

Boutons secondaires, liens

Secondary 3

#F1F2F6

Arrière-plans subtils

Dark 100

70% opacity

Overlays, fonds transparents

Dark 200

40% opacity

Textes secondaires

Dark 300

10% opacity

Bordures subtiles

Primary 200

10% opacity

Backgrounds légers primary

Gradient Primary

#D62828 → #FF861C

Backgrounds dégradés

Les Boutons

.btn-primary
Background: secondary-1, hover: secondary-2

.btn-primary-reversed
Background: secondary-2, hover: secondary-1

.btn-secondary
Border + background white, hover: secondary-2

.btn-large
Comme secondary mais largeur fixe 251px

.btn-large.inactive
Version désactivée avec border dark-10

.btn-show-map
Bouton texte simple avec gap 4px

.swiper-prev-btn / .swiper-next-btn
Boutons circulaires 60px pour navigation

.btn-unstyled
Bouton sans style pour cas spéciaux

Classes utilitaires pour les boutons

Icône 24x24

.btn-icon
Classe pour dimensionner les icônes (24x24px)

Icône rotée

.rotate
Classe pour rotation 180° des icônes

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}) }}