Regione Toscana Design System Design System Servizi

Aggiornamenti: Grid 2 

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

                            <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--news rtds-card--news-small rtds-card--horizontal  rtds-card--horizontal-left  is-card-fullclickable rtds-group/card">

                    <picture class="rtds-card__image-wrapper
  ">
                        <img class="rtds-card__image" alt="" src="../../images/card-image.jpg" />
                    </picture>

                    <div class="rtds-card__content">

                        <div class="rtds-card__heading">

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

                                    Vaccinarsi contro Covid-19

                                </a>
                            </h3>

                            <div class="rtds-card__metadata">

                                <div class="rtds-card__date">
                                    <time datetime="2025-05-30">30 MAG 2025</time>
                                </div>

                            </div>

                        </div>

                        <div class="rtds-card__categories">
                            <a href="#" class="rtds-category rtds-category--sm">
                                Salute
                            </a>
                        </div>

                    </div>

                </article>

            </div>
            <div class="rtds-col">
                <article class="rtds-card rtds-card--news rtds-card--news-small rtds-card--news-no-thumb 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="">

                                    Vaccinarsi contro Covid-19

                                </a>
                            </h3>

                            <div class="rtds-card__metadata">

                                <div class="rtds-card__date">
                                    <time datetime="2025-05-30">30 MAG 2025</time>
                                </div>

                            </div>

                        </div>

                        <div class="rtds-card__categories">
                            <a href="#" class="rtds-category rtds-category--sm">
                                Salute
                            </a>
                        </div>

                    </div>

                </article>

            </div>

            <!-- Grid item wrapper -->
            <div class="rtds-col">
                <article class="rtds-card rtds-card--news rtds-card--news-small rtds-card--horizontal  rtds-card--horizontal-left  is-card-fullclickable rtds-group/card">

                    <picture class="rtds-card__image-wrapper
  ">
                        <img class="rtds-card__image" alt="" src="../../images/card-image.jpg" />
                    </picture>

                    <div class="rtds-card__content">

                        <div class="rtds-card__heading">

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

                                    Vaccinarsi contro Covid-19

                                </a>
                            </h3>

                            <div class="rtds-card__metadata">

                                <div class="rtds-card__date">
                                    <time datetime="2025-05-30">30 MAG 2025</time>
                                </div>

                            </div>

                        </div>

                        <div class="rtds-card__categories">
                            <a href="#" class="rtds-category rtds-category--sm">
                                Salute
                            </a>
                        </div>

                    </div>

                </article>

            </div>
            <div class="rtds-col">
                <article class="rtds-card rtds-card--news rtds-card--news-small rtds-card--news-no-thumb 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="">

                                    Vaccinarsi contro Covid-19

                                </a>
                            </h3>

                            <div class="rtds-card__metadata">

                                <div class="rtds-card__date">
                                    <time datetime="2025-05-30">30 MAG 2025</time>
                                </div>

                            </div>

                        </div>

                        <div class="rtds-card__categories">
                            <a href="#" class="rtds-category rtds-category--sm">
                                Salute
                            </a>
                        </div>

                    </div>

                </article>

            </div>

        </div>
    </div>

</section>
 
<section class="rtds-section rtds-section--aggiornamenti rtds-py-8 md:rtds-py-12{% if backgroundClass %} {{ backgroundClass }}{% endif %} ">
    <div class="rtds-container rtds-space-y-4">
        {% render '@section-header', { 
            verticalDividerRight: 'true',
            heading: 'Aggiornamenti',
            sectionHeaderCta: 'Vedi tutti gli aggiornamenti',
            classes: 'rtds-section-header--aggiornamenti'
            }, true %}

            <div class="rtds-grid rtds-gap-4 md:rtds-gap-5{% if gridClass %} {{ gridClass }}{% endif %}">
                {% for i in range(0,items) %}
                    <!-- Grid item wrapper -->
                    <div class="rtds-col">
                        {% render '@card--news-small',{ categoryText:"Salute", excerpt: 'is-empty', heading:"Vaccinarsi contro Covid-19"},true %}
                    </div>
                    <div class="rtds-col">
                        {% render '@card--news-small-no-thumb',{ categoryText:"Salute", excerpt: 'is-empty', heading:"Vaccinarsi contro Covid-19"},true %}
                    </div>
                {% endfor %}
            </div>
    </div>

