Nunjucks snippets for PE Design System

This package aims at providing a complete set of nunjucks snippets to build pages with PE Design System.

Demo

It consists of snippets in 3 categories:

Components

Prefix	Snippet description
`@checkbox`	`Insertion d'un composant checkbox`
`@checkbox--required`	`Insertion d'un composant checkbox--required`
`@checkbox-optional`	`Insertion d'un composant checkbox-optional`
`@checkbox--multi`	`Insertion d'un composant checkbox--multi`
`@checkbox--multi-inline`	`Insertion d'un composant checkbox--multi-inline`
`@checkbox--checked`	`Insertion d'un composant checkbox--checked`
`@checkbox--checked-bg`	`Insertion d'un composant checkbox--checked-bg`
`@checkbox--error-input`	`Insertion d'un composant checkbox--error-input`
`@checkbox--fieldset`	`Insertion d'un composant checkbox--fieldset`
`@checkbox--disabled`	`Insertion d'un composant checkbox--disabled`
`@checkbox--mixed`	`Insertion d'un composant checkbox--mixed`
`@datalist`	`Insertion d'un composant datalist`
`@datalist--optional`	`Insertion d'un composant datalist--optional`
`@datalist--icon-left`	`Insertion d'un composant datalist--icon-left`
`@datalist--help`	`Insertion d'un composant datalist--help`
`@datalist--error`	`Insertion d'un composant datalist--error`
`@datalist--success`	`Insertion d'un composant datalist--success`
`@datalist--nolabel`	`Insertion d'un composant datalist--nolabel`
`@datalist--allin`	`Insertion d'un composant datalist--allin`
`@datepicker`	`Insertion d'un composant datepicker`
`@input`	`Insertion d'un composant input`
`@input--optional`	`Insertion d'un composant input--optional`
`@input--value`	`Insertion d'un composant input--value`
`@input--autocomplete`	`Insertion d'un composant input--autocomplete`
`@input--readonly`	`Insertion d'un composant input--readonly`
`@input--icon-left`	`Insertion d'un composant input--icon-left`
`@input--help`	`Insertion d'un composant input--help`
`@input--error`	`Insertion d'un composant input--error`
`@input--success`	`Insertion d'un composant input--success`
`@input--nolabel`	`Insertion d'un composant input--nolabel`
`@input--counter`	`Insertion d'un composant input--counter`
`@input-group--text-left`	`Insertion d'un composant input-group--text-left`
`@input-group--text-right`	`Insertion d'un composant input-group--text-right`
`@input-group--text-leftright`	`Insertion d'un composant input-group--text-leftright`
`@input-group--button-right`	`Insertion d'un composant input-group--button-right`
`@input-group--select-right`	`Insertion d'un composant input-group--select-right`
`@input-group--select-left`	`Insertion d'un composant input-group--select-left`
`@input-group--text-help`	`Insertion d'un composant input-group--text-help`
`@input-group--text-error`	`Insertion d'un composant input-group--text-error`
`@input-group--text-success`	`Insertion d'un composant input-group--text-success`
`@input-group--allin`	`Insertion d'un composant input-group--allin`
`@input-type--numeric`	`Insertion d'un composant input-type--numeric`
`@input-type--password`	`Insertion d'un composant input-type--password`
`@input-type--email`	`Insertion d'un composant input-type--email`
`@input-type--date`	`Insertion d'un composant input-type--date`
`@input-type--date-multi`	`Insertion d'un composant input-type--date-multi`
`@input-type--tel`	`Insertion d'un composant input-type--tel`
`@input-type--tel-inter`	`Insertion d'un composant input-type--tel-inter`
`@radio`	`Insertion d'un composant radio`
`@radio--required`	`Insertion d'un composant radio--required`
`@radio--optional`	`Insertion d'un composant radio--optional`
`@radio--multi-inline`	`Insertion d'un composant radio--multi-inline`
`@radio--checked`	`Insertion d'un composant radio--checked`
`@radio--checked-bg`	`Insertion d'un composant radio--checked-bg`
`@radio--error-input`	`Insertion d'un composant radio--error-input`
`@radio--fieldset`	`Insertion d'un composant radio--fieldset`
`@radio--disabled`	`Insertion d'un composant radio--disabled`
`@select`	`Insertion d'un composant select`
`@select--optional`	`Insertion d'un composant select--optional`
`@select--placeholder`	`Insertion d'un composant select--placeholder`
`@select--disabled`	`Insertion d'un composant select--disabled`
`@select--icon-left`	`Insertion d'un composant select--icon-left`
`@select--help`	`Insertion d'un composant select--help`
`@select--warning`	`Insertion d'un composant select--warning`
`@select--error`	`Insertion d'un composant select--error`
`@select--success`	`Insertion d'un composant select--success`
`@select--allin`	`Insertion d'un composant select--allin`
`@slider`	`Insertion d'un composant slider`
`@switch`	`Insertion d'un composant switch`
`@switch--facultatif`	`Insertion d'un composant switch--facultatif`
`@switch--reversed`	`Insertion d'un composant switch--reversed`
`@switch--small`	`Insertion d'un composant switch--small`
`@switch--help`	`Insertion d'un composant switch--help`
`@switch--error`	`Insertion d'un composant switch--error`
`@switch--success`	`Insertion d'un composant switch--success`
`@switch--allin`	`Insertion d'un composant switch--allin`
`@switch--disabled`	`Insertion d'un composant switch--disabled`
`@textarea`	`Insertion d'un composant textarea`
`@textarea--required`	`Insertion d'un composant textarea--required`
`@textarea--value`	`Insertion d'un composant textarea--value`
`@textarea--placeholder`	`Insertion d'un composant textarea--placeholder`
`@textarea--disabled`	`Insertion d'un composant textarea--disabled`
`@textarea--icon-left`	`Insertion d'un composant textarea--icon-left`
`@textarea--icon`	`Insertion d'un composant textarea--icon`
`@textarea--help`	`Insertion d'un composant textarea--help`
`@textarea--error`	`Insertion d'un composant textarea--error`
`@textarea--success`	`Insertion d'un composant textarea--success`
`@textarea--counter`	`Insertion d'un composant textarea--counter`
`@textarea--allin`	`Insertion d'un composant textarea--allin`
`@header`	`Insertion d'un composant header`
`@header--france-travail`	`Insertion d'un composant header--france-travail`
`@footer`	`Insertion d'un composant footer`
`@subnav`	`Insertion d'un composant subnav`
`@hero`	`Insertion d'un composant hero`
`@modal--side`	`Insertion d'un composant modal--side`
`@pages`	`Insertion d'un composant pages`
`@alert`	`Insertion d'un composant alert`
`@alert--information`	`Insertion d'un composant alert--information`
`@alert--titre-simple`	`Insertion d'un composant alert--titre-simple`
`@alert--success`	`Insertion d'un composant alert--success`
`@alert--warning`	`Insertion d'un composant alert--warning`
`@alert--error`	`Insertion d'un composant alert--error`
`@alert--dismissible`	`Insertion d'un composant alert--dismissible`
`@alphaindex`	`Insertion d'un composant alphaindex`
`@badge`	`Insertion d'un composant badge`
`@breadcrumb`	`Insertion d'un composant breadcrumb`
`@button`	`Insertion d'un composant button`
`@button--primary`	`Insertion d'un composant button--primary`
`@button--secondary`	`Insertion d'un composant button--secondary`
`@button--btn-lnk`	`Insertion d'un composant button--btn-lnk`
`@button--lnk-btn`	`Insertion d'un composant button--lnk-btn`
`@button--hidden`	`Insertion d'un composant button--hidden`
`@button--icon`	`Insertion d'un composant button--icon`
`@button--iconleft`	`Insertion d'un composant button--iconleft`
`@button--iconright`	`Insertion d'un composant button--iconright`
`@button--twoicons`	`Insertion d'un composant button--twoicons`
`@button--small`	`Insertion d'un composant button--small`
`@button--normal`	`Insertion d'un composant button--normal`
`@button--large`	`Insertion d'un composant button--large`
`@button--loader`	`Insertion d'un composant button--loader`
`@button--close`	`Insertion d'un composant button--close`
`@button--disabled`	`Insertion d'un composant button--disabled`
`@button-group`	`Insertion d'un composant button-group`
`@button-group--primary`	`Insertion d'un composant button-group--primary`
`@button-group--secondary`	`Insertion d'un composant button-group--secondary`
`@collapse`	`Insertion d'un composant collapse`
`@collapse--arrow`	`Insertion d'un composant collapse--arrow`
`@collapse--toggle`	`Insertion d'un composant collapse--toggle`
`@collapse--list`	`Insertion d'un composant collapse--list`
`@collapse--link`	`Insertion d'un composant collapse--link`
`@dropdown`	`Insertion d'un composant dropdown`
`@dropdown--liste`	`Insertion d'un composant dropdown--liste`
`@dropdown--checkbox`	`Insertion d'un composant dropdown--checkbox`
`@dropdown--centre`	`Insertion d'un composant dropdown--centre`
`@dropdown--droite`	`Insertion d'un composant dropdown--droite`
`@icon`	`Insertion d'un composant icon`
`@icon--small`	`Insertion d'un composant icon--small`
`@icon--big`	`Insertion d'un composant icon--big`
`@icon--class`	`Insertion d'un composant icon--class`
`@lien`	`Insertion d'un composant lien`
`@lien--ghost`	`Insertion d'un composant lien--ghost`
`@lien--button`	`Insertion d'un composant lien--button`
`@loader`	`Insertion d'un composant loader`
`@loader--loading`	`Insertion d'un composant loader--loading`
`@loader--loaded`	`Insertion d'un composant loader--loaded`
`@loader--loading-lg`	`Insertion d'un composant loader--loading-lg`
`@loader--loading-sm`	`Insertion d'un composant loader--loading-sm`
`@loader--loading-xs`	`Insertion d'un composant loader--loading-xs`
`@loader--button`	`Insertion d'un composant loader--button`
`@pagination`	`Insertion d'un composant pagination`
`@pagination--mini`	`Insertion d'un composant pagination--mini`
`@progressbar`	`Insertion d'un composant progressbar`
`@progressbar-aria`	`Insertion d'un composant progressbar-aria`
`@progressbar--error`	`Insertion d'un composant progressbar--error`
`@progressbar--success`	`Insertion d'un composant progressbar--success`
`@progressbar--infinite`	`Insertion d'un composant progressbar--infinite`
`@progressbar--sm`	`Insertion d'un composant progressbar--sm`
`@progressbar--circular`	`Insertion d'un composant progressbar--circular`
`@skeleton`	`Insertion d'un composant skeleton`
`@skeleton--card`	`Insertion d'un composant skeleton--card`
`@skip-link`	`Insertion d'un composant skip-link`
`@status`	`Insertion d'un composant status`
`@status--status-success`	`Insertion d'un composant status--status-success`
`@status--status-warning`	`Insertion d'un composant status--status-warning`
`@status--status-error`	`Insertion d'un composant status--status-error`
`@status--status-pending`	`Insertion d'un composant status--status-pending`
`@stepper`	`Insertion d'un composant stepper`
`@stepper--left-sub`	`Insertion d'un composant stepper--left-sub`
`@stepper--right-sub`	`Insertion d'un composant stepper--right-sub`
`@stepper--horizontal`	`Insertion d'un composant stepper--horizontal`
`@tag`	`Insertion d'un composant tag`
`@tag--icon-before`	`Insertion d'un composant tag--icon-before`
`@tag--icon-after`	`Insertion d'un composant tag--icon-after`
`@tag--primary-double-icon`	`Insertion d'un composant tag--primary-double-icon`
`@tag--primary`	`Insertion d'un composant tag--primary`
`@tag--small`	`Insertion d'un composant tag--small`
`@tag--button`	`Insertion d'un composant tag--button`
`@toast`	`Insertion d'un composant toast`
`@toast--info`	`Insertion d'un composant toast--info`
`@toast--success`	`Insertion d'un composant toast--success`
`@toast--warning`	`Insertion d'un composant toast--warning`
`@toast--erreur`	`Insertion d'un composant toast--erreur`
`@toast--info-autohide`	`Insertion d'un composant toast--info-autohide`
`@tooltip`	`Insertion d'un composant tooltip`
`@tooltip--right`	`Insertion d'un composant tooltip--right`
`@tooltip--bottom`	`Insertion d'un composant tooltip--bottom`
`@tooltip--left`	`Insertion d'un composant tooltip--left`
`@tooltip--assocfalse`	`Insertion d'un composant tooltip--assocfalse`
`@tooltip--html`	`Insertion d'un composant tooltip--html`

