Componente

Card

Card editoriali, inline, profilo e banner. daisyUI card con bordo sottile, ombre di design-tokens-italia e titolo come link.

Riferimento: <it-card>
Classi: ita-cardita-card-primaryita-card-secondaryita-card-successita-card-dangerita-card-warningita-card-shadow-noneita-card-shadow-mdita-card-shadow-lgita-card-borderlessita-card-inlineita-card-reverseita-card-profileita-card-bannerita-card-subtitleita-card-textita-card-footerita-card-tagsita-card-category
Basato su (daisyUI): cardcard-bodycard-titlecard-actionscard-sideavatar
Storybook: Apri le storie di Card

Card editoriali standard

Titolo del contenuto

Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.

Titolo del contenuto

Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.

Titolo del contenuto

Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.

Mostra il codice HTML

<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<article class="card ita-card">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Titolo del contenuto</a>
    </h3>
    <p class="ita-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
    <footer class="ita-card-footer">
      <div><a href="#" class="ita-card-category">Categoria</a></div>
      <time>22 aprile 2026</time>
    </footer>
  </div>
</article>
<article class="card ita-card">
  <figure><img src="https://picsum.photos/seed/city/800/600" alt="Città" loading="lazy"></figure>
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Titolo del contenuto</a>
    </h3>
    <p class="ita-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
    <footer class="ita-card-footer">
      <div><a href="#" class="ita-card-category">Categoria</a></div>
      <time>22 aprile 2026</time>
    </footer>
  </div>
</article>
<article class="card ita-card">
  <figure><img src="https://picsum.photos/seed/nature/800/600" alt="Natura" loading="lazy"></figure>
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Titolo del contenuto</a>
    </h3>
    <p class="ita-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
    <footer class="ita-card-footer">
      <div class="ita-card-tags"><a href="#" class="ita-chip"><span>Argomento 1</span></a><a href="#" class="ita-chip"><span>Argomento 2</span></a></div>
    </footer>
  </div>
</article>
</div>

Card editoriali featured

Titolo del contenuto featured

Sottotitolo del contenuto

di Maria Verde

Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.

Titolo del contenuto featured

Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.

Titolo del contenuto featured

Sottotitolo del contenuto

Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.

Mostra il codice HTML

<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<article class="card ita-card">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Titolo del contenuto featured</a>
      <svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14.7,2H6.5C5.7,2,5,2.7,5,3.5v17C5,21.3,5.7,22,6.5,22h11c0.8,0,1.5-0.7,1.5-1.5V6.3L14.7,2z M15,3.7L17.3,6h-1.8 C15.2,6,15,5.8,15,5.5V3.7z M17.5,21h-11C6.2,21,6,20.8,6,20.5v-17C6,3.2,6.2,3,6.5,3H14v2.5C14,6.3,14.7,7,15.5,7H18v13.5 C18,20.8,17.8,21,17.5,21z M8,9h8v1H8V9z M8,11h8v1H8V11z M8,13h4v1H8V13z" /></svg>
    </h3>
    <p class="ita-card-subtitle">Sottotitolo del contenuto</p>
    <address>di Maria Verde</address>
    <p class="ita-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
  </div>
</article>
<article class="card ita-card">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Titolo del contenuto featured</a>
      <svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8.7,20.2v-13h3.6v13.1L8.7,20.2L8.7,20.2z M23,10.1h-3.3v5.4c0,0.5,0,0.9,0,1.1s0.1,0.4,0.3,0.6s0.4,0.2,0.8,0.2h2.1 l0.2,2.8c-1.2,0.3-2.1,0.4-2.8,0.4c-1.6,0-2.7-0.3-3.3-1.1c-0.6-0.7-0.9-2-0.9-3.9v-12h3.6v3.6H23V10.1L23,10.1z M3.2,11.1 c-0.6,0-1.2-0.2-1.6-0.6C1.2,10.1,1,9.6,1,9s0.2-1.1,0.6-1.5C2,7,2.5,6.8,3.2,6.8S4.3,7,4.7,7.4c0.4,0.5,0.6,1,0.6,1.6 s-0.2,1.1-0.6,1.5S3.8,11.1,3.2,11.1z" /></svg>
    </h3>
    <p class="ita-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
    <footer class="ita-card-footer">
      <div><a href="#" class="ita-card-category">Categoria</a></div>
      <time>22 aprile 2026</time>
    </footer>
  </div>
</article>
<article class="card ita-card">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Titolo del contenuto featured</a>
      <svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21,3v6h-1V4.7l-7.6,7.7l-0.8-0.8L19.3,4H15V3H21z M17,19.5c0,0.3-0.2,0.5-0.5,0.5h-12C4.2,20,4,19.8,4,19.5v-12 C4,7.2,4.2,7,4.5,7H12V6H4.5C3.7,6,3,6.7,3,7.5v12C3,20.3,3.7,21,4.5,21h12c0.8,0,1.5-0.7,1.5-1.5V12h-1V19.5z" /></svg>
    </h3>
    <p class="ita-card-subtitle">Sottotitolo del contenuto</p>
    <p class="ita-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
  </div>
</article>
</div>

Card inline

Titolo del contenuto

Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.

Titolo del contenuto

Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.

Mostra il codice HTML

