# Système de design Europa Component Library ## Aperçu de l’interface du système de design Europa Component Library Ouvrez chaque note, développez ou fermez toutes les sections et examinez la mise en page de lecture complète. ## Référence de conception du système de design Europa Component Library Feuille de style @ecl/preset-ec 4.11.2 et code source d’Accordion vérifiés. Le comportement natif et la composition originale de la commande globale sont clairement distingués. ### Palette EC et rôles d’état | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ecl-color-primary | #3860ed | Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels. | | --ecl-color-primary-140 | #0f2fa2 | Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels. | | --ecl-color-secondary | #ffbe5c | Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels. | | --ecl-color-dark | #26324b | Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels. | | --ecl-color-info | #3860ed | Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels. | | --ecl-color-success | #24a148 | Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels. | | --ecl-color-error | #da1e28 | Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels. | | --ecl-color-warning | #f39811 | Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels. | | --ecl-color-background | #fcfcfc | Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels. | | --ecl-color-branding | #004494 | Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels. | | --ecl-color-neutral-20 | #f8f9fd | Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels. | | --ecl-color-neutral-60 | #e0e5f5 | Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels. | | --ecl-color-white | #fff | Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels. | ### Échelle d’espacement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ecl-spacing-2xs | 0.25rem | Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle. | | --ecl-spacing-xs | 0.5rem | Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle. | | --ecl-spacing-s | 0.75rem | Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle. | | --ecl-spacing-m | 1rem | Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle. | | --ecl-spacing-l | 1.25rem | Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle. | | --ecl-spacing-xl | 1.5rem | Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle. | | --ecl-spacing-2xl | 2rem | Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle. | | --ecl-spacing-3xl | 2.5rem | Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle. | | --ecl-spacing-4xl | 3rem | Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle. | | --ecl-spacing-5xl | 3.5rem | Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle. | | --ecl-spacing-6xl | 4rem | Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle. | ### Typographie et largeur de lecture | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ecl-font-family-default | arial,sans-serif | Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise. | | --ecl-font-xs | normal normal 400 0.75rem/1.125rem arial,sans-serif | Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise. | | --ecl-font-s | normal normal 400 0.875rem/1.125rem arial,sans-serif | Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise. | | --ecl-font-m | normal normal 400 1rem/1.5rem arial,sans-serif | Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise. | | --ecl-font-l | normal normal 400 1.25rem/1.75rem arial,sans-serif | Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise. | | --ecl-font-xl | normal normal 400 1.5rem/2.25rem arial,sans-serif | Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise. | | --ecl-font-2xl | normal normal 400 1.75rem/2.25rem arial,sans-serif | Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise. | | --ecl-font-3xl | normal normal 400 2.5rem/2.75rem arial,sans-serif | Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise. | | --ecl-font-4xl | normal normal 400 3.25rem/3.375rem arial,sans-serif | Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise. | | --ecl-max-width | 80ch | Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise. | ### Contrat natif de l’accordéon | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Initialization | data-ecl-auto-init="Accordion" + ECL.autoInit() | Initialise ce composant dans le préréglage ; aucun adaptateur pour un framework n’est nécessaire. | | Trigger | data-ecl-accordion-toggle | L’écouteur natif est associé au bouton de chaque en-tête. | | Target | aria-controls matches a panel ID | L’absence d’une cible provoque une erreur ; chaque ID doit être unique. | | Open state | aria-expanded + panel.hidden | L’environnement d’exécution modifie à la fois la sémantique et le contenu visible. | | Event | root.ECLAccordion.on("onToggle", callback) | L’exemple calcule le nombre de sections ouvertes après une bascule native. | | Event payload | { item, isOpening } | L’élément désigne le panneau cible, et non un index de tableau ou un onglet sélectionné. | | Independent panels | Several may be open together | Tout ouvrir est un comportement natif de l’application qui active les boutons déclencheurs natifs. | ## Europa Component Library Guide complet du système de design Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Système de design Europa Component Library Europa : choix du préréglage et de la version EC ### Choisissez EC ou EU avant d’importer les ressources > Europa fournit des préréglages institutionnels distincts. Cet exemple utilise délibérément @ecl/preset-ec en version 4.11.2, conformément à la documentation EC liée. Il ne mélange ni balisage EU, ni captures d’écran EC historiques, ni feuille de style sans version épinglée. Le package fournit dist/styles/ecl-ec.css et dist/scripts/ecl-ec.js : l’exemple statique peut donc être servi sans introduire de framework frontend. - Utilisez le préréglage EC pour l’implémentation EC présentée ici. - Utilisez la même version pour CSS et JavaScript. - Veillez à ce que les identifiants source restent uniques lorsque vous réutilisez des éléments d’accordéon. ### Considérez ceci comme une implémentation versionnée La référence décrit la version 4.11.2 ; elle n’affirme pas que toutes les versions ultérieures possèdent des jetons ou un comportement identiques. Lors d’une mise à niveau, comparez le préréglage choisi, le balisage des composants et leur initialisation. Un nouveau nom de package ou un nouveau numéro de version ne suffit pas à prouver qu’un modèle copié précédemment fonctionne toujours correctement. ## Système de design Europa Component Library Europa : rôles des couleurs et identité institutionnelle ### Distinguez l’image de marque de l’action principale La couleur de marque du préréglage est #004494, tandis que sa couleur principale est #3860ed. Le brief initial réserve la couleur de marque à une fine bande en haut de page, puis laisse le composant utiliser son propre traitement pour l’action principale. Neutral-20 sert de fond de page et Neutral-60 sépare les contenus. Cette approche distingue l’accent institutionnel de la couleur d’un contrôle interactif. ### N’attribuez pas de signification officielle à l’exemple La page est une étude OpenDesign qui présente des notes fictives de consultation. Elle ne comporte aucun logo de la Commission européenne et ne représente ni un appel à financement, ni un service, ni une exigence légale. Les entrées de la palette d’erreur, d’avertissement et de succès sont répertoriées comme de véritables jetons, mais l’aperçu ne génère pas de faux message de réussite simplement pour afficher toutes les couleurs. ## Système de design Europa Component Library Europa : typographie et échelle d’espacement ### Utilisez des valeurs complètes pour les propriétés de police raccourcies Le préréglage EC définit Arial comme police par défaut à l’écran. Le rôle m correspond à 1rem, avec une hauteur de ligne de 1.5rem et une graisse de 400 ; les rôles de taille supérieure ont chacun leur propre hauteur de ligne. La référence présente des déclarations complètes plutôt que des tailles de police isolées. La graisse des titres de l’étude est un choix de mise en évidence original, appliqué au rôle fourni, tandis que le texte des composants reste contrôlé par la feuille de style native. ### Faites apparaître les espacements en rem et la largeur de lecture La séquence d’espacement comprend 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5 et 4rem. La largeur de lecture maximale native est de 80ch. La mise en page d’origine utilise une limite extérieure centrée de 1080px et des marges internes adaptatives, tandis que chaque accordéon conserve son propre espacement défini par le préréglage. La largeur extérieure relève d’un choix de composition, et non d’un nouveau jeton officiel. ## Système de design Europa Component Library Europa : balisage et comportement natif des accordéons ### Associez les boutons de titre à de vrais panneaux Chaque .ecl-accordion__item contient un titre avec un bouton .ecl-accordion__toggle. Son aria-controls pointe vers le panneau .ecl-accordion__content correspondant. L’exemple attribue à chaque élément un identifiant de déclencheur stable et ajoute aria-labelledby à chaque région. Le script natif trouve la cible par son ID, modifie aria-expanded et change la valeur de panel.hidden ; ces relations doivent rester correctes si les éléments sont réorganisés ou copiés. ### Utilisez un indicateur explicite sans sprite externe L’exemple fournit de petits tracés SVG originaux, un signe plus et un signe moins, dans les classes natives d’indicateur de bascule. Le préréglage détermine lequel s’affiche lorsque l’élément est développé. Ces formes géométriques simples sont originales et ne reprennent aucun logo institutionnel. L’exemple reste ainsi autonome et évite le chargement d’un sprite interorigine, tout en conservant la structure du composant. ## Système de design Europa Component Library Europa : événements des accordéons et comportement « Tout ouvrir » ### Déduisez l’état du composant natif ECL.autoInit() expose le composant initialisé sous root.ECLAccordion. L’application écoute son événement onToggle et calcule le nombre de boutons déclencheurs dont l’attribut aria-expanded="true". La charge utile de l’événement comprend l’élément cible et isOpening, utiles pour gérer chaque panneau individuellement. Le décompte ne déduit pas l’état du texte visible et ne maintient pas de tableau indépendant des éléments ouverts. ### Assurez la prévisibilité de l’action groupée Lorsque tous les panneaux sont ouverts, l’action groupée les ferme ; sinon, elle les ouvre tous. Le gestionnaire active uniquement les boutons natifs dont l’état doit changer. Il ne modifie lui-même ni hidden ni aria-expanded, afin que les événements natifs et le décompte calculé restent cohérents. Le libellé du contrôle passe de « Tout ouvrir » à « Tout fermer » pour annoncer l’action suivante. ## Système de design Europa Component Library Europa : navigation au clavier et lecture progressive ### Utilisez le comportement normal des boutons La touche Tab déplace le focus vers un bouton de titre ; Entrée ou Espace l’active selon le comportement natif des boutons du navigateur. Il s’agit d’un accordéon, et non d’une liste d’onglets : n’ajoutez pas de navigation entre les éléments avec les flèches par analogie. Plusieurs panneaux peuvent rester ouverts, ce qui facilite la comparaison des notes. L’indicateur de focus provient de la feuille de style du composant et reste visible sur le fond clair. ### Assurez la lisibilité du texte sans JavaScript Le fichier source HTML affiche tous les panneaux et définit aria-expanded="true". Une fois l’initialisation native réussie, l’application les replie en activant leurs boutons. Si JavaScript est désactivé, le texte reste donc visible et la barre d’outils inactive est masquée par le style no-js. Ce comportement de repli a été testé en vérifiant la visibilité réelle, et non la simple présence des paragraphes dans le code source. ## Système de design Europa Component Library Europa : panneaux adaptatifs et contenu long ### Laissez la hauteur et le retour à la ligne s’adapter naturellement Le document n’impose aucune hauteur fixe à l’accordéon. Les notes déployées peuvent s’agrandir pour accueillir des titres, des listes numérotées et une note de décision mise en évidence. Sur les écrans plus petits, le remplissage extérieur d’origine est réduit et le titre utilise un rôle typographique fourni de plus petite taille. Le texte long des déclencheurs passe à la ligne, tandis que l’indicateur reste visible. Le rendu a été vérifié à 280 px, ainsi que sur des écrans de bureau, des tablettes et des téléphones. ### Ne transformez pas les commandes de lecture en processus d’approbation L’ouverture ou la fermeture d’un panneau ne modifie que sa présentation. Le compteur indique le nombre de sections ouvertes, et non le nombre de sections terminées ou d’exigences satisfaites. Le pied de page précise qu’aucune réponse à la consultation ni approbation officielle n’est envoyée. Un véritable service nécessiterait ses propres règles d’admissibilité, mécanismes de persistance et comportements côté serveur, dont aucun n’est sous-entendu par la démonstration du composant. ## Configuration statique complète de système de design Europa Component Library Europa ### Installez le préréglage correspondant et enregistrez tous les fichiers Le fichier index.html fourni charge la feuille de style du préréglage épinglé et le script du navigateur avant ecl-app.js. Enregistrez ecl.css et ecl-app.js à ses côtés et servez le dossier via HTTP. Tout le contenu, les SVG des indicateurs et les gestionnaires d’état sont inclus. Cette étude ne nécessite ni structure d’application cachée ni téléchargement séparé d’icônes. 1. Installez le préréglage EC épinglé. 2. Enregistrez ensemble index.html, ecl.css et ecl-app.js. 3. Servez le répertoire et testez les bascules individuelles et groupées. 4. Recommencez avec le clavier, une fenêtre étroite et JavaScript désactivé. ### Veillez à ce que les mises à niveau des composants restent vérifiables Après une mise à niveau, vérifiez les identifiants reliant les déclencheurs aux panneaux, l’initialisation, l’écouteur onToggle, l’état global et l’affichage sans JavaScript. Comparez ensuite la typographie réelle, les couleurs et la mise en page sur les écrans étroits. L’installation du paquet et l’affichage d’un titre ne suffisent pas à prouver que tout le contenu dépliable fonctionne encore. ## Exemples de composants de système de design Europa Component Library ### ecl-index.html — code source complet Balisage complet du composant, contenu, indicateurs intégrés et chemins d’accès aux ressources du préréglage. ``` Public conversation brief

