Guide de style Relume

Client-First V2.1 - Dernière mise à jour le 09 janvier 2024
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
style d'en-tête-prétitre
Style d'en-tête-h6
Texte en surbrillance
Pour le texte qui doit ressortir sur une page d'atterrissage qui n'a pas de titre.
texte surligné-petit

texte surligné

texte surligné-moyen

texte surligné

texte surligné-grand

texte surligné

texte-surligné-xl

texte

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 du texte-moyen

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.

taille du texte minuscule

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-semibold
poids du texte-semibold (600)
poids du texte-normal
poids du texte-normal (400)
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-texte-link-no-gradient
Lien texte
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 de devoir 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
Couleurs
Couleur d'arrière-plan
Gère les couleurs d'arrière-plan récurrentes.
couleur de fond-noir
couleur de fond-blanc
couleur de fond primaire
couleur de fond secondaire
couleur d'arrière-plan-tertiaire
couleur de fond-gris foncé-bleu
dégradé d'arrière-plan-1
dégradé d'arrière-plan-2
dégradé d'arrière-plan-3
Couleur du texte
Gère les couleurs de texte récurrentes.
texte-couleur-blanc
texte-couleur-blanc
texte-couleur-noir
texte-couleur-noir
texte-couleur-primaire
texte-couleur-primaire
texte-couleur-bleu
texte-couleur-bleu
texte-couleur-vert
texte-couleur-vert
gradient de couleur du texte
gradient de couleur du texte
texte-couleur-gris foncé-bleu
texte-couleur-gris foncé-bleu
texte-couleur-TR-primaire
texte-couleur-TR-primaire
Effets
Box Shadows
‍Les ombres tepermettent d'ajouter de la profondeur et du réalisme aux dessins en positionnant les éléments sur un axe z.
ombre-xxsmall
ombre-xsmall
ombre-petite
ombre-médium
ombre-grande
ombre-xlarge
ombre-xxlarge
Éléments de l'interface utilisateur
Boutons
bouton
bouton
est petit
bouton
est-sombre-gris-bleu
bouton
est-sombre-gris-bleu
est petit
bouton
est-secondaire
bouton
est-secondaire
est petit
bouton
est-tertiaire
bouton
est-tertiaire
est petit
bouton
is-link
Boutons avec icônes
bouton
is-icon
bouton
est petit
is-icon
bouton
est-secondaire
is-icon
bouton
est-secondaire
est petit
is-icon
bouton
is-link
is-icon
bouton
is-icon-only
bouton
est petit
is-icon-only
bouton
est-secondaire
is-icon-only
bouton
est-secondaire
est petit
is-icon-only
bouton
est-tertiaire
is-icon-only
bouton
est-tertiaire
est petit
is-icon-only
bouton
is-link
is-icon-only
Éléments du formulaire
form_field-label
formulaire_entrée
formulaire_entrée
is-text-area
formulaire_entrée
is-select-input
form_checkbox
form_radio
bouton
Merci ! Ton envoi a été reçu !
Oups ! Quelque chose s'est mal passé lors de l'envoi 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-mobile-landscape
max-width-full-mobile-portrait
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
rembourrage-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
Entretoises
Système d'espacement unifié pour le projet.
espaceur-minuscule
espaceur-xsmall
espaceur-petit
espaceur-medium
espaceur-grand
espaceur-xlarge
spacer-xxlarge
espaceur-grand
espaceur-xhuge
spacer-xxhuge
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
pointer-events-auto
pointer-events-none
couche
espacement-nettoyage
aligner-center
z-index-1
z-index-2
display-inlineflex
margin-top-auto
aspect-ratio-carré
aspect-ratio-portrait
aspect-ratio-paysage
aspect-ratio-écran large
couleur d'héritage