Regione Toscana Design System Design System Servizi

User Avatar 

<div class="rtds-user-avatar">
    <img alt="" width="56" height="56" src="../../images/user-placeholder.png" class="rtds-user-avatar__image">
</div>
 
<div class="rtds-user-avatar">
    <img alt="{{ alt }}" width="56" height="56" src="{{ path | path }}"{% if path2x %} srcset="{{ path | path }} 1x, {{ path2x | path }} 2x"{% endif %} class="rtds-user-avatar__image">
</div>
 
{
  "path": "/images/user-placeholder.png",
  "alt": "",
  "srcset": ""
}
  • Content: 
    /**
 * User Avatar
 * @component
 * @layer components
 */
body.rtds-user-avatar .rtds-primary-navigation__backdrop,
    :root.rtds-user-avatar .rtds-primary-navigation__backdrop {
    position: fixed;
    right: var(--spacing-0);
    bottom: var(--spacing-0);
    left: var(--spacing-0);
    z-index: 10;
}
@media (min-width: 1024px) {
    body.rtds-user-avatar .rtds-primary-navigation__backdrop,
    :root.rtds-user-avatar .rtds-primary-navigation__backdrop {
        display: none;
    }
}
body.rtds-user-avatar .rtds-primary-navigation__backdrop,
    :root.rtds-user-avatar .rtds-primary-navigation__backdrop {
    position: fixed;
    right: var(--spacing-0);
    bottom: var(--spacing-0);
    left: var(--spacing-0);
    z-index: 10;
}
@media (min-width: 1024px) {
    body.rtds-user-avatar .rtds-primary-navigation__backdrop,
    :root.rtds-user-avatar .rtds-primary-navigation__backdrop {
        display: none;
    }
}
.rtds-user-avatar {
    height: var(--spacing-14);
    width: var(--spacing-14);
    border-radius: 9999px;
    overflow: hidden;
    flex: none;
}
.rtds-user-avatar__image {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
  • URL: /components/raw/user-avatar/user-avatar.built.css
  • Filesystem Path: components/02-atoms/user-avatar/user-avatar.built.css
  • Size: 1.3 KB
  • Content: 
    /**
 * User Avatar
 * @component
 * @layer components
 */

@layer components {
    .rtds-user-avatar {
        @apply rtds-flex-none rtds-w-14 rtds-h-14 rtds-rounded-full rtds-overflow-hidden;
    }

    .rtds-user-avatar__image {
        @apply rtds-w-full rtds-h-full rtds-object-cover rtds-object-center;
    }
}
  • URL: /components/raw/user-avatar/user-avatar.css
  • Filesystem Path: components/02-atoms/user-avatar/user-avatar.css
  • Size: 316 Bytes

User Avatar

Componente per visualizzare l’immagine del profilo utente in formato circolare.

Comportamento

Il componente viene renderizzato come un <div> contenitore con un <img> interno. L’immagine viene ritagliata in forma circolare tramite border-radius: 50% e overflow: hidden.

Varianti

Varianti di Stile

  • default: Avatar con immagine singola
  • with-srcset: Avatar con immagine responsive tramite attributo srcset

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML o proprietà da usare nei temi, CMS o ambienti di implementazione: per quello, fare riferimento alla sezione Esempi di utilizzo.

Parametri Base

  • path (stringa, obbligatorio): Percorso dell’immagine dell’avatar (es. /images/user-placeholder.png)
  • alt (stringa, obbligatorio): Testo alternativo dell’immagine. Lasciare vuoto ('') se l’avatar è puramente decorativo e il nome utente è già visibile altrove nell’interfaccia
  • srcset (stringa, opzionale): Valore dell’attributo srcset per immagini responsive (es. /images/avatar@2x.png 2x, /images/avatar.png 1x)

Accessibilità

Componente non interattivo. Non richiede navigazione da tastiera né attributi ARIA aggiuntivi oltre all’alt dell’immagine.

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.1.1 Contenuti non testuali — l’immagine richiede un testo alternativo adeguato al contesto
  • 1.4.5 Immagini di testo — l’avatar non contiene testo

Struttura e semantica

  • Il componente è renderizzato come <div> contenitore con un <img> interno
  • Il <div> è puramente presentazionale; non ha ruolo semantico
  • L’<img> richiede sempre l’attributo alt: vuoto (alt="") se l’immagine è decorativa, descrittivo se è l’unica rappresentazione dell’utente

Screen reader

  • Se l’avatar accompagna un nome utente già leggibile nell’interfaccia, usare alt="" per nasconderlo agli screen reader (immagine decorativa)
  • Se l’avatar è l’unica rappresentazione dell’utente, fornire un alt descrittivo (es. "Foto profilo di Mario Rossi")

Stili CSS

Classi Base

  • .rtds-user-avatar: Contenitore circolare — flex-none, dimensione 56×56px (w-14 h-14), border-radius: 50%, overflow: hidden

Classi Elementi (BEM)

  • .rtds-user-avatar__image: Immagine interna — width: 100%, height: 100%, object-fit: cover, object-position: center

Esempi di utilizzo

<!-- Avatar base -->
<div class="rtds-user-avatar">
  <img
    alt="Foto profilo di Mario Rossi"
    width="56"
    height="56"
    src="/images/user-placeholder.png"
    class="rtds-user-avatar__image"
  >
</div>

<!-- Avatar decorativo (nome già visibile) -->
<div class="rtds-user-avatar">
  <img
    alt=""
    width="56"
    height="56"
    src="/images/user-placeholder.png"
    class="rtds-user-avatar__image"
  >
</div>

<!-- Avatar responsive con srcset -->
<div class="rtds-user-avatar">
  <img
    alt="Foto profilo di Mario Rossi"
    width="56"
    height="56"
    src="/images/user-placeholder.png"
    srcset="/images/user-placeholder@2x.png 2x, /images/user-placeholder.png 1x"
    class="rtds-user-avatar__image"
  >
</div>