Updates

Author: Deploy Bot

community/media/20210319-progettare-servizi-pubblici-digitali-piu-equi-e-sostenibili/index.html

@@ -8,7 +8,7 @@
 <li><strong>Interazioni</strong>: le icone possono rappresentare interazioni quali &quot;mi piace&quot;, &quot;condividi&quot; o &quot;commenta&quot;. In questo caso i simboli devono essere facilmente comprensibili e azionabili per agevolare l&#x27;interazione desiderata dall&#x27;utente.</li>
 </ul>
 <p>Ti consigliamo di abbinare un&#x27;icona a un&#x27;etichetta di testo che ne chiarisce la funzione.</p>
-<p>Puoi usare l&#x27;icona da sola se il simbolo è chiaro e non ambiguo. In questo caso, l&#x27;etichetta di testo deve comunque essere leggibile da un lettore di schermo (screen reader).</p></div></div><div class="text-image-cta d-flex mb-0"><div class="content w-100"><h2 class="/*mb-3*/">Le icone disponibili</h2><p>Le icone sono disponibili nella libreria <a href="https://italia.github.io/bootstrap-italia/docs/utilities/icone/#lista-delle-icone-disponibili">Bootstrap Italia</a> e in <a href="https://www.figma.com/@designersitalia">UI kit Italia</a> (Figma).</p></div></div><div id="viewer01--component-view-id_79" class="pb-4 mb-5"><div class="d-flex flex-column align-items-center me-lg-4 me-xl-5"><div class="w-100 d-flex align-items-end justify-content-end py-3"><div class="responsive-buttons d-none d-lg-block"><span class="me-4">Anteprima:</span><div class="btn-group" role="group" aria-label="Scegli la risoluzione per l&#x27;anteprima:"><button type="button" aria-label="Visualizzazione anteprima mobile 360px" class="btn btn-secondary btn-xs"><span>mobile</span></button><button type="button" aria-label="Visualizzazione anteprima tablet 768px" class="btn btn-secondary btn-xs"><span>tablet</span></button><button type="button" aria-label="Visualizzazione anteprima desktop" class="btn btn-secondary btn-xs"><span>full</span></button></div></div><div class="ms-2"><a href="/examples/bsi/utilities/icone/icone-disponibili.html" target="_blank" rel="noreferrer" class="btn btn-xs btn-primary p-2"><svg role="img" class="icon icon-sm icon-white align-middle" aria-label=" Apri l&#x27;anteprima in una nuova finestra"><use href="/svg/sprites.svg#it-external-link"></use></svg></a></div></div><span class="visually-hidden">Inizio anteprima:</span><iframe id="viewer01--iframe" src="/examples/bsi/utilities/icone/icone-disponibili.html" title="Variante: Icone disponibili" class="w-100 iframe-example rounded border shadow-sm  viewer-full"></iframe><span class="visually-hidden">Fine anteprima.</span></div><div class="accordion accordion-left-icon py-2 border-bottom-0 me-lg-4 me-xl-5" id="viewer01--component-view-id_79-accordion"><div class="accordion-item"><div class="d-flex justify-content-between align-items-center" id="viewer01--component-view-id_79-heading"><h2 id="viewer01--codeViewer" class="accordion-header "><button class="accordion-button border-top-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#viewer01--component-view-id_79-collapse" aria-expanded="false" aria-controls="viewer01--component-view-id_79-collapse">Codice Bootstrap Italia</button></h2><div class="d-flex justify-content-between align-items-center"><button type="button" class="btn shadow-none btn btn-xs btn-secondary p-2 me-2"><span><svg role="img" class="icon icon-sm icon-white align-middle" aria-label=" Copia il codice negli appunti"><use href="/svg/sprites.svg#it-copy"></use></svg></span></button><a href="https://italia.github.io/bootstrap-italia/docs/utilities/icone/" target="_blank" rel="noreferrer" aria-label="Apri la documentazione sul sito Boostrap Italia (si apre in una nuova finestra)" class="shadow-none btn btn-xs btn-primary p-2"><svg role="img" class="icon icon-sm icon-white align-middle" aria-label=" (Link esterno)"><use href="/svg/sprites.svg#it-info-circle"></use></svg></a></div></div><div id="viewer01--component-view-id_79-collapse" class="accordion-collapse collapse hide" data-bs-parent="#viewer01--component-view-id_79-accordion" role="region" aria-labelledby="viewer01--component-view-id_79-heading"><div class="accordion-body p-0 position-relative"><div aria-hidden="true" class="position-absolute end-0 split-code-checkbox"><div class="form-check me-4"><input id="viewer01--wrap" type="checkbox"/><label for="viewer01--wrap">Mostra codice a capo</label></div></div></div></div><div class="notification with-icon right-fix success dismissable fade" role="alert" aria-labelledby="viewer01--not1d-title" id="viewer01--copyToast"><span id="viewer01--not1d-title" class="h5 "><svg role="img" class="icon"><use href="/svg/sprites.svg#it-check-circle"></use></svg>Codice copiato negli appunti</span></div></div></div></div><div class="text-image-cta d-flex mb-5"><div class="content w-100"><h2 class="/*mb-3*/">I token per le icone</h2><p>I design token delle icone appartengono al livello degli &quot;specifici&quot;.</p><div class="ctas mt-3 mb-4 d-lg-flex flex-wrap"><a class="simple-cta py-1 mb-3" href="/design-system/fondamenti/design-tokens/"><span class="text">Vai al fondamento Design tokens</span><span class="visually-hidden"></span><svg role="img" class="icon icon-sm align-middle icon-primary ms-2" aria-hidden="true"><use href="/svg/sprites.svg#it-arrow-right"></use></svg></a></div></div></div><div class="table-responsive"><table class="table y-4 mb-5"><thead><tr><th scope="col">Valore</th><th scope="col">Descrizione</th><th scope="col">Token</th></tr></thead><tbody><tr><td><p><img src="/images/design-system/fondamenti/color-gray-10.png" alt="Riquadro di anteprima del colore"/>
+<p>Puoi usare l&#x27;icona da sola se il simbolo è chiaro e non ambiguo. In questo caso, l&#x27;etichetta di testo deve comunque essere leggibile da un lettore di schermo (screen reader).</p></div></div><div class="text-image-cta d-flex mb-0"><div class="content w-100"><h2 class="/*mb-3*/">Le icone disponibili</h2><p>Le icone sono disponibili nella libreria <a href="https://italia.github.io/bootstrap-italia/docs/utilities/icone/#lista-delle-icone-disponibili">Bootstrap Italia</a> e in <a href="https://www.figma.com/@designersitalia">UI kit Italia</a> (Figma).</p></div></div><div id="viewer01--component-view-id_85" class="pb-4 mb-5"><div class="d-flex flex-column align-items-center me-lg-4 me-xl-5"><div class="w-100 d-flex align-items-end justify-content-end py-3"><div class="responsive-buttons d-none d-lg-block"><span class="me-4">Anteprima:</span><div class="btn-group" role="group" aria-label="Scegli la risoluzione per l&#x27;anteprima:"><button type="button" aria-label="Visualizzazione anteprima mobile 360px" class="btn btn-secondary btn-xs"><span>mobile</span></button><button type="button" aria-label="Visualizzazione anteprima tablet 768px" class="btn btn-secondary btn-xs"><span>tablet</span></button><button type="button" aria-label="Visualizzazione anteprima desktop" class="btn btn-secondary btn-xs"><span>full</span></button></div></div><div class="ms-2"><a href="/examples/bsi/utilities/icone/icone-disponibili.html" target="_blank" rel="noreferrer" class="btn btn-xs btn-primary p-2"><svg role="img" class="icon icon-sm icon-white align-middle" aria-label=" Apri l&#x27;anteprima in una nuova finestra"><use href="/svg/sprites.svg#it-external-link"></use></svg></a></div></div><span class="visually-hidden">Inizio anteprima:</span><iframe id="viewer01--iframe" src="/examples/bsi/utilities/icone/icone-disponibili.html" title="Variante: Icone disponibili" class="w-100 iframe-example rounded border shadow-sm  viewer-full"></iframe><span class="visually-hidden">Fine anteprima.</span></div><div class="accordion accordion-left-icon py-2 border-bottom-0 me-lg-4 me-xl-5" id="viewer01--component-view-id_85-accordion"><div class="accordion-item"><div class="d-flex justify-content-between align-items-center" id="viewer01--component-view-id_85-heading"><h2 id="viewer01--codeViewer" class="accordion-header "><button class="accordion-button border-top-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#viewer01--component-view-id_85-collapse" aria-expanded="false" aria-controls="viewer01--component-view-id_85-collapse">Codice Bootstrap Italia</button></h2><div class="d-flex justify-content-between align-items-center"><button type="button" class="btn shadow-none btn btn-xs btn-secondary p-2 me-2"><span><svg role="img" class="icon icon-sm icon-white align-middle" aria-label=" Copia il codice negli appunti"><use href="/svg/sprites.svg#it-copy"></use></svg></span></button><a href="https://italia.github.io/bootstrap-italia/docs/utilities/icone/" target="_blank" rel="noreferrer" aria-label="Apri la documentazione sul sito Boostrap Italia (si apre in una nuova finestra)" class="shadow-none btn btn-xs btn-primary p-2"><svg role="img" class="icon icon-sm icon-white align-middle" aria-label=" (Link esterno)"><use href="/svg/sprites.svg#it-info-circle"></use></svg></a></div></div><div id="viewer01--component-view-id_85-collapse" class="accordion-collapse collapse hide" data-bs-parent="#viewer01--component-view-id_85-accordion" role="region" aria-labelledby="viewer01--component-view-id_85-heading"><div class="accordion-body p-0 position-relative"><div aria-hidden="true" class="position-absolute end-0 split-code-checkbox"><div class="form-check me-4"><input id="viewer01--wrap" type="checkbox"/><label for="viewer01--wrap">Mostra codice a capo</label></div></div></div></div><div class="notification with-icon right-fix success dismissable fade" role="alert" aria-labelledby="viewer01--not1d-title" id="viewer01--copyToast"><span id="viewer01--not1d-title" class="h5 "><svg role="img" class="icon"><use href="/svg/sprites.svg#it-check-circle"></use></svg>Codice copiato negli appunti</span></div></div></div></div><div class="text-image-cta d-flex mb-5"><div class="content w-100"><h2 class="/*mb-3*/">I token per le icone</h2><p>I design token delle icone appartengono al livello degli &quot;specifici&quot;.</p><div class="ctas mt-3 mb-4 d-lg-flex flex-wrap"><a class="simple-cta py-1 mb-3" href="/design-system/fondamenti/design-tokens/"><span class="text">Vai al fondamento Design tokens</span><span class="visually-hidden"></span><svg role="img" class="icon icon-sm align-middle icon-primary ms-2" aria-hidden="true"><use href="/svg/sprites.svg#it-arrow-right"></use></svg></a></div></div></div><div class="table-responsive"><table class="table y-4 mb-5"><thead><tr><th scope="col">Valore</th><th scope="col">Descrizione</th><th scope="col">Token</th></tr></thead><tbody><tr><td><p><img src="/images/design-system/fondamenti/color-gray-10.png" alt="Riquadro di anteprima del colore"/>
 #1a1a1a</p></td><td><p>Icona nel colore di base</p></td><td><span class="tag neutral-1-bg-a1 text-black fw-semibold font-monospace text-lowercase">icon.default</span></td></tr><tr><td><p><img src="/images/design-system/fondamenti/color-blue-7.png" alt="Riquadro di anteprima del colore"/>
 #0066cc</p></td><td><p>Icona primaria</p></td><td><span class="tag neutral-1-bg-a1 text-black fw-semibold font-monospace text-lowercase">icon.primary</span></td></tr><tr><td><p><img src="/images/design-system/fondamenti/color-blue-8.png" alt="Riquadro di anteprima del colore"/>
 #004d99</p></td><td><p>Icona primario nello stato hover</p></td><td><span class="tag neutral-1-bg-a1 text-black fw-semibold font-monospace text-lowercase">icon.primary.hover</span></td></tr><tr><td><p><img src="/images/design-system/fondamenti/color-blue-9.png" alt="dimensione bordo spesso"/>