</section>
 
{
  "items": 2,
  "gridClass": "md:rtds-grid-cols-2"
}

Sezione Aggiornamenti

Sezione per aggiornamenti e notizie recenti, con layout a due livelli: card principali più grandi e card secondarie più piccole.

Comportamento

<section> con intestazione @section-header e due liste:

  • Lista principale: card @card--news-thumb-left (griglia 2 colonne da lg)
  • Lista secondaria: card @card--news-small (griglia configurabile)

Varianti

  • default: Griglia secondaria a 3 colonne da md/xl
  • grid-2: Griglia secondaria a 2 colonne da md
  • grid-3: Griglia secondaria a 3 colonne con sfondo background-03

Dipendenze

  • @section-header — intestazione con CTA “Redazione web” e testo ausiliario
  • @card--news-thumb-left — card notizia con thumbnail sinistra
  • @card--news-small — card notizia compatta

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML da usare nei temi o ambienti di implementazione.

  • items (numero, opzionale): Numero di card principali. Default: 2
  • gridClass (stringa, opzionale): Classi griglia per la lista secondaria. Default: md:rtds-grid-cols-2 lg:rtds-grid-cols-3
  • backgroundClass (stringa, opzionale): Classe sfondo per la variante grid-3

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — la sezione è un <section> con intestazione @section-header; le liste di card sono <div> con struttura griglia
  • 2.4.6 Intestazioni ed etichette — l’intestazione “Aggiornamenti” identifica la sezione per gli screen reader

Stili CSS

  • .rtds-section--aggiornamenti: Modificatore della sezione
  • .rtds-aggiornamenti-list--main: Lista card principali
  • .rtds-aggiornamenti-list--secondary: Lista card secondarie

Esempi di utilizzo


<section class="rtds-section rtds-section--aggiornamenti rtds-py-8 md:rtds-py-12">
    <div class="rtds-container rtds-space-y-4">
        <div class="rtds-section-header rtds-section-header--aggiornamenti">
    <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">Aggiornamenti</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">
                    
                        <strong>A cura della </strong>
                    
                    <a href="" class="rtds-action-link
      rtds-action-link--sm
">
            Redazione web
        
         
            <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-space-y-5">
            
            <div class="rtds-aggiornamenti-list rtds-aggiornamenti-list--main rtds-grid rtds-gap-4 lg:rtds-gap-5 lg:rtds-grid-cols-2">
                
                    <article
  class="rtds-card rtds-card--news rtds-card--news-left rtds-card--horizontal  rtds-card--horizontal-left  is-card-fullclickable rtds-group/card"
>

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image"
      alt=""
      src="../../images/image-test.jpg"
    />
  </picture>
  

  
  <div class="rtds-card__content">
    
    
    

    <div class="rtds-card__heading">

      
      

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

      
      
          <div class="rtds-card__metadata">
              
              
              <div class="rtds-card__date">
                <time datetime="2025-05-30">30 MAG 2025</time>
              </div>
              
              
            </div>
          
        

      
      
    </div>

    
      
      <div class="rtds-card__description ">
        <p>
           La vaccinazione anti Covid-19 ha l’obiettivo di prevenire la mortalità, le ospedalizzazioni e le forme gravi della malattia
        </p>
      </div>
      
     

    
    

    
    
      <div class="rtds-card__categories">
        <span class="rtds-category ">
    Salute
</span>
      </div>
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                
                    <article
  class="rtds-card rtds-card--news rtds-card--news-left rtds-card--horizontal  rtds-card--horizontal-left  is-card-fullclickable rtds-group/card"
