-
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 :
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 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 :
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 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
- 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
- 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
- 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.
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> - Item list
-
Séparateur - 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.
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.
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.
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> <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
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 class="fr-text--lead">Lorem [...] elit ut.</p>Style LG
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 class="fr-text--lg">Lorem [...] elit ut.</p>Style MD
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 class="fr-text--md">Lorem [...] elit ut.</p>Style SM
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 class="fr-text--sm">Lorem [...] elit ut.</p>Style XS
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 class="fr-text--xs">Lorem [...] elit ut.</p>Graisse light
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 class="fr-text--light">Lorem [...] elit ut.</p>Graisse regular
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 class="fr-text--regular">Lorem [...] elit ut.</p>Graisse bold
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 class="fr-text--bold">Lorem [...] elit ut.</p>Font Spectral, graisse regular
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 class="fr-text--regular fr-text--alt">Lorem [...] elit ut.</p>Font Spectral, graisse extra-bold
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 class="fr-text--xx-bold fr-text--alt">Lorem [...] elit ut.</p> -
Statuts (Icon font / SVG symbols)
<span class="fr-fi-alert-fill" aria-hidden="true"></span> <span class="fr-fi-alert-line" aria-hidden="true"></span> <span class="fr-fi-question-fill" aria-hidden="true"></span> <span class="fr-fi-question-line" aria-hidden="true"></span> <span class="fr-fi-information-fill" aria-hidden="true"></span> <span class="fr-fi-information-line" aria-hidden="true"></span> <span class="fr-fi-error-warning-fill" aria-hidden="true"></span> <span class="fr-fi-error-warning-line" aria-hidden="true"></span><span class="fr-fi-close-line" aria-hidden="true"></span> <span class="fr-fi-check-line" aria-hidden="true"></span> <span class="fr-fi-checkbox-circle-fill" aria-hidden="true"></span> <span class="fr-fi-checkbox-circle-line" aria-hidden="true"></span> <span class="fr-fi-close-circle-fill" aria-hidden="true"></span> <span class="fr-fi-close-circle-line" aria-hidden="true"></span><span class="fr-fi-add-circle-fill" aria-hidden="true"></span> <span class="fr-fi-add-circle-line" aria-hidden="true"></span> <span class="fr-fi-substract-line" aria-hidden="true"></span> <span class="fr-fi-add-line" aria-hidden="true"></span>Navigation (Icon font / SVG symbols)
<span class="fr-fi-menu-fill" aria-hidden="true"></span> <span class="fr-fi-menu-2-fill" aria-hidden="true"></span><span class="fr-fi-arrow-up-line" aria-hidden="true"></span> <span class="fr-fi-arrow-right-line" aria-hidden="true"></span> <span class="fr-fi-arrow-down-line" aria-hidden="true"></span> <span class="fr-fi-arrow-left-line" aria-hidden="true"></span> <span class="fr-fi-arrow-up-s-line" aria-hidden="true"></span> <span class="fr-fi-arrow-right-s-line" aria-hidden="true"></span> <span class="fr-fi-arrow-down-s-line" aria-hidden="true"></span> <span class="fr-fi-arrow-left-s-line" aria-hidden="true"></span> <span class="fr-fi-arrow-left-s-first-line" aria-hidden="true"></span> <span class="fr-fi-arrow-left-s-line-double" aria-hidden="true"></span> <span class="fr-fi-arrow-right-s-last-line" aria-hidden="true"></span> <span class="fr-fi-arrow-right-s-line-double" aria-hidden="true"></span> <span class="fr-fi-arrow-right-up-line" aria-hidden="true"></span><span class="fr-fi-user-fill" aria-hidden="true"></span> <span class="fr-fi-user-line" aria-hidden="true"></span> <span class="fr-fi-account-fill" aria-hidden="true"></span> <span class="fr-fi-account-line" aria-hidden="true"></span> <span class="fr-fi-lock-fill" aria-hidden="true"></span> <span class="fr-fi-lock-line" aria-hidden="true"></span> <span class="fr-fi-logout-box-r-fill" aria-hidden="true"></span> <span class="fr-fi-logout-box-r-line" aria-hidden="true"></span>Actions (Icon font / SVG symbols)
<span class="fr-fi-search-fill" aria-hidden="true"></span> <span class="fr-fi-search-line" aria-hidden="true"></span><span class="fr-fi-eye-fill" aria-hidden="true"></span> <span class="fr-fi-eye-line" aria-hidden="true"></span> <span class="fr-fi-eye-off-fill" aria-hidden="true"></span> <span class="fr-fi-eye-off-line" aria-hidden="true"></span><span class="fr-fi-printer-fill" aria-hidden="true"></span> <span class="fr-fi-printer-line" aria-hidden="true"></span> <span class="fr-fi-upload-2-fill" aria-hidden="true"></span> <span class="fr-fi-upload-2-line" aria-hidden="true"></span> <span class="fr-fi-file-download-fill" aria-hidden="true"></span> <span class="fr-fi-file-download-line" aria-hidden="true"></span> <span class="fr-fi-download-line" aria-hidden="true"></span> <span class="fr-fi-external-link-line" aria-hidden="true"></span> <span class="fr-fi-edit-fill" aria-hidden="true"></span> <span class="fr-fi-edit-line" aria-hidden="true"></span> <span class="fr-fi-links-fill" aria-hidden="true"></span><span class="fr-fi-delete-line" aria-hidden="true"></span> <span class="fr-fi-delete-fill" aria-hidden="true"></span><span class="fr-fi-save-fill" aria-hidden="true"></span> <span class="fr-fi-save-line" aria-hidden="true"></span><span class="fr-fi-calendar-fill" aria-hidden="true"></span> <span class="fr-fi-calendar-line" aria-hidden="true"></span><span class="fr-fi-file-fill" aria-hidden="true"></span> <span class="fr-fi-file-line" aria-hidden="true"></span><span class="fr-fi-mail-fill" aria-hidden="true"></span> <span class="fr-fi-mail-line" aria-hidden="true"></span><span class="fr-fi-refresh-fill" aria-hidden="true"></span> <span class="fr-fi-refresh-line" aria-hidden="true"></span><span class="fr-fi-equalizer-fill" aria-hidden="true"></span> <span class="fr-fi-equalizer-line" aria-hidden="true"></span><span class="fr-fi-attachment-fill" aria-hidden="true"></span> <span class="fr-fi-attachment-line" aria-hidden="true"></span><span class="fr-fi-theme-fill" aria-hidden="true"></span>Contenus et médias (Icon font / SVG symbols)
<span class="fr-fi-play-fill" aria-hidden="true"></span> <span class="fr-fi-play-line" aria-hidden="true"></span> <span class="fr-fi-volume-up-fill" aria-hidden="true"></span> <span class="fr-fi-volume-up-line" aria-hidden="true"></span> <span class="fr-fi-volume-mute-fill" aria-hidden="true"></span> <span class="fr-fi-volume-mute-line" aria-hidden="true"></span> <span class="fr-fi-volume-down-fill" aria-hidden="true"></span> <span class="fr-fi-volume-down-line" aria-hidden="true"></span> <span class="fr-fi-pause-circle-fill" aria-hidden="true"></span> <span class="fr-fi-pause-circle-line" aria-hidden="true"></span><span class="fr-fi-file-pdf-fill" aria-hidden="true"></span> <span class="fr-fi-file-pdf-line" aria-hidden="true"></span><span class="fr-fi-chat-quote-fill" aria-hidden="true"></span> <span class="fr-fi-chat-quote-line" aria-hidden="true"></span>Réseaux Sociaux (Icon font / SVG symbols)
<span class="fr-fi-dailymotion-fill" aria-hidden="true"></span> <span class="fr-fi-dailymotion-line" aria-hidden="true"></span> <span class="fr-fi-facebook-circle-fill" aria-hidden="true"></span> <span class="fr-fi-facebook-circle-line" aria-hidden="true"></span> <span class="fr-fi-github-fill" aria-hidden="true"></span> <span class="fr-fi-github-line" aria-hidden="true"></span> <span class="fr-fi-instagram-fill" aria-hidden="true"></span> <span class="fr-fi-instagram-line" aria-hidden="true"></span> <span class="fr-fi-linkedin-box-fill" aria-hidden="true"></span> <span class="fr-fi-linkedin-box-line" aria-hidden="true"></span> <span class="fr-fi-npmjs-fill" aria-hidden="true"></span> <span class="fr-fi-npmjs-line" aria-hidden="true"></span> <span class="fr-fi-remixicon-fill" aria-hidden="true"></span> <span class="fr-fi-remixicon-line" aria-hidden="true"></span> <span class="fr-fi-slack-fill" aria-hidden="true"></span> <span class="fr-fi-slack-line" aria-hidden="true"></span> <span class="fr-fi-snapchat-fill" aria-hidden="true"></span> <span class="fr-fi-snapchat-line" aria-hidden="true"></span> <span class="fr-fi-telegram-fill" aria-hidden="true"></span> <span class="fr-fi-telegram-line" aria-hidden="true"></span> <span class="fr-fi-twitter-fill" aria-hidden="true"></span> <span class="fr-fi-twitter-line" aria-hidden="true"></span> <span class="fr-fi-tiktok-fill" aria-hidden="true"></span> <span class="fr-fi-tiktok-line" aria-hidden="true"></span> <span class="fr-fi-twitch-fill" aria-hidden="true"></span> <span class="fr-fi-twitch-line" aria-hidden="true"></span> <span class="fr-fi-vimeo-fill" aria-hidden="true"></span> <span class="fr-fi-vimeo-line" aria-hidden="true"></span> <span class="fr-fi-youtube-fill" aria-hidden="true"></span> <span class="fr-fi-youtube-line" aria-hidden="true"></span>Icone LG
<span class="fr-fi-alert-fill fr-fi--lg" aria-hidden="true"></span>Icone MD (par défault)
<span class="fr-fi-alert-fill" aria-hidden="true"></span>Icone SM
<span class="fr-fi-alert-fill fr-fi--sm" aria-hidden="true"></span> -
Snippet à inclure dans <head></head>
<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)
-
Responsives img
<div> <img class="fr-responsive-img" src="../img/placeholder.16x9.png" alt="" /> <!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance --> </div>Responsives videos default 16x9
<div class="fr-responsive-vid"> <iframe title="titre de l’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>esponsives videos ratio d'aspect 4x3
<div class="fr-responsive-vid fr-responsive-vid--4x3"> <iframe title="titre de l’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>esponsives videos ratio d'aspect 1x1
<div class="fr-responsive-vid fr-responsive-vid--1x1"> <iframe title="titre de l’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
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.colcol<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/41/41/41/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/61/61/61/61/61/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
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.colcol<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/41/41/41/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/61/61/61/61/61/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/123/122/124/125/127/129/123/125/125/122/1212/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/123/122/124/125/127/129/123/125/125/122/1212/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/126/124/123/123/124/124/124/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/126/124/123/123/124/124/124/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 topLorem 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.align topalign 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 bottomLorem 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.align bottomalign 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 middleLorem 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.align middlealign 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
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.align topalign middlealign 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 leftalign 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 leftalign 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 centeralign 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/123/123/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/121/121/121/121/121/121/121/121/121/121/121/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 d'espacement 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-4vPour 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 -8v -2 -32 1 2fr-ml-n8v -6v -1.5 -24 1 2fr-ml-n6v -4v -1 -16 1 2fr-ml-n4v -2v -0.5 -8 1 2fr-ml-n2v 0v 0 0 1 2fr-ml-0 2v 0.5 8 1 2fr-ml-2v 4v 1 16 1 2fr-ml-4v 6v 1.5 24 1 2fr-ml-6v 8v 2 32 1 2fr-ml-8v 10v 2.5 40 1 2fr-ml-10v 12v 3 48 1 2fr-ml-12v 14v 3.5 56 1 2fr-ml-14v 16v 4 64 1 2fr-ml-16v 18v 4.5 72 1 2fr-ml-18v 20v 5 80 1 2fr-ml-20v 22v 5.5 88 1 2fr-ml-22v 24v 6 96 1 2fr-ml-24v 26v 6.5 104 1 2fr-ml-26v 28v 7 112 1 2fr-ml-28v 30v 7.5 120 1 2fr-ml-30v 32v 8 128 1 2fr-ml-32v auto auto auto 1 2.fr-ml-auto -
Regarder avec l'inspecteur les block de textes cachés grâce à ces utilitaires
sr-only
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.
<div class="fr-sr-only"> <p>Lorem [...] elit ut.</p> </div>sr-only à partir du breakpoint LG
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.
<div class="fr-sr-only-lg"> <p>Lorem [...] elit ut.</p> </div>hidden
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.
<div class="fr-hidden"> <p>Lorem [...] elit ut.</p> </div>hidden à partir du breakpoint LG
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.
<div class="fr-hidden-lg"> <p>Lorem [...] elit ut.</p> </div>displayed à partir du breakpoint LG
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.
<div class="fr-displayed-lg"> <p>Lorem [...] elit ut.</p> </div>