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

Liens réinitialisés

Utilisation de la classe village-reset-link pour réinitialiser le style des liens.

Lien réinitialisé

Utilisation de la classe village-reset-link sur les balises de lien pour réinitialiser le style des liens.

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 class="village-reset-link" title="titre lien" href="../">lien interne</a> incididunt, [...] elit ut.</p>

Lien externe réinitialisé

Utilisation de la classe village-reset-link sur les balises de lien pour réinitialiser le style des liens.

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 class="village-reset-link" href="https://www.systeme-de-design.gouv.fr/" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre">lien externe - nouvelle fenêtre</a> incididunt, [...] elit ut.</p>

Exemple sur plusieurs blocs de texte

Utilisation de la classe village-reset-link sur un wrapper pour réinitialiser le style des liens.

<div class="village-reset-link">
    <p>Lorem [...] adipiscing, <a title="titre lien" href="../">lien interne</a> incididunt, [...] elit ut.</p>
    <p>Lorem [...] adipiscing, <a href="https://www.systeme-de-design.gouv.fr/" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre">lien externe - nouvelle fenêtre</a> incididunt, [...] elit ut.</p>
</div>

Exemple d'utilisation avec une librairie externe

Utilisation de la classe village-reset-link sur un wrapper pour afficher les liens de manière brut.

<!-- Based on Leaflet Quick Start Guide [https://leafletjs.com/examples/quick-start/]  -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script
  src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
  integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
  crossorigin=""
></script>
<div class="village-reset-link">
    <div id="map" class="map"></div>
    <div class="village-toggle">
        <input type="checkbox" class="village-toggle__input" checked id="village-reset-link">
        <label class="village-toggle__label" for="village-reset-link" data-village-checked-label="Activé" data-village-unchecked-label="Désactivé">Interupteur de la classe
            <code class="village-px-1w">village-reset-link</code>sur le wrapper
        </label>
    </div>
</div>
<style>
    .map {
        height: 400px;
    }

</style>
<script>
  const map = L.map('map', {
    center: [48.8588897, 2.320041],
    zoom: 13,
  });
  const linkClass = 'village-reset-link';

  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution:
      '&copy; <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
  }).addTo(map);

  L.popup({ closeButton: false })
    .setLatLng([48.8588897, 2.320041])
    .setContent('20 avenue de Ségur 75007 Paris')
    .openOn(map);

  const toggle = document.getElementById(linkClass);
  const wrapper = document.getElementById('map').parentNode;

  toggle.addEventListener('change', function () {
    if (this.checked) {
      wrapper.classList.add(linkClass);
    } else {
      wrapper.classList.remove(linkClass);
    }
  });
</script>

Paramètres d’affichage

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