Regione Toscana Design System — Servizi Design System Core

Approfondimenti: Cta 

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

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

                <span class="rtds-section-header__right-content md:rtds-ml-auto">

                    <a href="#" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--inverted rtds-btn--s rtds-hidden lg:rtds-inline-flex">

                        <span class="rtds-sr-only">Approfondimenti: </span>visualizza l'archivio

                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#mini--chevron-right" />
                        </svg>

                    </a>

                </span>

            </div>
        </div>

        <div class="rtds-space-y-5">

            <div class="rtds-approfondimenti-list 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-image-fullwidth is-card-fullclickable rtds-group/card">

                        <picture class="rtds-card__image-wrapper
  ">
                            <img class="rtds-card__image rtds-h-full" 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

                                        <span class="rtds-sr-only">: leggi di più</span>
                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-mt-auto rtds-pt-4">

                                <span class="rtds-action-link
     rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
                                    Scopri l'approfondimento

                                    <svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                                        <use href="../../icons.svg#mini--chevron-right" />
                                    </svg>

                                </span>

                            </div>

                        </div>

                    </article>

                </div>

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

                        <picture class="rtds-card__image-wrapper
  ">
                            <img class="rtds-card__image rtds-h-full" 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

                                        <span class="rtds-sr-only">: leggi di più</span>
                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-mt-auto rtds-pt-4">

                                <span class="rtds-action-link
     rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
                                    Scopri l'approfondimento

                                    <svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                                        <use href="../../icons.svg#mini--chevron-right" />
                                    </svg>

                                </span>

                            </div>

                        </div>

                    </article>

                </div>

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

                        <picture class="rtds-card__image-wrapper
  ">
                            <img class="rtds-card__image rtds-h-full" 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

                                        <span class="rtds-sr-only">: leggi di più</span>
                                    </a>
                                </h3>

                            </div>

                            <div class="rtds-mt-auto rtds-pt-4">

                                <span class="rtds-action-link
     rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
                                    Scopri l'approfondimento

                                    <svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                                        <use href="../../icons.svg#mini--chevron-right" />
                                    </svg>

                                </span>

                            </div>

                        </div>

                    </article>

                </div>

            </div>

            <!-- Cta meteo mobile -->
            <div class="rtds-flex rtds-justify-center rtds-py-8 lg:rtds-hidden">
                <a href="#" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--inverted rtds-btn--s">

                    <span class="rtds-sr-only">Approfondimenti: </span>visualizza l'archivio

                    <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#mini--chevron-right" />
                    </svg>

                </a>

            </div>

        </div>
    </div>

</section>
 
<section class="rtds-section rtds-section--approfondimenti rtds-py-8 md:rtds-py-12">
    <div class="rtds-container rtds-space-y-4">
        {% render '@section-header', { 
            verticalDividerRight: 'true',
            heading: 'Approfondimenti',
            sectionHeaderCta: 'Vedi tutti gli approfondimenti',
            classes: 'rtds-section-header--approfondimenti',
            sectionHeaderRightCta: [ { href: '#', label: '<span class="rtds-sr-only">Approfondimenti: </span>visualizza l\'archivio',
                variant: '--icon-right',
                classes: 'rtds-btn--inverted rtds-btn--s rtds-hidden lg:rtds-inline-flex' } ]
            }, true %}

        <div class="rtds-space-y-5">
            
            <div class="rtds-approfondimenti-list rtds-grid rtds-gap-4 md:rtds-grid-cols-2 lg:rtds-grid-cols-3">
                {% for i in range(0,items) %}
                    <!-- Grid item wrapper -->  
                    <div class="rtds-col">
                        {% render '@card--news-image-fullwidth',{category:"", date:"", categoryText:"Salute", heading:"Vaccinarsi contro Covid-19", excerpt:"is-empty", ctaLink:"true", ctaLinkLabel:"Scopri l'approfondimento" },true %}
                    </div>
                {% endfor %}
            </div>

        <!-- Cta meteo mobile -->
        <div class="rtds-flex rtds-justify-center rtds-py-8 lg:rtds-hidden">
            {% render '@button--icon-right-s',{ href: '#', classes: 'rtds-btn--inverted', label: '<span class="rtds-sr-only">Approfondimenti: </span>visualizza l\'archivio', hasIcon: 'true' }, true %}
        </div>

        </div>
    </div>

</section>
 
{
  "items": 3
}

Sezione Approfondimenti

Sezione per guide, approfondimenti e contenuti editoriali, con griglia di card approfondimento.

Comportamento

<section> con intestazione @section-header e griglia di card @card--approfondimento. La variante cta aggiunge una card notizia in primo piano e un pulsante CTA in fondo.

Varianti

  • default: Griglia 3 colonne (da md:2, da lg:3) di card approfondimento
  • tema: Variante per pagine tematiche
  • cta: Variante con card notizia fullwidth e CTA finale

Dipendenze

  • @section-header — intestazione sezione
  • @card--approfondimento — card contenuto editoriale
  • @card--news-fullwidth (variante cta) — card notizia principale

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. Default: 3

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 “Approfondimenti” identifica la sezione per gli screen reader

