Componente

Forward

La freccia che porta alla sezione successiva, di solito in fondo a un hero: un link ad ancora con scorrimento fluido del browser.

Riferimento: <it-forward>
Classi: ita-forwardita-forward-lg
Basato su (daisyUI): btnbtn-circlebtn-ghost
Solo CSS: Lo scorrimento fluido viene da scroll-behavior: smooth (classe scroll-smooth su <html>), che il browser disattiva da solo con «riduci movimento». Il rimbalzo usa motion-safe:, quindi rispetta la stessa preferenza.
Storybook: Apri le storie di Forward

Esempio base

Il link porta alla sezione con id «contenuto-forward».

Prima sezione

Sezione successiva

Mostra il codice HTML

<div class="h-72 overflow-y-auto scroll-smooth rounded-box border border-base-content/15">
  <div class="flex h-full flex-col items-center justify-center gap-4 bg-base-200">
    <p class="text-xl font-semibold">Prima sezione</p>
    <a href="#contenuto-forward" class="ita-forward" aria-label="Vai al contenuto successivo"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.9,13.2l-5.4,5.3V3h-1v15.5l-5.4-5.3l-0.7,0.7l6.6,6.5l6.6-6.5L17.9,13.2z" /></svg></a>
  </div>
  <section id="contenuto-forward" class="flex h-full items-center justify-center">
    <p class="text-xl font-semibold">Sezione successiva</p>
  </section>
</div>

Su sfondo primario

Dentro it-surface-primary la freccia prende da sola il colore del testo della fascia.

Benvenuti nel portale del Comune

Mostra il codice HTML

<div class="it-surface-primary flex flex-col items-center gap-4 rounded-box p-10">
  <p class="text-2xl font-bold">Benvenuti nel portale del Comune</p>
  <a href="#contenuto" class="ita-forward ita-forward-lg" aria-label="Vai al contenuto successivo"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.9,13.2l-5.4,5.3V3h-1v15.5l-5.4-5.3l-0.7,0.7l6.6,6.5l6.6-6.5L17.9,13.2z" /></svg></a>
</div>