UI Kit - Guide de style
Cette page présente tous les composants UI du thème Faire Ma Rénovation.
Typographie
Balises HTML
Heading 1 - Titre principal
Heading 2 - Titre de section
Heading 3 - Sous-titre
Heading 4 - Titre de carte
Heading 5 - Petit titre
Heading 6 - Très petit titre
Classes CSS (permettent de séparer l'apparence de la sémantique)
.h1 sur un paragraphe
.h2 sur un h3
.h3 sur un h4
.h4 sur un h5
.h5 sur un h6
.h6 sur un paragraphe
.p sur un h3 (style paragraphe)
Texte
Paragraphe standard. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Texte en gras et texte en italique.
Couleurs
Primary
Primary Dark
Secondary
Secondary Dark
Gray 100
Gray 500
Gray 800
Gray 900
Success
Warning
Error
Info
Boutons
Variantes
Tailles
Badges
Default
Primary
Secondary
Card Badge
Formulaires
Carousel
Espacements
XS (0.25rem)
SM (0.5rem)
MD (1rem)
LG (1.5rem)
XL (2rem)
2XL (3rem)
Border Radius
SM
MD
LG
XL
Full
Shortcodes
[fmr_posts] - Grille d'articles
Affiche une grille d'articles de blog.
Paramètres
| Attribut | Défaut | Description |
|---|---|---|
count |
3 | Nombre d'articles à afficher |
columns |
3 | Nombre de colonnes (2, 3 ou 4) |
title |
(vide) | Titre de la section |
show_excerpt |
false | Afficher l'extrait |
category |
(vide) | Slug de la catégorie à filtrer |
ids |
(vide) | IDs spécifiques (séparés par virgules) |
Exemples
[fmr_posts] [fmr_posts count="6" columns="3"] [fmr_posts title="Nos derniers articles" show_excerpt="true"] [fmr_posts category="conseils" count="4" columns="2"] [fmr_posts ids="1,2,3"]
Aperçu
Derniers articles
[fmr_service_grid] - Grille de services
Affiche une grille de services.
Paramètres
| Attribut | Défaut | Description |
|---|---|---|
parent |
0 | ID du service parent (0 = services racine) |
columns |
4 | Nombre de colonnes (2, 3 ou 4) |
heading_tag |
h3 | Balise HTML pour les titres |
show_cta |
false | Afficher boutons CTA |
Exemples
[fmr_service_grid] [fmr_service_grid parent="123"] [fmr_service_grid columns="3" show_cta="true"]
Aperçu
[fmr_avis_carousel] - Carousel d'avis
Affiche un carousel d'avis clients.
Paramètres
| Attribut | Défaut | Description |
|---|---|---|
title |
Ce que nos clients disent | Titre de la section |
limit |
6 | Nombre d'avis à afficher |
Exemples
[fmr_avis_carousel] [fmr_avis_carousel title="Témoignages" limit="3"]