Typographie
Balises HTML Headings
Les balises HTML définissent les styles d'en-tête par défaut.
Tous les titres H1

Rubrique 1

Tous les titres H2

Rubrique 2

Tous les titres H3

Rubrique 3

Tous les titres H4

Rubrique 4

Tous les titres H5
Rubrique 5
Tous les titres H6
Rubrique 6
Classes de titres
Classes de titres lorsque le style typographique ne correspond pas à la balise HTML par défaut.
style d'en-tête-h1

Style d'en-tête-h1

style d'en-tête-h2

Style d'en-tête-h2

style d'en-tête-h3

Style d'en-tête-h3

style d'en-tête-h4

Style d'en-tête-h4

style d'en-tête-h5

Style d'en-tête-h5

style d'en-tête-h6

Style d'en-tête-h6

Autres balises HTML
Les balises HTML définissent les styles de texte par défaut.
Tous les paragraphes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tous les liens
Tous les liens
Toutes les citations de bloc
Citation en bloc
Toutes les listes non ordonnées
  • Pas de liste à puces

  • Pas de liste à puces

Toutes les listes non ordonnées
  • Pas de liste à puces

  • Pas de liste à puces

Toutes les listes ordonnées
  1. Pas de liste à puces

  2. Pas de liste à puces

  3. Pas de liste à puces

Tailles de texte
Classes de tailles de texte lorsque la taille de la typographie ne correspond pas à la balise HTML par défaut.
taille du texte-grand

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

taille de texte-régulière

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

taille du texte-petit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

légende

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Poids du texte
Classes de poids du texte lorsque le poids de la typographie ne correspond pas à la balise HTML par défaut.
poids du texte-xbold
poids-texte-xbold (800)
texte en gras
texte-weight-bold (700)
poids du texte-semibold
poids du texte-semibold (600)
poids du texte-moyen
poids du texte-moyen (500)
poids du texte-normal
poids du texte-normal (400)
poids du texte-léger
poids du texte-léger (300)
Styles de texte
Classes de style de texte lorsque le style typographique ne correspond pas à la balise HTML par défaut.
style de texte-italique
style de texte-italique
style de texte-barré
style de texte-barré
style de texte-allcaps
style de texte-allcaps
style de texte-nowrap
style de texte-nowrap
texte-style-citation
texte-style-citation
style de texte-lien
style de texte-2 lignes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
style de texte-3 lignes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
style de texte en sourdine
style de texte en sourdine
Alignement du texte
Classes d'alignement du texte lorsque l'alignement de la typographie ne correspond pas à la balise HTML par défaut.
texte-alignement-gauche
texte-alignement-gauche
text-align-center
text-align-center
alignement du texte sur la droite
alignement du texte sur la droite
Texte riche
texte-riche-texte

Rubrique 1

Rubrique 2

Rubrique 3

Rubrique 4

Rubrique 5
Rubrique 6
Il s'agit d'une citation en bloc

L'élément de texte enrichi te permet de créer et de mettre en forme des titres, des paragraphes, des guillemets, des images et des vidéos en un seul endroit, au lieu d'avoir à les ajouter et à les mettre en forme individuellement. Il suffit de double-cliquer pour créer facilement du contenu.

Il s'agit d'un lien à l'intérieur d'un texte enrichi

  • Élément de la liste
  • Élément de la liste
  • Élément de la liste
  1. Élément de la liste
  2. Élément de la liste
  3. Élément de la liste
La légende se trouve ici
textes_riches_industries

Qu'est-ce qu'un élément de texte enrichi ?

L'élément de texte enrichi te permet de créer et de mettre en forme des titres, des paragraphes, des guillemets, des images et des vidéos en un seul endroit, au lieu d'avoir à les ajouter et à les mettre en forme individuellement. Il suffit de double-cliquer pour créer facilement du contenu.

Edition de contenu statique et dynamique

Un élément de texte enrichi peut être utilisé avec un contenu statique ou dynamique. Pour le contenu statique, il suffit de le déposer dans n'importe quelle page et de commencer à l'éditer. Pour le contenu dynamique, ajoute un champ de texte enrichi à n'importe quelle collection, puis connecte un élément de texte enrichi à ce champ dans le panneau des paramètres. Et voilà !

Comment personnaliser la mise en forme de chaque texte enrichi ?

Les titres, les paragraphes, les guillemets, les figures, les images et les légendes des figures peuvent tous être stylisés après l'ajout d'une classe à l'élément de texte enrichi à l'aide du système de sélecteurs imbriqués "Quand à l'intérieur de".

textes_riches_paiements

Qu'est-ce qu'un élément de texte enrichi ?

L'élément de texte enrichi te permet de créer et de mettre en forme des titres, des paragraphes, des guillemets, des images et des vidéos en un seul endroit, au lieu d'avoir à les ajouter et à les mettre en forme individuellement. Il suffit de double-cliquer pour créer facilement du contenu.

Edition de contenu statique et dynamique

texte

texte

Edition de contenu statique et dynamique

