Sezione Filtri (Filters)

Pannello filtri laterale per pagine di ricerca e listing, con intestazione, pulsante reset opzionale e lista di facet.

Comportamento

<div> (non <section>) con intestazione <h2>Filtri</h2>, pulsante reset opzionale e una lista di componenti @facets. Tipicamente posizionato in una sidebar affiancata ai risultati di ricerca.

Varianti

• default: Pannello filtri base
• v2: Variante di layout alternativa
• v2-selected: Variante v2 con facet già selezionati

Dipendenze

• @facets — singolo gruppo di filtri espandibile
• @button--only-text — pulsante “Reset filtri”

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.

• facetsCount (numero, opzionale): Numero di gruppi facet da visualizzare. Default: 3
• hasFiltersReset (booleano, opzionale): Se true, mostra il pulsante “Reset filtri” accanto al titolo

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.3.1 Informazioni e correlazioni — l’intestazione <h2>Filtri</h2> identifica il pannello filtri per gli screen reader
• 4.1.2 Nome, Ruolo, Valore — il pulsante reset è un <button> nativo accessibile da tastiera; ogni @facets ha toggleId e sectionId univoci

Struttura e semantica

• Il componente è renderizzato come <div> — non è una <section>, viene tipicamente incluso in una sidebar
• <h2>Filtri</h2> identifica il pannello per gli screen reader
• L’accessibilità dei singoli gruppi filtro è delegata al componente @facets

Esempi di utilizzo

<!-- Layout tipico con sidebar -->
<div class="rtds-grid rtds-grid-cols-1 lg:rtds-grid-cols-12 rtds-gap-6">
  <aside class="lg:rtds-col-span-3">
    <!-- @filters -->
  </aside>
  <main class="lg:rtds-col-span-9">
    <!-- risultati di ricerca -->
  </main>
</div>

<div class="rtds-grid rtds-gap-4 md:rtds-gap-6">
   <div class="rtds-grid rtds-gap-2">
      
      
      <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-border-b rtds-border-gray-01 rtds-pb-2">
      
      <h2 class="rtds-heading-3">
         Filtri
      </h2>
      
      <div class="rtds-ml-auto">
         <a href="#"
    class="rtds-btn 
    rtds-btn--only-text "







>
        
        Reset filtri
        
        <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 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover:rtds-translate-x-1"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--chevron-right" />
</svg>

</a>

         
      </div>
      
   </div>

   <div>
      
      <fieldset class="rtds-facets">
   <div class="rtds-grid rtds-py-6 rtds-gap-4 md:rtds-gap-6">
      <legend class="rtds-facets__legend">
         <button type="button" class="rtds-facets__toggle rtds-group/facet" aria-expanded="true" aria-controls="facet-section-0" id="facet-id-0">
               Nome faccetta
               <svg
  class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-transform rtds-duration-300 group-aria-expanded/facet:-rtds-rotate-180"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#solid--chevron-down" />