<div class="flex flex-col gap-6">
<article class="card ita-card ita-card-inline">
  <figure><img src="https://picsum.photos/seed/city/800/600" alt="Città" loading="lazy"></figure>
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Titolo del contenuto</a>
    </h3>
    <p class="ita-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
    <footer class="ita-card-footer">
      <div><a href="#" class="ita-card-category">Categoria</a></div>
      <time>22 aprile 2026</time>
    </footer>
  </div>
</article>
<article class="card ita-card ita-card-inline ita-card-reverse">
  <figure><img src="https://picsum.photos/seed/nature/800/600" alt="Natura" loading="lazy"></figure>
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Titolo del contenuto</a>
    </h3>
    <p class="ita-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
    <footer class="ita-card-footer">
      <div><a href="#" class="ita-card-category">Categoria</a></div>
      <time>22 aprile 2026</time>
    </footer>
  </div>
</article>
</div>

<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<article class="card ita-card ita-card-primary">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Titolo h3</a>
    </h3>
    <p class="ita-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
    <footer class="ita-card-footer">
      <div><a href="#" class="ita-card-category">Categoria</a></div>
      <time>12 ottobre, 2026</time>
    </footer>
  </div>
</article>
<article class="card ita-card ita-card-shadow-md ita-card-success">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Titolo h3</a>
    </h3>
    <p class="ita-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
    <footer class="ita-card-footer">
      <div><a href="#" class="ita-card-category">Categoria</a></div>
      <time>12 ottobre, 2026</time>
    </footer>
  </div>
</article>
<article class="card ita-card ita-card-borderless ita-card-shadow-lg ita-card-danger">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Titolo h3</a>
    </h3>
    <p class="ita-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
    <footer class="ita-card-footer">
      <div><a href="#" class="ita-card-category">Categoria</a></div>
      <time>12 ottobre, 2026</time>
    </footer>
  </div>
</article>
</div>

Card per profili personali

Nome Personale

Ruolo nell'organizzazione

Area:: Nome dell'area di appartenenza

Maria Verde

Responsabile comunicazione

Area:: Nome dell'area di appartenenza

Mostra il codice HTML

<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<article class="card ita-card ita-card-profile">
  <div class="card-body">
    <div class="flex items-center gap-4">
      <div class="avatar avatar-placeholder"><div class="size-20 rounded-full bg-primary text-primary-content text-2xl font-bold">NP</div></div>
      <div>
        <h3 class="card-title"><a href="#">Nome Personale</a></h3>
        <p class="text-base-content/70">Ruolo nell'organizzazione</p>
      </div>
    </div>
    <dl class="border-y border-base-content/20 py-3">
      <dt class="font-bold">Area:</dt>
      <dd>Nome dell'area di appartenenza</dd>
    </dl>
  </div>
</article>
<article class="card ita-card ita-card-profile">
  <div class="card-body">
    <div class="flex items-center gap-4">
      <div class="avatar avatar-placeholder"><div class="size-20 rounded-full bg-primary text-primary-content text-2xl font-bold">MV</div></div>
      <div>
        <h3 class="card-title"><a href="#">Maria Verde</a></h3>
        <p class="text-base-content/70">Responsabile comunicazione</p>
      </div>
    </div>
    <dl class="border-y border-base-content/20 py-3">
      <dt class="font-bold">Area:</dt>
      <dd>Nome dell'area di appartenenza</dd>
    </dl>
  </div>
</article>
</div>

Card banner

Mostra il codice HTML

<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<article class="card ita-card ita-card-banner">
  <div class="card-body">
    <svg class="size-16 text-secondary shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="21,20 21,21 3,21 3,3 4,3 4,20" /><polygon points="10.5,9.2 13,11.7 19,5.7 19,9.5 20,9.5 20,4 14.5,4 14.5,5 18.3,5 13,10.3 10.5,7.8 6.2,12.1 6.8,12.9" /></svg>
    <h3 class="card-title"><a href="#">Titolo del contenuto</a></h3>
    <p class="font-semibold">Scopri maggiori informazioni</p>
  </div>
</article>
<article class="card ita-card ita-card-banner">
  <div class="card-body">
    <svg class="size-16 text-secondary shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="21,20 21,21 3,21 3,3 4,3 4,20" /><polygon points="10.5,9.2 13,11.7 19,5.7 19,9.5 20,9.5 20,4 14.5,4 14.5,5 18.3,5 13,10.3 10.5,7.8 6.2,12.1 6.8,12.9" /></svg>
    <h3 class="card-title"><a href="#">Titolo del contenuto</a></h3>
    <p class="font-semibold">Scopri maggiori informazioni</p>
    <div class="card-actions"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline"><span>Apri il form di iscrizione</span></button></div>
  </div>
</article>
</div>

Card con azioni

Titolo del contenuto

Sottotitolo del contenuto

Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.

Mostra il codice HTML

<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<article class="card ita-card">
  
  <div class="card-body">
    <h3 class="card-title">
      <a href="#">Titolo del contenuto</a>
    </h3>
    <p class="ita-card-subtitle">Sottotitolo del contenuto</p>
    <p class="ita-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
    <div class="card-actions" role="group" aria-label="Link correlati:"><a href="#" class="ita-link inline-flex items-center gap-2 font-semibold">Leggi di più <svg class="size-5 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.9,5.4l-0.7,0.7l5.3,5.4H3v1h15.5l-5.3,5.4l0.7,0.7l6.6-6.6L13.9,5.4z" /></svg></a></div>
  </div>
</article>
</div>