Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Niveau

Aperçu HTML

Classe associée

Attributs desktop

Attributs mobile

Titre alternatif XL

Html live preview
version89
{"htmlCode":"<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfr1.4.css\" rel=\"stylesheet\">\n\n\n\n<div class=\"fr-p-1w\">\n\n<h1 class=\"fr-display--xl\"> Titre alternatif XL </h1>\n\n</div>\n"}

fr-display--xl

Taille : 80 px
Line-height : 88 px
Margin-bottom : 32 px

Couleur sur fond clair : G50
Couleur sur fond foncé : White
Taille : 72 px
Line-height : 80 px
Margin-bottom : 32 px
Couleur sur fond clair : G50
Couleur sur fond foncé : White

Titre alternatif LG

Html live preview
version910
{"htmlCode":"<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfr1.4.css\" rel=\"stylesheet\">\n\n\n\n<div class=\"fr-p-1w\">\n\n<h1 class=\"fr-display--lg\"> Titre alternatif LG </h1>\n\n</div>\n"}

fr-display--lg

Taille : 72 px
Line-height : 80 px
Margin-bottom : 32 px

Couleur sur fond clair : G50
Couleur sur fond foncé : White
Taille : 64 px
Line-height : 72 px
Margin-bottom : 32 px

Couleur sur fond clair : G50
Couleur sur fond foncé : White

Titre alternatif MD

Html live preview
version910
{"htmlCode":"<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfr1.4.css\" rel=\"stylesheet\">\n\n\n\n<div class=\"fr-p-1w\">\n\n<h1 class=\"fr-display--md\"> Titre alternatif MD </h1>\n\n</div>\n"}

fr-display--md

Taille : 64 px
Line-height : 72 px
Margin-bottom : 32 px

Couleur sur fond clair : G50
Couleur sur fond foncé : White
Taille : 56 px
Line-height : 64 px
Margin-bottom : 32 px

Couleur sur fond clair : G50
Couleur sur fond foncé : White

Titre alternatif SM

Html live preview
version910
{"htmlCode":"<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfr1.4.css\" rel=\"stylesheet\">\n\n\n\n<div class=\"fr-p-1w\">\n\n<h1 class=\"fr-display--sm\"> Titre alternatif SM </h1>\n\n</div>\n"}

fr-display--sm

Taille : 56 px
Line-height : 64 px
Margin-bottom : 32 px

Couleur sur fond clair : G50
Couleur sur fond foncé : White
Taille : 48 px
Line-height : 56 px
Margin-bottom : 32 px

Couleur sur fond clair : G50
Couleur sur fond foncé : White

Titre alternatif XS

Html live preview
version910
{"htmlCode":"<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfr1.4.css\" rel=\"stylesheet\">\n\n\n\n<div class=\"fr-p-1w\">\n\n<h1 class=\"fr-display--xs\"> Titre alternatif XS </h1>\n\n</div>\n"}

fr-display--xs

Taille : 48 px
Line-height : 56 px
Margin-bottom : 32 px

Couleur sur fond clair : G50
Couleur sur fond foncé : White
Taille : 40 px
Line-height : 48 px
Margin-bottom : 32 px
Couleur sur fond clair : G50
Couleur sur fond foncé : White

...

Niveau

Usage

Aperçu HTML

Classe associée

Attributs mobile et desktop

XL - Texte chapô

Chapô à utiliser pour les introductions ou accroches.

 

Html live preview
version1314
{"htmlCode":"<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfr1.4.css\" rel=\"stylesheet\">\n\n\n\n<div class=\"fr-p-1w\">\n\n<p class=\"fr-text--lead\">XL - Chapo </p>\n\n</div>\n"}

fr-text--lead

et
fr-text--xl

Taille : 20 px
Line-height: 32 px
Margin-bottom : 24 px

Couleur sur fond clair : G200
Couleur sur fond foncé : G850

LG - Texte article

Corps de texte réservé aux usages éditoriaux (type : actualités, blog) afin d’amener un plus grand confort de lecture.

 

Html live preview
version15
{"htmlCode":"<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfr1.4.css\" rel=\"stylesheet\">\n\n\n\n<div class=\"fr-p-1w\">\n\n<p class=\"fr-text--lg\"> LG - Texte article </p>\n\n</div>\n"}

fr-text--lg

Taille : 18 px
Line-height : 28 px
Margin-bottom : 24 px
Couleur sur fond clair : G200
Couleur sur fond foncé : G850

MD -

Texte standard

Corps de texte par défaut, à utiliser pour le texte courant et dans la majorité des cas.

C’est le style de texte utilisé par défaut dans le set développé.

 

Html live preview
version16
{"htmlCode":"<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfr1.4.css\" rel=\"stylesheet\">\n\n\n\n<div class=\"fr-p-1w\">\n\n<p class=\"fr-text--text\"> MD - Texte standard </p>\n\n</div>\n"}

<p>

et

fr-text--md

Taille : 16 px
Line-height : 24 px
Margin-bottom : 24 px

Couleur sur fond clair : G200
Couleur sur fond foncé : G850

SM - Texte détail

À utiliser en corps de texte uniquement au sein de certains composants.

 

Html live preview
version16
{"htmlCode":"<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfr1.4.css\" rel=\"stylesheet\">\n\n\n\n<div class=\"fr-p-1w\">\n\n<p class=\"fr-text--sm\"> SM - Texte détail </p>\n\n</div>\n"}

fr-text--sm

Taille : 14 px
Line-height : 24 px
Margin-bottom : 24 px

Couleur sur fond clair : G200
Couleur sur fond foncé : G850

XS - Texte mention

À utiliser pour les mentions, légendes ou autres informations mineures, qui ne doivent pas perturber la lecture de l’information.

 

Html live preview
version16
{"htmlCode":"<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfr1.4.css\" rel=\"stylesheet\">\n\n\n\n<div class=\"fr-p-1w\">\n\n<p class=\"fr-text--xs\"> XS - Mention </p>\n\n</div>\n"}

fr-text--xs

Taille : 12 px
Line-height : 20 px
Margin-bottom : 24 px

Couleur sur fond clair : G200
Couleur sur fond foncé : G850

...

Les liens contextualisés héritent du style du texte, ils sont présentés sur la page 'Liens'(blue star).

Règles d’utilisation

Usage

...

Pour la hiérarchisation de la lecture vous pouvez également utiliser /wiki/spaces/DOC/pages/469762155 (blue star), la mise en avant (blue star), le tableau(blue star).

Longueur du texte courant :

...