</svg>

         </button>
      </legend>
      <div class="rtds-facets__content rtds-space-y-2 has-show-more" id="facet-section-0" role="region" aria-labelledby="facet-id-0">
         <ul class="rtds-facets__list rtds-space-y-2">
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-1"
          name="checkbox-facet-section-0-1"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-1">
            <span class="rtds-facets__item-name">Filtro 1</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-2"
          name="checkbox-facet-section-0-2"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-2">
            <span class="rtds-facets__item-name">Filtro 2</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-3"
          name="checkbox-facet-section-0-3"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-3">
            <span class="rtds-facets__item-name">Filtro 3</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-4"
          name="checkbox-facet-section-0-4"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-4">
            <span class="rtds-facets__item-name">Filtro 4</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-5"
          name="checkbox-facet-section-0-5"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-5">
            <span class="rtds-facets__item-name">Filtro 5</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-6"
          name="checkbox-facet-section-0-6"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-6">
            <span class="rtds-facets__item-name">Filtro 6</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-7"
          name="checkbox-facet-section-0-7"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-7">
            <span class="rtds-facets__item-name">Filtro 7</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-8"
          name="checkbox-facet-section-0-8"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-8">
            <span class="rtds-facets__item-name">Filtro 8</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-9"
          name="checkbox-facet-section-0-9"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-9">
            <span class="rtds-facets__item-name">Filtro 9</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
         </ul>
         <button type="button" class="rtds-w-full rtds-btn rtds-btn--s rtds-btn--inverted rtds-btn--icon-right rtds-group/button rtds-justify-center rtds-btn--show-more rtds-facets__show-more" aria-expanded="false">
            <span class="rtds-sr-only">Nome faccetta</span>
            <span class="rtds-btn__label-show">
               Mostra altri
            </span>
            <span class="rtds-btn__label-hide rtds-hidden">Mostra meno</span>
            <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 group-aria-expanded/button:-rtds-rotate-180 rtds-icon rtds-fill-current rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-200"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--chevron-down" />
</svg>

         </button>
      </div>
   </div>
</fieldset>
      
      <fieldset class="rtds-facets">
   <div class="rtds-grid rtds-py-6 rtds-gap-4 md:rtds-gap-6">
      <legend class="rtds-facets__legend">
         <button type="button" class="rtds-facets__toggle rtds-group/facet" aria-expanded="true" aria-controls="facet-section-1" id="facet-id-1">
               Nome faccetta
               <svg
  class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-transform rtds-duration-300 group-aria-expanded/facet:-rtds-rotate-180"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#solid--chevron-down" />
</svg>

         </button>
      </legend>
      <div class="rtds-facets__content rtds-space-y-2 has-show-more" id="facet-section-1" role="region" aria-labelledby="facet-id-1">
         <ul class="rtds-facets__list rtds-space-y-2">
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-1"
          name="checkbox-facet-section-1-1"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-1">
            <span class="rtds-facets__item-name">Filtro 1</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-2"
          name="checkbox-facet-section-1-2"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-2">
            <span class="rtds-facets__item-name">Filtro 2</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-3"
          name="checkbox-facet-section-1-3"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-3">
            <span class="rtds-facets__item-name">Filtro 3</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-4"
          name="checkbox-facet-section-1-4"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-4">
            <span class="rtds-facets__item-name">Filtro 4</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-5"
          name="checkbox-facet-section-1-5"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-5">
            <span class="rtds-facets__item-name">Filtro 5</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-6"
          name="checkbox-facet-section-1-6"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-6">
            <span class="rtds-facets__item-name">Filtro 6</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-7"
          name="checkbox-facet-section-1-7"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-7">
            <span class="rtds-facets__item-name">Filtro 7</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-8"
          name="checkbox-facet-section-1-8"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-8">
            <span class="rtds-facets__item-name">Filtro 8</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-9"
          name="checkbox-facet-section-1-9"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-9">
            <span class="rtds-facets__item-name">Filtro 9</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
         </ul>
         <button type="button" class="rtds-w-full rtds-btn rtds-btn--s rtds-btn--inverted rtds-btn--icon-right rtds-group/button rtds-justify-center rtds-btn--show-more rtds-facets__show-more" aria-expanded="false">
            <span class="rtds-sr-only">Nome faccetta</span>
            <span class="rtds-btn__label-show">
               Mostra altri
            </span>
            <span class="rtds-btn__label-hide rtds-hidden">Mostra meno</span>
            <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 group-aria-expanded/button:-rtds-rotate-180 rtds-icon rtds-fill-current rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-200"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--chevron-down" />
</svg>

         </button>
      </div>
   </div>
