Test de titre de paragraphe :

Test de titre H1

Test de titre H2

Test de titre H3

Test de titre H4

Test de titre H5

Test de titre H6

<h1>Test de titre H1</h1>
<h2>Test de titre H2</h2>
<h3>Test de titre H3</h3>
<h4>Test de titre H4</h4>
<h5>Test de titre H5</h5>
<h6>Test de titre H6</h6>

Test de paragraphe et de lien interne :

Lorem ipsum dolor sit amet, consectetur adipiscing, lien interne incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

<p>Lorem [...] adipiscing, <a title="titre lien interne" href="#" target="_self">lien interne</a> incididunt, [...] elit ut.</p>

Test de paragraphe et de lien externe :

Lorem ipsum dolor sit amet, consectetur adipiscing, lien externe - nouvelle fenêtre incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

<p>Lorem [...] adipiscing, <a title="titre lien externe - nouvelle fenêtre" href="#" target="_blank" rel="noopener">lien externe - nouvelle fenêtre</a> incididunt, [...] elit ut.</p>

Test de lien externe raw-link :

<p>Lorem [...] adipiscing, <a class="fr-raw-link" title="titre lien externe - nouvelle fenêtre" href="#" target="_blank" rel="noopener">lien externe - nouvelle fenêtre</a> incididunt, [...] elit ut.</p>

Test de lien externe reset-link :

<p>Lorem [...] adipiscing, <a class="fr-reset-link" title="titre lien externe - nouvelle fenêtre" href="#" target="_blank" rel="noopener">lien externe - nouvelle fenêtre</a> incididunt, [...] elit ut.</p>

Test de liste non-ordonnée:

Item list
- Item list
  - Item list
  - Item list
  - Item list
- Item list
- Item list
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
Item list

<ul>
    <li>Item list
        <ul>
            <li>Item list
                <ul>
                    <li>Item list</li>
                    <li>Item list</li>
                    <li>Item list</li>
                </ul>
            </li>
            <li>Item list</li>
            <li>Item list</li>
        </ul>
    </li>
    <li>Lorem [...] elit ut.</li>
    <li>Item list</li>
</ul>

Test de liste ordonnée :

Item list
1. Item list
  1. Item list
  2. Item list
  3. Item list
2. Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
3. Item list
Item list
Item list

<ol>
    <li>Item list
        <ol>
            <li>Item list
                <ol>
                    <li>Item list</li>
                    <li>Item list</li>
                    <li>Item list</li>
                </ol>
            </li>
            <li>Lorem [...] elit ut.</li>
            <li>Item list</li>
        </ol>
    </li>
    <li>Item list</li>
    <li>Item list</li>
</ol>

Séparateur de base - hr

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

<p>Lorem [...] elit ut.</p>
<hr>
<p>Lorem [...] elit ut.</p>

Test d'exposant :

Lorem ipsum dolor sit amet, consectetur adipiscing, un texte avec un ^exposant incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

<p>Lorem [...] adipiscing, un texte avec un <sup>exposant</sup> incididunt, [...] elit ut.</p>

Test d'indice :

Lorem ipsum dolor sit amet, consectetur adipiscing, un texte avec un _indice incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

<p>Lorem [...] adipiscing, un texte avec un <sub>indice</sub> incididunt, [...] elit ut.</p>

Séparateur - hr

<p>Lorem [...] elit ut.</p>
<span class="fr-hr"></span>
<p>Lorem [...] elit ut.</p>
<span class="fr-hr fr-hr--sm"></span>
<p>Lorem [...] elit ut.</p>
<hr class="fr-hr--sm">
<p>Lorem [...] elit ut.</p>

Headings

Test de titre h5 avec class fr-h1

Test de titre h5 avec class fr-h2

Test de titre h5 avec class fr-h3

Test de titre h5 avec class fr-h4

Test de titre h5 avec class fr-h5

Test de titre h5 avec class fr-h6

<h5 class="fr-h1">Test de titre h5 avec class fr-h1</h5>
<h5 class="fr-h2">Test de titre h5 avec class fr-h2</h5>
<h5 class="fr-h3">Test de titre h5 avec class fr-h3</h5>
<h5 class="fr-h4">Test de titre h5 avec class fr-h4</h5>
<h5 class="fr-h5">Test de titre h5 avec class fr-h5</h5>
<h5 class="fr-h6">Test de titre h5 avec class fr-h6</h5>

