Componente

Avatar

Immagine, iniziali o icona dell'utente in un cerchio, nelle sei misure di bootstrap-italia (16–112px), con stato, gruppi sovrapposti e menu.

Riferimento: <it-avatar>, <it-avatar-group>
Classi: ita-avatarita-avatar-xsita-avatar-smita-avatar-lgita-avatar-xlita-avatar-xxlita-avatar-primaryita-avatar-secondaryita-avatar-statusita-avatar-onlineita-avatar-busyita-avatar-awayita-avatar-offlineita-avatar-linkita-avatar-groupita-avatar-textita-avatar-nameita-avatar-detailita-avatar-toggle
Basato su (daisyUI): avataravatar-groupstatusdropdown
Solo CSS: Lo stato è un daisyUI status posizionato sull'angolo, ripetuto in testo per i lettori di schermo. Il menu dell'avatar è lo stesso Dropdown su <details>.
Storybook: Apri le storie di Avatar

Con immagine

Mostra il codice HTML

<div class="flex flex-wrap items-end gap-4">
  <span class="ita-avatar ita-avatar-xs"><span><img src="https://picsum.photos/id/64/224/224" alt="Mario Rossi"></span></span>
  <span class="ita-avatar ita-avatar-sm"><span><img src="https://picsum.photos/id/64/224/224" alt="Mario Rossi"></span></span>
  <span class="ita-avatar"><span><img src="https://picsum.photos/id/64/224/224" alt="Mario Rossi"></span></span>
  <span class="ita-avatar ita-avatar-lg"><span><img src="https://picsum.photos/id/64/224/224" alt="Mario Rossi"></span></span>
  <span class="ita-avatar ita-avatar-xl"><span><img src="https://picsum.photos/id/64/224/224" alt="Mario Rossi"></span></span>
  <span class="ita-avatar ita-avatar-xxl"><span><img src="https://picsum.photos/id/64/224/224" alt="Mario Rossi"></span></span>
</div>

Con iniziali

Mostra il codice HTML

<div class="flex flex-col gap-4">
<div class="flex flex-wrap items-end gap-4">
  <span class="ita-avatar ita-avatar-xs"><span><span aria-hidden="true">MR</span><span class="sr-only">Mario Rossi</span></span></span>
  <span class="ita-avatar ita-avatar-sm"><span><span aria-hidden="true">MR</span><span class="sr-only">Mario Rossi</span></span></span>
  <span class="ita-avatar"><span><span aria-hidden="true">MR</span><span class="sr-only">Mario Rossi</span></span></span>
  <span class="ita-avatar ita-avatar-lg"><span><span aria-hidden="true">MR</span><span class="sr-only">Mario Rossi</span></span></span>
  <span class="ita-avatar ita-avatar-xl"><span><span aria-hidden="true">MR</span><span class="sr-only">Mario Rossi</span></span></span>
  <span class="ita-avatar ita-avatar-xxl"><span><span aria-hidden="true">MR</span><span class="sr-only">Mario Rossi</span></span></span>
</div>
<div class="flex flex-wrap items-end gap-4">
  <span class="ita-avatar ita-avatar-xs ita-avatar-primary"><span><span aria-hidden="true">AV</span><span class="sr-only">Anna Verdi</span></span></span>
  <span class="ita-avatar ita-avatar-sm ita-avatar-primary"><span><span aria-hidden="true">AV</span><span class="sr-only">Anna Verdi</span></span></span>
  <span class="ita-avatar ita-avatar-primary"><span><span aria-hidden="true">AV</span><span class="sr-only">Anna Verdi</span></span></span>
  <span class="ita-avatar ita-avatar-lg ita-avatar-primary"><span><span aria-hidden="true">AV</span><span class="sr-only">Anna Verdi</span></span></span>
  <span class="ita-avatar ita-avatar-xl ita-avatar-primary"><span><span aria-hidden="true">AV</span><span class="sr-only">Anna Verdi</span></span></span>
  <span class="ita-avatar ita-avatar-xxl ita-avatar-primary"><span><span aria-hidden="true">AV</span><span class="sr-only">Anna Verdi</span></span></span>