</fieldset>
      
      <fieldset class="rtds-facets">
   <div class="rtds-grid rtds-py-6 rtds-gap-4 md:rtds-gap-6">
      <legend class="rtds-facets__legend">
         <button type="button" class="rtds-facets__toggle rtds-group/facet" aria-expanded="true" aria-controls="facet-section-2" id="facet-id-2">
               Nome faccetta
               <svg
  class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-transform rtds-duration-300 group-aria-expanded/facet:-rtds-rotate-180"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#solid--chevron-down" />
</svg>

         </button>
      </legend>
      <div class="rtds-facets__content rtds-space-y-2 has-show-more" id="facet-section-2" role="region" aria-labelledby="facet-id-2">
         <ul class="rtds-facets__list rtds-space-y-2">
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-1"
          name="checkbox-facet-section-2-1"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-1">
            <span class="rtds-facets__item-name">Filtro 1</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-2"
          name="checkbox-facet-section-2-2"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-2">
            <span class="rtds-facets__item-name">Filtro 2</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-3"
          name="checkbox-facet-section-2-3"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-3">
            <span class="rtds-facets__item-name">Filtro 3</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-4"
          name="checkbox-facet-section-2-4"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-4">
            <span class="rtds-facets__item-name">Filtro 4</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-5"
          name="checkbox-facet-section-2-5"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-5">
            <span class="rtds-facets__item-name">Filtro 5</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-6"
          name="checkbox-facet-section-2-6"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-6">
            <span class="rtds-facets__item-name">Filtro 6</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-7"
          name="checkbox-facet-section-2-7"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-7">
            <span class="rtds-facets__item-name">Filtro 7</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-8"
          name="checkbox-facet-section-2-8"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-8">
            <span class="rtds-facets__item-name">Filtro 8</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-9"
          name="checkbox-facet-section-2-9"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-9">
            <span class="rtds-facets__item-name">Filtro 9</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
         </ul>
         <button type="button" class="rtds-w-full rtds-btn rtds-btn--s rtds-btn--inverted rtds-btn--icon-right rtds-group/button rtds-justify-center rtds-btn--show-more rtds-facets__show-more" aria-expanded="false">
            <span class="rtds-sr-only">Nome faccetta</span>
            <span class="rtds-btn__label-show">
               Mostra altri
            </span>
            <span class="rtds-btn__label-hide rtds-hidden">Mostra meno</span>
            <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 group-aria-expanded/button:-rtds-rotate-180 rtds-icon rtds-fill-current rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-200"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--chevron-down" />
</svg>

         </button>
      </div>
   </div>
</fieldset>
      
      <fieldset class="rtds-facets">
   <div class="rtds-grid rtds-py-6 rtds-gap-4 md:rtds-gap-6">
      <legend class="rtds-facets__legend">
         <button type="button" class="rtds-facets__toggle rtds-group/facet" aria-expanded="true" aria-controls="facet-section-3" id="facet-id-3">
               Nome faccetta
               <svg
  class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-transform rtds-duration-300 group-aria-expanded/facet:-rtds-rotate-180"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#solid--chevron-down" />
