Guide de style Relume

Client-First V2.1 • Mis à jour le 09 janv. 2024
Typographie
Balises de titre HTML
Les balises HTML définissent les styles de titre par défaut.
Tous les titres H1

Titre 1

Tous les titres H2

Titre 2

Tous les titres H3

Titre 3

Tous les titres H4

Titre 4

Tous les titres H5
Titre 5
Toutes les titres H6
Titre 6
Classes de titres
Classes de titres lorsque le style typographique ne correspond pas à la balise HTML par défaut.
style-titre-h1

Style-titre-h1

style-titre-h2

Style-titre-h2

style-titre-h3

Style-titre-h3

style-titre-h4

Style-titre-h4

style-titre-h5

Style-titre-h5

style-titre-h6

Style-titre-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
Citation
Toutes les listes non ordonnées
  • Aucune liste à puces

  • Aucune liste à puces

Toutes les listes non ordonnées
  • Aucune liste à puces

  • Aucune liste à puces

Toutes les listes ordonnées
  1. Aucune liste à puces

  2. Aucune liste à puces

  3. Aucune 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.
text-size-large

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.

text-size-medium

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-texte-regular

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

taille-texte-tres-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.

Poids du texte
Classes de poids de texte lorsque le poids de la typographie ne correspond pas à la balise HTML par défaut.
poids-texte-xbold
poids-texte-xbold (800)
poids-texte-bold
poids-texte-bold (700)
poids-texte-semibold
poids-texte-semibold (600)
poids-texte-medium
poids-texte-medium (500)
poids-texte-normal
poids-texte-normal (400)
poids-texte-light
text-weight-light (300)
Styles de texte
Classes de style de texte lorsque le style de typographie ne correspond pas à la balise HTML par défaut.
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-2lines
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.
text-style-3lines
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-texte-faible
style-texte-faible
Alignement du texte
Classes d'alignement du texte lorsque l'alignement de la typographie ne correspond pas à la balise HTML par défaut.
alignement-texte-gauche
alignement-texte-gauche
alignement-texte-centre
alignement-texte-centre
alignement-texte-droite
alignement-texte-droite
Texte riche
texte-riche

Titre 1

Titre 2

Titre 3

Titre 4

Titre 5
Titre 6
Ceci est une citation

L'élément de texte riche vous permet de créer et de formater des titres, des paragraphes, des citations, des images et des vidéos en un seul endroit au lieu d'avoir à les ajouter et à les formater individuellement. Double-cliquez simplement et créez facilement du contenu.

Ceci est un lien dans un texte riche

  • Élément de liste
  • Élément de liste
  • Élément de liste
  1. Élément de liste
  2. Élément de liste
  3. Élément de liste
Icône d'image de substitution avec un fond gris et un symbole de montagne et de soleil au centre.
La légende va ici
Couleurs
Couleur de fond
Gérer les couleurs de fond récurrentes.
couleur-de-fond-noir
couleur-de-fond-blanc
couleur-de-fond-primaire
couleur-de-fond-secondaire
couleur-de-fond-tertiaire
couleur-de-fond-alternative
Couleur du texte
Gérer les couleurs de texte récurrentes.
text-color-white
text-color-white
text-color-black
text-color-black
text-color-primary
text-color-primary
text-color-secondary
text-color-secondary
text-color-alternate
text-color-alternate
Effets
Ombres de boîte
Les ombres vous permettent d'ajouter de la profondeur et du réalisme aux designs en positionnant les éléments sur un axe z.
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge
Éléments d'interface utilisateur
Boutons
button
button
petit
button
secondaire
button
secondaire
petit
button
tertiaire
button
tertiaire
petit
button
primaire
Pour l'utiliser sur un fond sombre, utilisez simplement la classe complémentaire est-alternatif
button
est-alternatif
button
est-alternatif
petit
button
secondaire
est-alternatif
button
secondaire
petit
est-alternatif
button
primaire
est-alternatif
Bouton
Boutons avec icônes
button
is-icon
button
petit
is-icon
button
secondaire
is-icon
button
secondaire
petit
is-icon
button
primaire
is-icon
button
primaire
is-icon
text-color-red
button
icône-seulement
button
petit
icône-seulement
button
secondaire
icône-seulement
button
secondaire
petit
icône-seulement
button
tertiaire
icône-seulement
button
tertiaire
petit
icône-seulement
button
primaire
icône-seulement
Éléments de formulaire
label-champ_formulaire
form_input
form_input
is-text-area
form_input
is-select-input
form_checkbox
form_radio
button
Merci ! Votre soumission a été reçue !
Oups ! Une erreur s'est produite lors de la soumission du formulaire.
Icônes (Image)

icon-height-xxsmall

icon-height-xsmall

icon-height-small

hauteur icône moyenne

hauteur icône grande

hauteur icône très grande

hauteur icône personnalisée1

icône 1x1 xx petite

icône 1x1 x petite

icône 1x1 petite

icône 1x1 moyenne

icône 1x1 grande

icône 1x1 très grande

icône 1x1 personnalisée1

Icônes (Intégration HTML)
Les icônes intégrées en HTML vous permettent de contrôler la couleur de l'icône au survol.

icône intégrée xx petite

icône intégrée x petite

icône intégrée petite

icône intégrée moyenne

icône intégrée grande

icône intégrée très grande

icône intégrée personnalisée1

Classes de structure
Structure principale définie et flexible que nous pouvons utiliser sur toutes ou la plupart des pages.
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group
Largeurs maximales
Utilisez la propriété CSS max-width pour limiter le contenu interne à une largeur maximale.
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait
max-width-xxlarge
max-width-xlarge
largeur-max-large
largeur-max-medium
largeur-max-small
largeur-max-xsmall
largeur-max-xxsmall
Rembarrages
Classes de direction
rembarrage-bas
rembarrage-haut
rembarrage-vertical
rembarrage-horizontal
rembarrage-gauche
rembarrage-droite
Classes de taille
rembarrage-0
rembarrage-minuscule
rembarrage-xxminuscule
rembarrage-xminuscule
rembarrage-small
rembarrage-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3
Marges
Classes de direction
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Classes de taille
margin-0
margin-tiny
marge-xxpetite
marge-xpetite
marge-petite
marge-moyenne
marge-grande
marge-xgrande
marge-xxgrande
marge-énorme
marge-xénorme
marge-xxénorme
marge-custom1
marge-custom2
marge-custom3
Épaisseurs
Système d'espacement unifié pour le projet.
espace-minuscule
espace-xxpetite
espace-xpetite
espace-petite
espace-moyenne
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge
Classes utilitaires
Classes utilitaires utiles que nous aimons utiliser dans la plupart de nos projets pour construire plus rapidement.
masquer
Cet élément est masqué
masquer-tablette
masquer-mobile-portrait
masquer-mobile-paysage
dépassement-visible
dépassement-caché
dépassement-automatique
dépassement-défilement
événements-curseur-auto
événements-curseur-aucun
couche
espacement-net
aligner-au-centre
z-index-1
z-index-2
display-inlineflex
marge-haut-auto
rapport-aspect-carre
rapport-aspect-portrait
rapport-aspect-paysage
rapport-aspect-ecran-large
couleur-heritee