</div>
<div class="flex flex-wrap items-end gap-4">
  <span class="ita-avatar ita-avatar-xs ita-avatar-secondary"><span><span aria-hidden="true">GB</span><span class="sr-only">Giulia Bianchi</span></span></span>
  <span class="ita-avatar ita-avatar-sm ita-avatar-secondary"><span><span aria-hidden="true">GB</span><span class="sr-only">Giulia Bianchi</span></span></span>
  <span class="ita-avatar ita-avatar-secondary"><span><span aria-hidden="true">GB</span><span class="sr-only">Giulia Bianchi</span></span></span>
  <span class="ita-avatar ita-avatar-lg ita-avatar-secondary"><span><span aria-hidden="true">GB</span><span class="sr-only">Giulia Bianchi</span></span></span>
  <span class="ita-avatar ita-avatar-xl ita-avatar-secondary"><span><span aria-hidden="true">GB</span><span class="sr-only">Giulia Bianchi</span></span></span>
  <span class="ita-avatar ita-avatar-xxl ita-avatar-secondary"><span><span aria-hidden="true">GB</span><span class="sr-only">Giulia Bianchi</span></span></span>
</div>
</div>

Con icona

Mostra il codice HTML

<div class="flex flex-wrap items-end gap-4">
  <span class="ita-avatar ita-avatar-xs"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,13c2.2,0,4-1.8,4-4V6c0-2.2-1.8-4-4-4S8,3.8,8,6v3C8,11.2,9.8,13,12,13z M9,6c0-1.7,1.3-3,3-3s3,1.3,3,3v3 c0,1.7-1.3,3-3,3s-3-1.3-3-3V6z M20,22h-1c0-3.9-3.1-7-7-7s-7,3.1-7,7H4c0-4.4,3.6-8,8-8S20,17.6,20,22z" /></svg><span class="sr-only">Utente</span></span></span>
  <span class="ita-avatar ita-avatar-sm"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,13c2.2,0,4-1.8,4-4V6c0-2.2-1.8-4-4-4S8,3.8,8,6v3C8,11.2,9.8,13,12,13z M9,6c0-1.7,1.3-3,3-3s3,1.3,3,3v3 c0,1.7-1.3,3-3,3s-3-1.3-3-3V6z M20,22h-1c0-3.9-3.1-7-7-7s-7,3.1-7,7H4c0-4.4,3.6-8,8-8S20,17.6,20,22z" /></svg><span class="sr-only">Utente</span></span></span>
  <span class="ita-avatar"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,13c2.2,0,4-1.8,4-4V6c0-2.2-1.8-4-4-4S8,3.8,8,6v3C8,11.2,9.8,13,12,13z M9,6c0-1.7,1.3-3,3-3s3,1.3,3,3v3 c0,1.7-1.3,3-3,3s-3-1.3-3-3V6z M20,22h-1c0-3.9-3.1-7-7-7s-7,3.1-7,7H4c0-4.4,3.6-8,8-8S20,17.6,20,22z" /></svg><span class="sr-only">Utente</span></span></span>
  <span class="ita-avatar ita-avatar-lg"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,13c2.2,0,4-1.8,4-4V6c0-2.2-1.8-4-4-4S8,3.8,8,6v3C8,11.2,9.8,13,12,13z M9,6c0-1.7,1.3-3,3-3s3,1.3,3,3v3 c0,1.7-1.3,3-3,3s-3-1.3-3-3V6z M20,22h-1c0-3.9-3.1-7-7-7s-7,3.1-7,7H4c0-4.4,3.6-8,8-8S20,17.6,20,22z" /></svg><span class="sr-only">Utente</span></span></span>
  <span class="ita-avatar ita-avatar-xl"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,13c2.2,0,4-1.8,4-4V6c0-2.2-1.8-4-4-4S8,3.8,8,6v3C8,11.2,9.8,13,12,13z M9,6c0-1.7,1.3-3,3-3s3,1.3,3,3v3 c0,1.7-1.3,3-3,3s-3-1.3-3-3V6z M20,22h-1c0-3.9-3.1-7-7-7s-7,3.1-7,7H4c0-4.4,3.6-8,8-8S20,17.6,20,22z" /></svg><span class="sr-only">Utente</span></span></span>
  <span class="ita-avatar ita-avatar-xxl"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,13c2.2,0,4-1.8,4-4V6c0-2.2-1.8-4-4-4S8,3.8,8,6v3C8,11.2,9.8,13,12,13z M9,6c0-1.7,1.3-3,3-3s3,1.3,3,3v3 c0,1.7-1.3,3-3,3s-3-1.3-3-3V6z M20,22h-1c0-3.9-3.1-7-7-7s-7,3.1-7,7H4c0-4.4,3.6-8,8-8S20,17.6,20,22z" /></svg><span class="sr-only">Utente</span></span></span>
  <span class="ita-avatar ita-avatar-lg ita-avatar-primary"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3,21h18v1H3V21z M3,20h18v-1H3V20z M22,9H2l10-7L22,9z M5.2,8h13.6L12,3.2L5.2,8z M6,18v-8H5v8H6z M10,18v-8H9v8H10z M15,18v-8h-1v8H15z M19,18v-8h-1v8H19z" /></svg><span class="sr-only">Ente</span></span></span>
  <span class="ita-avatar ita-avatar-lg ita-avatar-secondary"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M20.2,6 l-7.1,7.2c-0.6,0.6-1.6,0.6-2.2,0L3.8,6H20.2z M3,17.3V6.6L8.3,12L3,17.3z M3.7,18L9,12.7l1.2,1.2c1,0.9,2.6,0.9,3.6,0l1.2-1.2l0,0 l5.3,5.3H3.7z M15.7,12L21,6.6v10.7L15.7,12z" /></svg><span class="sr-only">Messaggi</span></span></span>
