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

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 href="#" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre">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 :

  1. 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
  2. Item list
  3. 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>

Test de liste de description :

Lieu
Paris
Dates
Samedi 7 septembre
Mercredi 14 octobre
Heure
À partir de 10 heures

<dl>
    <dt>Lieu</dt>
    <dd>Paris</dd>
    <dt>Dates</dt>
    <dd>Samedi 7 septembre</dd>
    <dd>Mercredi 14 octobre</dd>
    <dt>Heure</dt>
    <dd>À partir de 10 heures</dd>
</dl>

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>

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>

Paramètres d’affichage

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