Componente

Section

Fasce di pagina a tutta larghezza con titolo, testo introduttivo e un contenitore centrato: sfondo neutro, grigio, primario, enfasi o immagine.

Riferimento: <it-section>
Classi: ita-sectionita-section-mutedita-section-primaryita-section-emphasisita-section-imageita-section-lgita-section-containerita-section-titleita-section-lead
Solo CSS: Sui token del tema: base-200 per «muted», primary, accent per l'enfasi; il velo sull'immagine è un ::before. Le card dentro una fascia colorata restano chiare perché usano bg-base-100.
Storybook: Apri le storie di Section

Esempio base

Titolo della sezione

Un testo introduttivo che spiega il contenuto della sezione.

Servizio 1

Breve descrizione del servizio, di una o due righe.

Servizio 2

Breve descrizione del servizio, di una o due righe.

Servizio 3

Breve descrizione del servizio, di una o due righe.

Mostra il codice HTML

<section id="section-1" aria-labelledby="section-1-title" class="ita-section">
  <div class="ita-section-container">
    <h2 id="section-1-title" class="ita-section-title">Titolo della sezione</h2>
    <p class="ita-section-lead">Un testo introduttivo che spiega il contenuto della sezione.</p>
    <div class="grid gap-6 md:grid-cols-3">
      <article class="card ita-card">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Servizio 1</a>
    </h3>
    <p class="ita-card-text">Breve descrizione del servizio, di una o due righe.</p>
  </div>
</article>
      <article class="card ita-card">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Servizio 2</a>
    </h3>
    <p class="ita-card-text">Breve descrizione del servizio, di una o due righe.</p>
  </div>
</article>
      <article class="card ita-card">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Servizio 3</a>
    </h3>
    <p class="ita-card-text">Breve descrizione del servizio, di una o due righe.</p>
  </div>
</article>
    </div>
  </div>
</section>

Sfondo grigio

In evidenza

Le notizie più lette della settimana.

Servizio 1

Breve descrizione del servizio, di una o due righe.

Servizio 2

Breve descrizione del servizio, di una o due righe.

Servizio 3

Breve descrizione del servizio, di una o due righe.

Mostra il codice HTML

<section id="section-2" aria-labelledby="section-2-title" class="ita-section ita-section-muted">
  <div class="ita-section-container">
    <h2 id="section-2-title" class="ita-section-title">In evidenza</h2>
    <p class="ita-section-lead">Le notizie più lette della settimana.</p>
    <div class="grid gap-6 md:grid-cols-3">
      <article class="card ita-card">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Servizio 1</a>
    </h3>
    <p class="ita-card-text">Breve descrizione del servizio, di una o due righe.</p>
  </div>
</article>
      <article class="card ita-card">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Servizio 2</a>
    </h3>
    <p class="ita-card-text">Breve descrizione del servizio, di una o due righe.</p>
  </div>
</article>
      <article class="card ita-card">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Servizio 3</a>
    </h3>
    <p class="ita-card-text">Breve descrizione del servizio, di una o due righe.</p>
  </div>
</article>
    </div>
  </div>
</section>

Sfondo primario

Iscriviti alla newsletter

Ricevi ogni mese gli aggiornamenti sui servizi del Comune.

Mostra il codice HTML

<section id="section-3" aria-labelledby="section-3-title" class="ita-section ita-section-primary">
  <div class="ita-section-container">
    <h2 id="section-3-title" class="ita-section-title">Iscriviti alla newsletter</h2>
    <p class="ita-section-lead">Ricevi ogni mese gli aggiornamenti sui servizi del Comune.</p>
    <a href="#" class="ita-btn ita-btn-inverse">Iscriviti</a>
  </div>
</section>

Sfondo di enfasi

Numeri utili

Pronto intervento, uffici e servizi attivi 24 ore su 24.

Servizio 1

Breve descrizione del servizio, di una o due righe.

Servizio 2

Breve descrizione del servizio, di una o due righe.

Servizio 3

Breve descrizione del servizio, di una o due righe.

Mostra il codice HTML

<section id="section-4" aria-labelledby="section-4-title" class="ita-section ita-section-emphasis ita-section-lg">
  <div class="ita-section-container">
    <h2 id="section-4-title" class="ita-section-title">Numeri utili</h2>
    <p class="ita-section-lead">Pronto intervento, uffici e servizi attivi 24 ore su 24.</p>
    <div class="grid gap-6 md:grid-cols-3">
      <article class="card ita-card">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Servizio 1</a>
    </h3>
    <p class="ita-card-text">Breve descrizione del servizio, di una o due righe.</p>
  </div>
</article>
      <article class="card ita-card">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Servizio 2</a>
    </h3>
    <p class="ita-card-text">Breve descrizione del servizio, di una o due righe.</p>
  </div>
</article>
      <article class="card ita-card">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Servizio 3</a>
    </h3>
    <p class="ita-card-text">Breve descrizione del servizio, di una o due righe.</p>
  </div>
</article>
    </div>
  </div>
</section>

Con immagine

Scopri il territorio

Itinerari, musei ed eventi in città.

Esplora

Mostra il codice HTML

<section id="section-5" aria-labelledby="section-5-title" class="ita-section ita-section-image ita-section-lg" style="background-image:url('https://picsum.photos/id/1040/1600/800')">
  <div class="ita-section-container">
    <h2 id="section-5-title" class="ita-section-title">Scopri il territorio</h2>
    <p class="ita-section-lead">Itinerari, musei ed eventi in città.</p>
    <a href="#" class="ita-btn ita-btn-primary"><span>Esplora</span></a>
  </div>
</section>