</div>

Con stato

Mostra il codice HTML

<div class="flex flex-wrap items-end gap-4">
  <span class="ita-avatar ita-avatar-lg"><span><img src="https://picsum.photos/id/64/224/224" alt="Anna Verdi"></span><span class="ita-avatar-status ita-avatar-online"></span><span class="sr-only">, in linea</span></span>
  <span class="ita-avatar ita-avatar-lg"><span><span aria-hidden="true">MR</span><span class="sr-only">Mario Rossi</span></span><span class="ita-avatar-status ita-avatar-busy"></span><span class="sr-only">, occupato</span></span>
  <span class="ita-avatar ita-avatar-lg ita-avatar-primary"><span><span aria-hidden="true">GB</span><span class="sr-only">Giulia Bianchi</span></span><span class="ita-avatar-status ita-avatar-away"></span><span class="sr-only">, assente</span></span>
  <span class="ita-avatar ita-avatar-lg"><span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,13c2.2,0,4-1.8,4-4V6c0-2.2-1.8-4-4-4S8,3.8,8,6v3C8,11.2,9.8,13,12,13z M9,6c0-1.7,1.3-3,3-3s3,1.3,3,3v3 c0,1.7-1.3,3-3,3s-3-1.3-3-3V6z M20,22h-1c0-3.9-3.1-7-7-7s-7,3.1-7,7H4c0-4.4,3.6-8,8-8S20,17.6,20,22z" /></svg><span class="sr-only">Utente</span></span><span class="ita-avatar-status ita-avatar-offline"></span><span class="sr-only">, non in linea</span></span>
  <span class="ita-avatar ita-avatar-xl"><span><img src="https://picsum.photos/id/1005/224/224" alt="Luca Neri"></span><span class="ita-avatar-status ita-avatar-online"></span><span class="sr-only">, in linea</span></span>
</div>

Come link

Al passaggio del mouse compare un anello primario.

Mostra il codice HTML

