Sezione Siti Web Collegati

Sezione con griglia di card per siti web collegati e risorse esterne, con icone identificative.

Comportamento

<section> con intestazione @section-header--divider-left e lista di card @card--sito-tematico. La variante column usa card più grandi (@card--sito-tematico-l) in una griglia a 2 colonne.

Varianti

• default: Griglia 4 colonne (da md:2, da lg:4) con card compatte
• column: Griglia 2 colonne (da md) con card grandi

Dipendenze

• @section-header--divider-left — intestazione con divisore sinistro
• @card--sito-tematico — card link sito con icona (variante default)
• @card--sito-tematico-l — card link sito grande (variante column)

Stili CSS

• .rtds-section--siti-web-collegati: Modificatore della sezione
• La lista usa role="list" per compatibilità screen reader
• Griglia: md:grid-cols-2, lg:grid-cols-4 (variante default)

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.3.1 Informazioni e correlazioni — la sezione è un <section> con intestazione @section-header--divider-left; la lista usa role="list" per mantenere la semantica con CSS list-style: none
• 2.4.4 Scopo del collegamento (nel contesto) — ogni card sito tematico deve avere testo del link descrittivo del sito di destinazione

Note

Il componente @card-banner-links è una variante visivamente simile ma con diversa organizzazione interna — usare quello per layout con card banner link, usare questo per elenchi di siti web istituzionali.

Esempi di utilizzo

<section class="rtds-section rtds-section--siti-web-collegati rtds-py-8 md:rtds-py-12">
    <div class="rtds-container rtds-space-y-4">
        <div class="rtds-section-header rtds-section-header--siti-web-collegati">
    <div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
        <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">
            
                <div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 lg:rtds-w-8">
    <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>

            
            <h2 class="rtds-heading-3 md:rtds-heading-2">Siti web collegati</h2>
            
            
            
        </div>

        
            
        
    </div>
</div>
        <div class="rtds-space-y-5">
            <ul role="list" class="rtds-grid rtds-gap-4 md:rtds-grid-cols-2 lg:rtds-grid-cols-4">
                <li class="rtds-col"><div
  class="rtds-card rtds-card--sito-tematico rtds-bg-gradient-04 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 rtds-flex rtds-items-center" href="">
            
    
        <img alt="" width="24" height="24" src="../../images/icone-siti/toscana-notizie-icon.png" srcset="../../images/icone-siti/toscana-notizie-icon.png 1x, ../../images/logo-card@2x.png 2x" class="rtds-card__logo">
    

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

              
            
            
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</div>
</li>
                <li class="rtds-col"><div
  class="rtds-card rtds-card--sito-tematico rtds-bg-gradient-04 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 rtds-flex rtds-items-center" href="">
            
    
        <img alt="" width="24" height="24" src="../../images/icone-siti/giovanisi-icon.png" srcset="../../images/icone-siti/giovanisi-icon.png 1x, ../../images/logo-card@2x.png 2x" class="rtds-card__logo">
    

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

              
            
            
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</div>
</li>
                <li class="rtds-col"><div
  class="rtds-card rtds-card--sito-tematico rtds-bg-gradient-04 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 rtds-flex rtds-items-center" href="">
            
    
        <img alt="" width="24" height="24" src="../../images/icone-siti/open-toscana-icon.png" srcset="../../images/icone-siti/open-toscana-icon.png 1x, ../../images/logo-card@2x.png 2x" class="rtds-card__logo">
    

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

              
            
            
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</div>
</li>
                <li class="rtds-col"><div
  class="rtds-card rtds-card--sito-tematico rtds-bg-gradient-04 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 rtds-flex rtds-items-center" href="">
            
    
        <img alt="" width="24" height="24" src="../../images/icone-siti/toscana-accessibile-icon.png" srcset="../../images/icone-siti/toscana-accessibile-icon.png 1x, ../../images/logo-card@2x.png 2x" class="rtds-card__logo">
    

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

              
            
            
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</div>
</li>
                <li class="rtds-col"><div
  class="rtds-card rtds-card--sito-tematico rtds-bg-gradient-04 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 rtds-flex rtds-items-center" href="">
            
    
        <img alt="" width="24" height="24" src="../../images/icone-siti/digital-innovation-hub-icon.png" srcset="../../images/icone-siti/digital-innovation-hub-icon.png 1x, ../../images/logo-card@2x.png 2x" class="rtds-card__logo">
    

            Digital Innovation Hub - Industria 4.0
            
              
            
            
              
                  <svg
  class="rtds-icon rtds-fill-current rtds-flex-shrink-0"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--arrow-small-right" />