Un élément de texte enrichi peut être utilisé avec un contenu statique ou dynamique. Pour le contenu statique, il suffit de le déposer dans n'importe quelle page et de commencer à l'éditer. Pour le contenu dynamique, ajoute un champ de texte enrichi à n'importe quelle collection, puis connecte un élément de texte enrichi à ce champ dans le panneau des paramètres. Et voilà !

Comment personnaliser la mise en forme de chaque texte enrichi ?

Les titres, les paragraphes, les guillemets, les figures, les images et les légendes des figures peuvent tous être stylisés après l'ajout d'une classe à l'élément de texte enrichi à l'aide du système de sélecteurs imbriqués "Quand à l'intérieur de".

Couleurs
Couleur de fond
bg-color-white
#fff
bg-couleur-noir
#000
bg-color-1
#889e77
bg-color-2
#9e7777
bg-color-3
#334350
bg-color-4
#f4f4f7
bg-color-5
#ebedee
bg-color-6
#E2E7EE
bg-color-7
#f1f2f4
Couleur du texte
Gère les couleurs de texte récurrentes.
texte-couleur-1
Il s'agit d'un texte à l'intérieur d'un bloc div.
couleur-texte-2
Il s'agit d'un texte à l'intérieur d'un bloc div.
texte-couleur-3
Il s'agit d'un texte à l'intérieur d'un bloc div.
texte-couleur-4
Il s'agit d'un texte à l'intérieur d'un bloc div.
Éléments de l'interface utilisateur
Boutons
bouton
est-secondaire
lien-texte
flèches splide
Positionnement à gauche des flèches du curseur
flèches splide
Position à droite des flèches du curseur
flèches splide
top-left-position-slider-arrows
flèches splide
flèches de positionnement du curseur en bas à gauche
splide__arrow
circle-slider-arrow
splide__arrow--prev
circle-slider-arrow-prev
splide__arrow--next
circle-slider-arrow-next
splide__pagination__page
point circulaire
splide__pagination__page
point circulaire
est-actif
splide__pagination__page
point circulaire
splide__pagination__page
point circulaire
est-actif
splide__arrow
circle-slider-arrow-dark
splide__arrow--prev
circle-slider-arrow-prev-dark
splide__arrow--next
circle-slider-arrow-next-dark
splide__pagination
pagination du curseur de droite
Éléments du formulaire
étiquette du champ
formulaire-entrée
formulaire-entrée
is-text-area
formulaire-entrée
is-select-input
formulaire-case à cocher
formulaire-radio
bouton
Merci! Votre demande a bien été reçue!
Oups! Une erreur s’est produite lors de la soumission du formulaire.
Icônes (Image)

hauteur de l'icône-xxsmall

hauteur de l'icône-xsmall

hauteur de l'icône-petit

hauteur de l'icône-moyenne

hauteur de l'icône-grandeur

hauteur de l'icône-xlarge

hauteur de l'icône-personnalisée1

icon-1x1-xxsmall

icon-1x1-xsmall

icon-1x1-petit

icon-1x1-medium

icône-1x1-large

icon-1x1-xlarge

icon-1x1-custom1

Icônes (HTML Embed)
Les icônes HTML embedded te permettent de contrôler la couleur de l'icône au survol.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom1

Classes de structure
Structure de base définie et flexible que nous pouvons utiliser sur toutes les pages ou sur la plupart d'entre elles.
page-wrapper
enveloppe principale
conteneur-petit
conteneur-medium
conteneur-large
padding-global
padding-section-small
section de remplissage-médium
section de remplissage-grand
groupe de boutons
Largeurs maximales
Utilise la propriété CSS max-width pour limiter le contenu interne à une largeur maximale.
max-width-full
max-width-full-tablet
max-width-full-portrait
largeur maximale du paysage complet
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Les coussins
Cours de direction
padding-bottom
haut de la page
padding-vertical
remplissage-horizontal
remplissage-gauche
padding-right
Classes de taille
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
rembourrage-moyen
rembourrage-grandeur
rembourrage-xlarge
rembourrage-xxlarge
rembourrage-important
remplissage-xhuge
padding-xxhuge
rembourrage-personnalisé1
rembourrage-personnalisé2
rembourrage-personnalisé3
Marges
Cours de direction
marge-bas
marge-haut
marge-verticale
marge-horizontale
marge-gauche
marge-droite
Classes de taille
marge-0
marge minuscule
margin-xxsmall
margin-xsmall
marge-petite
marge-moyenne
marge-grande
marge-xlarge
margin-xxlarge
marge-grande
marge-xhuge
margin-xxhuge
marge-custom1
marge-personnalisée2
marge-custom3
Classes d'utilité
Des classes utilitaires utiles que nous aimons utiliser dans la plupart de nos projets pour construire plus rapidement.
cacher
Cet élément est caché
cacher la tablette
cacher-mobile-portrait
cacher le paysage mobile
débordement-visible
débordement-caché
débordement-auto
défilement de débordement
pointeur-événements sur
pointeur-événements-off
couche
div-square
espacement-nettoyage
aligner-center
z-index-1
z-index-2
display-inlineflex
margin-top-auto
du bas