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>

Pictogramme - artwork

Les pictogrammes svg, ou "artwork", sont disponibles dans le dossier dist/artwork.
Contrairement aux icônes, les pictogrammes sont composés de 3 couleurs : "decorative", "minor", "major".
La couleur mineure peut être modifiée par un modificateur d'accentuation (ex: fr-artwork--green-emeraude)

Ajout d'un pictogramme

<svg class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
    <use class="fr-artwork-decorative" xlink:href="../../dist/artwork/test.svg#artwork-decorative"></use>
    <use class="fr-artwork-minor" xlink:href="../../dist/artwork/test.svg#artwork-minor"></use>
    <use class="fr-artwork-major" xlink:href="../../dist/artwork/test.svg#artwork-major"></use>
</svg>

Pictogramme accentué en green-emeraude

<svg class="fr-artwork fr-artwork--green-emeraude" viewBox="0 0 80 80" width="80px" height="80px">
    <use class="fr-artwork-decorative" xlink:href="../../dist/artwork/test.svg#artwork-decorative"></use>
    <use class="fr-artwork-minor" xlink:href="../../dist/artwork/test.svg#artwork-minor"></use>
    <use class="fr-artwork-major" xlink:href="../../dist/artwork/test.svg#artwork-major"></use>
</svg>

Formatage du SVG

Pour fonctionner en accord avec les couleurs du design system, les fichiers SVG doivent être formatés de cette façon :