</svg>

         </button>
      </legend>
      <div class="rtds-facets__content rtds-space-y-2 has-show-more" id="facet-section-3" role="region" aria-labelledby="facet-id-3">
         <ul class="rtds-facets__list rtds-space-y-2">
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-3-1"
          name="checkbox-facet-section-3-1"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-3-1">
            <span class="rtds-facets__item-name">Filtro 1</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-3-2"
          name="checkbox-facet-section-3-2"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-3-2">
            <span class="rtds-facets__item-name">Filtro 2</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-3-3"
          name="checkbox-facet-section-3-3"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-3-3">
            <span class="rtds-facets__item-name">Filtro 3</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-3-4"
          name="checkbox-facet-section-3-4"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-3-4">
            <span class="rtds-facets__item-name">Filtro 4</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-3-5"
          name="checkbox-facet-section-3-5"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-3-5">
            <span class="rtds-facets__item-name">Filtro 5</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-3-6"
          name="checkbox-facet-section-3-6"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-3-6">
            <span class="rtds-facets__item-name">Filtro 6</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-3-7"
          name="checkbox-facet-section-3-7"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-3-7">
            <span class="rtds-facets__item-name">Filtro 7</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-3-8"
          name="checkbox-facet-section-3-8"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-3-8">
            <span class="rtds-facets__item-name">Filtro 8</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-3-9"
          name="checkbox-facet-section-3-9"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-3-9">
            <span class="rtds-facets__item-name">Filtro 9</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
         </ul>
         <button type="button" class="rtds-w-full rtds-btn rtds-btn--s rtds-btn--inverted rtds-btn--icon-right rtds-group/button rtds-justify-center rtds-btn--show-more rtds-facets__show-more" aria-expanded="false">
            <span class="rtds-sr-only">Nome faccetta</span>
            <span class="rtds-btn__label-show">
               Mostra altri
            </span>
            <span class="rtds-btn__label-hide rtds-hidden">Mostra meno</span>
            <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 group-aria-expanded/button:-rtds-rotate-180 rtds-icon rtds-fill-current rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-200"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--chevron-down" />
</svg>

         </button>
      </div>
   </div>
</fieldset>
      
   </div>

</div>
<div class="rtds-grid rtds-gap-4 md:rtds-gap-6">
   <div class="rtds-grid rtds-gap-2">
      
      
      <h2 class="rtds-heading-3">
         Filtri
      </h2>
      
  
      <p class="rtds-text-sm md:rtds-text-base">
         Affina i risultati selezionando i filtri pertinenti. 
         I risultati si aggiornano automaticamente quando modifichi i filtri
      </p>
      
   </div>

   <div>
      
      <fieldset class="rtds-facets">
   <div class="rtds-grid rtds-py-6 rtds-gap-4 md:rtds-gap-6">
      <legend class="rtds-facets__legend">
         <button type="button" class="rtds-facets__toggle rtds-group/facet" aria-expanded="true" aria-controls="facet-section-0" id="facet-id-0">
               Nome faccetta
               <svg
  class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-transform rtds-duration-300 group-aria-expanded/facet:-rtds-rotate-180"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#solid--chevron-down" />
</svg>

         </button>
      </legend>
      <div class="rtds-facets__content rtds-space-y-2 has-show-more" id="facet-section-0" role="region" aria-labelledby="facet-id-0">
         <ul class="rtds-facets__list rtds-space-y-2">
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-1"
          name="checkbox-facet-section-0-1"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-1">
            <span class="rtds-facets__item-name">Filtro 1</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-2"
          name="checkbox-facet-section-0-2"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-2">
            <span class="rtds-facets__item-name">Filtro 2</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-3"
          name="checkbox-facet-section-0-3"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-3">
            <span class="rtds-facets__item-name">Filtro 3</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-4"
          name="checkbox-facet-section-0-4"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-4">
            <span class="rtds-facets__item-name">Filtro 4</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-5"
          name="checkbox-facet-section-0-5"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-5">
            <span class="rtds-facets__item-name">Filtro 5</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-6"
          name="checkbox-facet-section-0-6"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-6">
            <span class="rtds-facets__item-name">Filtro 6</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-7"
          name="checkbox-facet-section-0-7"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-7">
            <span class="rtds-facets__item-name">Filtro 7</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-8"
          name="checkbox-facet-section-0-8"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-8">
            <span class="rtds-facets__item-name">Filtro 8</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-0-9"
          name="checkbox-facet-section-0-9"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-0-9">
            <span class="rtds-facets__item-name">Filtro 9</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
         </ul>
         <button type="button" class="rtds-w-full rtds-btn rtds-btn--s rtds-btn--inverted rtds-btn--icon-right rtds-group/button rtds-justify-center rtds-btn--show-more rtds-facets__show-more" aria-expanded="false">
            <span class="rtds-sr-only">Nome faccetta</span>
            <span class="rtds-btn__label-show">
               Mostra altri
            </span>
            <span class="rtds-btn__label-hide rtds-hidden">Mostra meno</span>
            <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 group-aria-expanded/button:-rtds-rotate-180 rtds-icon rtds-fill-current rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-200"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--chevron-down" />
