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.
<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" id="button-19">
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" id="button-20">
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" id="button-21">
Close
</button>
</li>
</ul>
</div>
<div>
<button class="fr-mb-2v fr-btn" aria-expanded="false" aria-controls="collapsed-1" id="button-22">
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" id="button-23">
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" id="button-24">
Close
</button>
</li>
</ul>
</div>
<div>
<button class="fr-mb-2v fr-btn" aria-expanded="false" aria-controls="collapsed-2" id="button-25">
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" id="button-26">
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" id="button-27">
Close
</button>
</li>
</ul>
</div>
</div>