Stili CSS

  • .rtds-section--approfondimenti: Modificatore della sezione
  • .rtds-approfondimenti-list: Griglia card — grid-cols-1, md:grid-cols-2, lg:grid-cols-3

Esempi di utilizzo

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

            
            
            
        </div>

        
            
        
    </div>
</div>

        <div class="rtds-space-y-5">
            
            <div class="rtds-approfondimenti-list 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-image-fullwidth is-card-fullclickable rtds-group/card"
>

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image rtds-h-full"
      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
            
              
            
            
              
            
            <span class="rtds-sr-only">: leggi di più</span>
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
      <div class="rtds-mt-auto rtds-pt-4">
        
        <span class="rtds-action-link
     rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
            Scopri l'approfondimento
        
         
            <svg
  class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

        
        </span> 
        
      </div>
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

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

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image rtds-h-full"
      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
            
              
            
            
              
            
            <span class="rtds-sr-only">: leggi di più</span>
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
      <div class="rtds-mt-auto rtds-pt-4">
        
        <span class="rtds-action-link
     rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
            Scopri l'approfondimento
        
         
            <svg
  class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

        
        </span> 
        
      </div>
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

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

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image rtds-h-full"
      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
            
              
            
            
              
            
            <span class="rtds-sr-only">: leggi di più</span>
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
      <div class="rtds-mt-auto rtds-pt-4">
        
        <span class="rtds-action-link
     rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
            Scopri l'approfondimento
        
         
            <svg
  class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

        
        </span> 
        
      </div>
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
            </div>


        </div>
    </div>

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

            
            
            
        </div>

        
            
        
    </div>
</div>

        <div class="rtds-space-y-5">
            
            <div class="rtds-approfondimenti-list 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-image-fullwidth is-card-fullclickable rtds-group/card"
>

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image rtds-h-full"
      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
            
              
            
            
              
            
            <span class="rtds-sr-only">: leggi di più</span>
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
      <div class="rtds-mt-auto rtds-pt-4">
        
        <span class="rtds-action-link
     rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
            Scopri l'approfondimento
        
         
            <svg
  class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

        
        </span> 
        
      </div>
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

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

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image rtds-h-full"
      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
            
              
            
            
              
            
            <span class="rtds-sr-only">: leggi di più</span>
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
      <div class="rtds-mt-auto rtds-pt-4">
        
        <span class="rtds-action-link
     rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
            Scopri l'approfondimento
        
         
            <svg
  class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

        
        </span> 
        
      </div>
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

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

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image rtds-h-full"
      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
            
              
            
            
              
            
            <span class="rtds-sr-only">: leggi di più</span>
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
      <div class="rtds-mt-auto rtds-pt-4">
        
        <span class="rtds-action-link
     rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
            Scopri l'approfondimento
        
         
            <svg
  class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

        
        </span> 
        
      </div>
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
            </div>


        </div>

    </div>

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

        
            
            <span class="rtds-section-header__right-content md:rtds-ml-auto">
                

                
                    
                        <a href="#"
    class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--inverted rtds-btn--s rtds-hidden lg:rtds-inline-flex"







>
        
        <span class="rtds-sr-only">Approfondimenti: </span>visualizza l'archivio
        
        
        
    
    <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

</a>

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

        <div class="rtds-space-y-5">
            
            <div class="rtds-approfondimenti-list 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-image-fullwidth is-card-fullclickable rtds-group/card"
>

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image rtds-h-full"
      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
            
              
            
            
              
            
            <span class="rtds-sr-only">: leggi di più</span>
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
      <div class="rtds-mt-auto rtds-pt-4">
        
        <span class="rtds-action-link
     rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
            Scopri l'approfondimento
        
         
            <svg
  class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

        
        </span> 
        
      </div>
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

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

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image rtds-h-full"
      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
            
              
            
            
              
            
            <span class="rtds-sr-only">: leggi di più</span>
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
      <div class="rtds-mt-auto rtds-pt-4">
        
        <span class="rtds-action-link
     rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
            Scopri l'approfondimento
        
         
            <svg
  class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

        
        </span> 
        
      </div>
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

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

  
  <picture class="rtds-card__image-wrapper
  ">
    <img
      class="rtds-card__image rtds-h-full"
      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
            
              
            
            
              
            
            <span class="rtds-sr-only">: leggi di più</span>
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
      <div class="rtds-mt-auto rtds-pt-4">
        
        <span class="rtds-action-link
     rtds-card__action-link rtds-action-link--has-icon rtds-action-link--sm
">
            Scopri l'approfondimento
        
         
            <svg
  class="rtds-icon rtds-fill-current rtds-transition-all group-hover/card:rtds-translate-x-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

        
        </span> 
        
      </div>
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
            </div>

        <!-- Cta meteo mobile -->
        <div class="rtds-flex rtds-justify-center rtds-py-8 lg:rtds-hidden">
            <a href="#"
    class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--inverted rtds-btn--s"







>
        
        <span class="rtds-sr-only">Approfondimenti: </span>visualizza l'archivio
        
        
    
    

    <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-translate-x-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

</a>

        </div>

        </div>
    </div>

</section>