Guide de styles - Styles de références
Références générales
Couleurs d'arrière-plan
À appliquer sur une Row ou une Column
Cheneliere-Primary
class = bg-primary
(hexa : #1d63ad)
Cheneliere-Primary-Dark
class = bg-secondary
(hexa : #004379)
Grey-Light
class = bg-grey-light
(hexa : #f4f5f9)
Grey-Dark
class = bg-grey-dark
(hexa : #36404c)
Dégradé Grey-Light
class = bg-light-gradient
Couleur de texte
À appliquer sur une Row, une Column ou un bloc Text
Texte blanc
class = white
Alignement carrousel
À appliquer sur une Carrousel (slider)
- Classe : v-center
Style liste avec crochets
Appliquer le format List Check Style à une liste UL
Exemple de liste
- Élément 1
- Élément 2
- Élément 3
Exemple de liste
- Élément 1
- Élément 2
- Élément 3
Boutons avec icône
Bouton Play
Exemple - Button type : link
Appearearance : inline
Appearearance : stack
Obligatoire : pour avoir le bon affichage des boutons, il est important que les boutons contiennent un lien
Styles de liens
Pour éléments qui ne doivent pas avoir de balises <a> soulignées : ajouter la classe links-no-underline
Pour éléments dont les balises <a> qui doivent être soulignées seulement lors du passage de la souris (hover): ajouter la classe links-reverse
Exemples :
Lien sans soulignage (class = links-no-underline)
Lien avec soulignage inversé (class = links-reverse)
Liste des icônes
Ancres
Les liens ancrés remontant le contenu ancré au haut de la page, le contenu est partiellement caché par le menu sticky. Pour contrer ce comportement, une classe a été créé. Donc, sur l'élément ancré (id=""), ajouter la classe suivante (class="id-target")
Mobile
Inverser l'ordre d'affichage des colonnes en mobile
Appliquer la classe reverse-col-mobile à la Row
Élément 2 en mobile
Élément 1 en mobile
Sur mobile, aligner à gauche du contenu centré ou aligné à droite en desktop.
Appliquer la classe mobile-left à l'élément qui a un autre alignement dans le page builder
Titre à droite
Affichage uniquement en desktop ou mobile
*Attention à l'utilisation. Nous cherchons à avoir la même information sur tous les écrans. Ces classes pourraient principalement être utiliser pour des images d'accompagnements par exemple.
Pour affichage uniquement sur Desktop, appliquer la classe pagebuilder-mobile-hidden
Pour affichage uniquement sur Mobile, appliquer la classe pagebuilder-mobile-only