<div class="flex flex-wrap items-end gap-4">
  <a href="#" class="ita-avatar-link"><span class="ita-avatar ita-avatar-lg"><span><img src="https://picsum.photos/id/1012/224/224" alt="Profilo di Mario Rossi"></span></span></a>
  <a href="#" class="ita-avatar-link"><span class="ita-avatar ita-avatar-lg ita-avatar-primary"><span><span aria-hidden="true">AV</span><span class="sr-only">Profilo di Anna Verdi</span></span></span></a>
</div>

Gruppo di avatar

Giulia Bianchi
e altre 5 persone

Paolo Lilla

Mostra il codice HTML

<div class="flex flex-col gap-6">
<ul class="ita-avatar-group" aria-label="Partecipanti">
  <li><span class="ita-avatar"><span><img src="https://picsum.photos/id/1011/224/224" alt="Mario Rossi"></span></span></li>
  <li><span class="ita-avatar"><span><img src="https://picsum.photos/id/64/224/224" alt="Anna Verdi"></span></span></li>
  <li><span class="ita-avatar ita-avatar-primary"><span><span aria-hidden="true">GB</span><span class="sr-only">Giulia Bianchi</span></span></span></li>
  <li><span class="ita-avatar"><span><img src="https://picsum.photos/id/1005/224/224" alt="Luca Neri"></span></span></li>
  <li><span class="ita-avatar ita-avatar-secondary"><span><span aria-hidden="true">+5</span><span class="sr-only">e altre 5 persone</span></span></span></li>
</ul>
<ul class="ita-avatar-group" aria-label="Redazione">
  <li><span class="ita-avatar ita-avatar-lg"><span><img src="https://picsum.photos/id/1027/224/224" alt="Sara Blu"></span></span></li>
  <li><span class="ita-avatar ita-avatar-lg ita-avatar-secondary"><span><span aria-hidden="true">PL</span><span class="sr-only">Paolo Lilla</span></span></span></li>
  <li><span class="ita-avatar ita-avatar-lg"><span><img src="https://picsum.photos/id/338/224/224" alt="Carla Gialli"></span></span></li>
</ul>
</div>

Con testo

Mario Rossi Ufficio anagrafe

Anna Verdi Responsabile del procedimento

Mostra il codice HTML

<div class="flex flex-wrap gap-8">
<div class="ita-avatar-text">
  <span class="ita-avatar"><span><img src="https://picsum.photos/id/64/224/224" alt=""></span></span>
  <div>
    <span class="ita-avatar-name">Mario Rossi</span>
    <span class="ita-avatar-detail">Ufficio anagrafe</span>
  </div>
</div>
<div class="ita-avatar-text">
  <span class="ita-avatar ita-avatar-lg ita-avatar-primary"><span><span>AV</span></span></span>
  <div>
    <span class="ita-avatar-name">Anna Verdi</span>
    <span class="ita-avatar-detail">Responsabile del procedimento</span>
  </div>
</div>
</div>

Con menu

Mostra il codice HTML

