Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>PE Nunjucks DS Snippets for FractalNew to Visual Studio Code? Get it now.
PE Nunjucks DS Snippets for Fractal

PE Nunjucks DS Snippets for Fractal

jontravens

|
9 installs
| (0) | Free
Snippets to easily use PE Design System inside Fractal
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Nunjucks snippets for PE Design System

This package aims at providing a complete set of nunjucks snippets to use components within Fractal documentation.

Demo

Demo

It consists of snippets in 2 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

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 |

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft