Regione Toscana Design System

Search Results Header 

<div class="rtds-search-results-header rtds-background-01">
    <div class="rtds-container rtds-space-y-4 lg:rtds-space-y-6 rtds-py-10 lg:rtds-py-12 xl:rtds-py-16">
        <div class="rtds-search-results-header__content">

            <h1 class="rtds-heading-1">
                Risultati di ricerca
            </h1>

        </div>

        <div class="rtds-search-results-header__search">
            <div class="rtds-search-bar" data-search-bar data-all-results-href="/search?q=" data-all-results-label="Tutti i risultati">
                <form class="rtds-search-bar__form" role="search" action="/search" method="get">
                    <div class="rtds-search-bar__wrapper">
                        <label for="searchResultsBar" class="rtds-search-bar__label rtds-sr-only">
                            Cerca
                        </label>

                        <div class="rtds-search-bar__input-wrapper">
                            <div class="rtds-search-bar__autocomplete" id="searchResultsBarContainer" data-placeholder="Search"></div>

                            <button type="button" class="rtds-btn rtds-btn--icon rtds-btn--l rtds-search-bar__clear rtds-border-0 rtds-hidden hover:rtds-background-secondary hover:rtds-text-white" data-search-clear>
                                <span class="rtds-sr-only">Cancella ricerca</span>
                                <svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--x-circle" />
                                </svg>

                            </button>

                            <button type="submit" class="rtds-btn 
    r rtds-btn--icon rtds-btn--icon-square rtds-btn--primary rtds-search-bar__submit rtds-btn--l"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#mini--magnifying-glass" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Cerca
                                </span>

                            </button>

                        </div>
                    </div>
                </form>
            </div>

        </div>

    </div>
</div>
 
<div class="rtds-search-results-header{% if classes %} {{ classes }}{% endif %}">
    <div class="rtds-container rtds-space-y-4 lg:rtds-space-y-6 rtds-py-10 lg:rtds-py-12 xl:rtds-py-16">
        <div class="rtds-search-results-header__content{% if contentClasses %} {{ contentClasses }}{% endif %}" >
        {% block title %}
        <h1 class="rtds-heading-1">
            {{ title|default('Risultati di ricerca') }}
        </h1>
        {% endblock title %}

        {% block description %}
            {% if description %}   
                <div class="rtds-search-results-header__description">
                    {{ description }}
                </div>

            {% endif %}
        {% endblock description %}
        </div>
        {% block searchBar %}
        <div class="rtds-search-results-header__search{% if searchBarClasses %} {{ searchBarClasses }}{% endif %}">
            {% render '@search-bar', {
                searchId: searchId|default('searchResultsBar'),
                label: label|default('Cerca'),
                submitLabel: submitLabel|default('Cerca'),
                showClearButton: showClearButton|default(true),
                placeholder: placeholder|default('Search'),
                formAction: formAction|default('/search'),
                formMethod: formMethod|default('get'),
                allResultsHref: allResultsHref|default('/search?q='),
                allResultsLabel: allResultsLabel|default('Tutti i risultati'),
                searchOptions: searchOptions,
                variant: variant,
                classes: searchBarClasses
            }, true %}
        </div>
        {% endblock searchBar %}
    </div>
</div>
 
{
  "title": "Risultati di ricerca",
  "searchId": "searchResultsBar",
  "label": "Cerca",
  "submitLabel": "Cerca",
  "showClearButton": true,
  "placeholder": "Search",
  "formAction": "/search",
  "formMethod": "get",
  "allResultsHref": "/search?q=",
  "allResultsLabel": "Tutti i risultati"
}
  • Content: 
    /**
 * SEARCH RESULTS HEADER
 * 
 * Componente header per la pagina di risultati di ricerca
 */
@layer components {
    .rtds-search-results-header {
        @apply rtds-w-full;
    }

    .rtds-search-results-header__search {
        @apply rtds-w-full;
    }
}
  • URL: /components/raw/search-results-header/search-results-header.css
  • Filesystem Path: components/04-organisms/search-results-header/search-results-header.css
  • Size: 264 Bytes

Search Results Header

Componente organismo che rappresenta la testata della pagina di risultati di ricerca. Include un titolo H1 e il componente search-bar.

Panoramica

Il componente search-results-header è progettato per essere utilizzato come header della pagina di risultati di ricerca. Combina un titolo semantico (H1) con il componente search-bar per fornire un’interfaccia completa per la ricerca.

Caratteristiche

  • Titolo H1 semantico per la pagina di risultati
  • Integrazione del componente search-bar con autocomplete
  • Layout responsive con container e spacing appropriati
  • Supporto per personalizzazione tramite blocchi Nunjucks

Configurazione

Parametri Principali

Titolo e Descrizione

  • title: Testo del titolo H1 (default: “Risultati di ricerca”)
  • description: Testo opzionale della descrizione da mostrare sotto il titolo
  • contentClasses: Classi CSS aggiuntive per il wrapper del contenuto (titolo e descrizione)
  • searchId: ID univoco per il campo di ricerca (default: “searchResultsBar”)
  • label: Testo della label per il campo di ricerca (default: “Cerca”)
  • submitLabel: Testo per il bottone di ricerca (default: “Cerca”)
  • showClearButton: Mostra/nasconde il bottone per cancellare (default: true)
  • placeholder: Placeholder per l’input (default: “Search”)
  • formAction: URL per il submit del form (default: “/search”)
  • formMethod: Metodo HTTP per il form (default: “get”)
  • allResultsHref: URL per il link “Tutti i risultati” (default: “/search?q=”)
  • allResultsLabel: Testo per il link “Tutti i risultati” (default: “Tutti i risultati”)
  • searchOptions: Array di opzioni per l’autocomplete
  • variant: Variante del componente search-bar
  • searchBarClasses: Classi CSS aggiuntive per il wrapper del componente search-bar

Stili

  • classes: Classi CSS aggiuntive per il wrapper principale

Blocchi Disponibili

  • title: Blocco per personalizzare il titolo H1
  • description: Blocco per personalizzare la descrizione
  • searchBar: Blocco per personalizzare il componente search-bar

Accessibilità

  • Utilizzo corretto del tag semantico H1 per il titolo della pagina
  • Integrazione con il componente search-bar che include tutti gli attributi ARIA necessari
  • Label nascosta visivamente ma disponibile per screen reader
  • Supporto completo per navigazione da tastiera
  • Conforme alle linee guida WCAG

Struttura HTML

Il componente genera la seguente struttura:

<div class="rtds-search-results-header">
  <div class="rtds-container rtds-space-y-4 lg:rtds-space-y-6 rtds-py-10 lg:rtds-py-12 xl:rtds-py-16">
    <div class="rtds-search-results-header__content">
      <h1 class="rtds-heading-1">Risultati di ricerca</h1>
      <!-- Descrizione opzionale -->
    </div>
    <div class="rtds-search-results-header__search">
      <!-- Componente search-bar -->
    </div>
  </div>
</div>

Layout e Spacing

Il componente utilizza:

  • Container: rtds-container per centrare il contenuto con larghezza massima
  • Spacing verticale: rtds-space-y-4 su mobile, rtds-space-y-6 su desktop per lo spazio tra titolo/descrizione e search-bar
  • Padding verticale responsive:
    • Mobile: rtds-py-10 (40px)
    • Desktop (lg): rtds-py-12 (48px)
    • Desktop (xl): rtds-py-16 (64px)