DSFR v1.12.1

Retour

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

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 aria-expanded="true" aria-controls="collapsed-0" id="button-19" class="fr-mb-2v fr-btn">Toggle</button>
        <ul class="fr-collapse" id="collapsed-0" data-fr-group="group-id">
            <li>list item</li>
            <li>list item</li>
            <li>
                <button aria-expanded="false" aria-controls="collapsed-0-nested" id="button-20" class="fr-mb-2v fr-btn">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 aria-controls="collapsed-0" id="button-21" class="fr-mb-2v fr-btn">Close</button>
            </li>
        </ul>
    </div>
    <div>
        <button aria-expanded="false" aria-controls="collapsed-1" id="button-22" class="fr-mb-2v fr-btn">Toggle</button>
        <ul class="fr-collapse" id="collapsed-1" data-fr-group="group-id">
            <li>list item</li>
            <li>list item</li>
            <li>
                <button aria-expanded="false" aria-controls="collapsed-1-nested" id="button-23" class="fr-mb-2v fr-btn">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 aria-controls="collapsed-1" id="button-24" class="fr-mb-2v fr-btn">Close</button>
            </li>
        </ul>
    </div>
    <div>
        <button aria-expanded="false" aria-controls="collapsed-2" id="button-25" class="fr-mb-2v fr-btn">Toggle</button>
        <ul class="fr-collapse" id="collapsed-2" data-fr-group="group-id">
            <li>list item</li>
            <li>list item</li>
            <li>
                <button aria-expanded="false" aria-controls="collapsed-2-nested" id="button-26" class="fr-mb-2v fr-btn">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 aria-controls="collapsed-2" id="button-27" class="fr-mb-2v fr-btn">Close</button>
            </li>
        </ul>
    </div>
</div>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.