Displays

Test de titre h5 avec class fr-display-xl

Test de titre h5 avec class fr-display-lg

Test de titre h5 avec class fr-display-md

Test de titre h5 avec class fr-display-sm

Test de titre h5 avec class fr-display-xs

<h5 class="fr-display--xl">Test de titre h5 avec class fr-display-xl</h5>
<h5 class="fr-display--lg">Test de titre h5 avec class fr-display-lg</h5>
<h5 class="fr-display--md">Test de titre h5 avec class fr-display-md</h5>
<h5 class="fr-display--sm">Test de titre h5 avec class fr-display-sm</h5>
<h5 class="fr-display--xs">Test de titre h5 avec class fr-display-xs</h5>

Style Chapo

<p class="fr-text--lead">Lorem [...] elit ut.</p>

Style LG

<p class="fr-text--lg">Lorem [...] elit ut.</p>

Style MD

<p class="fr-text--md">Lorem [...] elit ut.</p>

Style SM

<p class="fr-text--sm">Lorem [...] elit ut.</p>

Style XS

<p class="fr-text--xs">Lorem [...] elit ut.</p>

Graisse light

<p class="fr-text--light">Lorem [...] elit ut.</p>

Graisse regular

<p class="fr-text--regular">Lorem [...] elit ut.</p>

Graisse bold

<p class="fr-text--bold">Lorem [...] elit ut.</p>

Font Spectral, graisse regular

<p class="fr-text--regular fr-text--alt">Lorem [...] elit ut.</p>

Font Spectral, graisse extra-bold (heavy)

<p class="fr-text--heavy fr-text--alt">Lorem [...] elit ut.</p>

Icone LG

<span class="fr-icon-warning-fill fr-icon--lg" aria-hidden="true"></span>

Icone MD (par défault)

<span class="fr-icon-warning-fill" aria-hidden="true"></span>

Icone SM

<span class="fr-icon-warning-fill fr-icon--sm" aria-hidden="true"></span>

Snippet à inclure dans <head></head>

<meta name="theme-color" content="#000091"><!-- Défini la couleur de thème du navigateur (Safari/Android) -->
<link rel="apple-touch-icon" href="../../dist/favicon/apple-touch-icon.png"><!-- 180×180 -->
<link rel="icon" href="../../dist/favicon/favicon.svg" type="image/svg+xml">
<!-- si favicon.ico peut etre placé à la racine du serveur, retirer la ligne ci-dessous -->
<link rel="shortcut icon" href="../../dist/favicon/favicon.ico" type="image/x-icon"><!-- 32×32 -->
<link rel="manifest" href="../../dist/favicon/manifest.webmanifest" crossorigin="use-credentials">
<!-- Modifier les chemins relatifs des favicons en fonction de la structure du projet -->
<!-- Dans le fichier manifest.webmanifest aussi, modifier les chemins vers les images -->

Tailles et formats

L'icône de favori (favicon) du design système est disponible sous différents formats et tailles pour correspondre aux différents supports.

favicon.ico (32px)

favicon.svg

apple-touch-icon.png (180px)

Chrome / Android icons (importées depuis le nanifest.webmanifest)

android-chrome-192x192.png (192px)

android-chrome-512xx512.png (512px)

Image responsive

[À MODIFIER - vide ou texte alternatif de l’image]

<div>
    <img class="fr-responsive-img" src="../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>

Image responsive avec ratio d'aspect 32x9

<div>
    <img class="fr-responsive-img fr-responsive-img--32x9" src="../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>

Image responsive avec ratio d'aspect 16x9

<div>
    <img class="fr-responsive-img fr-responsive-img--16x9" src="../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>

Image responsive avec ratio d'aspect 3x2

<div>
    <img class="fr-responsive-img fr-responsive-img--3x2" src="../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>

Image responsive avec ratio d'aspect 4x3

<div>
    <img class="fr-responsive-img fr-responsive-img--4x3" src="../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>

Image responsive avec ratio d'aspect 1x1

<div>
    <img class="fr-responsive-img fr-responsive-img--1x1" src="../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>

Image responsive avec ratio d'aspect 3x4

<div>
    <img class="fr-responsive-img fr-responsive-img--3x4" src="../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>

Image responsive avec ratio d'aspect 2x3

