├── .gitignore ├── LICENSE ├── Procfile ├── README.md ├── index.js ├── package-lock.json ├── package.json ├── static └── css │ └── custom.css └── views ├── accessibilite.ejs ├── colors.ejs ├── components.ejs ├── contact.ejs ├── form.ejs ├── landing.ejs ├── legalNotice.ejs ├── partials ├── accordion-item.ejs ├── ariane.ejs ├── call-out.ejs ├── card.ejs ├── color-card.ejs ├── contrast-card.ejs ├── dark-mode-modale.ejs ├── dark-mode-switch.ejs ├── footer.ejs ├── header.ejs ├── scheme-cards.ejs ├── section.ejs └── tile.ejs ├── ressources.ejs └── typography.ejs /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 beta.gouv.fr 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: npm start 2 | 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Un site de démo du Design System de l'Etat 2 | Vous pouvez voir ce site en ligne là : https://template.incubateur.net 3 | 4 | Ce site a pour but d'être un point de départ pour utiliser le Design System de l'Etat. N'hésitez pas à le copier! 5 | 6 | 7 | ## Lancer en prod 8 | 9 | ``` 10 | npm start 11 | ``` 12 | 13 | Ce repo contient tout ce qu'il faut pour tourner sur Scalingo. Il suffit de déployer la branche main sur votre instance Scalingo. 14 | 15 | 16 | ## Tester que le HTML d'un site est valide 17 | ``` 18 | npm run checkHTML -- 19 | ``` 20 | Si on veut checker pour une PR donnée, utiliser l'url de la review app de la PR (voir les checks dans la PR). 21 | 22 | 23 | ## Lancer ce site localement 24 | Vous devez avoir npm installé sur votre machine. 25 | 26 | ``` 27 | git clone https://github.com/betagouv/template-design-system-de-l-etat 28 | cd template-design-system-de-l-etat 29 | npm install 30 | npm run dev 31 | ``` 32 | 33 | ## Mettre à jour le Design System 34 | 35 | - Modifier la version de `@gouvfr/dsfr` dans `package.json` 36 | - Lancer la commande 37 | ``` 38 | npm install 39 | ``` 40 | - Modifier les templates selon la note de version 41 | 42 | ## Voir la documentation locale du DSFR 43 | 44 | ```` 45 | cd node_modules/@gouvfr/dsfr && npx http-server -o 46 | ```` 47 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | const path = require('path') 3 | 4 | const designSystemVersion = require('./package-lock.json').dependencies['@gouvfr/dsfr'].version 5 | const appName = `Démo du Design System de l\'État - version ${designSystemVersion}` 6 | const appDescription = "Ressources autour Design System de l'État." 7 | const appRepo = 'https://github.com/betagouv/template-design-system-de-l-etat' 8 | const port = process.env.PORT || 8080 9 | 10 | const app = express() 11 | 12 | app.set('view engine', 'ejs') 13 | app.set('views', path.join(__dirname, 'views')) 14 | 15 | app.use('/static', express.static('static')) 16 | // Hack for importing css from npm package 17 | app.use('/~', express.static(path.join(__dirname, 'node_modules'))) 18 | // Populate some variables for all views 19 | app.use(function(req, res, next){ 20 | res.locals.appName = appName 21 | res.locals.appDescription = appDescription 22 | res.locals.appRepo = appRepo 23 | res.locals.page = req.url 24 | next() 25 | }) 26 | 27 | app.get('/', (req, res) => { 28 | res.render('landing') 29 | }) 30 | 31 | app.get('/ressources', (req, res) => { 32 | res.render('ressources', { 33 | pageTitle: 'Ressources' 34 | }) 35 | }) 36 | 37 | app.get('/formulaire', (req, res) => { 38 | res.render('form', { 39 | pageTitle: 'Formulaire' 40 | }) 41 | }) 42 | 43 | app.get('/contact', (req, res) => { 44 | res.render('contact', { 45 | pageTitle: 'Contact' 46 | }) 47 | }) 48 | 49 | app.get('/accessibilite', (req, res) => { 50 | res.render('accessibilite', { 51 | pageTitle: 'Accessibilité' 52 | }) 53 | }) 54 | 55 | app.get('/components', (req, res) => { 56 | res.render('components', { 57 | pageTitle: 'Composants' 58 | }) 59 | }) 60 | 61 | app.get('/colors', (req, res) => { 62 | res.render('colors', { 63 | pageTitle: 'Couleurs' 64 | }) 65 | }) 66 | 67 | app.get('/typography', (req, res) => { 68 | res.render('typography', { 69 | pageTitle: 'Typographie' 70 | }) 71 | }) 72 | 73 | app.get('/mentions-legales', (req, res) => { 74 | res.render('legalNotice', { 75 | pageTitle: "Mentions légales", 76 | contactEmail: 'mon-produit@beta.gouv.fr', 77 | }) 78 | }) 79 | 80 | module.exports = app.listen(port, () => { 81 | console.log(`${appName} listening at http://localhost:${port}`) 82 | }) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-design-system-de-l-etat", 3 | "version": "1.4", 4 | "description": "Démonstration du Design System de l'Etat.", 5 | "main": "index.js", 6 | "scripts": { 7 | "checkHTML": "site-validator --verbose --url", 8 | "checkHTMLLocal": "site-validator --verbose --local --url http://localhost:8080", 9 | "dev": "nodemon index.js", 10 | "start": "node index.js" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/betagouv/template-design-system-de-l-etat.git" 15 | }, 16 | "author": "estelle.comment@beta.gouv.fr", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/betagouv/template-design-system-de-l-etat/issues" 20 | }, 21 | "homepage": "https://github.com/betagouv/template-design-system-de-l-etat#readme", 22 | "dependencies": { 23 | "@gouvfr/dsfr": "^1.4", 24 | "ejs": "^3.1.5", 25 | "express": "^4.17.1" 26 | }, 27 | "devDependencies": { 28 | "nodemon": "^2.0.6" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /static/css/custom.css: -------------------------------------------------------------------------------- 1 | .rf-centered { 2 | text-align: center; 3 | } 4 | 5 | .rf-bg--alt, .rf-bg--alt h2 { 6 | background-color: var(--bf500); 7 | color: var(--g100); 8 | } 9 | p.rf-hint-text { 10 | margin-bottom: 0; 11 | } 12 | .tofill { 13 | background-color: #fffacd; 14 | font-weight: lighter; 15 | padding: .1em .2em; 16 | } 17 | span.tofill::after { 18 | content: "]"; 19 | } 20 | span.tofill::before { 21 | content: "["; 22 | } 23 | -------------------------------------------------------------------------------- /views/accessibilite.ejs: -------------------------------------------------------------------------------- 1 | <%- include('partials/header') -%> 2 |
3 |
4 | <%- include('partials/ariane', 5 | { 6 | items: [ 7 | { 8 | label: 'Accueil', 9 | url: '/' 10 | }, 11 | { 12 | label: "Déclaration d'accessibilité", 13 | }, 14 | ], 15 | }) 16 | -%> 17 | 18 | 19 |

