<div class="rtds-space-y-6 md:rtds-space-y-8">
<div class="rtds-space-y-4">
<div class="rtds-grid rtds-gap-6 lg:rtds-flex lg:rtds-justify-between">
<div class="rtds-loading-status" aria-live="polite" aria-busy="false" role="status">
<h2 class="rtds-sr-only">Risultati di ricerca</h2>
<span class="rtds-heading-3 rtds-font-normal">
<strong>230</strong> Servizi
</span>
</div>
<div>
<div class="rtds-grid md:rtds-flex md:rtds-items-center rtds-gap-2 md:rtds-gap-6 md:rtds-justify-end">
<div class="rtds-flex-1 md:rtds-flex-none">
<div class="rtds-input-field rtds-select-field rtds-field-inline rtds-select-field--sm">
<label for="select-field-1" class="rtds-input-field__label">
Rivolto a
</label>
<div class="rtds-select rtds-select--light">
<select id="select-field-1" class="">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
</div>
</div>
<div class="rtds-flex-1 md:rtds-flex-none">
<div class="rtds-input-field rtds-select-field rtds-field-inline rtds-select-field--sm">
<label for="select-field-2" class="rtds-input-field__label">
Ordina per
</label>
<div class="rtds-select rtds-select--light">
<select id="select-field-2" class="">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
</div>
</div>
</div>
<div class="rtds-pt-6 lg:rtds-hidden">
<button type="button" class="rtds-btn
rtds-btn--icon-left rtds-group/button rtds-btn--inverted" onclick="openDialog("mobileFilters", this)">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-scale-125" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--adjustments-horizontal" />
</svg>
Filtra la ricerca
</button>
<div class="rtds-dialog">
<div role="dialog" id="mobileFilters" aria-labelledby="mobileFiltersLabel" aria-modal="true" class="rtds-hidden">
<div class="rtds-dialog__header">
<h2 id="mobileFiltersLabel" class="rtds-dialog__title rtds-heading-3">
Filtri
</h2>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--l rtds-dialog__close-button" id="close-dialog-button" onclick="closeDialog(this)"><svg class="rtds-icon rtds-fill-current 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#mini--x-mark" />
</svg>
<span class="rtds-sr-only">
Chiudi la modale corrente
</span>
</button>
</div>
<div class="rtds-dialog__content" tabindex="0">
<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 class="rtds-grid rtds-p-4">
<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-mobile-0" id="facet-id-mobile-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-mobile-0" role="region" aria-labelledby="facet-id-mobile-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-mobile-0-1" name="checkbox-facet-section-mobile-0-1" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-0-2" name="checkbox-facet-section-mobile-0-2" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-0-3" name="checkbox-facet-section-mobile-0-3" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-0-4" name="checkbox-facet-section-mobile-0-4" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-0-5" name="checkbox-facet-section-mobile-0-5" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-0-6" name="checkbox-facet-section-mobile-0-6" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-0-7" name="checkbox-facet-section-mobile-0-7" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-0-8" name="checkbox-facet-section-mobile-0-8" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-0-9" name="checkbox-facet-section-mobile-0-9" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-1" id="facet-id-mobile-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-mobile-1" role="region" aria-labelledby="facet-id-mobile-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-mobile-1-1" name="checkbox-facet-section-mobile-1-1" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-1-2" name="checkbox-facet-section-mobile-1-2" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-1-3" name="checkbox-facet-section-mobile-1-3" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-1-4" name="checkbox-facet-section-mobile-1-4" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-1-5" name="checkbox-facet-section-mobile-1-5" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-1-6" name="checkbox-facet-section-mobile-1-6" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-1-7" name="checkbox-facet-section-mobile-1-7" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-1-8" name="checkbox-facet-section-mobile-1-8" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-1-9" name="checkbox-facet-section-mobile-1-9" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-2" id="facet-id-mobile-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-mobile-2" role="region" aria-labelledby="facet-id-mobile-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-mobile-2-1" name="checkbox-facet-section-mobile-2-1" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-2-2" name="checkbox-facet-section-mobile-2-2" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-2-3" name="checkbox-facet-section-mobile-2-3" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-2-4" name="checkbox-facet-section-mobile-2-4" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-2-5" name="checkbox-facet-section-mobile-2-5" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-2-6" name="checkbox-facet-section-mobile-2-6" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-2-7" name="checkbox-facet-section-mobile-2-7" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-2-8" name="checkbox-facet-section-mobile-2-8" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-2-9" name="checkbox-facet-section-mobile-2-9" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-3" id="facet-id-mobile-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-mobile-3" role="region" aria-labelledby="facet-id-mobile-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-mobile-3-1" name="checkbox-facet-section-mobile-3-1" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-3-2" name="checkbox-facet-section-mobile-3-2" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-3-3" name="checkbox-facet-section-mobile-3-3" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-3-4" name="checkbox-facet-section-mobile-3-4" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-3-5" name="checkbox-facet-section-mobile-3-5" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-3-6" name="checkbox-facet-section-mobile-3-6" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-3-7" name="checkbox-facet-section-mobile-3-7" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-3-8" name="checkbox-facet-section-mobile-3-8" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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-mobile-3-9" name="checkbox-facet-section-mobile-3-9" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-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>
<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-mobile-4" id="facet-id-mobile-4">
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-mobile-4" role="region" aria-labelledby="facet-id-mobile-4">
<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-mobile-4-1" name="checkbox-facet-section-mobile-4-1" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-4-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-mobile-4-2" name="checkbox-facet-section-mobile-4-2" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-4-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-mobile-4-3" name="checkbox-facet-section-mobile-4-3" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-4-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-mobile-4-4" name="checkbox-facet-section-mobile-4-4" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-4-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-mobile-4-5" name="checkbox-facet-section-mobile-4-5" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-4-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-mobile-4-6" name="checkbox-facet-section-mobile-4-6" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-4-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-mobile-4-7" name="checkbox-facet-section-mobile-4-7" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-4-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-mobile-4-8" name="checkbox-facet-section-mobile-4-8" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-4-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-mobile-4-9" name="checkbox-facet-section-mobile-4-9" class=" " type="checkbox">
<label class="rtds-input-checkbox__label rtds-facets__label" for="checkbox-facet-section-mobile-4-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-dialog__actions">
<button type="button" class="rtds-btn
rtds-btn--primary
rtds-btn--outlined" onclick="closeDialog(this)">
Annulla
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CONTAINER PER EMPTY STATE - HA CONTENUTO SOLO SE NON CI SONO RISULTATI - DEVE ESSERE SEMPRE PRESENTE - CON I RISULTATI HA CLASSE -> rtds-sr-only -->
<div class="rtds-empty-state rtds-grid rtds-gap-4 rtds-sr-only" aria-live="assertive" aria-atomic="true"></div>
<div class="rtds-grid rtds-gap-4 rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3">
<article class="rtds-card rtds-card--information rtds-bg-gradient-04
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="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</a>
</h3>
</div>
<div class="rtds-card__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<ul class="rtds-card__tags" aria-label="Categorie">
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
</ul>
</div>
</article>
<article class="rtds-card rtds-card--information rtds-bg-gradient-04
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="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</a>
</h3>
</div>
<div class="rtds-card__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<ul class="rtds-card__tags" aria-label="Categorie">
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
</ul>
</div>
</article>
<article class="rtds-card rtds-card--information rtds-bg-gradient-04
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="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</a>
</h3>
</div>
<div class="rtds-card__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<ul class="rtds-card__tags" aria-label="Categorie">
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
</ul>
</div>
</article>
<article class="rtds-card rtds-card--information rtds-bg-gradient-04
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="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</a>
</h3>
</div>
<div class="rtds-card__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<ul class="rtds-card__tags" aria-label="Categorie">
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
</ul>
</div>
</article>
<article class="rtds-card rtds-card--information rtds-bg-gradient-04
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="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</a>
</h3>
</div>
<div class="rtds-card__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<ul class="rtds-card__tags" aria-label="Categorie">
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
</ul>
</div>
</article>
<article class="rtds-card rtds-card--information rtds-bg-gradient-04
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="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</a>
</h3>
</div>
<div class="rtds-card__description ">
<p>
Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
</p>
</div>
<ul class="rtds-card__tags" aria-label="Categorie">
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
<li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
label</span></li>
</ul>
</div>
</article>
</div>
</div>
<nav class="rtds-pagination rtds-justify-center" role="navigation" aria-label="Paginazione">
<ul class="rtds-pagination__list rtds-justify-center">
<li>
<a class="rtds-pagination__link rtds-pagination__link-button " href="#" aria-label="Pagina iniziale">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-double-left" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button" href="#" aria-label="Pagina precedente">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-left" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 1">1</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text rtds-background-primary rtds-border-primary rtds-text-white hover:rtds-content-01" href="#" aria-label="Pagina corrente, pagina 2" aria-current="true">2</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 3">3</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 4">4</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button" href="#" aria-label="Pagina successiva">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button " href="#" aria-label="Pagina finale">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-double-right" />
</svg>
</a>
</li>
</ul>
</nav>
</div>
{% if hasContainer %}
<div class="rtds-container">
{% endif %}
<div class="rtds-space-y-6 md:rtds-space-y-8{% if padding %} rtds-py-6{% endif %}">
<div class="rtds-space-y-4">
{% block filters %}
{% if filtersSelected %}
<div class="rtds-pb-6">
{% render '@filters--v2-selected', true %}
</div>
{% endif %}
{% endblock filters %}
<div class="rtds-grid rtds-gap-6 lg:rtds-flex lg:rtds-justify-between">
<div class="rtds-loading-status" aria-live="polite" aria-busy="{{ ariaBusy }}" role="status">
{% block title %}
{% if srOnlyTitle %}
<h2 class="rtds-sr-only">Risultati di ricerca</h2>
<span class="rtds-heading-3 rtds-font-normal">
{{ title|safe }}
</span>
{% else %}
<h2 class="rtds-heading-3 rtds-font-normal">
{{ title|safe }}
</h2>
{% endif %}
{% endblock title %}
</div>
{% block rightContent %}
{% if sorting or mobileFilters or rightContent %}
<div{% if ariaBusy == true %} class="rtds-hidden"{% endif %}>
{% block rightContentInner %}
{% if sorting %}
<div class="rtds-grid md:rtds-flex md:rtds-items-center rtds-gap-2 md:rtds-gap-6 md:rtds-justify-end">
<div class="rtds-flex-1 md:rtds-flex-none">
{% render '@select-field--sm',{label: 'Rivolto a', selectId: 'select-field-1', inline: 'true', variant: '--light' }, true %}
</div>
<div class="rtds-flex-1 md:rtds-flex-none">
{% render '@select-field--sm',{label: 'Ordina per', selectId: 'select-field-2', inline: 'true', variant: '--light' }, true %}
</div>
</div>
{% endif %}
{% if mobileFilters %}
<div class="rtds-pt-6 lg:rtds-hidden">
{% render '@button--icon-left', {icon: 'mini--adjustments-horizontal',iconTransformType: 'scale', classes: 'rtds-btn--inverted', label: 'Filtra la ricerca', callback:'openDialog("mobileFilters", this)' }, true %}
{% render '@modal-dialog--filters', {dialogId: 'mobileFilters'}, true %}
</div>
{% endif %}
{% endblock rightContentInner %}
</div>
{% endif %}
{% endblock rightContent %}
</div>
<!-- CONTAINER PER EMPTY STATE - HA CONTENUTO SOLO SE NON CI SONO RISULTATI - DEVE ESSERE SEMPRE PRESENTE - CON I RISULTATI HA CLASSE -> rtds-sr-only -->
<div class="rtds-empty-state rtds-grid rtds-gap-4{% if emptyState == false %} rtds-sr-only{% endif %}" aria-live="assertive" aria-atomic="true">
{%- block emptyState -%}
{%- endblock emptyState -%}
</div>
{% block results %}
<div class="rtds-grid rtds-gap-4 rtds-grid-cols-1{% if resultsGridClasses %} {{ resultsGridClasses }}{% endif %}">
{% for i in range(0, resultsCount) %}
{% render '@card' + resultsCard.variant, resultsCard.context, true %}
{% endfor %}
</div>
{% endblock results %}
</div>
{% block pagination %}
{% render '@pagination--centered' %}
{% endblock pagination %}
</div>
{% if hasContainer %}
</div>
{% endif %}
{
"ariaBusy": false,
"srOnlyTitle": true,
"emptyState": false,
"sorting": true,
"resultsCount": 6,
"title": "<strong>230</strong> Servizi",
"resultsGridClasses": "md:rtds-grid-cols-2 lg:rtds-grid-cols-3",
"resultsCard": {
"variant": "--information-with-gradient"
},
"mobileFilters": true
}
@layer components {
.rtds-loading-status[aria-busy="true"] {
@apply rtds-w-full;
}
}
Il componente Search Results è stato sviluppato per visualizzare i risultati di una ricerca con filtri e ordinamento. Supporta diversi stati (caricamento, vuoto, con risultati) e include funzionalità di accessibilità integrate.
aria-busy e la classe rtds-loading-statusemptyState e la classe rtds-empty-statearia-live="polite" per gli aggiornamenti dei risultatiaria-live="assertive" per lo stato vuotosrOnlyTitle) per screen readeraria-busyIl componente deve essere utilizzato all’interno di un contesto di ricerca appropriato, tipicamente dopo un form di ricerca o una search box.
title: Personalizzazione del titolo della sezioneemptyState: Contenuto da mostrare quando non ci sono risultatiresults: Personalizzazione della griglia dei risultatipagination: Personalizzazione della paginazioneIl componente supporta diverse varianti configurabili tramite il file di configurazione:
has-container: Aggiunge un container responsivehas-padding: Aggiunge padding verticalehas-mobile-filters: Abilita i filtri per mobileloading: Mostra lo stato di caricamentoempty-state: Mostra lo stato vuotoariaBusy: boolean - gestisce lo stato di caricamento (default: false)srOnlyTitle: boolean - nasconde il titolo visivamente (default: true)emptyState: boolean - mostra lo stato vuoto (default: false)resultsCount: number - numero di risultati da mostrare (default: 6)resultsCard: string - tipo di card da utilizzare (default: ‘card–information-with-gradient’)resultsGridClasses: string - classi per la griglia dei risultatihasContainer: boolean - aggiunge un container responsivepadding: boolean - aggiunge padding verticalemobileFilters: boolean - abilita i filtri per mobilearia-live per annunciare i cambiamenti di statoaria-busy<div class="rtds-loading-status" aria-live="polite" aria-busy="true" role="status">
<!-- contenuto del titolo -->
</div>
<div class="rtds-hidden">
<!-- contenuto dei filtri e risultati -->
</div>aria-live="polite": annuncia i cambiamenti in modo non interruttivoaria-busy="true": indica che il contenuto è in fase di aggiornamentorole="status": identifica l’elemento come un elemento di statortds-hidden nasconde i filtri durante il caricamento<div class="rtds-empty-state rtds-grid rtds-gap-4" aria-live="assertive" aria-atomic="true">
<!-- contenuto empty state -->
</div>aria-live="assertive": annuncia i cambiamenti in modo prioritarioaria-atomic="true": annuncia l’intero contenuto dell’elementortds-empty-state è sempre presente, ma viene nascosta con rtds-sr-only quando ci sono risultati o in fase di loadingrtds-loading-status mostrerà il testo “Nessun risultato trovato”rtds-empty-state non avrà la classe rtds-sr-only e conterrà il markup dell’empty state<div class="rtds-loading-status" aria-live="polite" aria-busy="false" role="status">
<h2 class="rtds-heading-3 rtds-font-normal">
<strong>230</strong> risultati
</h2>
</div>aria-busy="false": indica che il contenuto è stabilesrOnlyTitle: gestisce la visibilità del titolo per screen readerrtds-sr-only nasconde visivamente il titolo ma lo mantiene accessibilerole="dialog"aria-modal="true"aria-labelledby per il titolo del dialogTransizione Caricamento → Risultati:
aria-busy passa da true a falsertds-hidden)rtds-sr-only)Transizione Risultati → Vuoto:
rtds-sr-only)aria-live="assertive" annuncia il cambiamentoTransizione Vuoto → Risultati:
rtds-sr-only)aria-live="polite" annuncia il cambiamentoAnnunci Contestuali:
aria-live="polite" per aggiornamenti non criticiaria-live="assertive" per cambiamenti di stato importantiGestione del Focus:
Feedback Visivi e Semantici: