Componente

Hero

Blocco di apertura con immagine di sfondo, occhiello, titolo e azione. daisyUI hero e hero-overlay, con i colori presi dai token del tema.

Riferimento: <it-hero>
Classi: ita-heroita-hero-neutralita-hero-primaryita-hero-filterita-hero-centerita-hero-smita-hero-overlapita-hero-kickerita-hero-titleita-hero-textita-hero-cta
Basato su (daisyUI): herohero-contenthero-overlaybtn
Solo CSS: Nessuno script: lo slot background è un <img> nella stessa cella di griglia di .hero, l'overlay è un div hero-overlay colorato da ita-hero-neutral/-primary e il filtro (ita-hero-filter) è mix-blend-screen. Il nome accessibile arriva da aria-labelledby sul titolo (aria-label quando l'hero è solo immagine), non da ariaLabelledByElements.
Storybook: Apri le storie di Hero

Con immagine

Solo immagine: la sezione prende il nome accessibile da aria-label.

Mostra il codice HTML

<section class="hero ita-hero" aria-label="In evidenza">
  <img src="https://picsum.photos/seed/hero-italia/1600/700" alt="Veduta di montagna">
</section>

Con contenuti testuali

Titolo occhiello

Titolo della sezione

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut.

Azione primaria

Mostra il codice HTML

<section class="hero ita-hero" aria-labelledby="hero-2-title">
  <div class="hero-content">
    <div>
      <span class="ita-hero-kicker">Titolo occhiello</span>
      <h2 id="hero-2-title" class="ita-hero-title">Titolo della sezione</h2>
      <p class="ita-hero-text">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut.</p>
      <div><a href="#" class="ita-btn ita-btn-xs ita-hero-cta">Azione primaria</a></div>
    </div>
  </div>
</section>

Con contenuti testuali centrati

Titolo occhiello

Titolo della sezione

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut.

Azione primaria

Mostra il codice HTML

<section class="hero ita-hero ita-hero-center" aria-labelledby="hero-3-title">
  <div class="hero-content">
    <div>
      <span class="ita-hero-kicker">Titolo occhiello</span>
      <h2 id="hero-3-title" class="ita-hero-title">Titolo della sezione</h2>
      <p class="ita-hero-text">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut.</p>
      <div><a href="#" class="ita-btn ita-btn-xs ita-hero-cta">Azione primaria</a></div>
    </div>
  </div>
</section>

Con testi ed immagine di sfondo

Titolo occhiello

Titolo della sezione

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut.

Azione primaria

Mostra il codice HTML

<section class="hero ita-hero ita-hero-neutral" aria-labelledby="hero-4-title">
  <img src="https://picsum.photos/seed/hero-italia/1600/700" alt="Veduta di montagna">
  <div class="hero-overlay"></div>
  <div class="hero-content">
    <div>
      <span class="ita-hero-kicker">Titolo occhiello</span>
      <h2 id="hero-4-title" class="ita-hero-title">Titolo della sezione</h2>
      <p class="ita-hero-text">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut.</p>
      <div><a href="#" class="ita-btn ita-btn-xs ita-hero-cta">Azione primaria</a></div>
    </div>
  </div>
</section>

Con overlay di colore primario

Titolo occhiello

Titolo della sezione

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut.

Azione primaria

Mostra il codice HTML

<section class="hero ita-hero ita-hero-primary" aria-labelledby="hero-5-title">
  <img src="https://picsum.photos/seed/hero-italia/1600/700" alt="Veduta di montagna">
  <div class="hero-overlay"></div>
  <div class="hero-content">
    <div>
      <span class="ita-hero-kicker">Titolo occhiello</span>
      <h2 id="hero-5-title" class="ita-hero-title">Titolo della sezione</h2>
      <p class="ita-hero-text">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut.</p>
      <div><a href="#" class="ita-btn ita-btn-xs ita-hero-cta">Azione primaria</a></div>
    </div>
  </div>
</section>

Con overlay e filtro di colore primario

mix-blend-screen sull'immagine, sopra lo sfondo primary della sezione.

Mostra il codice HTML

<section class="hero ita-hero ita-hero-filter" aria-label="In evidenza">
  <img src="https://picsum.photos/seed/hero-italia/1600/700" alt="Veduta di montagna">
</section>

Dimensione ridotta

Titolo occhiello

Titolo della sezione

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut.

Azione primaria

Mostra il codice HTML

<section class="hero ita-hero ita-hero-neutral ita-hero-sm" aria-labelledby="hero-7-title">
  <img src="https://picsum.photos/seed/hero-italia/1600/700" alt="Veduta di montagna">
  <div class="hero-overlay"></div>
  <div class="hero-content">
    <div>
      <span class="ita-hero-kicker">Titolo occhiello</span>
      <h2 id="hero-7-title" class="ita-hero-title">Titolo della sezione</h2>
      <p class="ita-hero-text">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut.</p>
      <div><a href="#" class="ita-btn ita-btn-xs ita-hero-cta">Azione primaria</a></div>
    </div>
  </div>
</section>

Con contenuti sovrapposti

overlap aggiunge il margine negativo: il blocco successivo sale sopra l'hero.

Titolo occhiello

Titolo della sezione

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut.

Azione primaria

Titolo del contenuto

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Mostra il codice HTML

<section class="hero ita-hero ita-hero-neutral ita-hero-overlap" aria-labelledby="hero-8-title">
  <img src="https://picsum.photos/seed/hero-italia/1600/700" alt="Veduta di montagna">
  <div class="hero-overlay"></div>
  <div class="hero-content">
    <div>
      <span class="ita-hero-kicker">Titolo occhiello</span>
      <h2 id="hero-8-title" class="ita-hero-title">Titolo della sezione</h2>
      <p class="ita-hero-text">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut.</p>
      <div><a href="#" class="ita-btn ita-btn-xs ita-hero-cta">Azione primaria</a></div>
    </div>
  </div>
</section>
<div class="mx-auto max-w-[1320px] px-4 sm:px-6">
  <article class="card card-border border-base-content/20 bg-base-100 shadow-[0_8px_16px_rgb(0_0_0/0.1)]">
    <div class="card-body">
      <h3 class="card-title text-2xl font-bold">Titolo del contenuto</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </article>
</div>