<div>
    <img class="fr-responsive-img fr-responsive-img--2x3" src="../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>

Vidéo responsive avec ratio d'aspect 16x9 par défaut

<div class="fr-responsive-vid">
    <iframe title="Titre de l&#39;iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Vidéo responsive avec ratio d'aspect 4x3

<div class="fr-responsive-vid fr-responsive-vid--4x3">
    <iframe title="Titre de l&#39;iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Vidéo responsive avec ratio d'aspect 1x1

<div class="fr-responsive-vid fr-responsive-vid--1x1">
    <iframe title="Titre de l&#39;iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Grille sans gouttières

col

<div class="fr-container">
    <div class="fr-grid-row">
        <div class="fr-col-12">
            <div class="col-demo">Lorem [...] elit ut.</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">col</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">col</div>
        </div>
    </div>
</div>

Grille sans gouttières 4 col

1/4

<div class="fr-container">
    <div class="fr-grid-row">
        <div class="fr-col">
            <div class="col-demo">1/4</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">1/4</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">1/4</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">1/4</div>
        </div>
    </div>
</div>

Grille sans gouttières 6 col

1/6

<div class="fr-container">
    <div class="fr-grid-row">
        <div class="fr-col">
            <div class="col-demo">1/6</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">1/6</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">1/6</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">1/6</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">1/6</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">1/6</div>
        </div>
    </div>
</div>

Grille avec gouttières

col

<div class="fr-container">
    <div class="fr-grid-row fr-grid-row--gutters">
        <div class="fr-col-12">
            <div class="col-demo">Lorem [...] elit ut.</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">col</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">col</div>
        </div>
    </div>
</div>

Grille avec gouttières 4 col

1/4

<div class="fr-container">
    <div class="fr-grid-row fr-grid-row--gutters">
        <div class="fr-col">
            <div class="col-demo">1/4</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">1/4</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">1/4</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">1/4</div>
        </div>
    </div>
</div>

Grille avec gouttières 6 col

1/6

<div class="fr-container">
    <div class="fr-grid-row fr-grid-row--gutters">
        <div class="fr-col">
            <div class="col-demo">1/6</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">1/6</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">1/6</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">1/6</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">1/6</div>
        </div>
        <div class="fr-col">
            <div class="col-demo">1/6</div>
        </div>
    </div>
</div>

Grille sans gouttières avec taille de colonnes

3/12

2/12

4/12

5/12

7/12

9/12

3/12

5/12

2/12

12/12

<div class="fr-container">
    <div class="fr-grid-row">
        <div class="fr-col-3">
            <div class="col-demo">3/12</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">3/12</div>
        </div>
        <div class="fr-col-2">
            <div class="col-demo">2/12</div>
        </div>
        <div class="fr-col-4">
            <div class="col-demo">4/12</div>
        </div>
        <div class="fr-col-5">
            <div class="col-demo">5/12</div>
        </div>
        <div class="fr-col-7">
            <div class="col-demo">7/12</div>
        </div>
        <div class="fr-col-9">
            <div class="col-demo">9/12</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">3/12</div>
        </div>
        <div class="fr-col-5">
            <div class="col-demo">5/12</div>
        </div>
        <div class="fr-col-5">
            <div class="col-demo">5/12</div>
        </div>
        <div class="fr-col-2">
            <div class="col-demo">2/12</div>
        </div>
        <div class="fr-col-12">
            <div class="col-demo">12/12</div>
        </div>
    </div>
</div>

Grille avec gouttières avec taille de colonnes

3/12

2/12

4/12

5/12

7/12

9/12

3/12

5/12

2/12

12/12

<div class="fr-container">
    <div class="fr-grid-row fr-grid-row--gutters">
        <div class="fr-col-3">
            <div class="col-demo">3/12</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">3/12</div>
        </div>
        <div class="fr-col-2">
            <div class="col-demo">2/12</div>
        </div>
        <div class="fr-col-4">
            <div class="col-demo">4/12</div>
        </div>
        <div class="fr-col-5">
            <div class="col-demo">5/12</div>
        </div>
        <div class="fr-col-7">
            <div class="col-demo">7/12</div>
        </div>
        <div class="fr-col-9">
            <div class="col-demo">9/12</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">3/12</div>
        </div>
        <div class="fr-col-5">
            <div class="col-demo">5/12</div>
        </div>
        <div class="fr-col-5">
            <div class="col-demo">5/12</div>
        </div>
        <div class="fr-col-2">
            <div class="col-demo">2/12</div>
        </div>
        <div class="fr-col-12">
            <div class="col-demo">12/12</div>
        </div>
    </div>
