Regione Toscana Design System

Audio Gallery 

<section class="rtds-audio-gallery">
    <div class="rtds-container rtds-space-y-4 md:rtds-space-y-6">
        <div>
            <div class="rtds-section-header">
                <div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
                    <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">

                        <div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 lg:rtds-w-8">
                            <img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
                        </div>

                        <h2 class="rtds-heading-3 md:rtds-heading-2">Allegati audio</h2>

                    </div>

                </div>
            </div>
        </div>
        <ul class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3 rtds-gap-4">

            <li>
                <div class="rtds-audio">
                    <figure class="rtds-space-y-4">
                        <figcaption class="rtds-heading-4">Titolo file audio</figcaption>
                        <audio controls>
                            <source src="/media/audio-sample.mp3" type="audio/mpeg">
                            <p>Il tuo browser non supporta questo tipo di oggetto html</p>
                        </audio>

                        <a href="#" class="rtds-action-link
     rtds-action-link--has-icon rtds-group/cta rtds-action-link--sm
">
                            <span class="rtds-sr-only">Titolo file audio - </span>Trascrizione

                            <svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/cta:rtds-scale-110" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#outline--document-text" />
                            </svg>

                        </a>

                    </figure>
                </div>
            </li>

            <li>
                <div class="rtds-audio">
                    <figure class="rtds-space-y-4">
                        <figcaption class="rtds-heading-4">Titolo file audio</figcaption>
                        <audio controls>
                            <source src="/media/audio-sample.mp3" type="audio/mpeg">
                            <p>Il tuo browser non supporta questo tipo di oggetto html</p>
                        </audio>

                        <a href="#" class="rtds-action-link
     rtds-action-link--has-icon rtds-group/cta rtds-action-link--sm
">
                            <span class="rtds-sr-only">Titolo file audio - </span>Trascrizione

                            <svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/cta:rtds-scale-110" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#outline--document-text" />
                            </svg>

                        </a>

                    </figure>
                </div>
            </li>

            <li>
                <div class="rtds-audio">
                    <figure class="rtds-space-y-4">
                        <figcaption class="rtds-heading-4">Titolo file audio</figcaption>
                        <audio controls>
                            <source src="/media/audio-sample.mp3" type="audio/mpeg">
                            <p>Il tuo browser non supporta questo tipo di oggetto html</p>
                        </audio>

                        <a href="#" class="rtds-action-link
     rtds-action-link--has-icon rtds-group/cta rtds-action-link--sm
">
                            <span class="rtds-sr-only">Titolo file audio - </span>Trascrizione

                            <svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/cta:rtds-scale-110" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#outline--document-text" />
                            </svg>

                        </a>

                    </figure>
                </div>
            </li>

            <li>
                <div class="rtds-audio">
                    <figure class="rtds-space-y-4">
                        <figcaption class="rtds-heading-4">Titolo file audio</figcaption>
                        <audio controls>
                            <source src="/media/audio-sample.mp3" type="audio/mpeg">
                            <p>Il tuo browser non supporta questo tipo di oggetto html</p>
                        </audio>

                        <a href="#" class="rtds-action-link
     rtds-action-link--has-icon rtds-group/cta rtds-action-link--sm
">
                            <span class="rtds-sr-only">Titolo file audio - </span>Trascrizione

                            <svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/cta:rtds-scale-110" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#outline--document-text" />
                            </svg>

                        </a>

                    </figure>
                </div>
            </li>

        </ul>
    </div>
</section>
 
<section class="rtds-audio-gallery">
    <div class="rtds-container rtds-space-y-4 md:rtds-space-y-6">
        <div>
            {% render '@section-header--divider-left' , {heading: 'Allegati audio'}, true %}
        </div>
        <ul class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3 rtds-gap-4">
            {% for i in range(0, 4) %}
                <li>
                    {% render '@audio' %}
                </li>
            {% endfor %}
        </ul>
    </div>
</section>
 
/* No context defined. */

Audio Gallery

Descrizione

Il componente Audio Gallery è un organismo che permette di visualizzare una griglia di elementi audio. È progettato per mostrare allegati audio in un layout responsive che si adatta a diverse dimensioni dello schermo.

Struttura

  • Un contenitore principale con classe rtds-audio-gallery
  • Un header con titolo “Allegati audio” utilizzando il componente section-header--divider-left
  • Una griglia di elementi audio che si adatta a diverse dimensioni dello schermo:
    • 1 colonna su mobile
    • 2 colonne su tablet (md)
    • 3 colonne su desktop (lg)

Sviluppo in njk

Personalizzazione

Il componente è configurato per mostrare 4 elementi audio di default. Per modificare il numero di elementi, è necessario aggiornare il range nel ciclo for:

for i in range(0, X)

Dove X è il numero desiderato di elementi.

Responsive

  • Mobile: 1 colonna
  • Tablet (md): 2 colonne
  • Desktop (lg): 3 colonne