Installation

Vous êtes designer ?

Consultez nos ressources et design system pour concevoir vos maquettes sous Figma.

Consulter l'UI Kit sur Figma

Installation rapide

Le design system de France Travail nécessite 2 dépendances :

Ces liens doivent être inclus dans le <head> de votre projet :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <!-- Styles CSS du design system -->
        <link href="https://cdn.francetravail.fr/studio/design-system/css/styles.css" rel="stylesheet">

        <!-- Script de chargement des webcomposants -->
        <script src="https://cdn.francetravail.fr/webco/v1/ft-autoloader.js" fetchpriority="high"></script>
    </head>
    <body>
        <!-- Vous pouvez utiliser le design system de France Travail -->
    </body>
</html>

Pour aller plus loin

JavaScript

Il est possible de consulter les scripts JavaScript dont dépend le composant sélectionné dans l’onglet “Dépendances”.

Les webcomposants dépendent uniquement du script ft-autoloader.js hébergé sur le serveur de ressources de France Travail à cette adresse : https://cdn.francetravail.fr/webco/v1/ft-autoloader.js.

Parmi les exceptions restantes :

Webcomposants

Certains composants du design system sont développés en utilisant la technologie des Web Components.

Ils sont identifiables par la présence du badge webco affiché dans le panneau latéral de navigation.

Il existe une documentation technique dédiée, à destination des développeurs, consultable ici