</div>

Grille sans gouttières imbrication (1ère imbriquée avec gouttière, 2nde sans gouttières)

6/12

4/12

3/12

4/12

<div class="fr-container">
    <div class="fr-grid-row">
        <div class="fr-col-8">
            <div class="fr-grid-row fr-grid-row--gutters">
                <div class="fr-col-6">
                    <div class="col-demo">6/12</div>
                </div>
                <div class="fr-col-6">
                    <div class="col-demo">6/12</div>
                </div>
            </div>
        </div>
        <div class="fr-col-4">
            <div class="col-demo">4/12</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">3/12</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">3/12</div>
        </div>
        <div class="fr-col-6">
            <div class="fr-grid-row">
                <div class="fr-col-4">
                    <div class="col-demo">4/12</div>
                </div>
                <div class="fr-col-4">
                    <div class="col-demo">4/12</div>
                </div>
                <div class="fr-col-4">
                    <div class="col-demo">4/12</div>
                </div>
            </div>
        </div>
    </div>
</div>

Grille avec gouttières imbrication (1ère imbriquée avec gouttière, 2nde sans gouttières)

6/12

4/12

3/12

4/12

<div class="fr-container">
    <div class="fr-grid-row fr-grid-row--gutters">
        <div class="fr-col-8">
            <div class="fr-grid-row fr-grid-row--gutters">
                <div class="fr-col-6">
                    <div class="col-demo">6/12</div>
                </div>
                <div class="fr-col-6">
                    <div class="col-demo">6/12</div>
                </div>
            </div>
        </div>
        <div class="fr-col-4">
            <div class="col-demo">4/12</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">3/12</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">3/12</div>
        </div>
        <div class="fr-col-6">
            <div class="fr-grid-row">
                <div class="fr-col-4">
                    <div class="col-demo">4/12</div>
                </div>
                <div class="fr-col-4">
                    <div class="col-demo">4/12</div>
                </div>
                <div class="fr-col-4">
                    <div class="col-demo">4/12</div>
                </div>
            </div>
        </div>
    </div>
</div>

Grille avec gouttières alignement haut

align top

<div class="fr-container">
    <div class="fr-grid-row--top fr-grid-row fr-grid-row--gutters">
        <div class="fr-col-3">
            <div class="col-demo">align top</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">Lorem [...] elit ut.</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">align top</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">align top</div>
        </div>
    </div>
</div>

Grille avec gouttières alignement bas

align bottom

<div class="fr-container">
    <div class="fr-grid-row--bottom fr-grid-row fr-grid-row--gutters">
        <div class="fr-col-3">
            <div class="col-demo">align bottom</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">Lorem [...] elit ut.</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">align bottom</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">align bottom</div>
        </div>
    </div>
</div>

Grille avec gouttières alignement milieu

align middle

<div class="fr-container">
    <div class="fr-grid-row--middle fr-grid-row fr-grid-row--gutters">
        <div class="fr-col-3">
            <div class="col-demo">align middle</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">Lorem [...] elit ut.</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">align middle</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">align middle</div>
        </div>
    </div>
</div>

Grille avec gouttières alignement mélangés

align top

align middle

align bottom

<div class="fr-container">
    <div class="fr-grid-row fr-grid-row--gutters">
        <div class="fr-col-3">
            <div class="col-demo">Lorem [...] elit ut.</div>
        </div>
        <div class="fr-col--top fr-col-3">
            <div class="col-demo">align top</div>
        </div>
        <div class="fr-col--middle fr-col-3">
            <div class="col-demo">align middle</div>
        </div>
        <div class="fr-col--bottom fr-col-3">
            <div class="col-demo">align bottom</div>
        </div>
    </div>
</div>

Grille avec gouttières alignement gauche

align left

<div class="fr-container">
    <div class="fr-grid-row--left fr-grid-row fr-grid-row--gutters">
        <div class="fr-col-3">
            <div class="col-demo">align left</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">align left</div>
        </div>
    </div>
</div>

Grille avec gouttières alignement droite

align left

