# sistema di design Europa Component Library ## Anteprima dell’interfaccia del sistema di design Europa Component Library Apri le singole note, espandi o chiudi tutte le sezioni e visualizza l’intero layout di lettura. ## Riferimento di progettazione del sistema di design Europa Component Library Foglio di stile e codice sorgente Accordion verificati di @ecl/preset-ec 4.11.2. Il comportamento nativo e la composizione originale del controllo per aprire tutti gli elementi sono distinti in modo esplicito. ### Palette EC e ruoli di stato | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --ecl-color-primary | #3860ed | Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali. | | --ecl-color-primary-140 | #0f2fa2 | Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali. | | --ecl-color-secondary | #ffbe5c | Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali. | | --ecl-color-dark | #26324b | Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali. | | --ecl-color-info | #3860ed | Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali. | | --ecl-color-success | #24a148 | Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali. | | --ecl-color-error | #da1e28 | Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali. | | --ecl-color-warning | #f39811 | Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali. | | --ecl-color-background | #fcfcfc | Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali. | | --ecl-color-branding | #004494 | Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali. | | --ecl-color-neutral-20 | #f8f9fd | Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali. | | --ecl-color-neutral-60 | #e0e5f5 | Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali. | | --ecl-color-white | #fff | Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali. | ### Scala di spaziatura | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --ecl-spacing-2xs | 0.25rem | Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa. | | --ecl-spacing-xs | 0.5rem | Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa. | | --ecl-spacing-s | 0.75rem | Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa. | | --ecl-spacing-m | 1rem | Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa. | | --ecl-spacing-l | 1.25rem | Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa. | | --ecl-spacing-xl | 1.5rem | Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa. | | --ecl-spacing-2xl | 2rem | Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa. | | --ecl-spacing-3xl | 2.5rem | Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa. | | --ecl-spacing-4xl | 3rem | Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa. | | --ecl-spacing-5xl | 3.5rem | Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa. | | --ecl-spacing-6xl | 4rem | Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa. | ### Tipografia e misura di lettura | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --ecl-font-family-default | arial,sans-serif | I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato. | | --ecl-font-xs | normal normal 400 0.75rem/1.125rem arial,sans-serif | I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato. | | --ecl-font-s | normal normal 400 0.875rem/1.125rem arial,sans-serif | I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato. | | --ecl-font-m | normal normal 400 1rem/1.5rem arial,sans-serif | I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato. | | --ecl-font-l | normal normal 400 1.25rem/1.75rem arial,sans-serif | I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato. | | --ecl-font-xl | normal normal 400 1.5rem/2.25rem arial,sans-serif | I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato. | | --ecl-font-2xl | normal normal 400 1.75rem/2.25rem arial,sans-serif | I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato. | | --ecl-font-3xl | normal normal 400 2.5rem/2.75rem arial,sans-serif | I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato. | | --ecl-font-4xl | normal normal 400 3.25rem/3.375rem arial,sans-serif | I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato. | | --ecl-max-width | 80ch | I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato. | ### Contratto nativo del pannello a fisarmonica | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Initialization | data-ecl-auto-init="Accordion" + ECL.autoInit() | Inizializza questo componente all’interno del preset; non serve alcun wrapper per framework. | | Trigger | data-ecl-accordion-toggle | Il listener nativo viene collegato al pulsante di ogni intestazione. | | Target | aria-controls matches a panel ID | I riferimenti mancanti generano un errore; ogni ID deve essere univoco. | | Open state | aria-expanded + panel.hidden | Il runtime modifica sia la semantica sia il contenuto visibile. | | Event | root.ECLAccordion.on("onToggle", callback) | L’esempio calcola il numero di sezioni aperte dopo un’attivazione nativa. | | Event payload | { item, isOpening } | L’elemento è il pannello di destinazione, non un indice di array né una scheda selezionata. | | Independent panels | Several may be open together | Aprire tutti gli elementi è un comportamento originale dell’applicazione, che attiva i pulsanti di apertura nativi. | ## Guida completa al sistema di design Europa Component Library Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Preset Europa EC e scelta della versione del sistema di design Europa Component Library ### Scegli EC o EU prima di importare gli asset > Europa fornisce preset istituzionali distinti. Questo esempio usa deliberatamente @ecl/preset-ec alla versione 4.11.2, corrispondente alla documentazione EC collegata. Non combina markup EU, schermate EC storiche e un foglio di stile senza versione bloccata. Il pacchetto fornisce dist/styles/ecl-ec.css e dist/scripts/ecl-ec.js, quindi l’esempio statico può essere pubblicato senza introdurre un framework frontend. - Per l’implementazione EC mostrata qui, usa il preset EC. - Mantieni CSS e JavaScript alla stessa versione. - Quando riutilizzi gli elementi del pannello a fisarmonica, mantieni univoci gli ID sorgente. ### Considerala un’implementazione con versione specifica Il riferimento descrive la versione 4.11.2; non afferma che tutte le versioni successive abbiano token o comportamenti identici. Gli aggiornamenti devono confrontare insieme il preset scelto, il markup dei componenti e la loro inizializzazione. Il solo nome di un nuovo pacchetto o il numero di versione non dimostrano che un pattern copiato in precedenza continui a funzionare correttamente. ## Ruoli cromatici di Europa e identità istituzionale del sistema di design Europa Component Library ### Tieni separati il colore del marchio e quello dell’azione primaria Il colore del marchio nel preset è #004494, mentre il colore primario è #3860ed. Il brief originale usa il colore del marchio solo per una sottile linea superiore, lasciando poi al componente il proprio stile per le azioni primarie. Il valore neutral-20 è usato per lo sfondo della pagina e neutral-60 per separare i contenuti. In questo modo si mantiene la distinzione tra un accento istituzionale e il colore di un controllo interattivo. ### Non attribuire significati ufficiali all’esempio La pagina è uno studio OpenDesign con note di consultazione fittizie. Non ha il logo della Commissione europea e non rappresenta un bando di finanziamento, un servizio o un requisito legale. Le voci della palette per errore, avviso e successo sono elencate come token effettivi, ma l’anteprima non genera un messaggio artificiale di successo dell’applicazione solo per mostrare tutti i colori. ## Tipografia e scala di spaziatura di Europa del sistema di design Europa Component Library ### Usa i valori completi della proprietà shorthand per i caratteri Il preset EC definisce Arial come famiglia di caratteri predefinita per lo schermo. Il ruolo m corrisponde a 1rem con interlinea di 1.5rem e peso 400; i ruoli di dimensione maggiore hanno ciascuno la propria interlinea. Il riferimento riporta dichiarazioni complete, anziché soltanto dimensioni isolate in punti. Il peso del titolo nello studio è una scelta originale di enfasi applicata al ruolo fornito, mentre il testo dei componenti resta sotto il controllo del foglio di stile nativo. ### Mantieni visibili la spaziatura in rem e la misura dei contenuti La sequenza di spaziatura comprende 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5 e 4rem. La misura massima nativa per la lettura è 80ch. Il layout originale usa un limite esterno centrato di 1080px e una spaziatura interna responsive, mentre ogni pannello a fisarmonica mantiene la propria spaziatura del preset. La larghezza esterna è una scelta compositiva, non un nuovo token ufficiale. ## Markup e comportamento nativo del pannello a fisarmonica Europa del sistema di design Europa Component Library ### Fai in modo che i pulsanti delle intestazioni controllino pannelli reali Ogni .ecl-accordion__item contiene un’intestazione con un pulsante .ecl-accordion__toggle. Il relativo aria-controls punta al pannello .ecl-accordion__content corrispondente. L’esempio include un ID stabile per il pulsante di attivazione e aria-labelledby per ogni regione. Lo script nativo trova il pannello di destinazione tramite ID, modifica aria-expanded e imposta panel.hidden; le relazioni devono rimanere corrette anche se gli elementi vengono riordinati o copiati. ### Usa un indicatore esplicito senza sprite esterni L’esempio include percorsi SVG originali e compatti per i segni più e meno, inseriti nelle classi native degli indicatori di attivazione. Il preset determina quale viene visualizzato quando la sezione è espansa. Si tratta di forme geometriche semplici e originali, non di loghi istituzionali copiati. L’esempio rimane così autonomo e non richiede il caricamento di sprite cross-origin, pur mantenendo la struttura del componente. ## Sistema di design Europa Component Library Europa: eventi dell’accordion e comportamento di apertura di tutte le sezioni ### Ricava lo stato dal componente nativo ECL.autoInit() espone il componente inizializzato come root.ECLAccordion. L’applicazione ascolta l’evento onToggle e calcola quanti pulsanti di attivazione hanno attualmente aria-expanded="true". Il payload dell’evento include l’elemento di destinazione e isOpening, utile per gestire i singoli pannelli. Il conteggio non deduce lo stato dal testo visibile e non mantiene un secondo array indipendente con lo stato di apertura. ### Rendi prevedibile l’azione collettiva Quando tutti i pannelli sono aperti, l’azione collettiva li chiude; altrimenti li apre tutti. Il gestore attiva solo i pulsanti nativi il cui stato deve cambiare. Non imposta direttamente hidden o aria-expanded, così gli eventi nativi e il conteggio derivato rimangono coerenti. L’etichetta del controllo alterna tra Apri tutte le sezioni e Chiudi tutte le sezioni per comunicare l’azione successiva. ## Sistema di design Europa Component Library Europa: tastiera e lettura progressiva ### Usa la normale interazione con i pulsanti Il tasto Tab sposta il focus su un pulsante nell’intestazione; Invio o la barra spaziatrice lo attivano tramite il comportamento nativo dei pulsanti del browser. Questo è un accordion, non un tablist: non aggiungere la navigazione tra schede con i tasti freccia per analogia. Più pannelli possono rimanere aperti, così è possibile confrontare le note. L’indicatore di focus è fornito dal foglio di stile del componente e rimane visibile sullo sfondo chiaro. ### Mantieni il testo leggibile senza JavaScript Il codice sorgente HTML mostra inizialmente tutti i pannelli e imposta aria-expanded="true". Dopo che l’inizializzazione nativa è riuscita, l’applicazione li chiude attivando i relativi pulsanti. Se JavaScript è disabilitato, il testo rimane quindi visibile e la barra degli strumenti inattiva per le azioni collettive viene nascosta dallo stile no-js. Questa modalità di fallback è stata verificata controllando la visibilità effettiva, non solo la presenza dei paragrafi nel codice sorgente. ## Sistema di design Europa Component Library Europa: pannelli adattivi e contenuti lunghi ### Consenti l’altezza naturale e il ritorno a capo Il documento non usa un’altezza fissa per l’accordion. Le note espanse possono estendersi per contenere intestazioni, elenchi numerati e una nota decisionale evidenziata. Sugli schermi più piccoli si riduce il padding esterno originale e il titolo usa un ruolo tipografico più piccolo tra quelli disponibili. Il testo lungo dei pulsanti di attivazione va a capo, mentre l’indicatore rimane visibile. Il comportamento è stato verificato a 280px e alle larghezze per desktop, tablet e telefono. ### Non trasformare i controlli di lettura in un flusso di approvazione Aprire o chiudere un pannello ne modifica solo la presentazione. Il conteggio indica quante sezioni sono aperte, non quante sono state completate o quanti requisiti sono stati soddisfatti. Il piè di pagina specifica che non viene inviata alcuna risposta alla consultazione né concessa un’approvazione formale. Un servizio reale avrebbe bisogno di comportamenti specifici per idoneità, persistenza e backend, nessuno dei quali è implicito nella demo del componente. ## Sistema di design Europa Component Library Europa: configurazione statica completa ### Installa il preset corrispondente e salva tutti i file Il file index.html fornito carica il foglio di stile del preset bloccato alla versione specificata e lo script per browser prima di ecl-app.js. Salva i file ecl.css ed ecl-app.js allegati nella stessa cartella e servila tramite HTTP. Sono inclusi tutti i contenuti, gli SVG degli indicatori e i gestori dello stato. Per questa demo non serve alcuna struttura applicativa nascosta né scaricare icone separatamente. 1. Installa il preset EC bloccato alla versione specificata. 2. Salva insieme index.html, ecl.css ed ecl-app.js. 3. Servi la directory e verifica l’attivazione singola e collettiva. 4. Ripeti la verifica con la tastiera, su una finestra stretta e con JavaScript disabilitato. ### Rendi verificabili gli aggiornamenti dei componenti Dopo un aggiornamento, verifica gli ID di pulsanti e pannelli, l’inizializzazione, il listener onToggle, lo stato dell’azione collettiva e la visualizzazione senza JavaScript. Confronta poi la tipografia effettiva, i colori e il layout sugli schermi stretti. L’installazione del pacchetto e la visualizzazione di un’intestazione non sono prove sufficienti che tutti i contenuti espandibili funzionino ancora. ## Sistema di design Europa Component Library Esempi di componenti del sistema di progettazione ### ecl-index.html — sorgente completa Markup completo del componente, contenuti, indicatori inline e percorsi degli asset del preset. ``` 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.