>

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image"
      alt=""
      src="../../images/image-test.jpg"
    />
  </picture>
  

  
  <div class="rtds-card__content">
    
    
    

    <div class="rtds-card__heading">

      
      

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

      
      
          <div class="rtds-card__metadata">
              
              
              <div class="rtds-card__date">
                <time datetime="2025-05-30">30 MAG 2025</time>
              </div>
              
              
            </div>
          
        

      
      
    </div>

    
      
      <div class="rtds-card__description ">
        <p>
           La vaccinazione anti Covid-19 ha l’obiettivo di prevenire la mortalità, le ospedalizzazioni e le forme gravi della malattia
        </p>
      </div>
      
     

    
    

    
    
      <div class="rtds-card__categories">
        <span class="rtds-category ">
    Salute
</span>
      </div>
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                
            </div>

            
            <div class="rtds-aggiornamenti-list rtds-aggiornamenti-list--secondary rtds-grid rtds-gap-4 md:rtds-grid-cols-2 lg:rtds-grid-cols-3">
                
                    <!-- Grid item wrapper -->
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--news rtds-card--news-small rtds-card--horizontal  rtds-card--horizontal-left  is-card-fullclickable rtds-group/card"
>

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image"
      alt=""
      src="../../images/card-image.jpg"
    />
  </picture>
  

  
  <div class="rtds-card__content">
    
    
    

    <div class="rtds-card__heading">

      
      

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

      
      
          <div class="rtds-card__metadata">
              
              
              <div class="rtds-card__date">
                <time datetime="2025-05-30">30 MAG 2025</time>
              </div>
              
              
            </div>
          
        

      
      
    </div>

    
      
      <div class="rtds-card__description ">
        <p>
           La vaccinazione anti Covid-19 ha l’obiettivo di prevenire la mortalità, le ospedalizzazioni e le forme gravi della malattia
        </p>
      </div>
      
     

    
    

    
    
      <div class="rtds-card__categories">
        <a href="#" class="rtds-category rtds-category--sm">
    Salute
</a>
      </div>
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
                    <!-- Grid item wrapper -->
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--news rtds-card--news-small rtds-card--horizontal  rtds-card--horizontal-left  is-card-fullclickable rtds-group/card"
>

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image"
      alt=""
      src="../../images/card-image.jpg"
    />
  </picture>
  

  
  <div class="rtds-card__content">
    
    
    

    <div class="rtds-card__heading">

      
      

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

      
      
          <div class="rtds-card__metadata">
              
              
              <div class="rtds-card__date">
                <time datetime="2025-05-30">30 MAG 2025</time>
              </div>
              
              
            </div>
          
        

      
      
    </div>

    
      
      <div class="rtds-card__description ">
        <p>
           La vaccinazione anti Covid-19 ha l’obiettivo di prevenire la mortalità, le ospedalizzazioni e le forme gravi della malattia
        </p>
      </div>
      
     

    
    

    
    
      <div class="rtds-card__categories">
        <a href="#" class="rtds-category rtds-category--sm">
    Salute
</a>
      </div>
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
                    <!-- Grid item wrapper -->
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--news rtds-card--news-small rtds-card--horizontal  rtds-card--horizontal-left  is-card-fullclickable rtds-group/card"
>

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image"
      alt=""
      src="../../images/card-image.jpg"
    />
  </picture>
  

  
  <div class="rtds-card__content">
    
    
    

    <div class="rtds-card__heading">

      
      

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

      
      
          <div class="rtds-card__metadata">
              
              
              <div class="rtds-card__date">
                <time datetime="2025-05-30">30 MAG 2025</time>
              </div>
              
              
            </div>
          
        

      
      
    </div>

    
      
      <div class="rtds-card__description ">
        <p>
           La vaccinazione anti Covid-19 ha l’obiettivo di prevenire la mortalità, le ospedalizzazioni e le forme gravi della malattia
        </p>
      </div>
      
     

    
    

    
    
      <div class="rtds-card__categories">
        <a href="#" class="rtds-category rtds-category--sm">
    Salute