Déclaration d’accessibilité

20 |

Nom de l’entité s’engage à rendre ses sites internet, intranet, extranet et ses progiciels accessibles (et ses applications mobiles et mobilier urbain numérique) conformément à l’article 47 de la loi n°2005-102 du 11 février 2005.

À cette fin, elle met en œuvre la stratégie et les actions suivantes :

  • Schéma pluriannuel de mise en accessibilité 2020-2022 url
  • Actions réalisées en 2019-2020 url
  • Plan d’actions 2020-2021 url

Cette déclaration d’accessibilité s’applique à www.nomdusite.gouv.fr.

État de conformité

Nom du site, url est non/partiellement/totalement conforme avec le référentiel général d’amélioration de l’accessibilité (RGAA), version 4 en raison des non-conformités et des dérogations énumérées ci-dessous.

Résultats des tests

L’audit de conformité réalisé par nom de l’entité qui a réalisé l’audit révèle que :

  • nn% des critères du RGAA version 4 sont respectés
  • (Facultatif) Le taux moyen de conformité du site s’élève à nn%
  • (Facultatif) Accès à la grille d’audit RGAA url pour télécharger la grille d’audit

Contenus non accessibles

Non-conformités

  • Ex. : La vidéo de présentation de la demande d’aide n’a pas de transcription. Pour toute question 21 | sur cette démarche, vous pouvez contacter le NN NN NN NN NN. La version 2020 respectera les 22 | critères du RGAA sur les alternatives texte pour les documents multimédias.
  • Ex. : Le bouton d’envoi du formulaire de déclaration contient un intitulé « Retour » au lieu de 23 | « Envoi ». Cette erreur sera corrigée avant le 31 mars 2020
  • Ex. : La connexion au compte personnel contient une vérification que vous n’êtes pas un robot 24 | avec un captcha visuel. Il est possible d’effectuer sa démarche par téléphone ou au guichet pour 25 | les personnes empêchées d’accéder à leur compte...

Dérogations pour charge disproportionnée

  • Ex. : Les archives des comptes rendus des séances du conseil municipal jusqu’en 2010 sont au format PDF image. Il est cependant possible d’en demander un exemplaire texte par courriel
  • ...

Contenus non soumis à l’obligation d’accessibilité

  • Ex. : Cartes de l’Institut géographique national associées à l’annuaire
  • Ex. : Reproduction du manuscrit du Moyen-Âge...

Établissement de cette déclaration d’accessibilité

Cette déclaration a été établie le JJ/MM/AAAA. Elle a été mise à jour le JJ/MM/AAAA.

Technologies utilisées pour la réalisation de nom, url du site

  • HTML5
  • CSS
  • ...

Environnement de test

Les vérifications de restitution de contenus ont été réalisées sur la base de la combinaison fournie 26 | par la base de référence du RGAA, avec les versions suivantes :

  • Firefox et NVDA
  • Safari et VoiceOver
  • ...

Outils pour évaluer l’accessibilité

  • contrast color
  • ...

Pages du site ayant fait l’objet de la vérification de conformité

  1. page d’accueil url
  2. page contact url
  3. page mentions légales url
  4. page accessibilité url
  5. page plan du site url
  6. page d’aide url
  7. ...

Retour d’information et contact

Si vous n’arrivez pas à accéder à un contenu ou à un service, vous pouvez contacter le responsable de nom, url du site pour être orienté vers une alternative accessible ou obtenir le contenu sous une autre forme.

  • Envoyer un message url du formulaire en ligne
  • Contacter Nom de l’entité responsable du service en ligneurl d’une page avec les coordonnées 27 | de l’entité

Voies de recours

Cette procédure est à utiliser dans le cas suivant.

Vous avez signalé au responsable du site internet un défaut d’accessibilité qui vous empêche d’accéder à un contenu ou à un des services du portail et vous n’avez pas obtenu de réponse satisfaisante.

31 | 32 |
33 |
34 | <%- include('partials/footer') -%> -------------------------------------------------------------------------------- /views/colors.ejs: -------------------------------------------------------------------------------- 1 | <%- include('partials/header') -%> 2 |
3 |
4 | <%- include('partials/ariane', { items: [ 5 | { label: 'Accueil', url: '/' }, 6 | { label: 'Couleurs' }, 7 | ],}) 8 | -%> 9 |
10 | 11 |
12 | 32 |
33 | 34 |
35 |
36 |
37 | 38 |

Variables de couleurs

39 | 40 |

La palette de couleurs du système de design de l’État est définie par la charte graphique de l'État. Cette page montre des exemples de déclinaisons de couleurs. Se référer à la documentation officielle pour comprendre les conditions d'usage.

41 | 42 |
43 | <%- include('partials/card', 44 | { 45 | title: 'Couleurs', 46 | description: "Documentation officielle", 47 | url: 'https://gouvfr.atlassian.net/wiki/spaces/DB/pages/217186370/Couleurs+-+palette+-+Color', 48 | size: '3', 49 | img: '', 50 | }) 51 | -%> 52 | 53 | <%- include('partials/card', 54 | { 55 | title: 'Usage', 56 | description: "Documentation du choix des tokens", 57 | url: 'https://gouvfr.atlassian.net/wiki/spaces/DB/pages/910950417/Couleurs+-+utilisation+dans+le+DSFR', 58 | size: '3', 59 | img: '', 60 | }) 61 | -%> 62 | 63 | <%- include('partials/card', 64 | { 65 | title: 'Tokens', 66 | description: "Arbre des tokens de décision", 67 | url: 'https://www.figma.com/file/yo9dg7nZb69TAd2Hh9N1xK/Tokens---v2?node-id=0%3A1', 68 | size: '3', 69 | img: '', 70 | }) 71 | -%> 72 |
73 | 74 |

Couleurs de fonds

75 | 76 |


Ces couleurs peuvent être utilisées comme fond dans des sections de pages.