</svg>

         </button>
      </div>
   </div>
</fieldset>
      
      <fieldset class="rtds-facets">
   <div class="rtds-grid rtds-py-6 rtds-gap-4 md:rtds-gap-6">
      <legend class="rtds-facets__legend">
         <button type="button" class="rtds-facets__toggle rtds-group/facet" aria-expanded="true" aria-controls="facet-section-1" id="facet-id-1">
               Nome faccetta
               <svg
  class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-transform rtds-duration-300 group-aria-expanded/facet:-rtds-rotate-180"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#solid--chevron-down" />
</svg>

         </button>
      </legend>
      <div class="rtds-facets__content rtds-space-y-2 has-show-more" id="facet-section-1" role="region" aria-labelledby="facet-id-1">
         <ul class="rtds-facets__list rtds-space-y-2">
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-1"
          name="checkbox-facet-section-1-1"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-1">
            <span class="rtds-facets__item-name">Filtro 1</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-2"
          name="checkbox-facet-section-1-2"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-2">
            <span class="rtds-facets__item-name">Filtro 2</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-3"
          name="checkbox-facet-section-1-3"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-3">
            <span class="rtds-facets__item-name">Filtro 3</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-4"
          name="checkbox-facet-section-1-4"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-4">
            <span class="rtds-facets__item-name">Filtro 4</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-5"
          name="checkbox-facet-section-1-5"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-5">
            <span class="rtds-facets__item-name">Filtro 5</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-6"
          name="checkbox-facet-section-1-6"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-6">
            <span class="rtds-facets__item-name">Filtro 6</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-7"
          name="checkbox-facet-section-1-7"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-7">
            <span class="rtds-facets__item-name">Filtro 7</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-8"
          name="checkbox-facet-section-1-8"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-8">
            <span class="rtds-facets__item-name">Filtro 8</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-1-9"
          name="checkbox-facet-section-1-9"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-1-9">
            <span class="rtds-facets__item-name">Filtro 9</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
         </ul>
         <button type="button" class="rtds-w-full rtds-btn rtds-btn--s rtds-btn--inverted rtds-btn--icon-right rtds-group/button rtds-justify-center rtds-btn--show-more rtds-facets__show-more" aria-expanded="false">
            <span class="rtds-sr-only">Nome faccetta</span>
            <span class="rtds-btn__label-show">
               Mostra altri
            </span>
            <span class="rtds-btn__label-hide rtds-hidden">Mostra meno</span>
            <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 group-aria-expanded/button:-rtds-rotate-180 rtds-icon rtds-fill-current rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-200"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--chevron-down" />
</svg>

         </button>
      </div>
   </div>
</fieldset>
      
      <fieldset class="rtds-facets">
   <div class="rtds-grid rtds-py-6 rtds-gap-4 md:rtds-gap-6">
      <legend class="rtds-facets__legend">
         <button type="button" class="rtds-facets__toggle rtds-group/facet" aria-expanded="true" aria-controls="facet-section-2" id="facet-id-2">
               Nome faccetta
               <svg
  class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-transform rtds-duration-300 group-aria-expanded/facet:-rtds-rotate-180"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#solid--chevron-down" />