</a>
      </div>
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
            </div>


        </div>
    </div>

</section>


<section class="rtds-section rtds-section--aggiornamenti rtds-py-8 md:rtds-py-12 ">
    <div class="rtds-container rtds-space-y-4">
        <div class="rtds-section-header rtds-section-header--aggiornamenti">
    <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">Aggiornamenti</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 gli aggiornamenti
        
         
            <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--news rtds-card--news-small rtds-card--horizontal  rtds-card--horizontal-left  is-card-fullclickable rtds-group/card"
>

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image"
      alt=""
      src="../../images/card-image.jpg"
    />
  </picture>
  

  
  <div class="rtds-card__content">
    
    
    

    <div class="rtds-card__heading">

      
      

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

      
      
          <div class="rtds-card__metadata">
              
              
              <div class="rtds-card__date">
                <time datetime="2025-05-30">30 MAG 2025</time>
              </div>
              
              
            </div>
          
        

      
      
    </div>

    
      
     

    
    

    
    
      <div class="rtds-card__categories">
        <a href="#" class="rtds-category rtds-category--sm">
    Salute
</a>
      </div>
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--news rtds-card--news-small rtds-card--news-no-thumb 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="">
            
            
            Vaccinarsi contro Covid-19
            
              
            
            
              
            
            
          </a>
        </h3>
      

      
      
          <div class="rtds-card__metadata">
              
              
              <div class="rtds-card__date">
                <time datetime="2025-05-30">30 MAG 2025</time>
              </div>
              
              
            </div>
          
        

      
      
    </div>

    
      
     

    
    

    
    
      <div class="rtds-card__categories">
        <a href="#" class="rtds-category rtds-category--sm">
    Salute
</a>
      </div>
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
                    <!-- Grid item wrapper -->
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--news rtds-card--news-small rtds-card--horizontal  rtds-card--horizontal-left  is-card-fullclickable rtds-group/card"
>

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image"
      alt=""
      src="../../images/card-image.jpg"
    />
  </picture>
  

  
  <div class="rtds-card__content">
    
    
    

    <div class="rtds-card__heading">

      
      

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

      
      
          <div class="rtds-card__metadata">
              
              
              <div class="rtds-card__date">
                <time datetime="2025-05-30">30 MAG 2025</time>
              </div>
              
              
            </div>
          
        

      
      
    </div>

    
      
     

    
    

    
    
      <div class="rtds-card__categories">
        <a href="#" class="rtds-category rtds-category--sm">
    Salute
</a>
      </div>
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--news rtds-card--news-small rtds-card--news-no-thumb 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="">
            
            
            Vaccinarsi contro Covid-19
            
              
            
            
              
            
            
          </a>
        </h3>
      

      
      
          <div class="rtds-card__metadata">
              
              
              <div class="rtds-card__date">
                <time datetime="2025-05-30">30 MAG 2025</time>
              </div>
              
              
            </div>
          
        

      
      
    </div>

    
      
     

    
    

    
    
      <div class="rtds-card__categories">
        <a href="#" class="rtds-category rtds-category--sm">
    Salute
</a>
      </div>
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
            </div>
    </div>

</section>


<section class="rtds-section rtds-section--aggiornamenti rtds-py-8 md:rtds-py-12 rtds-background-03 ">
    <div class="rtds-container rtds-space-y-4">
        <div class="rtds-section-header rtds-section-header--aggiornamenti">
    <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">Aggiornamenti</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 gli aggiornamenti
        
         
            <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 xl:rtds-grid-cols-3">
                
                    <!-- Grid item wrapper -->
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--news rtds-card--news-small rtds-card--horizontal  rtds-card--horizontal-left  is-card-fullclickable rtds-group/card"
>

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image"
      alt=""
      src="../../images/card-image.jpg"
    />
  </picture>
  

  
  <div class="rtds-card__content">
    
    
    

    <div class="rtds-card__heading">

      
      

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

      
      
          <div class="rtds-card__metadata">
              
              
              <div class="rtds-card__date">
                <time datetime="2025-05-30">30 MAG 2025</time>
              </div>
              
              
            </div>
          
        

      
      
    </div>

    
      
     

    
    

    
    
      <div class="rtds-card__categories">
        <a href="#" class="rtds-category rtds-category--sm">
    Salute
