Regione Toscana Design System

Filters: V 2 Selected 

<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>
 
<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">
      {% block filtersHeading %}
      
      <h2 class="rtds-heading-4">
         Filtri selezionati
      </h2>
      
  

      {% endblock filtersHeading %}
   </div>

    <div>
         <ul class="rtds-flex rtds-gap-1 rtds-flex-wrap">
            {% for i in range(1, 5) %}
            <li>
               {% render '@chip--filter', { label: 'Filtro ' + i }, true %}
            </li>
            {% endfor %}
         </ul>
      </div>


</div>
 
{
  "facetsCount": 3,
  "selectedFacets": true
}

No notes defined.