Regione Toscana Design System Design System Servizi

Bandi 

<section class="rtds-section rtds-section--bandi rtds-py-8 md:rtds-py-12">
    <div class="rtds-container rtds-space-y-4">
        <div class="rtds-section-header rtds-section-header--bandi">
            <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">

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

                    <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>

                    <span class="rtds-text-sm rtds-leading-none">

                        <a href="" class="rtds-action-link
      rtds-action-link--sm
">
                            Vedi tutti i bandi

                            <svg class="rtds-icon rtds-fill-current" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#mini--arrow-small-right" />
                            </svg>

                        </a>
                    </span>

                </div>

            </div>
        </div>

        <div class="rtds-grid rtds-gap-4 md:rtds-gap-5 md:rtds-grid-cols-2">

            <!-- Grid item wrapper -->
            <div class="rtds-col">
                <article class="rtds-card rtds-card--information rtds-card--information-02 is-card-fullclickable rtds-group/card">

                    <div class="rtds-card__content">

                        <div class="rtds-card__heading">

                            <h3 class="rtds-card__title">
                                <a class="group-hover/card:rtds-underline" href="">

                                    Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                </a>
                            </h3>

                        </div>

                        <div class="rtds-card__description">
                            <p>
                                Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                            </p>

                            <div class="rtds-card__publication-details">
                                <p>
                                    Pubblicato il 10/04/2024
                                </p>
                                <p>
                                    Pubblicato su BURT il 10/04/2024
                                </p>
                            </div>
                        </div>

                        <div class="rtds-space-y-2 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">

                            <ul class="rtds-card__tags" aria-label="Categorie">
                                <li><span class="rtds-chip rtds-chip--category">
                                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-mr-1.5" aria-hidden="true" focusable="false" role="img">
                                            <use href="../../icons.svg#mini--computer-desktop" />
                                        </svg>

                                        <span class="rtds-sr-only">Categoria: </span>

                                        categoria</span></li>
                                <li><span class="rtds-chip rtds-chip--status is-open">
                                        <span class="rtds-sr-only">Stato: </span>

                                        Aperto</span></li>
                            </ul>

                        </div>

                    </div>

                </article>

            </div>

            <!-- Grid item wrapper -->
            <div class="rtds-col">
                <article class="rtds-card rtds-card--information rtds-card--information-02 is-card-fullclickable rtds-group/card">

                    <div class="rtds-card__content">

                        <div class="rtds-card__heading">

                            <h3 class="rtds-card__title">
                                <a class="group-hover/card:rtds-underline" href="">

                                    Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                </a>
                            </h3>

                        </div>

                        <div class="rtds-card__description">
                            <p>
                                Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                            </p>

                            <div class="rtds-card__publication-details">
                                <p>
                                    Pubblicato il 10/04/2024
                                </p>
                                <p>
                                    Pubblicato su BURT il 10/04/2024
                                </p>
                            </div>
                        </div>

                        <div class="rtds-space-y-2 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">

                            <ul class="rtds-card__tags" aria-label="Categorie">
                                <li><span class="rtds-chip rtds-chip--category">
                                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-mr-1.5" aria-hidden="true" focusable="false" role="img">
                                            <use href="../../icons.svg#mini--computer-desktop" />
                                        </svg>

                                        <span class="rtds-sr-only">Categoria: </span>

                                        categoria</span></li>
                                <li><span class="rtds-chip rtds-chip--status is-open">
                                        <span class="rtds-sr-only">Stato: </span>

                                        Aperto</span></li>
                            </ul>

                        </div>

                    </div>

                </article>

            </div>

        </div>
    </div>

</section>
 
<section class="rtds-section rtds-section--bandi rtds-py-8 md:rtds-py-12">
    <div class="rtds-container rtds-space-y-4">
        {% render '@section-header', { 
            verticalDividerRight: 'true',
            heading: 'Bandi',
            sectionHeaderCta: 'Vedi tutti i bandi',
            classes: 'rtds-section-header--bandi'
            }, true %}

            <div class="rtds-grid rtds-gap-4 md:rtds-gap-5 md:rtds-grid-cols-2">
                {% for i in range(0,2) %}
                    <!-- Grid item wrapper -->
                    <div class="rtds-col">
                        {% render '@card--information-02',{ scadenza: '' },true %}
                    </div>

                {% endfor %}
            </div>
    </div>