77 | 78 |
79 | <%- include('partials/color-card', { color_name: 'background-alt-grey' }) -%> 80 | <%- include('partials/color-card', { color_name: 'background-alt-blue-france' }) -%> 81 | <%- include('partials/color-card', { color_name: 'background-alt-red-marianne' }) -%> 82 | <%- include('partials/color-card', { color_name: 'background-alt-green-tilleul-verveine' }) -%> 83 | <%- include('partials/color-card', { color_name: 'background-alt-green-bourgeon' }) -%> 84 | <%- include('partials/color-card', { color_name: 'background-alt-green-emeraude' }) -%> 85 | <%- include('partials/color-card', { color_name: 'background-alt-green-menthe' }) -%> 86 | <%- include('partials/color-card', { color_name: 'background-alt-green-archipel' }) -%> 87 | <%- include('partials/color-card', { color_name: 'background-alt-blue-ecume' }) -%> 88 | <%- include('partials/color-card', { color_name: 'background-alt-blue-cumulus' }) -%> 89 | <%- include('partials/color-card', { color_name: 'background-alt-purple-glycine' }) -%> 90 | <%- include('partials/color-card', { color_name: 'background-alt-pink-macaron' }) -%> 91 | <%- include('partials/color-card', { color_name: 'background-alt-pink-tuile' }) -%> 92 | <%- include('partials/color-card', { color_name: 'background-alt-yellow-tournesol' }) -%> 93 | <%- include('partials/color-card', { color_name: 'background-alt-yellow-moutarde' }) -%> 94 | <%- include('partials/color-card', { color_name: 'background-alt-orange-terre-battue' }) -%> 95 | <%- include('partials/color-card', { color_name: 'background-alt-brown-caramel' }) -%> 96 | <%- include('partials/color-card', { color_name: 'background-alt-brown-cafe-creme' }) -%> 97 | <%- include('partials/color-card', { color_name: 'background-alt-brown-opera' }) -%> 98 | <%- include('partials/color-card', { color_name: 'background-alt-beige-gris-galet' }) -%> 99 |
100 | 101 |

Composants

102 | 103 |

Badges

104 |
    105 |

  • default

    • 106 |

  • tilleul-verveine

    • 107 |

  • green-bourgeon

    • 108 |

  • green-emeraude

    • 109 |

  • green-menthe

    • 110 |

  • green-archipel

    • 111 |

  • blue-ecume

    • 112 |

  • blue-cumulus

    • 113 |

  • purple-glycine

    • 114 |

  • pink-macaron

    • 115 |

  • pink-tuile

    • 116 |

  • yellow-tournesol

    • 117 |

  • yellow-moutarde

    • 118 |

  • orange-terre-battue

    • 119 |

  • brown-caramel

    • 120 |

  • brown-cafe-creme

    • 121 |

  • beige-gris-galet

    • 122 |
123 | 124 |

Tags

125 | 126 | 146 | 147 |

Mise en avant

148 | 149 |
150 | <%- include('partials/call-out', {title: '', text:'Couleur green-tilleul-verveine', accent:'green-tilleul-verveine'}) -%> 151 | <%- include('partials/call-out', {title: '', text:'Couleur green-bourgeon', accent:'green-bourgeon'}) -%> 152 | <%- include('partials/call-out', {title: '', text:'Couleur green-emeraude', accent:'green-emeraude'}) -%> 153 | <%- include('partials/call-out', {title: '', text:'Couleur green-menthe', accent:'green-menthe'}) -%> 154 | <%- include('partials/call-out', {title: '', text:'Couleur green-archipel', accent:'green-archipel'}) -%> 155 | <%- include('partials/call-out', {title: '', text:'Couleur blue-ecume', accent:'blue-ecume'}) -%> 156 | <%- include('partials/call-out', {title: '', text:'Couleur blue-cumulus', accent:'blue-cumulus'}) -%> 157 | <%- include('partials/call-out', {title: '', text:'Couleur purple-glycine', accent:'purple-glycine'}) -%> 158 | <%- include('partials/call-out', {title: '', text:'Couleur pink-macaron', accent:'pink-macaron'}) -%> 159 | <%- include('partials/call-out', {title: '', text:'Couleur pink-tuile', accent:'pink-tuile'}) -%> 160 | <%- include('partials/call-out', {title: '', text:'Couleur yellow-tournesol', accent:'yellow-tournesol'}) -%> 161 | <%- include('partials/call-out', {title: '', text:'Couleur yellow-moutarde', accent:'yellow-moutarde'}) -%> 162 | <%- include('partials/call-out', {title: '', text:'Couleur orange-terre-battue', accent:'orange-terre-battue'}) -%> 163 | <%- include('partials/call-out', {title: '', text:'Couleur brown-cafe-creme', accent:'brown-cafe-creme'}) -%> 164 | <%- include('partials/call-out', {title: '', text:'Couleur brown-caramel', accent:'brown-caramel'}) -%> 165 | <%- include('partials/call-out', {title: '', text:'Couleur brown-opera', accent:'brown-opera'}) -%> 166 | <%- include('partials/call-out', {title: '', text:'Couleur beige-gris-galet', accent:'beige-gris-galet'}) -%> 167 |
168 | 169 |

Gamme de couleur

170 | 171 |

D'autres composants sont personnalisables :

172 |
    173 |
  • Mise en exergue
    • 174 |
  • Tableaux
    • 175 |
  • d'autres à venir...
    • 176 |
