Classes de structure

Guide de style Relume

Client-First V2.1 • Mis à jour le 09 janv. 2024

Docs Client-First

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

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

Aucune liste à puces
Aucune liste à puces
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

text-size-medium

taille-texte-regular

taille-texte-petit

taille-texte-tres-petit

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

text-style-allcaps

text-style-nowrap

text-style-quote

text-style-link

text-style-2lines

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

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

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

Élément de liste
Élément de liste
É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

Apprenez à utiliser les variables pour gérer les couleurs

Projet exemple

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

text-color-primary

text-color-secondary

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

Bouton

button

petit

Bouton

button

secondaire

Bouton

button

secondaire

petit

Bouton

button

tertiaire

Bouton

button

tertiaire

petit

Bouton

button

primaire

Bouton

Pour l'utiliser sur un fond sombre, utilisez simplement la classe complémentaire est-alternatif

button

est-alternatif

Bouton

button

est-alternatif

petit

Bouton

button

secondaire

est-alternatif

Bouton

button

secondaire

petit

est-alternatif

Bouton

button

primaire

est-alternatif

Bouton

Boutons avec icônes

button

is-icon

Bouton

button

petit

is-icon

Bouton

button

secondaire

is-icon

Bouton

button

secondaire

petit

is-icon

Bouton

button

primaire

is-icon

Bouton

button

primaire

is-icon

text-color-red

Bouton

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_field-label

form_input

is-text-area

.form_field-label

form_input

is-select-input

.form_field-label

form_checkbox

Case à cocher

form_radio

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