European Commission preset / original study

A clear brief for a public conversation

Explore three preparation notes with native ECL expandable sections and an explicit open-all control.

ECL EC 4.11.2 CSS and native Accordion runtime. Original OpenDesign sample text; this is not an EU service, funding programme or legal guide.

0 of 3 sections open

This fictional planning note describes a small community consultation. It is sample editorial content, not an EU funding call, legal requirement or official application process.

Make a decision possible

  1. State which decision the conversation will inform.
  2. List information already available before asking participants for more.
  3. Name what remains outside the consultation.

Give participants enough context to decide whether and how to take part. The invitation should explain the topic, expected duration, available formats and the use of any notes.

Provide usable alternatives

  1. Offer a plain-language explanation of the activity.
  2. Allow a person to contribute without speaking to the whole group.
  3. Explain how to ask for an accessible format.

After the session, distinguish what was agreed from what still needs investigation. A clean record helps the next reader understand how a proposal changed and why.

Prepare a readable follow-up

  1. Write the next action with an owner and review date.
  2. Make open questions visible alongside conclusions.
  3. Invite participants to correct an inaccurate summary.

Each heading is a native button. Use Tab to move between headings and Enter or Space to toggle; several sections can remain open. Without JavaScript the notes remain readable.

``` Référence du code - Enregistrez le fichier HTML sous le nom index.html et conservez inchangés les noms des autres fichiers fournis. ### ecl.css — code source complet Composition adaptative d’origine autour des styles natifs des composants ECL. ``` *{box-sizing:border-box}body{margin:0;background:var(--ecl-color-neutral-20);font:var(--ecl-font-m);color:var(--ecl-color-dark)}main{max-width:1080px;margin:auto;padding:40px}.mast{border-top:6px solid var(--ecl-color-branding);padding:32px;background:white}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ecl-color-primary-140)}h1{font:var(--ecl-font-3xl);font-weight:700;margin:16px 0;max-width:22ch}.mast p{max-width:72ch}.scope{font:var(--ecl-font-s);margin:24px 0;max-width:90ch}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin:32px 0 16px}.toolbar p{margin:0}.ecl-accordion{background:white}.ecl-accordion__toggle-title{padding-right:16px}.ecl-accordion__toggle-icon{width:24px;height:24px}.ecl-accordion__content p:first-child{margin-top:0}.ecl-accordion__content ol,.ecl-accordion__content ul{padding-left:24px}.ecl-accordion__content li{margin:8px 0}.ecl-accordion__content h3{font-size:18px;line-height:1.4}.decision{border-left:4px solid var(--ecl-color-secondary);padding:16px;background:var(--ecl-color-neutral-20);margin:24px 0}.footer{font:var(--ecl-font-s);margin-top:24px;border-top:1px solid var(--ecl-color-neutral-60);padding-top:24px}.no-js .toolbar{display:none}@media(max-width:600px){main{padding:16px}.mast{padding:24px}h1{font:var(--ecl-font-2xl);font-weight:700}.ecl-accordion__toggle{overflow-wrap:anywhere}} ``` Référence du code - Enregistrez le fichier HTML sous le nom index.html et conservez inchangés les noms des autres fichiers fournis. ### ecl-app.js — code source complet Initialisation native et comportement groupé piloté par les événements, avec HTML lisible dès le chargement. ``` document.documentElement.classList.remove('no-js');ECL.autoInit();const root=document.querySelector('[data-ecl-accordion]');const buttons=[...root.querySelectorAll('[data-ecl-accordion-toggle]')];const all=document.querySelector('#all');function sync(){let open=buttons.filter(b=>b.getAttribute('aria-expanded')==='true').length;document.querySelector('#count').textContent=open+' of '+buttons.length+' sections open';all.textContent=open===buttons.length?'Close all sections':'Open all sections';}root.ECLAccordion.on('onToggle',sync);buttons.forEach(b=>b.click());all.addEventListener('click',()=>{let close=buttons.every(b=>b.getAttribute('aria-expanded')==='true');buttons.filter(b=>(b.getAttribute('aria-expanded')==='true')===close).forEach(b=>b.click());});sync(); ``` Référence du code - Enregistrez le fichier HTML sous le nom index.html et conservez inchangés les noms des autres fichiers fournis. ## Configuration de l’agent IA pour système de design Europa Component Library ### Point de départ de l’implémentation Ouvrez http://localhost:8000/. L’exemple utilise le préréglage EC et ne nécessite aucun téléchargement supplémentaire d’icône ou de police. ``` npm init -y npm install @ecl/preset-ec@4.11.2 # Save index.html, ecl.css and ecl-app.js from the supplied examples. python3 -m http.server 8000 ``` ### Un prompt pour votre projet ``` Mettez en œuvre le cahier des charges fourni pour l’accordéon ECL EC 4.11.2 à l’aide des trois fichiers complets. Préservez les liens natifs entre les déclencheurs et les panneaux, le compteur piloté par onToggle, le comportement d’ouverture et de fermeture groupées, l’activation des boutons au clavier, la lecture sans JavaScript et la portée explicitement limitée de l’exemple d’origine. Ne laissez pas entendre qu’il s’agit d’un service officiel de l’UE ou d’une soumission officielle. ``` ## Sources et portée de système de design Europa Component Library Guide d’application OpenDesign pour ECL EC 4.11.2. Les notes de l’exemple d’origine et la composition de la page ne représentent ni un service de la Commission européenne, ni un appel à financement, ni une obligation légale. - Premiers pas avec EC Ressources du préréglage et configuration de l’implémentation. - Guide de l’accordéon Contexte du composant et référence d’utilisation. - Rôles des couleurs Palette principale, de marque, neutre et d’état. - Feuille de style du préréglage épinglé Valeurs exactes utilisées dans cet exemple. ## Ressources associées à système de design Europa Component Library ### gov.cz système de design Découvrez les véritables rôles de couleur de Gov Design System CE, les emplacements des cartes et la pagination native à travers une boîte à outils de lecture complète pour six ressources, avec gestion explicite du focus et de l’état de la page. ### GOV.UK système de design Créez un parcours de questions et de vérification des réponses dans le style de GOV.UK, avec l’échelle typographique actuelle de la v6, un espacement adaptatif, des couleurs fonctionnelles, une validation liée et une intégration concrète au front-end. ### HarvardSites système de design Découvrez HarvardSites en tant que plateforme éditoriale : comparez les styles de site, choisissez des associations de polices documentées et composez des pages universitaires à partir de composants de contenu conçus à cet effet. - [Référence de mise en œuvre](https://ec.europa.eu/component-library/v4.11.2/ec/components/accordion/usage/) - [Source](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/colours/) - [Source](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/spacing/) - [Source](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/typography/) - [Source](https://cdn.jsdelivr.net/npm/@ecl/vanilla-component-accordion@4.11.2/accordion.js) - [Référence du code](https://ec.europa.eu/component-library/v4.11.2/ec/getting-started/) - [Premiers pas avec EC Ressources du préréglage et configuration de l’implémentation.](https://ec.europa.eu/component-library/v4.11.2/ec/getting-started/) - [Guide de l’accordéon Contexte du composant et référence d’utilisation.](https://ec.europa.eu/component-library/v4.11.2/ec/components/accordion/usage/) - [Rôles des couleurs Palette principale, de marque, neutre et d’état.](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/colours/) - [Feuille de style du préréglage épinglé Valeurs exactes utilisées dans cet exemple.](https://cdn.jsdelivr.net/npm/@ecl/preset-ec@4.11.2/dist/styles/ecl-ec.css)