177 | 178 |
179 | <%- include('partials/color-card', { color_name: 'background-contrast-grey' }) -%> 180 | <%- include('partials/color-card', { color_name: 'background-contrast-blue-france' }) -%> 181 | <%- include('partials/color-card', { color_name: 'background-contrast-red-marianne' }) -%> 182 | <%- include('partials/color-card', { color_name: 'background-contrast-green-tilleul-verveine' }) -%> 183 | <%- include('partials/color-card', { color_name: 'background-contrast-green-bourgeon' }) -%> 184 | <%- include('partials/color-card', { color_name: 'background-contrast-green-emeraude' }) -%> 185 | <%- include('partials/color-card', { color_name: 'background-contrast-green-menthe' }) -%> 186 | <%- include('partials/color-card', { color_name: 'background-contrast-green-archipel' }) -%> 187 | <%- include('partials/color-card', { color_name: 'background-contrast-blue-ecume' }) -%> 188 | <%- include('partials/color-card', { color_name: 'background-contrast-blue-cumulus' }) -%> 189 | <%- include('partials/color-card', { color_name: 'background-contrast-purple-glycine' }) -%> 190 | <%- include('partials/color-card', { color_name: 'background-contrast-pink-macaron' }) -%> 191 | <%- include('partials/color-card', { color_name: 'background-contrast-pink-tuile' }) -%> 192 | <%- include('partials/color-card', { color_name: 'background-contrast-yellow-tournesol' }) -%> 193 | <%- include('partials/color-card', { color_name: 'background-contrast-yellow-moutarde' }) -%> 194 | <%- include('partials/color-card', { color_name: 'background-contrast-orange-terre-battue' }) -%> 195 | <%- include('partials/color-card', { color_name: 'background-contrast-brown-caramel' }) -%> 196 | <%- include('partials/color-card', { color_name: 'background-contrast-brown-cafe-creme' }) -%> 197 | <%- include('partials/color-card', { color_name: 'background-contrast-brown-opera' }) -%> 198 | <%- include('partials/color-card', { color_name: 'background-contrast-beige-gris-galet' }) -%> 199 |
200 | 201 | 202 |

Illustrations

203 | 204 |

Ces couleurs font partie de la charte de l'État. Elles peuvent servir à la composition d’illustration ou de pictogrammes.

205 | 206 |
207 | <%- include('partials/color-card', { color_name: 'artwork-major-blue-france' }) -%> 208 | <%- include('partials/color-card', { color_name: 'artwork-minor-blue-france' }) -%> 209 | <%- include('partials/color-card', { color_name: 'artwork-minor-red-marianne' }) -%> 210 | <%- include('partials/color-card', { color_name: 'artwork-decorative-blue-france' }) -%> 211 | <%- include('partials/color-card', { color_name: 'artwork-decorative-red-marianne' }) -%> 212 | <%- include('partials/color-card', { color_name: 'artwork-minor-green-tilleul-verveine' }) -%> 213 | <%- include('partials/color-card', { color_name: 'artwork-minor-green-bourgeon' }) -%> 214 | <%- include('partials/color-card', { color_name: 'artwork-minor-green-emeraude' }) -%> 215 | <%- include('partials/color-card', { color_name: 'artwork-minor-green-menthe' }) -%> 216 | <%- include('partials/color-card', { color_name: 'artwork-minor-green-archipel' }) -%> 217 | <%- include('partials/color-card', { color_name: 'artwork-minor-blue-ecume' }) -%> 218 | <%- include('partials/color-card', { color_name: 'artwork-minor-blue-cumulus' }) -%> 219 | <%- include('partials/color-card', { color_name: 'artwork-minor-purple-glycine' }) -%> 220 | <%- include('partials/color-card', { color_name: 'artwork-minor-pink-macaron' }) -%> 221 | <%- include('partials/color-card', { color_name: 'artwork-minor-pink-tuile' }) -%> 222 | <%- include('partials/color-card', { color_name: 'artwork-minor-yellow-tournesol' }) -%> 223 | <%- include('partials/color-card', { color_name: 'artwork-minor-yellow-moutarde' }) -%> 224 | <%- include('partials/color-card', { color_name: 'artwork-minor-orange-terre-battue' }) -%> 225 | <%- include('partials/color-card', { color_name: 'artwork-minor-brown-cafe-creme' }) -%> 226 | <%- include('partials/color-card', { color_name: 'artwork-minor-brown-opera' }) -%> 227 | <%- include('partials/color-card', { color_name: 'artwork-minor-beige-gris-galet' }) -%> 228 |
229 | 230 | 240 | 241 | 290 | 291 | 292 |
293 |
294 |
295 |
296 |
297 | 298 | <%- include('partials/footer') -%> -------------------------------------------------------------------------------- /views/components.ejs: -------------------------------------------------------------------------------- 1 | <%- include('partials/header') -%> 2 |
3 |
4 | <%- include('partials/ariane', { items: [ 5 | { label: 'Accueil', url: '/' }, 6 | { label: 'Composants' }, 7 | ],}) 8 | -%> 9 | 10 | 11 |
12 | 13 | 14 |
15 | 59 |
60 | 61 | 62 |
63 |

Exemple de composants

64 | 65 |
66 |
67 |

Aperçu rapide

68 |

Cette page ne montre pas tous les composants du DSFR, ni toutes leurs variantes.

69 |
70 |
71 | 72 | 73 |
74 | 75 |

Accordéons

76 |
77 |
    78 | <%- include('partials/accordion-item', 79 | { 80 | i: 0, 81 | title: 'On peut afficher des accordéons', 82 | content: 'Qui elit in aliqua exercitation. Sint exercitation incididunt duis eu mollit sunt id dolor ullamco excepteur adipisicing deserunt. Dolore mollit ullamco laboris nulla qui ad officia. Ad deserunt ex magna esse culpa ea occaecat sit tempor.' 83 | }) 84 | -%> 85 | <%- include('partials/accordion-item', 86 | { 87 | i: 1, 88 | title: 'Qui se déroulent', 89 | content: "Là, on explique la deuxième étape." 90 | }) 91 | -%> 92 | <%- include('partials/accordion-item', 93 | { 94 | i: 2, 95 | title: 'Quand on clique dessus', 96 | content: "Sans surprise, c'est ici la troisième étape. Qui elit in aliqua exercitation. Sint exercitation incididunt duis eu mollit sunt id dolor ullamco excepteur adipisicing deserunt. Dolore mollit ullamco laboris nulla qui ad officia. Ad deserunt ex magna esse culpa ea occaecat sit tempor." 97 | }) 98 | -%> 99 |
100 |
101 | 102 |
103 | 104 |

Badges

105 |
106 | 107 |
    108 |

  • Badge simple

    • 109 |

  • 110 | Label badge très long, coupé par des points de suspensions lorsque le label dépasse la largeur du conteneur 111 |

    • 112 |

  • Succès

    • 113 |

  • Erreur

    • 114 |

  • Information

    • 115 |

  • Avertissement

    • 116 |

  • Nouveauté

    • 117 |
118 |
119 | 120 |

Badge taille SM

121 |
122 | 123 |
    124 |

  • Badge taille SM

    • 125 |

  • Petite nouveauté

    • 126 |
127 |
128 | 129 |

Boutons

130 |
131 |
    132 |
    • 133 |
    • 134 |
    • 135 |
    • 136 |
137 |
138 | 139 |

Bouton avec icônes

140 |
141 | 144 | 147 |
148 | 149 |

Cartes