<div class="h-56"><details class="dropdown ita-dropdown">
  <summary class="ita-avatar-toggle">
    <span class="ita-avatar ita-avatar-sm"><span><img src="https://picsum.photos/id/64/224/224" alt=""></span></span><span>Mario Rossi</span><svg class="ita-chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9z"/></svg>
  </summary>
  <ul class="dropdown-content menu ita-menu">
    <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,13c2.2,0,4-1.8,4-4V6c0-2.2-1.8-4-4-4S8,3.8,8,6v3C8,11.2,9.8,13,12,13z M9,6c0-1.7,1.3-3,3-3s3,1.3,3,3v3 c0,1.7-1.3,3-3,3s-3-1.3-3-3V6z M20,22h-1c0-3.9-3.1-7-7-7s-7,3.1-7,7H4c0-4.4,3.6-8,8-8S20,17.6,20,22z" /></svg> <span>Il mio profilo</span></a></li>
    <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,7.5c-2.5,0-4.5,2-4.5,4.5s2,4.5,4.5,4.5s4.5-2,4.5-4.5S14.5,7.5,12,7.5z M12,15.5c-1.9,0-3.5-1.6-3.5-3.5 s1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5S13.9,15.5,12,15.5z M21.8,13.9c0.1-0.6,0.2-1.3,0.2-1.9c0-0.6-0.1-1.3-0.2-1.9l-2.1-0.3 c-0.2-0.6-0.4-1.2-0.7-1.7l1.3-1.7c-0.7-1.1-1.6-2-2.7-2.7L15.9,5l-1.7-0.7l-0.3-2.1L12,2l-1.9,0.2L9.8,4.3L8.1,5L6.4,3.7 c-1.1,0.7-2,1.6-2.7,2.7L5,8.1C4.7,8.6,4.5,9.2,4.3,9.8l-2.1,0.3C2.1,10.7,2,11.4,2,12c0,0.6,0.1,1.3,0.2,1.9l2.1,0.3 c0.2,0.6,0.4,1.2,0.7,1.7l-1.3,1.7c0.7,1.1,1.6,2,2.7,2.7L8.1,19l1.7,0.7l0.3,2.1L12,22l1.9-0.2l0.3-2.1l1.7-0.7l1.7,1.3 c1.1-0.7,2-1.6,2.7-2.7L19,15.9c0.3-0.5,0.5-1.1,0.7-1.7L21.8,13.9z M18.9,13.2l-0.2,0.7c-0.1,0.5-0.3,1-0.6,1.5L17.8,16l0.4,0.5 l0.8,1.1c-0.4,0.5-0.9,1-1.4,1.4l-1.1-0.8L16,17.8l-0.6,0.3c-0.5,0.3-1,0.5-1.5,0.6l-0.7,0.2v0.7L13,20.9h-2l-0.2-1.3v-0.7 l-0.7-0.2c-0.5-0.1-1-0.3-1.5-0.6L8,17.8l-0.5,0.4L6.4,19c-0.5-0.4-1-0.9-1.4-1.4l0.8-1.1L6.2,16l-0.3-0.6c-0.3-0.5-0.5-1-0.6-1.5 l-0.2-0.7H4.4L3.1,13C3,12.7,3,12.3,3,12c0-0.3,0-0.7,0.1-1l1.3-0.2h0.7l0.2-0.7c0.1-0.5,0.3-1,0.6-1.5L6.2,8L5.8,7.5L5,6.4L6.4,5 l1.1,0.8L8,6.2l0.6-0.3c0.5-0.3,1-0.5,1.5-0.6l0.7-0.2V4.4L11,3.1h2l0.2,1.3v0.7l0.7,0.2c0.5,0.1,1,0.3,1.5,0.6L16,6.2l0.5-0.4 L17.6,5c0.5,0.4,1,0.9,1.4,1.4l-0.8,1.1L17.8,8l0.3,0.6c0.3,0.5,0.5,1,0.6,1.5l0.2,0.7h0.7l1.3,0.2c0.1,0.3,0.1,0.7,0.1,1 c0,0.3,0,0.7-0.1,1l-1.3,0.2H18.9z" /></svg> <span>Impostazioni</span></a></li>
    <li role="separator"></li>
    <li><a href="#"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M16.7 7.7L21 12L16.7 16.3L16 15.6L19 12.5L9.8 12.5L9.8 11.5L19.1 11.5L16 8.4L16.7 7.7ZM4.50019 20L12.0002 20L12.0002 21L4.50019 21C3.67177 21 3.00019 20.3284 3.00019 19.5L3.00019 4.5C3.00019 3.67157 3.67177 3 4.50019 3L12.0002 3L12.0002 4L4.50019 4C4.22405 4 4.00019 4.22386 4.00019 4.5L4.00019 19.5C4.00019 19.7761 4.22405 20 4.50019 20Z" /></svg> <span>Esci</span></a></li>
  </ul>
</details></div>