<svg width="80px" height="80px" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <style>
        .fr-artwork-decorative {
            fill: #ECECFF;
        }

        .fr-artwork-minor {
            fill: #E1000F;
        }

        .fr-artwork-major {
            fill: #000091;
        }

    </style>
    <g class="fr-artwork-decorative" id="artwork-decorative">
        <path d="M19,70 C19.5514001,70 20,70.4485529 20,71 C20,71.5514001 19.5514001,72 19,72 C18.4485999,72 18,71.5514001 18,71 C18,70.4485529 18.4485999,70 19,70 Z M67,64 C67.5514001,64 68,64.4485529 68,65 C68,65.5514001 67.5514001,66 67,66 C66.4485999,66 66,65.5514001 66,65 C66,64.4485529 66.4485999,64 67,64 Z M9,30 C9.55140011,30 10,30.4485529 10,31 C10,31.5514001 9.55140011,32 9,32 C8.44859989,32 8,31.5514001 8,31 C8,30.4485529 8.44859989,30 9,30 Z M67,14 C67.5514001,14 68,14.4485529 68,15 C68,15.5514001 67.5514001,16 67,16 C66.4485999,16 66,15.5514001 66,15 C66,14.4485529 66.4485999,14 67,14 Z M31,8 C31.5514001,8 32,8.4485529 32,9 C32,9.55140011 31.5514001,10 31,10 C30.4485999,10 30,9.55140011 30,9 C30,8.4485529 30.4485999,8 31,8 Z"></path>
    </g>
    <g class="fr-artwork-minor" id="artwork-minor">
        <path d="M32.4452998,44.1679497 C32.9048285,43.8615972 33.5256978,43.9857711 33.8320503,44.4452998 C35.3155962,46.6706186 38.5061115,48 41,48 C41.5522847,48 42,48.4477153 42,49 C42,49.5522847 41.5522847,50 41,50 C37.8938885,50 34.0690192,48.4063045 32.1679497,45.5547002 C31.8615972,45.0951715 31.9857711,44.4743022 32.4452998,44.1679497 Z"></path>
    </g>
    <g class="fr-artwork-major" id="artwork-major">
        <path d="M40,59.0701754 C40.5128358,59.0701754 40.9355072,59.4562156 40.9932723,59.9535543 L41,60.0701754 L41,65.5438596 C41,66.0961444 40.5522847,66.5438596 40,66.5438596 C39.4871642,66.5438596 39.0644928,66.1578195 39.0067277,65.6604808 L39,65.5438596 L39,60.0701754 C39,59.5178907 39.4477153,59.0701754 40,59.0701754 Z M25.4595522,53.8832627 C25.8231571,54.2405985 25.8558178,54.807567 25.5542156,55.2024956 L25.4718493,55.2974228 L23.6787458,57.1219842 C23.291632,57.5158894 22.658491,57.521395 22.2645857,57.1342812 C21.9009809,56.7769454 21.8683201,56.2099769 22.1699224,55.8150482 L22.2522887,55.7201211 L24.0453921,53.8955597 C24.4325059,53.5016544 25.065647,53.4961489 25.4595522,53.8832627 Z M55.8611275,53.8115551 L55.9546079,53.8955597 L57.7477113,55.7201211 C58.1348251,56.1140264 58.1293195,56.7471674 57.7354143,57.1342812 C57.3718094,57.491617 56.8043587,57.5144132 56.4147346,57.2059888 L56.3212542,57.1219842 L54.5281507,55.2974228 C54.1410369,54.9035175 54.1465425,54.2703764 54.5404478,53.8832627 C54.9040526,53.5259268 55.4715034,53.5031306 55.8611275,53.8115551 Z M40,26 C47.7319865,26 54,32.2680135 54,40 C54,47.7319865 47.7319865,54 40,54 C35.8606631,54 32.0127918,52.1918046 29.3698654,49.1108073 C29.0102809,48.6916207 29.0585978,48.060302 29.4777843,47.7007174 C29.8969709,47.3411328 30.5282896,47.3894497 30.8878742,47.8086363 C33.1547633,50.4512673 36.4504935,52 40,52 C46.627417,52 52,46.627417 52,40 C52,33.372583 46.627417,28 40,28 C33.372583,28 28,33.372583 28,40 C28,41.6435761 28.3300294,43.2391661 28.9619532,44.7161069 C29.1792036,45.2238673 28.9436987,45.8116048 28.4359382,46.0288552 C27.9281777,46.2461056 27.3404402,46.0106006 27.1231899,45.5028401 C26.3853625,43.7783803 26,41.9152719 26,40 C26,32.2680135 32.2680135,26 40,26 Z M19.3793103,39 C19.9315951,39 20.3793103,39.4477153 20.3793103,40 C20.3793103,40.5128358 19.9932702,40.9355072 19.4959315,40.9932723 L19.3793103,41 L14,41 C13.4477153,41 13,40.5522847 13,40 C13,39.4871642 13.3860402,39.0644928 13.8833789,39.0067277 L14,39 L19.3793103,39 Z M66,39 C66.5522847,39 67,39.4477153 67,40 C67,40.5128358 66.6139598,40.9355072 66.1166211,40.9932723 L66,41 L60.6206897,41 C60.0684049,41 59.6206897,40.5522847 59.6206897,40 C59.6206897,39.4871642 60.0067298,39.0644928 60.5040685,39.0067277 L60.6206897,39 L66,39 Z M57.7354143,21.0411574 C58.0990191,21.3984932 58.1316799,21.9654617 57.8300776,22.3603904 L57.7477113,22.4553175 L55.9546079,24.2798789 C55.5674941,24.6737842 54.934353,24.6792897 54.5404478,24.2921759 C54.1768429,23.9348401 54.1441822,23.3678716 54.4457844,22.972943 L54.5281507,22.8780158 L56.3212542,21.0534544 C56.708368,20.6595492 57.341509,20.6540436 57.7354143,21.0411574 Z M23.5852654,20.9694498 L23.6787458,21.0534544 L25.4718493,22.8780158 C25.8589631,23.2719211 25.8534575,23.9050621 25.4595522,24.2921759 C25.0959474,24.6495117 24.5284966,24.672308 24.1388725,24.3638835 L24.0453921,24.2798789 L22.2522887,22.4553175 C21.8651749,22.0614122 21.8706805,21.4282712 22.2645857,21.0411574 C22.6281906,20.6838216 23.1956413,20.6610254 23.5852654,20.9694498 Z M40,13.4561404 C40.5128358,13.4561404 40.9355072,13.8421805 40.9932723,14.3395192 L41,14.4561404 L41,19.9298246 C41,20.4821093 40.5522847,20.9298246 40,20.9298246 C39.4871642,20.9298246 39.0644928,20.5437844 39.0067277,20.0464457 L39,19.9298246 L39,14.4561404 C39,13.9038556 39.4477153,13.4561404 40,13.4561404 Z"></path>
    </g>
</svg>

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]

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

Image responsive avec ratio d'aspect 32x9

<img class="fr-responsive-img fr-ratio-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 -->

Image responsive avec ratio d'aspect 16x9

<img class="fr-responsive-img fr-ratio-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 -->

Image responsive avec ratio d'aspect 3x2

<img class="fr-responsive-img fr-ratio-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 -->

Image responsive avec ratio d'aspect 4x3

<img class="fr-responsive-img fr-ratio-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 -->

Image responsive avec ratio d'aspect 1x1

<img class="fr-responsive-img fr-ratio-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 -->

Image responsive avec ratio d'aspect 3x4

<img class="fr-responsive-img fr-ratio-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 -->

Image responsive avec ratio d'aspect 2x3

<img class="fr-responsive-img fr-ratio-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 -->

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

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

Vidéo responsive avec ratio d'aspect 4x3

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

Vidéo responsive avec ratio d'aspect 1x1

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

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 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 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 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 fr-col-3">
            <div class="col-demo">align top</div>
        </div>
        <div class="fr-col--middle fr-col-3 fr-col-3">
            <div class="col-demo">align middle</div>
        </div>
        <div class="fr-col--bottom fr-col-3 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 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 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 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 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

Pictogramme

Pictogramme - artwork

Ajout d'un pictogramme

Extrait de code

Pictogramme accentué en green-emeraude