150 |
151 |
152 | <%- include('partials/card', 153 | { 154 | title: 'Titre', 155 | description: "Description", 156 | url: '#', 157 | img: '', 158 | }) 159 | -%> 160 | 161 | <%- include('partials/card', 162 | { 163 | title: 'Titre', 164 | description: "Description", 165 | url: '#', 166 | img: '', 167 | }) 168 | -%> 169 | 170 | <%- include('partials/card', 171 | { 172 | title: 'Titre', 173 | description: "Description", 174 | url: '#', 175 | img: '', 176 | }) 177 | -%> 178 |
179 |
180 | 181 |

Citations

182 |
183 |
184 |
185 |

« Un système de design est un ensemble de composants réutilisables, guidé par des standards et une gouvernance, pouvant être assemblés pour construire plusieurs sites internet. »

186 |
187 |
188 |

SIG

189 | 194 |
195 |
196 |
197 | 198 | 199 |
200 | Lien seul 201 |
202 |
203 | Lien icône à gauche 204 |
205 |
206 | Lien icône à droite 207 |
208 |
209 | 210 | Haut de page 211 | 212 |
213 | 214 |

Mises en avant

215 |

Avec texte seul

216 |
217 |
218 |

Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.

219 |
220 |
221 |

Avec titre

222 |
223 |
224 |

Mises en avant

225 |

Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.

226 |
227 |
228 |

Avec bouton

229 |
230 |

Titre mise en avant

231 |

Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.

232 | 235 |
236 | 237 |

Mises en exergue

238 |
239 |
240 |

Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.

241 |
242 |
243 |
244 |
245 |

Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.

246 |
247 |
248 |
249 |
250 |

Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.

251 |
252 |
253 | 254 | 255 |

Tableaux

256 |

Liens

257 |
258 |
259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 |
Caption du tableau
th0 th1 th2 th3 th4 th5
Lorem elLorem elit ut.Lorem elit ut.Lorem elit ut.Lorem elit uLorem elit ut.
Lorem elit ut.Lorem eLorem elit ut.Lorem.Lorem Lorem.
Lorem elit ut.Lorem elit ut.LoremLorem elit ut.Lorem elit ut.L
298 |
299 |
300 | 301 |

Tags

302 |
303 |
309 | 310 |

Tags actionnables

311 |
312 |
    313 |
    • 314 |
    • 315 |
    • 316 |
317 | 318 |

Tuiles

319 |
320 | <%- include('partials/tile', 321 | { 322 | title: 'Titre', 323 | desc: "Description", 324 | url: '#', 325 | img: '', 326 | }) 327 | -%> 328 | 329 | <%- include('partials/tile', 330 | { 331 | title: 'Titre', 332 | desc: "Description", 333 | url: '#', 334 | img: '', 335 | }) 336 | -%> 337 | 338 | <%- include('partials/tile', 339 | { 340 | title: 'Titre', 341 | desc: "Description", 342 | url: '#', 343 | img: '', 344 | }) 345 | -%> 346 |
347 | 348 |
349 |
350 |
351 |
352 | <%- include('partials/footer') -%> 353 | -------------------------------------------------------------------------------- /views/contact.ejs: -------------------------------------------------------------------------------- 1 | <%- include('partials/header') -%> 2 |
3 |
4 | <%- include('partials/ariane', 5 | { 6 | items: [ 7 | { 8 | label: 'Accueil', 9 | url: '/' 10 | }, 11 | { 12 | label: 'Contact', 13 | }, 14 | ], 15 | }) 16 | -%> 17 | 18 | 19 |

Exemple de formulaire de contact

20 | 21 | 22 |
23 |

Ne mentionnez pas de données personnelles (nom, adresse, numéros de téléphone, numéro de sécurité sociale, numéro fiscal, lieu et date de naissance...) à l'exception, bien sûr, de votre adresse électronique.

24 |
25 | 26 |
27 |
28 | 29 |

L’adresse électronique doit être au format nom@exemple.fr

30 | 31 |
32 |
33 | 34 | 35 |
36 |
37 | 38 |
39 |
40 | 41 | 42 |
43 |
44 | <%- include('partials/footer') -%> -------------------------------------------------------------------------------- /views/form.ejs: -------------------------------------------------------------------------------- 1 | <%- include('partials/header') -%> 2 |
3 |
4 | <%- include('partials/ariane', { items: [ 5 | { label: 'Accueil', url: '/' }, 6 | { label: 'Formulaire' }, 7 | ],}) 8 | -%> 9 |
10 |
11 |

Exemple de formulaire

12 | 13 | 17 |
18 |
19 | Champs 20 |
21 | 22 | 23 |
24 | 25 |
26 | 28 | 29 |
30 | 31 |
32 | 34 |
35 | 36 |
37 |
38 |
39 | 41 | 42 |
43 |
44 | 46 | 47 |
48 |
49 | 50 |
51 | Champs 52 |
53 | 56 | 57 |
58 |
59 | 60 |
61 | Liste 62 | 63 |
64 |
65 | 68 | 75 |
76 |
77 |
78 | 79 |
80 |
81 | 82 | Légende pour l’ensemble de champs 83 | 84 |
85 |
86 | 87 | 89 |
90 |
91 | 92 | 94 |
95 |
96 | 97 | 99 |
100 |
101 |
102 |
103 | 104 |
105 |
106 | 107 | Légende pour l’ensemble de champs 108 | Texte de description additionnel 109 | 110 |
111 |
112 | 113 | 115 |
116 |
117 | 118 | 120 |
121 |
122 | 123 | 125 |
126 |
127 |
128 |
129 | 130 |
131 | 132 | 133 |
134 |
135 | 136 |
137 |
138 |
139 |
140 | <%- include('partials/footer') -%> -------------------------------------------------------------------------------- /views/landing.ejs: -------------------------------------------------------------------------------- 1 | <%- include('partials/header') -%> 2 |
3 |
4 | 5 |

Démo du DSFR

6 | 7 |
8 |
9 | <%- include('partials/card', 10 | { 11 | title: 'Composants', 12 | description: "Cartes, boutons...", 13 | url: '/components', 14 | size: '3', 15 | img: '', 16 | }) 17 | -%> 18 | 19 | 20 | <%- include('partials/card', 21 | { 22 | title: 'Formulaire', 23 | description: "Input, textarea...", 24 | url: '/formulaire', 25 | size: '3', 26 | img: '', 27 | }) 28 | -%> 29 | 30 | <%- include('partials/card', 31 | { 32 | title: 'Typographie', 33 | description: "Titres, paragraphes...", 34 | url: '/typography', 35 | size: '3', 36 | img: '', 37 | }) 38 | -%> 39 | 40 | <%- include('partials/card', 41 | { 42 | title: 'Couleurs', 43 | description: "Palettes de couleurs, token d'utilisation...", 44 | url: '/colors', 45 | size: '3', 46 | img: '', 47 | }) 48 | -%> 49 |
50 |
51 | 52 |