</svg>

              
            
            
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</div>
</li>
                <li class="rtds-col"><div
  class="rtds-card rtds-card--sito-tematico rtds-bg-gradient-04 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 rtds-flex rtds-items-center" href="">
            
    
        <img alt="" width="24" height="24" src="../../images/icone-siti/muoversi-in-toscana-icon.png" srcset="../../images/icone-siti/muoversi-in-toscana-icon.png 1x, ../../images/logo-card@2x.png 2x" class="rtds-card__logo">
    

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

              
            
            
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</div>
</li>
                <li class="rtds-col"><div
  class="rtds-card rtds-card--sito-tematico rtds-bg-gradient-04 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 rtds-flex rtds-items-center" href="">
            
    
        <img alt="" width="24" height="24" src="../../images/icone-siti/toscana-digitale-icon.png" srcset="../../images/icone-siti/toscana-digitale-icon.png 1x, ../../images/logo-card@2x.png 2x" class="rtds-card__logo">
    

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

              
            
            
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</div>
</li>
                <li class="rtds-col"><div
  class="rtds-card rtds-card--sito-tematico rtds-bg-gradient-04 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 rtds-flex rtds-items-center" href="">
            
    
        <img alt="" width="24" height="24" src="../../images/icone-siti/urp-icon.png" srcset="../../images/icone-siti/urp-icon.png 1x, ../../images/logo-card@2x.png 2x" class="rtds-card__logo">
    

            Ufficio Relazioni con il Pubblico
            
              
            
            
              
                  <svg
  class="rtds-icon rtds-fill-current rtds-flex-shrink-0"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--arrow-small-right" />
</svg>

              
            
            
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</div>
</li>
            </ul>
        </div>
    </div>

</section>
<section class="rtds-section rtds-section--siti-web-collegati rtds-py-8 md:rtds-py-12">
    <div class="rtds-space-y-4">
        <div class="rtds-section-header rtds-section-header--siti-web-collegati">
    <div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
        <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">
            
                <div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 lg:rtds-w-8">
    <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>

            
            <h2 class="rtds-heading-3 md:rtds-heading-2">Siti web collegati</h2>
            
            
            
        </div>

        
            
        
    </div>
</div>

        <div class="rtds-space-y-5">
            <ul role="list" class="rtds-grid rtds-gap-4 md:rtds-grid-cols-2">
                <li class="rtds-col"><div
  class="rtds-card rtds-card--sito-tematico rtds-bg-gradient-04 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 rtds-flex rtds-items-center" href="">
            
    
        <img alt="" width="24" height="24" src="../../images/icone-siti/toscana-notizie-icon.png" srcset="../../images/icone-siti/toscana-notizie-icon.png 1x, ../../images/logo-card@2x.png 2x" class="rtds-card__logo">
    

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

              
            
            
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</div>
</li>
                <li class="rtds-col"><div
  class="rtds-card rtds-card--sito-tematico rtds-bg-gradient-04 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 rtds-flex rtds-items-center" href="">
            
    
        <img alt="" width="24" height="24" src="../../images/icone-siti/giovanisi-icon.png" srcset="../../images/icone-siti/giovanisi-icon.png 1x, ../../images/logo-card@2x.png 2x" class="rtds-card__logo">
    

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

              
            
            
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</div>
</li>
                <li class="rtds-col"><div
  class="rtds-card rtds-card--sito-tematico rtds-bg-gradient-04 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 rtds-flex rtds-items-center" href="">
            
    
        <img alt="" width="24" height="24" src="../../images/icone-siti/open-toscana-icon.png" srcset="../../images/icone-siti/open-toscana-icon.png 1x, ../../images/logo-card@2x.png 2x" class="rtds-card__logo">
    

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

              
            
            
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</div>
</li>
                <li class="rtds-col"><div
  class="rtds-card rtds-card--sito-tematico rtds-bg-gradient-04 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 rtds-flex rtds-items-center" href="">
            
    
        <img alt="" width="24" height="24" src="../../images/icone-siti/toscana-accessibile-icon.png" srcset="../../images/icone-siti/toscana-accessibile-icon.png 1x, ../../images/logo-card@2x.png 2x" class="rtds-card__logo">
    

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

              
            
            
          </a>
        </h3>
      

      
      
        

      
      
    </div>

    
      
     

    
    

    
    
    

    
      
    
   
    
      
    
   
    
      
    

    
    
    

    
    
    
  </div>
  
  
</div>
</li>
            </ul>
        </div>
    </div>

</section>