</svg>

         </button>
      </legend>
      <div class="rtds-facets__content rtds-space-y-2 has-show-more" id="facet-section-2" role="region" aria-labelledby="facet-id-2">
         <ul class="rtds-facets__list rtds-space-y-2">
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-1"
          name="checkbox-facet-section-2-1"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-1">
            <span class="rtds-facets__item-name">Filtro 1</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-2"
          name="checkbox-facet-section-2-2"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-2">
            <span class="rtds-facets__item-name">Filtro 2</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-3"
          name="checkbox-facet-section-2-3"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-3">
            <span class="rtds-facets__item-name">Filtro 3</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-4"
          name="checkbox-facet-section-2-4"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-4">
            <span class="rtds-facets__item-name">Filtro 4</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-5"
          name="checkbox-facet-section-2-5"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-5">
            <span class="rtds-facets__item-name">Filtro 5</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-6"
          name="checkbox-facet-section-2-6"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-6">
            <span class="rtds-facets__item-name">Filtro 6</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-7"
          name="checkbox-facet-section-2-7"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-7">
            <span class="rtds-facets__item-name">Filtro 7</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-8"
          name="checkbox-facet-section-2-8"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-8">
            <span class="rtds-facets__item-name">Filtro 8</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
            <li class="rtds-facets__item is-hideable rtds-hidden">
               
 <div class="rtds-input rtds-input-field rtds-input-checkbox">
   
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
        <input
          id="checkbox-facet-section-2-9"
          name="checkbox-facet-section-2-9"
          
          class="   " type="checkbox"
          
          
          
          
          
          >
          <label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-2-9">
            <span class="rtds-facets__item-name">Filtro 9</span> <span class="rtds-facets__item-count">44<span class="rtds-sr-only"> risultati</span></span>
            </label>
        </div>
      
        
    
</div>
            </li>
            
         </ul>
         <button type="button" class="rtds-w-full rtds-btn rtds-btn--s rtds-btn--inverted rtds-btn--icon-right rtds-group/button rtds-justify-center rtds-btn--show-more rtds-facets__show-more" aria-expanded="false">
            <span class="rtds-sr-only">Nome faccetta</span>
            <span class="rtds-btn__label-show">
               Mostra altri
            </span>
            <span class="rtds-btn__label-hide rtds-hidden">Mostra meno</span>
            <svg
  class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 group-aria-expanded/button:-rtds-rotate-180 rtds-icon rtds-fill-current rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-scale-200"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#outline--chevron-down" />
</svg>

         </button>
      </div>
   </div>
</fieldset>
      
   </div>


</div>
<div class="rtds-grid lg:rtds-flex rtds-gap-4 md:rtds-gap-6 rtds-border-b rtds-border-gray-01 rtds-pb-5 lg:rtds-pb-6">
   <div class="rtds-grid rtds-gap-2">
      
      
      <h2 class="rtds-heading-4">
         Filtri selezionati
      </h2>
      
  

      
   </div>

    <div>
         <ul class="rtds-flex rtds-gap-1 rtds-flex-wrap">
            
            <li>
               <span class="rtds-chip has-button-close rtds-chip--filter">
        Filtro 1
            <button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
                <svg
  class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--x-mark" />
</svg>

                <span class="rtds-sr-only">Rimuovi Filtro 1</span>
            </button>
        </span>
            </li>
            
            <li>
               <span class="rtds-chip has-button-close rtds-chip--filter">
        Filtro 2
            <button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
                <svg
  class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--x-mark" />
</svg>

                <span class="rtds-sr-only">Rimuovi Filtro 2</span>
            </button>
        </span>
            </li>
            
            <li>
               <span class="rtds-chip has-button-close rtds-chip--filter">
        Filtro 3
            <button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
                <svg
  class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--x-mark" />
</svg>

                <span class="rtds-sr-only">Rimuovi Filtro 3</span>
            </button>
        </span>
            </li>
            
            <li>
               <span class="rtds-chip has-button-close rtds-chip--filter">
        Filtro 4
            <button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
                <svg
  class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="../../icons.svg#mini--x-mark" />
</svg>

                <span class="rtds-sr-only">Rimuovi Filtro 4</span>
            </button>
        </span>
            </li>
            
         </ul>
      </div>


</div>