Ressources

53 | 54 |
55 |
56 | 57 | <%- include('partials/card', 58 | { 59 | title: "Documentation", 60 | description: "", 61 | url: '/ressources', 62 | size: '3', 63 | img: '', 64 | }) 65 | -%> 66 | 67 | <%- include('partials/card', 68 | { 69 | title: "Exemples d'utilisation", 70 | description: "", 71 | url: '/ressources#examples', 72 | size: '3', 73 | img: '', 74 | }) 75 | -%> 76 | 77 | <%- include('partials/card', 78 | { 79 | title: "Librairies", 80 | description: "", 81 | url: '/ressources#librairies', 82 | size: '3', 83 | img: '', 84 | }) 85 | -%> 86 |
87 |
88 | 89 |
90 |

Participer

91 |

92 | Ce site est un effort bénévole des membres de beta.gouv et de la communauté utilisant le DSFR. Il n'est pas maintenu par le SIG. 93 |

94 | 95 |
96 |
97 | <%- include('partials/tile', 98 | { 99 | title: 'Signaler un problème', 100 | description: "", 101 | url: 'https://github.com/betagouv/template-design-system-de-l-etat/issues/new', 102 | size: '3', 103 | img: '', 104 | }) 105 | -%> 106 |
107 |
108 | <%- include('partials/tile', 109 | { 110 | title: 'Contribuer au code source', 111 | description: "", 112 | url: 'https://github.com/betagouv/template-design-system-de-l-etat/', 113 | size: '3', 114 | img: '', 115 | }) 116 | -%> 117 |
118 |
119 | 120 |
121 |
122 |
123 | <%- include('partials/footer') -%> 124 | -------------------------------------------------------------------------------- /views/legalNotice.ejs: -------------------------------------------------------------------------------- 1 | <%- include('partials/header') -%> 2 |
3 |
4 | <%- include('partials/ariane', { items: [ 5 | { label: 'Accueil', url: '/' }, 6 | { label: 'Mentions légales' }, 7 | ],}) 8 | -%> 9 | 10 |

Mentions légales

11 | 12 |

Éditeur de la Plateforme

13 | 14 |

15 | La Plateforme <%= appName %> est éditée par l'Incubateur de services numériques de la 16 | Direction interministérielle du numérique (DINUM). 17 |

18 | 19 |

20 | Coordonnées :
21 | Adresse : DINUM, 20 avenue de Ségur, 75007 Paris
22 | Tel. accueil : 01.71.21.01.70
23 | SIRET : 12000101100010 (secrétariat général du gouvernement)
24 | SIREN : 120 001 011 25 |

26 | 27 |

Directrice.eur de la publication

28 | 29 | Directeur interministériel du numérique. 30 | 31 |

Hébergement de la Plateforme

32 | Ce site est hébergé en propre par Scalingo SAS, 15 avenue du Rhin, 67100 Strasbourg, France. 33 | 34 |

Accessibilité

35 |

La conformité aux normes d’accessibilité numérique est un objectif ultérieur. En attendant, nous tâchons de rendre ce site 36 | accessible à toutes et à tous :

