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

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.
col
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
1/4
1/4
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
1/6
1/6
1/6
1/6
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

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.
col
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
1/4
1/4
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
1/6
1/6
1/6
1/6
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
3/12
2/12
4/12
5/12
7/12
9/12
3/12
5/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
3/12
2/12
4/12
5/12
7/12
9/12
3/12
5/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
6/12
4/12
3/12
3/12
4/12
4/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
6/12
4/12
3/12
3/12
4/12
4/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
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 top
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
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 bottom
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
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 middle
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

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 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
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
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
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
3/12
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
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
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>

Paramètres d’affichage

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