Guide de styles - Styles de références
Liens - guide de style
Références générales
Couleurs d'arrière-plan
À appliquer sur une Row ou une Column
Erpi-Primary
class = bg-primary
(hexa : #006c76)
Erpi-Primary-Dark
class = bg-secondary
(hexa : #005e66)
Couleurs d'arrière-plan - Catégories
Préscolaire-Et-Primaire
class = bg-complementary-1
(hexa : #f4c961)
Secondaire
class = bg-complementary-2
(hexa : #00cee0)
Primaire-Et-Secondaire-Canada
class = bg-complementary-3
(hexa : #60d77d)
Collégial-Et-Universitaire
class = bg-complementary-4
(hexa : #F47782)
Couleur de texte
À appliquer sur une Row, une Column ou un bloc Text
Texte blanc
class = white
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
Styles de bouton
Elements > Buttons ou Elements > Texts (et format Button)
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
Liste des icônes
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