<div class="fr-container">
    <div class="fr-grid-row--right fr-grid-row fr-grid-row--gutters">
        <div class="fr-col-3">
            <div class="col-demo">align left</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">align left</div>
        </div>
    </div>
</div>

Grille avec gouttières alignement centré

align center

<div class="fr-container">
    <div class="fr-grid-row--center fr-grid-row fr-grid-row--gutters">
        <div class="fr-col-3">
            <div class="col-demo">align center</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">align center</div>
        </div>
    </div>
</div>

Grille avec écart

3/12

<div class="fr-container">
    <div class="fr-grid-row fr-grid-row--gutters">
        <div class="fr-col-3">
            <div class="col-demo">3/12</div>
        </div>
        <div class="fr-col-3 fr-col-offset-3">
            <div class="col-demo">3/12</div>
        </div>
        <div class="fr-col-3">
            <div class="col-demo">3/12</div>
        </div>
    </div>
</div>

Grille avec colonne à taille variable suivant les points de ruptures

12 / sm-10 / md-8 / lg-6 / xl-4

<div class="fr-container">
    <div class="fr-grid-row fr-grid-row--gutters">
        <div class="fr-col-12 fr-col-sm-10 fr-col-md-8 fr-col-lg-6 fr-col-xl-4">
            <div class="col-demo">12 / sm-10 / md-8 / lg-6 / xl-4</div>
        </div>
    </div>
</div>

Grille avec conteneur fluide

1/12

<div class="fr-container--fluid">
    <div class="fr-grid-row">
        <div class="fr-col-1">
            <div class="col-demo">1/12</div>
        </div>
        <div class="fr-col-1">
            <div class="col-demo">1/12</div>
        </div>
        <div class="fr-col-1">
            <div class="col-demo">1/12</div>
        </div>
        <div class="fr-col-1">
            <div class="col-demo">1/12</div>
        </div>
        <div class="fr-col-1">
            <div class="col-demo">1/12</div>
        </div>
        <div class="fr-col-1">
            <div class="col-demo">1/12</div>
        </div>
        <div class="fr-col-1">
            <div class="col-demo">1/12</div>
        </div>
        <div class="fr-col-1">
            <div class="col-demo">1/12</div>
        </div>
        <div class="fr-col-1">
            <div class="col-demo">1/12</div>
        </div>
        <div class="fr-col-1">
            <div class="col-demo">1/12</div>
        </div>
        <div class="fr-col-1">
            <div class="col-demo">1/12</div>
        </div>
        <div class="fr-col-1">
            <div class="col-demo">1/12</div>
        </div>
    </div>
</div>

Collapse

list item
list item
- list nested item
- list nested item
- list nested item

list item
list item
- list nested item
- list nested item
- list nested item

list item
list item
- list nested item
- list nested item
- list nested item

<div>
    <!--
    un bouton toggle (qui ouvre et qui ferme) doit avoir les attributs aria-expanded (qui définit son état) et l'attribut aria-controls (dont l'id détermine l'élément sur lequel agira le bouton.
    un bouton reduce (qui ne peut que fermer) doit avoir uniquement l'attribut aria-controls.
    -->
    <div>
        <button class="fr-mb-2v fr-btn" aria-expanded="true" aria-controls="collapsed-0">
            Toggle
        </button>
        <ul class="fr-collapse" id="collapsed-0" data-fr-group="group-id">
            <li>list item</li>
            <li>list item</li>
            <li>
                <button class="fr-mb-2v fr-btn" aria-expanded="false" aria-controls="collapsed-0-nested">
                    Toggle nested
                </button>
                <ul class="fr-collapse" id="collapsed-0-nested">
                    <li>list nested item</li>
                    <li>list nested item</li>
                    <li>list nested item</li>
                </ul>
            </li>
            <li>
                <button class="fr-mb-2v fr-btn" aria-controls="collapsed-0">
                    Close
                </button>
            </li>
        </ul>
    </div>
    <div>
        <button class="fr-mb-2v fr-btn" aria-expanded="false" aria-controls="collapsed-1">
            Toggle
        </button>
        <ul class="fr-collapse" id="collapsed-1" data-fr-group="group-id">
            <li>list item</li>
            <li>list item</li>
            <li>
                <button class="fr-mb-2v fr-btn" aria-expanded="false" aria-controls="collapsed-1-nested">
                    Toggle nested
                </button>
                <ul class="fr-collapse" id="collapsed-1-nested">
                    <li>list nested item</li>
                    <li>list nested item</li>
                    <li>list nested item</li>
                </ul>
            </li>
            <li>
                <button class="fr-mb-2v fr-btn" aria-controls="collapsed-1">
                    Close
                </button>
            </li>
        </ul>
    </div>
    <div>
        <button class="fr-mb-2v fr-btn" aria-expanded="false" aria-controls="collapsed-2">
            Toggle
        </button>
        <ul class="fr-collapse" id="collapsed-2" data-fr-group="group-id">
            <li>list item</li>
            <li>list item</li>
            <li>
                <button class="fr-mb-2v fr-btn" aria-expanded="false" aria-controls="collapsed-2-nested">
                    Toggle nested
                </button>
                <ul class="fr-collapse" id="collapsed-2-nested">
                    <li>list nested item</li>
                    <li>list nested item</li>
                    <li>list nested item</li>
                </ul>
            </li>
            <li>
                <button class="fr-mb-2v fr-btn" aria-controls="collapsed-2">
                    Close
                </button>
            </li>
        </ul>
    </div>