</a>
      </div>
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--news rtds-card--news-small rtds-card--news-no-thumb 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="">
            
            
            Vaccinarsi contro Covid-19
            
              
            
            
              
            
            
          </a>
        </h3>
      

      
      
          <div class="rtds-card__metadata">
              
              
              <div class="rtds-card__date">
                <time datetime="2025-05-30">30 MAG 2025</time>
              </div>
              
              
            </div>
          
        

      
      
    </div>

    
      
     

    
    

    
    
      <div class="rtds-card__categories">
        <a href="#" class="rtds-category rtds-category--sm">
    Salute
</a>
      </div>
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
                    <!-- Grid item wrapper -->
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--news rtds-card--news-small rtds-card--horizontal  rtds-card--horizontal-left  is-card-fullclickable rtds-group/card"
>

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image"
      alt=""
      src="../../images/card-image.jpg"
    />
  </picture>
  

  
  <div class="rtds-card__content">
    
    
    

    <div class="rtds-card__heading">

      
      

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

      
      
          <div class="rtds-card__metadata">
              
              
              <div class="rtds-card__date">
                <time datetime="2025-05-30">30 MAG 2025</time>
              </div>
              
              
            </div>
          
        

      
      
    </div>

    
      
     

    
    

    
    
      <div class="rtds-card__categories">
        <a href="#" class="rtds-category rtds-category--sm">
    Salute
</a>
      </div>
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--news rtds-card--news-small rtds-card--news-no-thumb 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="">
            
            
            Vaccinarsi contro Covid-19
            
              
            
            
              
            
            
          </a>
        </h3>
      

      
      
          <div class="rtds-card__metadata">
              
              
              <div class="rtds-card__date">
                <time datetime="2025-05-30">30 MAG 2025</time>
              </div>
              
              
            </div>
          
        

      
      
    </div>

    
      
     

    
    

    
    
      <div class="rtds-card__categories">
        <a href="#" class="rtds-category rtds-category--sm">
    Salute
</a>
      </div>
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
                    <!-- Grid item wrapper -->
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--news rtds-card--news-small rtds-card--horizontal  rtds-card--horizontal-left  is-card-fullclickable rtds-group/card"
>

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image"
      alt=""
      src="../../images/card-image.jpg"
    />
  </picture>
  

  
  <div class="rtds-card__content">
    
    
    

    <div class="rtds-card__heading">

      
      

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

      
      
          <div class="rtds-card__metadata">
              
              
              <div class="rtds-card__date">
                <time datetime="2025-05-30">30 MAG 2025</time>
              </div>
              
              
            </div>
          
        

      
      
    </div>

    
      
     

    
    

    
    
      <div class="rtds-card__categories">
        <a href="#" class="rtds-category rtds-category--sm">
    Salute
</a>
      </div>
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--news rtds-card--news-small rtds-card--news-no-thumb 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="">
            
            
            Vaccinarsi contro Covid-19
            
              
            
            
              
            
            
          </a>
        </h3>
      

      
      
          <div class="rtds-card__metadata">
              
              
              <div class="rtds-card__date">
                <time datetime="2025-05-30">30 MAG 2025</time>
              </div>
              
              
            </div>
          
        

      
      
    </div>

    
      
     

    
    

    
    
      <div class="rtds-card__categories">
        <a href="#" class="rtds-category rtds-category--sm">
    Salute
</a>
      </div>
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
            </div>
    </div>

</section>