``` Riferimento del codice - Salva il file HTML come index.html e lascia invariati i nomi degli altri file forniti. ### ecl.css — sorgente completa Composizione adattiva originale basata sullo stile nativo dei componenti 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}} ``` Riferimento del codice - Salva il file HTML come index.html e lascia invariati i nomi degli altri file forniti. ### ecl-app.js — sorgente completa Inizializzazione nativa e comportamento collettivo basato sugli eventi, con contenuti inizialmente leggibili senza HTML. ``` 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(); ``` Riferimento del codice - Salva il file HTML come index.html e lascia invariati i nomi degli altri file forniti. ## Sistema di design Europa Component Library Configurazione dell’agente del sistema di progettazione ### Punto di partenza per l’implementazione Apri http://localhost:8000/. L’esempio usa il preset EC e non richiede di scaricare altre icone o font. ``` 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 per il tuo progetto ``` Implementa il brief fornito per l’accordion ECL EC 4.11.2 usando tutti e tre i file completi. Mantieni le relazioni native tra pulsanti e pannelli, il conteggio basato su onToggle, la logica di apertura e chiusura collettiva, l’attivazione dei pulsanti da tastiera, la leggibilità senza JavaScript e l’ambito esplicito dell’esempio originale. Non presentarlo come un servizio ufficiale dell’UE o come un invio formale. ``` ## Sistema di design Europa Component Library Fonti e ambito del sistema di progettazione Una guida applicativa OpenDesign per ECL EC 4.11.2. Le note di esempio originali e la composizione della pagina non rappresentano un servizio della Commissione europea, un bando di finanziamento o un obbligo legale. - Guida introduttiva EC Asset del preset e configurazione dell’implementazione. - Linee guida per l’accordion Contesto e riferimento d’uso del componente. - Ruoli cromatici Palette primaria, del marchio, neutra e di stato. - Foglio di stile del preset bloccato alla versione specificata I valori esatti usati in questo esempio. ## Sistema di design Europa Component Library Risorse correlate del sistema di progettazione ### gov.cz sistema di design Esplora i ruoli cromatici reali, gli slot delle schede e la paginazione nativa di Gov Design System CE attraverso un toolkit di lettura completo con sei risorse e gestione esplicita del focus e dello stato della pagina. ### GOV.UK sistema di design Crea un percorso GOV.UK di domande e verifica delle risposte con la scala tipografica v6 corrente, spaziatura responsiva, colori funzionali, convalida collegata e un’integrazione Frontend concreta. ### HarvardSites sistema di design Scopri HarvardSites come piattaforma editoriale: confronta gli stili dei siti, scegli abbinamenti di font documentati e componi pagine universitarie con componenti di contenuto progettati per lo scopo. - [Riferimento per l’implementazione](https://ec.europa.eu/component-library/v4.11.2/ec/components/accordion/usage/) - [Fonte](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/colours/) - [Fonte](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/spacing/) - [Fonte](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/typography/) - [Fonte](https://cdn.jsdelivr.net/npm/@ecl/vanilla-component-accordion@4.11.2/accordion.js) - [Riferimento del codice](https://ec.europa.eu/component-library/v4.11.2/ec/getting-started/) - [Guida introduttiva EC Asset del preset e configurazione dell’implementazione.](https://ec.europa.eu/component-library/v4.11.2/ec/getting-started/) - [Linee guida per l’accordion Contesto e riferimento d’uso del componente.](https://ec.europa.eu/component-library/v4.11.2/ec/components/accordion/usage/) - [Ruoli cromatici Palette primaria, del marchio, neutra e di stato.](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/colours/) - [Foglio di stile del preset bloccato alla versione specificata I valori esatti usati in questo esempio.](https://cdn.jsdelivr.net/npm/@ecl/preset-ec@4.11.2/dist/styles/ecl-ec.css)