37 |
    38 |
  • Utilisation de composants accessibles (design system de l'État)
    • 39 |
  • Respect des bonnes pratiques (Pilida, Opquast...)
    • 40 |
  • Tests manuels
    • 41 |
42 | 43 |

Signaler un dysfonctionnement

44 |

45 | Si vous rencontrez un défaut d’accessibilité vous empêchant d’accéder à un contenu ou une fonctionnalité du site, 46 | merci de nous en faire part en 47 | 51 | nous contactant à l'adresse <%= contactEmail %> 52 | . 53 |

54 |

55 | Si vous n’obtenez pas de réponse rapide de notre part, 56 | vous êtes en droit de faire parvenir vos doléances ou une demande de saisine au Défenseur des droits. 57 |

58 | 59 |

En savoir plus

60 | Pour en savoir plus sur la politique d’accessibilité numérique de l’État : 61 | http://references.modernisation.gouv.fr/accessibilite-numerique 62 | 63 |

Sécurité

64 | 65 |

Le site est protégé par un certificat électronique, matérialisé pour la grande majorité des navigateurs par un cadenas. 66 | Cette protection participe à la confidentialité des échanges. 67 | En aucun cas les services associés à la plateforme ne seront à l’origine d’envoi de courriels pour demander 68 | la saisie d’informations personnelles.

69 | 70 |
71 |
72 | <%- include('partials/footer') -%> 73 | -------------------------------------------------------------------------------- /views/partials/accordion-item.ejs: -------------------------------------------------------------------------------- 1 |
  • 2 |
    3 |

    4 | 5 |

    6 |
    7 | <%= content %> 8 |
    9 |
    10 |
    • -------------------------------------------------------------------------------- /views/partials/ariane.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /views/partials/call-out.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | let prefix = 'fr'; 3 | let callout = locals || {}; 4 | let classes = callout.classes || []; 5 | classes.push(prefix + '-callout'); 6 | 7 | let accent = '' 8 | if (callout.accent !== undefined) accent = 'fr-callout--' + callout.accent; 9 | 10 | %> 11 |
    12 | <% if(callout.title !== undefined) { %> 13 |

    <%= callout.title %>

    14 | <% } %> 15 | 16 |

    <%= callout.text %>

    17 |
    -------------------------------------------------------------------------------- /views/partials/card.ejs: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |

    <%= title %>

    5 |

    <%= description %>

    6 |
    7 | <% if (locals.img) { %> 8 |
    9 | 10 |
    11 | <% } %> 12 |
    13 |
    -------------------------------------------------------------------------------- /views/partials/color-card.ejs: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |

    <%= color_name %>

    4 |
    5 | -------------------------------------------------------------------------------- /views/partials/contrast-card.ejs: -------------------------------------------------------------------------------- 1 | <% if (locals.card_type == "title+button") { %> 2 |
    3 |

    4 | Titre de couleur <%= color %> 5 |

    6 |

    Texte foncé.

    7 |

    8 | Fond alternatif de couleur <%= color %> 9 |

    10 |
    11 | <% } else { %> 12 |
    13 |

    Fond alternatif

    14 |

    Ce texte est en <%= fg_color %> sur fond <%= bg_color %>.

    15 |
    16 | <% } %> -------------------------------------------------------------------------------- /views/partials/dark-mode-modale.ejs: -------------------------------------------------------------------------------- 1 | 2 |
    3 |
    4 |
    5 |
    6 |
    7 | 8 |
    9 |
    10 |

    11 | Paramètres d’affichage 12 |

    13 |
    14 |
    15 |
    16 | 17 | Choisissez un thème pour personnaliser l’apparence du site. 18 | 19 |
    20 |
    21 | 22 | 24 |
    25 | 26 | 27 |
    28 |
    29 |
    30 | 31 | 33 |
    34 | 35 | 36 |
    37 |
    38 |
    39 | 40 | 43 |
    44 | 45 | 46 |
    47 |
    48 |
    49 |
    50 |
    51 |
    52 |
    53 |
    54 |
    55 |
    56 |
    57 |     -------------------------------------------------------------------------------- /views/partials/dark-mode-switch.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /views/partials/footer.ejs: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 25 | 26 | 27 |
    28 |
    29 |
    30 |
    31 | 46 |
    47 |
    48 |
    49 |
    50 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /views/partials/header.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <% if (locals.pageTitle) { %> 8 | <%= pageTitle %> | <%= appName %> 9 | <% } else { %> 10 | <%= appName %> 11 | <% } %> 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
    22 | 38 |
    39 | 40 | 115 | -------------------------------------------------------------------------------- /views/partials/scheme-cards.ejs: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |

    <%= scheme_desc %>

    4 |

    Ce composant utilise la classe <%= scheme_classname %>.

    5 |
    6 |
    -------------------------------------------------------------------------------- /views/partials/section.ejs: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |

    <%= section.title %>

    4 |
    5 |
    6 |
    7 |
    <%= section.parts[0].title %>
    8 |
    <%= section.parts[0].text %>
    9 |
    10 |
    11 |
    <%= section.parts[1].title %>
    12 |
    <%= section.parts[1].text %>
    13 |
    14 |
    15 |
    <%= section.parts[2].title %>
    16 |
    <%= section.parts[2].text %>
    17 |
    18 |
    19 |
    20 | -------------------------------------------------------------------------------- /views/partials/tile.ejs: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |

    5 | <%= title %> 6 |

    7 | <% if (locals.desc) { %> 8 |

    <%= desc %>

    9 | <% } %> 10 |
    11 | <% if (locals.img) { %> 12 |
    13 | 14 | 15 |
    16 | <% } %> 17 |
    18 |
    -------------------------------------------------------------------------------- /views/ressources.ejs: -------------------------------------------------------------------------------- 1 | <%- include('partials/header') -%> 2 |
    3 | 4 |
    5 | <%- include('partials/ariane', { items: [ 6 | { label: 'Accueil', url: '/' }, 7 | { label: 'Ressources' }, 8 | ],}) 9 | -%> 10 | 11 |

    Ressources utiles

    12 | 13 |
    14 | <%- include('partials/card', 15 | { 16 | title: 'Site officiel', 17 | description:"", 18 | url: 'https://systeme-de-design.gouv.fr/', 19 | }) 20 | -%> 21 | 22 | <%- include('partials/card', 23 | { 24 | title: 'Documentation du Design System', 25 | description:"", 26 | url: 'https://gouvfr.atlassian.net/wiki/spaces/DB/pages/223019574/D+veloppeurs', 27 | }) 28 | -%> 29 |
    30 | 31 |

    Utilisation du Design System

    32 | 33 |

    Ces sites utilisent le Design Sytem de l'État. Cette liste est non exhaustive et maintenue manuellement.

    34 | 35 |

    Référencer un autre site

    36 | 37 |
    38 | 39 | 40 | <%- include('partials/card', 41 | { 42 | title: 'Apilos', 43 | description:"Plateforme de relation entre bailleurs de logements sociaux et services de l'État", 44 | url: 'https://apilos.beta.gouv.fr', 45 | }) 46 | -%> 47 | 48 | <%- include('partials/card', 49 | { 50 | title: 'ASP', 51 | description:"Agence de services et de paiement", 52 | url: 'https://www.asp-public.fr/', 53 | }) 54 | -%> 55 | 56 | <%- include('partials/card', 57 | { 58 | title: 'AudioConf', 59 | description:"Conférences téléphoniques pour les agents de l'État", 60 | url: 'https://audioconf.numerique.gouv.fr/', 61 | }) 62 | -%> 63 | 64 | <%- include('partials/card', 65 | { 66 | title: 'beta.gouv.fr', 67 | description:"Incubateur de service numérique de l'État", 68 | url: 'https://beta.gouv.fr/', 69 | }) 70 | -%> 71 | 72 | <%- include('partials/card', 73 | { 74 | title: 'Civils de la Défense', 75 | description:"Portail d'information autour du recrutement de civils par le Ministère des Armées", 76 | url: 'https://www.civils.defense.gouv.fr/', 77 | }) 78 | -%> 79 | 80 | <%- include('partials/card', 81 | { 82 | title: 'Code.gouv.fr', 83 | description:"Code sources du service public", 84 | url: 'https://code.gouv.fr/', 85 | }) 86 | -%> 87 | 88 | <%- include('partials/card', 89 | { 90 | title: 'Fichiers des décès', 91 | description:'Recherche libre parmi les 25 millions de décès depuis 1970', 92 | url: 'https://deces.matchid.io/', 93 | }) 94 | -%> 95 | 96 | <%- include('partials/card', 97 | { 98 | title: "France Identité", 99 | description:"Service d'identification en ligne", 100 | url: 'https://france-identite.gouv.fr/', 101 | }) 102 | -%> 103 | 104 | <%- include('partials/card', 105 | { 106 | title: "France Relance", 107 | description:'Feuille de route pour la refondation économique, sociale et écologique du pays', 108 | url: 'https://www.gouvernement.fr/france-relance', 109 | }) 110 | -%> 111 | 112 | <%- include('partials/card', 113 | { 114 | title: "Grand Mémorial", 115 | description:"Base nationale des registres matricules des Archives départementales et fichiers des Morts pour la France du ministère des Armées.", 116 | url: 'http://www.culture.fr/Genealogie/Grand-Memorial', 117 | }) 118 | -%> 119 | 120 | <%- include('partials/card', 121 | { 122 | title: "Information Manipulation Analyzer", 123 | description:'Évaluer et chiffrer les campagnes de manipulation de l’information sur Twitter', 124 | url: 'https://disinfo.quaidorsay.fr/information-manipulation-analyzer', 125 | }) 126 | -%> 127 | 128 | <%- include('partials/card', 129 | { 130 | title: 'La Gendarmerie recrute', 131 | description:'Site officiel du recrutement en gendarmerie', 132 | url: 'https://www.gendarmerie.interieur.gouv.fr/recrutement', 133 | }) 134 | -%> 135 | 136 | <%- include('partials/card', 137 | { 138 | title: "L'Annuaire des Entreprises", 139 | description:'Informations publiques concernant les entreprises françaises', 140 | url: 'https://annuaire-entreprises.data.gouv.fr/', 141 | }) 142 | -%> 143 | 144 | <%- include('partials/card', 145 | { 146 | title: "Ministère de l'intérieur", 147 | description:"", 148 | url: 'https://interieur.gouv.fr/', 149 | }) 150 | -%> 151 | 152 | <%- include('partials/card', 153 | { 154 | title: 'Numérique écoresponsable', 155 | description:'Mission interministérielle pour réduire les impacts environnementaux numériques', 156 | url: 'https://ecoresponsable.numerique.gouv.fr/', 157 | }) 158 | -%> 159 | 160 | <%- include('partials/card', 161 | { 162 | title: 'Open Collectivités', 163 | description:"Portail d'informations statistiques sur les collectivités locales", 164 | url: 'https://www.open-collectivites.fr/', 165 | }) 166 | -%> 167 | 168 | <%- include('partials/card', 169 | { 170 | title: 'Santé Psy Étudiant', 171 | description:'Accompagnement psychologique pour les étudiants', 172 | url: 'https://santepsy.etudiant.gouv.fr/', 173 | }) 174 | -%> 175 | 176 | <%- include('partials/card', 177 | { 178 | title: 'Volontaires Fonction Publique', 179 | description:"Mise à disposition d'agents publics pour renforcer les équipes pendant la crise sanitaire", 180 | url: 'https://volontaires.fonction-publique.gouv.fr/', 181 | }) 182 | -%> 183 | 184 |
    185 |

    Référencer un autre site

    186 | 187 | 188 |

    Librairies

    189 | 190 |

    Le Design System FR a été porté par des équipes sous forme de librairie ou bibliothèque de composants.

    191 | 192 |
    193 | <%- include('partials/card', 194 | { 195 | title: "Angular", 196 | description:'', 197 | url: 'https://github.com/lilletech/angular-template-design-system-de-l-etat', 198 | }) 199 | -%> 200 | <%- include('partials/card', 201 | { 202 | title: "Django", 203 | description:'', 204 | url: 'https://github.com/entrepreneur-interet-general/django-dsfr', 205 | }) 206 | -%> 207 | <%- include('partials/card', 208 | { 209 | title: "React", 210 | description:'', 211 | url: 'https://github.com/dataesr/react-dsfr', 212 | }) 213 | -%> 214 | <%- include('partials/card', 215 | { 216 | title: "VueJS", 217 | description:'', 218 | url: 'https://github.com/dnum-mi/vue-dsfr', 219 | }) 220 | -%> 221 | <%- include('partials/card', 222 | { 223 | title: "Svelte", 224 | description:'', 225 | url: 'https://github.com/rhanka/svelte-dsfr', 226 | }) 227 | -%> 228 |
    229 | 230 |

    Référencer une nouvelle librairie

    231 | 232 |
    233 |
    234 | <%- include('partials/footer') -%> 235 | -------------------------------------------------------------------------------- /views/typography.ejs: -------------------------------------------------------------------------------- 1 | <%- include('partials/header') -%> 2 |
    3 |
    4 | <%- include('partials/ariane', { items: [ 5 | { label: 'Accueil', url: '/' }, 6 | { label: 'Typographie' }, 7 | ],}) 8 | -%> 9 | 10 | 11 |

    Typographie

    12 | 13 |

    Les typographies Marianne® et Spectral sont les typographies officielles de la charte de l'État. Elles sont disponibles au téléchargement sur la documentation officielle du Design System de l'État.

    14 | 15 |
    16 |
    17 |

    Chapô

    18 |

    Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet.

    19 | 20 |

    Article

    21 |

    Volutpat commodo eu sed ante lacinia. Sapien a lorem in integer ornare praesent commodo adipiscing arcu in massa commodo lorem accumsan at odio massa ac ac. Semper adipiscing varius montes viverra nibh in adipiscing blandit tempus accumsan.

    22 | 23 |

    Standard

    24 |

    In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor. Ante commodo blandit adipiscing integer semper orci eget.

    25 | 26 |

    Détail

    27 |

    Faucibus commodo adipiscing mi eu nullam accumsan morbi arcu ornare odio mi adipiscing nascetur lacus ac interdum morbi accumsan vis mi accumsan.

    28 | 29 |

    Mention

    30 |

    Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

    31 |
    32 | 33 |
    34 |

    Typographie alternative

    35 |
    36 |

    L’usage de la typographie Spectral est proposé en appoint pour certaines informations. Son usage doit être limité (par comme sur cette démo donc).

    37 |
    38 | 39 | 40 |

    Article alternatif

    41 |

    Volutpat commodo eu sed ante lacinia. Sapien a lorem in integer ornare praesent commodo adipiscing arcu in massa commodo lorem accumsan at odio massa ac ac. Semper adipiscing varius montes viverra nibh in adipiscing blandit tempus accumsan.

    42 | 43 |

    Texte standard alternatif

    44 |

    In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor. Ante commodo blandit adipiscing integer semper orci eget.

    45 | 46 |

    Détail alternatif

    47 |

    Faucibus commodo adipiscing mi eu nullam accumsan morbi arcu ornare odio mi adipiscing nascetur lacus ac interdum morbi accumsan vis mi accumsan.

    48 | 49 |

    Mention alternatif

    50 |

    Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

    51 |
    52 | 53 |
    54 | 55 |

    Titre de niveau 1

    56 |

    Titre de niveau 2

    57 |

    Titre de niveau 3

    58 |

    Titre de niveau 4

    59 |
    Titre de niveau 5
    60 |
    Titre de niveau 6
    61 | 62 |
    63 |
    64 | <%- include('partials/footer') -%> 65 | --------------------------------------------------------------------------------