Guide de style

Ce projet utilise le client d'abord comme système de style. Vous pouvez lire la documentation ici.
Consultez la page des instructions pour un tutoriel de base sur ce modèle.

Structure

Cœur de métier

page-wrapper

principal-bâtisseur

padding-global

Conteneur

conteneur minuscule

container-xxsmall

container-xsmall

conteneur-petit

conteneur-medium

conteneur-large

conteneur plein

Largeur maximale

max-width-xxsmall

max-width-xsmall

max-width-small

largeur maximale moyenne

max-width-large

max-width-xlarge

max-width-xxlarge

max-width-full-mobile

max-width-full-tablet

max-width-full

Typographie

Rubrique

Rubrique 1

style d'en-tête-h1

h1

Rubrique 2

style d'en-tête-h2

h2

Rubrique 3

style d'en-tête-h3

h3

Rubrique 4

style d'en-tête-h4

h4

Rubrique 5

style d'en-tête-h5

h5

Rubrique 6

style d'en-tête-h6

h6

Autres éléments

Paragraphe

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.

Citation en bloc

"L'élément Bloc de citation vous permet d'ajouter et de styliser une citation pour la faire ressortir du reste de votre texte."

Listes non ordonnées

L'exemple de texte est utilisé à titre indicatif.
L'exemple de texte est utilisé à titre indicatif.
L'exemple de texte est utilisé à titre indicatif.

Listes ordonnées

L'exemple de texte est utilisé à titre indicatif.
L'exemple de texte est utilisé à titre indicatif.
L'exemple de texte est utilisé à titre indicatif.

Lien

Lien texte

Taille du texte

texte-grandeur

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

taille du texte-moyen

Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam suscipit rhoncus.

taille du texte-régulière

Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam suscipit rhoncus.

taille du texte-petit

Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam suscipit rhoncus.

taille du texte minuscule

Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam suscipit rhoncus.

Style de texte

texte-style-étiquette

Étiquette

style de texte-barré

Barré

style-italique

Italique

style de texte-muet

En sourdine

style-all-caps

Tous les bouchons

style-nowrap

piège à souris

texte-style-lien

Lien

Poids du texte

poids du texte-noir

Noir

poids du texte-xbold

Xbold

texte en gras

Gras

poids du texte-semibold

Semi-gras

poids du texte-moyen

Moyen

poids du texte-normal

Normal

poids du texte-léger

Texte clair

poids du texte-xlight

Texte xlight

texte-weight-thin

Texte fin

Alignement du texte

alignement du texte sur la gauche

Gauche

text-align-center

Centre

alignement du texte sur la droite

Droit

Texte enrichi

texte-riche-texte

H1

Rubrique 2

Rubrique 3

Rubrique 4

Rubrique 5

Rubrique 6

L'élément de texte enrichi vous 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.u

L'exemple de texte est utilisé à titre indicatif.
L'exemple de texte est utilisé à titre indicatif.
L'exemple de texte est utilisé à titre indicatif.

L'exemple de texte est utilisé à titre indicatif.
L'exemple de texte est utilisé à titre indicatif.
L'exemple de texte est utilisé à titre indicatif.

L'élément de texte enrichi vous 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.

L'élément de texte enrichi vous 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.

Espacement

Section

padding-section-xsmall

padding-section-small

section de remplissage-moyenne

section de remplissage-grand

section de remplissage-xlarge

section de rembourrage-xxlarge

Entretoise

espaceur-minuscule

spacer-xxsmall

espaceur-xsmall

entretoise-petit

entretoise-medium

entretoise-grande

espaceur-xlarge

spacer-xxlarge

espaceur-grand

espaceur-xhuge

spacer-xxhuge

espaceur-custom-1

entretoise-custom-2

espaceur-custom-3

Utilité

Visibilité

cacher

cacher la tablette

cacher-mobile-paysage

cacher-mobile-portrait

débordement-visible

débordement-caché

défilement par débordement

débordement-auto

Mise en page

bloc-affichage

affichage-flex

affichage en ligne-bloc

affichage en ligne

Rapport d'aspect

aspect-ratio-carré

aspect-ratio-portrait

aspect-ratio-paysage

aspect-ratio-écran large

Autres

pointer-events-auto

événements de pointeurs - aucun

couche

espacement-nettoyage

aligner-center

z-index-1

z-index-2

Éléments

Icônes

hauteur de l'icône-petit

hauteur de l'icône-moyenne

hauteur de l'icône-grandeur

hauteur de l'icône-xlarge