https://www.alpy.com/fr/location-ski/partner-anpaski
Réservez votre matériel de ski en ligne
Nos services
Location de matériel de ski et snowboard Vente d'accessoires Gardiennage de matériel
Le magasin La station
+376 647 595 Contact
Réserver mon équipement

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

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