Layouts

Prefix	Snippet description
`gstandard`	Permet d'utiliser le gabarit standard
`ggauche`	Permet d'utiliser le gabarit page gauche
`glanding`	Permet d'utiliser le gabarit page droite
`glanding`	Permet d'utiliser le gabarit page autonome
`glanding`	Permet d'utiliser le gabarit landing

Icon list

| Prefix | Mots clés associés | | ---- | ----- | | compass | compas direction nord boussole | | crossroad | chemin direction pancarte panneau croisement route | | map | carte plan localisation route | | navigation | lieu itinéraire panneau localisation plan | | pin-full | épingle point | | pin | épingle point | | pinmap | épingle point lieu panneau plan localisation | | road | route chemin voie direction | | roadsign | route plan pancarte panneau direction | | user-pin | usager lieu localisation épingle point | | briefcase-search | mallette sacoche valise serviette recherche chercher | | close-round | fermer arrondi cercle croix | | close | fermer cercle croix | | deaf | sourd handicap oreille | | download | télécharger charger | | edit | éditer modifier | | enlarge | élargir agrandir zoom | | eye-close | oeil yeux fermé aveugle handicap | | eye-full | oeil yeux ouvert voir aveugle handicap | | eye | oeil yeux ouvert aveugle voir handicap | | filters | filtre personnaliser paramètre réglage setting | | gear | outil personnaliser paramètre réglage setting | | ink-pen | encre pinceau crayon écrire modifier | | launch | ouvrir lancer démarrer | | link | lien ancre ressource web | | moins-round | retirer enlever arrondi supprimer | | overlap | calque superposer | | paint | peinture dessiner peindre | | pencil | crayon dessiner écrire modifier | | plus-round-full | ajouter arrondi ouvrir | | plus-round | ajouter arrondi ouvrir | | plus | ajouter ouvrir | | power | allumer démarrer connecter actionner activer | | reduce | réduire dézoom | | refresh | rafraîchir restaurer annuler renouveler | | reload | recharger charger | | remove-round-full | retirer enlever arrondi supprimer | | remove | retirer enlever supprimer | | save | sauver enregistrer disque | | search | chercher recherche loupe | | share | partager transmettre | | tool | outil personnaliser paramètre réglage | | touch | doigt tactile device | | trash-full | poubelle corbeille plein jeter | | trash | poubelle corbeille vide jeter | | unlink | lien ancre ressource web | | upload | télécharger téléverser charger | | alarm | réveil heure temps chrono | | calendar-clock | calendrier date réveil heure temps chrono | | calendar-download | calendrier date charger télécharger | | calendar-edit | calendrier date éditer modifier | | calendar | calendrier date réveil heure temps semaine jour | | clock | réveil heure temps chrono montre | | hourglass | sablier attendre heure temps chrono montre | | stopwatch | pause arrêt heure temps chrono montre | | algo-setting | algorithme paramètrage paramètre outil réglage | | book-open | livre ouvert signet | | book | livre signet | | bookmark | livre signet | | check-list | liste todo | | clip | trombone aide | | contacts | usager répertoire | | copy | copier dupliquer | | double-file | fichier copier dupliquer | | draft | brouillon éditer modifier | | excel | fichier | | export-resume | cv curriculum sauver | | file-arrow | fichier flèche export envoyer | | file-content | fichier | | file-copies | fichier copie | | file-download | fichier enregistrer sauver | | file-refresh | fichier rafraîchir | | file-warning | fichier attention erreur danger | | file | fichier | | folder-download | dossier enregistrer sauver | | folder-full | dossier plein rempli | | folder-search-full | dossier plein rempli recherche chercher | | folder-search | dossier recherche chercher | | folder-time | dossier temps attendre | | folder | dossier | | notes | brouillon | | pdf | | | `print` | `imprimer` | | `resume` | `cv curriculum` | | `search-file` | `fichier chercher rechercher` | | `todo` | `liste tâche` | | `web-resume` | `cv curriculum` | | `arrow-down-round` | `flèche arrondi bas` | | `arrow-down` | `flèche bas` | | `arrow-in` | `flèche diagonale droite` | | `arrow-left-in` | `flèche diagonale gauche` | | `arrow-left-round` | `flèche arrondi gauche` | | `arrow-left` | `flèche gauche` | | `arrow-right-round` | `flèche arrondi droite` | | `arrow-right` | `flèche droite` | | `arrow-up-round` | `flèche arrondi haut` | | `arrow-up` | `flèche haut` | | `chevron-d-full` | `triangle bas` | | `chevron-d` | `bas` | | `chevron-l` | `gauche` | | `chevron-r` | `droite` | | `chevron-sm-d` | `bas` | | `chevron-sm-l` | `gauche` | | `chevron-sm-r` | `droite` | | `chevron-sm-u` | `haut` | | `chevron-u-full` | `triangle haut` | | `chevron-u` | `haut` | | `chevron-up-down-full` | `triangle haut bas` | | `chevron-up-down` | `haut bas` | | `double-chevron-l` | `gauche` | | `double-chevron-r` | `droite` | | `respond-arrow-full` | `flèche droite pleine reply répondre` | | `respond-arrow` | `flèche droite reply répondre` | | `shuffle` | `mélange aléatoire` | | `swap` | `échange inverse` | | `heart-full` | `coeur aime like plein` | | `heart` | `coeur aime like plein` | | `moon` | `lune nocturne nuit sombre` | | `star-full` | `étoile favori plein` | | `star` | `étoile favori` | | `books` | `livres` | | `briefcase` | `mallette valise sacoche serviette` | | `chart` | `graphique diagramme camembert` | | `cpf` | `formation compte` | | `graduation` | `diplôme succès étudiant lycée validation certification éducation` | | `knowledge-full` | `connaissance compétence cerveau savoir plein éducation` | | `knowledge` | `connaissance compétence cerveau savoir éducation` | | `ribbon` | `ruban certification éducation` | | `trend` | `mode tendance` | | `bullet-list` | `liste puce` | | `grid` | `grille gabarit` | | `home-full` | `accueil maison plein` | | `home` | `accueil maison` | | `list-schedule` | `liste tâche` | | `menu` | `navigation burger bouton` | | `more` | `plus ajout point` | | `apple` | `pomme fruit` | | `building` | `immeuble bâtiment construire` | | `bulb-on` | `ampoule idée aide allumée` | | `bulb` | `ampoule idée aide` | | `calculator` | | | hotel | chambre lit | | key | clé clef | | keyboard-full | clavier touches plein | | law | loi règle législation juridique | | mouse | souris pointeur clic | | movie | caméra film vidéo | | tag | étiquette | | target | cible viser objectif | | theater | catégorie spectacle | | media-player | lecteur vidéo | | pause | halte | | play-movie | jouer vidéo | | play | jouer vidéo audio | | sound-off | couper son audio | | sound-on | allumer son audio | | stop | arrêt | | emploi-store | | | `espace-perso` | | | logo | pole pôle emploi | | sphere-emploi | | | `at` | `arobase mail email adresse` | | `comment-full` | `texte parler vocal bulle` | | `comment` | `texte parler vocal bulle` | | `computer` | `ordinateur informatique web` | | `describe` | `texte parler vocal bulle` | | `faq` | `question` | | `fax` | | | feedback | retours satisfaction | | headphone | casque audio oreillette son | | help | aide question information problème | | letter | lettre courrier email mail | | mail-full | lettre courrier email | | mail | lettre courrier email | | microphone | parler audio vocal son discussion | | no-paper | économie papier gaspillage recyclage | | pc | ordinateur informatique web écran | | phone-call | appel audio téléphone mobile | | phone-in | appel audio téléphone mobile | | phone-out | appel audio téléphone mobile | | phone | appel audio téléphone mobile | | quote | citer citation | | smartphone | appel audio téléphone mobile device responsive | | speed | vitesse connexion rapide chrono | | tablet | mobile device responsive | | translation | traduction langue | | webcam | caméra film vidéo | | cloud-upload | télécharger téléverser charger nuage | | connection | web connexion internet réseau social partage | | facebook | réseau | | globe | terre web internet monde | | google | réseau | | linkedin | réseau | | twitter | eéseau | | viadeo | réseau youtube | | world | terre web internet monde réseau | | badge-ko | erreur tag invalide | | badge-ok | succès tag valide | | badge-wait | attente pause arrêt | | bell-close | cloche notification annuler fermer | | bell-full | cloche notification plein | | bell | cloche notification | | briefcase-check | mallette valise sacoche serviette coche | | check-round-full | coche valide plein arrondi | | check-round | coche arrondi valide success | | check | coche valide success | | close-round-full | fermer arrondi plein annuler | | equal | égal identique | | error-full | erreur plein | | error | erreur | | exclamation | attention warning | | flag | drapeau pays | | hacker | informatique pirate sécurité | | hand | main halte stop | | info | | | `loading` | `charger télécharger` | | `lock` | `fermer verrouiller` | | `megaphone` | `discuter audio` | | `not-specified-round` | `interdit ban` | | `not-specified` | `interdit ban` | | `question-round` | `interrogation` | | `question` | `interrogation` | | `shield` | `bouclier protection protéger` | | `thumb-down` | `pouce bas` | | `thumb-up` | `pouce haut` | | `tild-full` | `environ` | | `warning` | `attention` | | `accessibility` | | | avatar | profil personne | | baby | bébé enfant | | contact-user | usager | | deal | contact marché échange politique privée RGPD partenariat | | discrimination | égalité différent | | exchange | échange | | focus | cible | | handicap-full | accessibilité plein | | handicap | accessibilité | | handshake | main conclure | | info-point | | | `search-user` | `cherche recherche usager` | | `user-add` | `ajout usager` | | `user-business` | `commerce usager` | | `user-check` | `coche usager` | | `user-full` | `usager plein` | | `user-remove` | `supprimer enveler déplacer usager` | | `user` | `usager` | | `users` | `usager` | | `badge` | `tag` | | `bill` | `facture payer paiement` | | `card-euro` | `carte cb` | | `credit-card` | `carte cb` | | `euro` | `argent monnaie devise` | | `handout` | `paiement main` | | `money-time` | `monnaie argent temps` | | `purse` | `bourse monnaie argent payer` | | `refund` | `rembourser` | | `rib` | | | wallet | portefeuille monnaie | | bike | vélo cyclisme | | bus | | | `car` | `automobile voiture` | | `moto` | | | plane | avion | | rocket | fusée rapide performance | | send | envoyer | | stroller | landeau poussette | | support | | | `train` | | | truck | camion véhicule | | walk | marche | | moins-round-full | supprimer retirer enlever arrondi plein | | arrow-out-1 | flèche droit | | arrow-out | flèche droit | | arrow-up-1 | flèche haut | | chevron-bold-d | | | `chevron-down` | | | chevron-left | | | `chevron-right` | | | chevron-up | | | `double-chevron-left` | | | double-chevron-right | `` | | speak-error | langue oral erreur | | list-shedule | todo tâche prévoir calendrier | | payment | monnaie argent payer | | handicap.svg | accessibilité | | pencil-full.svg | crayon dessiner écrire modifier plein | | send-full.svg | envoyer écrire modifier plein |

PE Nunjucks DS Snippets

jontravens

Nunjucks snippets for PE Design System

Demo

Components

Layouts

Icon list