</div>

Espacements

Margin/padding

Des classes utilitaires sont disponibles pour gérer les marges intérieures et extérieures d'un élément html.
Celles-ci suivent la structure suivante (entre crochets les valeurs, facultatives, possibles):

Pour le margin : fr-m[t/r/b/l/x/y]-[n]0[v]
pour le padding : fr-p[t/r/b/l/x/y]-0[v]

- Le prefix : 'fr-',
- la lettre 'm' pour margin ou 'p' pour padding,
- l'orientation avec 't', 'r', 'b', 'l' (top, right, bottom, left) ou 'x', 'y' (horizontal, vertical),
- un séparateur : '-',
- le token d'espacement (nb: le signe '-' des nombres négatifs est remplacé par la lettre 'n', et 0 n'a pas d'unité 'v')

Classes d'espacements :
Classe	Description	Exemple de classe
fr-m-	Margin	fr-m-2v
fr-mt-	Margin top	fr-mt-2v
fr-mr-	Margin right	fr-mr-2v
fr-mb-	Margin bottom	fr-mb-2v
fr-ml-	Margin left	fr-ml-2v
fr-mx-	Margin left & right	fr-mx-2v
fr-my-	Margin top & bottom	fr-my-2v
fr-p-	Padding	fr-p-2v
fr-pt-	Padding top	fr-pt-2v
fr-pr-	Padding right	fr-pr-2v
fr-pb-	Padding bottom	fr-pb-2v
fr-pl-	Padding left	fr-pl-2v
fr-px-	Padding left & right	fr-px-2v
fr-py-	Padding top & bottom	fr-py-2v

Breakpoints

Il est possible de définir le breakpoint à partir du quel on applique l'espacement.
Il suffit d'ajouter à la classe le breakpoint (md) avant la valeur du token. ex: fr-p-md-4v

Pour adapter les espacements à la taille de l'écran, on peut ainsi combiner les classes en partant du mobile puis en surchargeant en md

exemple avec un bouton plus large en md

<button class="fr-px-4v fr-px-md-16v fr-btn">
    4v en mobile / 16v en md
</button>