</section>
 
/* No context defined. */

Sezione Bandi

Sezione per la visualizzazione di un elenco di bandi attivi, con intestazione e griglia di card bando.

Comportamento

<section> con intestazione @section-header e griglia a 2 colonne (da md) di card @card--information-02.

Dipendenze

  • @section-header — intestazione sezione con CTA “Vedi tutti i bandi”
  • @card--information-02 — card bando con data di scadenza

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — la sezione è un <section> con intestazione @section-header; la struttura semantica è preservata
  • 2.4.6 Intestazioni ed etichette — l’intestazione “Bandi” identifica la sezione per gli screen reader

Stili CSS

  • .rtds-section--bandi: Modificatore della sezione
  • Padding verticale: py-8 (mobile), py-12 da md
  • Griglia: grid-cols-1 (mobile), grid-cols-2 da md, gap 4/5

Esempi di utilizzo

<section class="rtds-section rtds-section--bandi rtds-py-8 md:rtds-py-12">
    <div class="rtds-container rtds-space-y-4">
        <div class="rtds-section-header rtds-section-header--bandi">
    <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">
            
            <h2 class="rtds-heading-3 md:rtds-heading-2">Bandi</h2>
            
                <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>

            
            
            
                <span class="rtds-text-sm rtds-leading-none">
                    
                    <a href="" class="rtds-action-link
      rtds-action-link--sm
">
            Vedi tutti i bandi
        
         
            <svg
  class="rtds-icon rtds-fill-current"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--arrow-small-right" />
</svg>

        
        </a>
                </span>
            
        </div>

        
            
        
    </div>
</div>

            <div class="rtds-grid rtds-gap-4 md:rtds-gap-5 md:rtds-grid-cols-2">
                
                    <!-- Grid item wrapper -->
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--information rtds-card--information-02 is-card-fullclickable rtds-group/card"
>

  

  
  <div class="rtds-card__content">
    
    
    

    <div class="rtds-card__heading">

      
      

      
        <h3 class="rtds-card__title">
          <a class="group-hover/card:rtds-underline" href="">
            
            
            Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
            
              
            
            
              
            
            
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
    
    <div class="rtds-card__description">
        <p>
            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
        </p>

        <div class="rtds-card__publication-details">
            <p>
                Pubblicato il 10/04/2024
            </p>
            <p>
                Pubblicato su BURT il 10/04/2024
            </p>
        </div>
    </div>
    
 

    
    

    
    
    

    
      
    
   
    
      
    
   
    
    <div class="rtds-space-y-2 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">
        
        <ul class="rtds-card__tags" aria-label="Categorie">
            <li><span class="rtds-chip rtds-chip--category">
        <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-mr-1.5"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--computer-desktop" />
</svg>

    
            <span class="rtds-sr-only">Categoria: </span>
        
        categoria</span></li>
            <li><span class="rtds-chip rtds-chip--status is-open">
            <span class="rtds-sr-only">Stato: </span>
        
        Aperto</span></li>
        </ul>
        

    
    </div>


    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>

                
                    <!-- Grid item wrapper -->
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--information rtds-card--information-02 is-card-fullclickable rtds-group/card"
>

  

  
  <div class="rtds-card__content">
    
    
    

    <div class="rtds-card__heading">

      
      

      
        <h3 class="rtds-card__title">
          <a class="group-hover/card:rtds-underline" href="">
            
            
            Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
            
              
            
            
              
            
            
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
    
    <div class="rtds-card__description">
        <p>
            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
        </p>

        <div class="rtds-card__publication-details">
            <p>
                Pubblicato il 10/04/2024
            </p>
            <p>
                Pubblicato su BURT il 10/04/2024
            </p>
        </div>
    </div>
    
 

    
    

    
    
    

    
      
    
   
    
      
    
   
    
    <div class="rtds-space-y-2 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">
        
        <ul class="rtds-card__tags" aria-label="Categorie">
            <li><span class="rtds-chip rtds-chip--category">
        <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-mr-1.5"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--computer-desktop" />
</svg>

    
            <span class="rtds-sr-only">Categoria: </span>
        
        categoria</span></li>
            <li><span class="rtds-chip rtds-chip--status is-open">
            <span class="rtds-sr-only">Stato: </span>
        
        Aperto</span></li>
        </ul>
        

    
    </div>


    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>

                
            </div>
    </div>

</section>