DSFR v1.12.1

Fondamentaux (core)

Le package core est utilisé comme fondation du Design System, il contient plusieurs éléments fondamentaux.

### Typographie

Les typographies Marianne® et Spectral sont les typographies officielles de la charte de l'État. Leur usage crée une cohérence entre les interfaces et offre une expérience positive à l’utilisateur. Leur respect renforce également la reconnaissance de la parole de l’État.

### Icônes

Les icônes fonctionnelles sont des symboles visuels qui accompagnent l’utilisateur dans ses actions et qui aident à sa compréhension de l’interface.

### Icônes de favoris - Favicon

L’icône de favoris est un petit icône associé à un site web. Il permet à l’utilisateur de repérer qu’il se trouve sur un site de l'état.

### Medias

Les médias désignent vos contenus photos et vidéos. Lorsqu’ils sont intégré à une page de contenu, il est recommandé de suivre les règles décrites ci-dessous.

### Grille

La grille proposée par le design system vous permet de structurer vos pages et vos contenus simplement.

Documentation

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 (heavy)

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--heavy fr-text--alt">Lorem [...] elit ut.</p>