Valeurs des tokens d'espacements :
Token	rem	px	Exemple d'espacement	Exemple de classe
n8v	-2	-32	1 2	fr-ml-n8v
n7v	-1.75	-28	1 2	fr-ml-n7v
n6v	-1.5	-24	1 2	fr-ml-n6v
n5v	-1.25	-20	1 2	fr-ml-n5v
n4v	-1	-16	1 2	fr-ml-n4v
n3v	-0.75	-12	1 2	fr-ml-n3v
n2v	-0.5	-8	1 2	fr-ml-n2v
n1-5v	-0.375	-6	1 2	fr-ml-n1-5v
n1v	-0.25	-4	1 2	fr-ml-n1v
n0-5v	-0.125	-2	1 2	fr-ml-n0-5v
0	0	0	1 2	fr-ml-0
0-5v	0.125	2	1 2	fr-ml-0-5v
1v	0.25	4	1 2	fr-ml-1v
1-5v	0.375	6	1 2	fr-ml-1-5v
2v	0.5	8	1 2	fr-ml-2v
3v	0.75	12	1 2	fr-ml-3v
4v	1	16	1 2	fr-ml-4v
5v	1.25	20	1 2	fr-ml-5v
6v	1.5	24	1 2	fr-ml-6v
7v	1.75	28	1 2	fr-ml-7v
8v	2	32	1 2	fr-ml-8v
9v	2.25	36	1 2	fr-ml-9v
10v	2.5	40	1 2	fr-ml-10v
11v	2.75	44	1 2	fr-ml-11v
12v	3	48	1 2	fr-ml-12v
13v	3.25	52	1 2	fr-ml-13v
14v	3.5	56	1 2	fr-ml-14v
15v	3.75	60	1 2	fr-ml-15v
16v	4	64	1 2	fr-ml-16v
17v	4.25	68	1 2	fr-ml-17v
18v	4.5	72	1 2	fr-ml-18v
19v	4.75	76	1 2	fr-ml-19v
20v	5	80	1 2	fr-ml-20v
21v	5.25	84	1 2	fr-ml-21v
22v	5.5	88	1 2	fr-ml-22v
23v	5.75	92	1 2	fr-ml-23v
24v	6	96	1 2	fr-ml-24v
25v	6.25	100	1 2	fr-ml-25v
26v	6.5	104	1 2	fr-ml-26v
27v	6.75	108	1 2	fr-ml-27v
28v	7	112	1 2	fr-ml-28v
29v	7.25	116	1 2	fr-ml-29v
30v	7.5	120	1 2	fr-ml-30v
31v	7.75	124	1 2	fr-ml-31v
32v	8	128	1 2	fr-ml-32v
auto	NaN	NaN	1 2	fr-ml-auto

Regarder avec l'inspecteur les block de textes cachés grâce à ces utilitaires

sr-only (cache visuellement mais reste présent)

<div class="fr-sr-only">
    <p>Lorem [...] elit ut.</p>
</div>

sr-only à partir du breakpoint LG

<div class="fr-sr-only-lg">
    <p>Lorem [...] elit ut.</p>
</div>

hidden (cache complètement - display: none)

<div class="fr-hidden">
    <p>Lorem [...] elit ut.</p>
</div>

Cacher à partir du breakpoint LG

<div class="fr-hidden-lg">
    <p>Lorem [...] elit ut.</p>
</div>

Afficher qu'à partir du breakpoint LG

<div class="fr-hidden fr-unhidden-lg">
    <p>Lorem [...] elit ut.</p>
</div>

Fondamentaux (core)

Documentation

Reset

Test de titre de paragraphe :

Test de titre H1

Test de titre H2

Test de titre H3

Test de titre H4

Test de titre H5

Test de titre H6

Extrait de code

Test de paragraphe et de lien interne :

Extrait de code

Test de paragraphe et de lien externe :

Extrait de code

Test de lien externe raw-link :

Extrait de code

Test de lien externe reset-link :

Extrait de code

Test de liste non-ordonnée:

Extrait de code

Test de liste ordonnée :

Extrait de code

Séparateur de base - hr

Extrait de code

Test d'exposant :

Extrait de code

Test d'indice :

Extrait de code

Affichage

Séparateur - hr

Extrait de code

Typographie

Headings

Test de titre h5 avec class fr-h1

Test de titre h5 avec class fr-h2

Test de titre h5 avec class fr-h3

Test de titre h5 avec class fr-h4

Test de titre h5 avec class fr-h5

Test de titre h5 avec class fr-h6

Extrait de code

Displays

Test de titre h5 avec class fr-display-xl

Test de titre h5 avec class fr-display-lg

Test de titre h5 avec class fr-display-md

Test de titre h5 avec class fr-display-sm

Test de titre h5 avec class fr-display-xs

Extrait de code

Style Chapo

Extrait de code

Style LG

Extrait de code

Style MD

Extrait de code

Style SM

Extrait de code

Style XS

Extrait de code

Graisse light

Extrait de code

Graisse regular

Extrait de code

Graisse bold

Extrait de code

Font Spectral, graisse regular

Extrait de code

Font Spectral, graisse extra-bold (heavy)

Extrait de code

Icône

Icone LG

Extrait de code

Icone MD (par défault)

Extrait de code

Icone SM

Extrait de code

Icône de favori

Snippet à inclure dans <head></head>

Extrait de code

Tailles et formats

favicon.ico (32px)