Unito.it

Tema Unito v 3 / 3.1

Avatar

L’elemento Avatar è la rappresentazione grafica di un utente e può includere un’immagine, un testo, un’icona o un dropdown con ulteriori contenuti.

Esempio

Gli Avatar sono disponibili in sei diverse dimensioni:

  • xs con classe size-xs
  • sm con classe size-sm
  • md (dimensioni di default) size-md
  • lg con classe size-lg
  • xl con classe size-xl
  • xxl con classe size-xxl

Per ottenere un elemento grafico non interattivo, utilizzare il tag <div>. Ogni Avatar può essere associato ad un’azione, utilizzando per esso il tag <a>.

Luisa Neri
Gioacchino Romani
Anna Barbieri
Anna Barbieri 
<div class="d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap">
  <div class="avatar size-sm">
    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Luisa Neri">
  </div>
  <div class="avatar">
    <img src="https://randomuser.me/api/portraits/men/43.jpg" alt="Gioacchino Romani">
  </div>
  <div class="avatar size-lg">
    <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri">
  </div>
  <a class="avatar size-xl" href="#">
    <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Anna Barbieri">
  </a>
</div>

Avatar con testo aggiuntivo

Per ottenere una versione più completa dell’Avatar con nome esteso ed eventuale testo accessorio racchiudere l’Avatar all’interno di un contenitore .avatar-wrapper con classe .avatar-extra-text e aggiungere il testo esteso in un <div> con classe .extra-text.

Per il nome è possibile utilizzare i tag <h3> o <h4>. Il testo esteso può essere contenuto in un <p> o in un tag <time> nel caso di date/orari.


Mario Rossi

Mario Rossi

Giulia Neri

Giulia Neri

Lorem ipsum dolor

Michele Dotti

Michele Dotti

<div class="d-flex align-items-center justify-content-start justify-content-md-around flex-wrap flex-sm-nowrap">
  <div class="avatar-wrapper avatar-extra-text">
    <div class="avatar size-xl">
      <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Mario Rossi">
    </div>
    <div class="extra-text">
      <h4><a href="#">Mario Rossi</a></h4>
      <time datetime="2018-09-15">15 Set 2018</time>
    </div>
  </div>
  <div class="avatar-wrapper avatar-extra-text">
    <div class="avatar size-xl">
      <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Giulia Neri">
    </div>
    <div class="extra-text">
      <h4>Giulia Neri</h4>
      <p>Lorem ipsum dolor</p>
    </div>
  </div>
  <div class="avatar-wrapper avatar-extra-text">
    <div class="avatar size-xl">
      <img src="https://randomuser.me/api/portraits/men/15.jpg" alt="Michele Dotti">
    </div>
    <div class="extra-text">
      <h4><a href="#">Michele Dotti</a></h4>
      <time datetime="2018-05-12">12 Mag 2018</time>
    </div>
  </div>
</div>
Torna su