Sezione Guide

Sezione per la visualizzazione di guide pratiche, con griglia di card guida e intestazione con CTA.

Comportamento

<section> con intestazione @section-header e griglia di card @card--guida. La variante sr-only-heading nasconde l’intestazione visivamente mantenendola per gli screen reader.

Varianti

• default: Griglia 3 colonne con intestazione visibile e CTA “Vedi tutte le guide”
• sr-only-heading: Intestazione “Guide” visibile solo a screen reader

Dipendenze

• @section-header — intestazione con CTA
• @card--guida — card guida pratica

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 guida. 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 “Guide” identifica la sezione per gli screen reader; la variante sr-only-heading la rende visibile solo ai lettori di schermo

Stili CSS

• .rtds-section--guide: Modificatore della sezione
• .rtds-approfondimenti-list: Griglia card (riusa stile approfondimenti) — md:grid-cols-2, lg:grid-cols-3

Esempi di utilizzo

<section class="rtds-section rtds-section--guide rtds-py-8 md:rtds-py-12">
    <div class="rtds-container rtds-space-y-4">
        <div class="rtds-section-header rtds-section-header--guide">
    <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">Guide</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 tutte le guide
        
         
            <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-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--guida 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>

    
      
      <div class="rtds-card__description ">
       <svg
  class="rtds-icon rtds-fill-current rtds-content-01 rtds-flex-none rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--clipboard-document-list" />
</svg>

        <p>
           Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
        </p>
      </div>
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
                    <!-- Grid item wrapper -->  
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--guida 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>

    
      
      <div class="rtds-card__description ">
       <svg
  class="rtds-icon rtds-fill-current rtds-content-01 rtds-flex-none rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--clipboard-document-list" />
</svg>

        <p>
           Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
        </p>
      </div>
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
                    <!-- Grid item wrapper -->  
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--guida 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>

    
      
      <div class="rtds-card__description ">
       <svg
  class="rtds-icon rtds-fill-current rtds-content-01 rtds-flex-none rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--clipboard-document-list" />
</svg>

        <p>
           Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
        </p>
      </div>
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
            </div>


        </div>
    </div>

</section>
<section class="rtds-section rtds-section--guide rtds-py-8 md:rtds-py-12">
    <div class="rtds-container rtds-space-y-4">
        <h2 class="rtds-sr-only">Guide</h2>
        <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--guida 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>

    
      
      <div class="rtds-card__description ">
       <svg
  class="rtds-icon rtds-fill-current rtds-content-01 rtds-flex-none rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--clipboard-document-list" />
</svg>

        <p>
           Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
        </p>
      </div>
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
                    <!-- Grid item wrapper -->  
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--guida 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>

    
      
      <div class="rtds-card__description ">
       <svg
  class="rtds-icon rtds-fill-current rtds-content-01 rtds-flex-none rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--clipboard-document-list" />
</svg>

        <p>
           Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
        </p>
      </div>
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
                    <!-- Grid item wrapper -->  
                    <div class="rtds-col">
                        <article
  class="rtds-card rtds-card--guida 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>

    
      
      <div class="rtds-card__description ">
       <svg
  class="rtds-icon rtds-fill-current rtds-content-01 rtds-flex-none rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--clipboard-document-list" />
</svg>

        <p>
           Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
        </p>
      </div>
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</article>

                    </div>
                
            </div>


        </div>
    </div>

</section>