Avatar

Os avatares são imagens utilizadas para identificar os usuários. Eles podem ser únicos ou agrupados.

Único

O avatar único pode ser usado em listagens, cards ou em conjunto com qualquer outro elemento que o necessite.

Exemplo

Vanilla

<img class="avatar size-2" src="/foto.jpg" />

React

<b-avatar src="/foto.jpg" variant="light" size="2.25rem"></b-avatar>

Vue

<img className="avatar size-2" src="/foto.jpg" alt="Avatar" />

Agrupados

Avatares agrupados podem ser usados para identificar grupos de usuários rapidamente.

Exemplo

Vanilla

<div class="d-block pr-2">
    <div class="d-inline-block mr-n2">
        <img class="rounded-circle size-2 border" src="/foto.jpg" alt="Avatar"/> 
    </div>
    <div class="d-inline-block mr-n2">
        <img class="rounded-circle size-2 border" src="/foto.jpg" alt="Avatar"/>  
    </div>
    <div class="d-inline-block mr-n2">
        <img class="rounded-circle size-2 border" src="/foto.jpg" alt="Avatar"/> 
    </div>
    <div class="d-inline-block mr-n2">
        <img class="rounded-circle size-2 border" src="/foto.jpg" alt="Avatar"/> 
    </div>
    <div class="d-inline-block mr-n2">
        <img class="rounded-circle size-2 border" src="/foto.jpg" alt="Avatar"/> 
    </div>
</div>

React

<b-avatar-group size="2.25rem">
  <b-avatar src="/foto.jpg" variant="light"></b-avatar>
  <b-avatar src="/foto.jpg" variant="light"></b-avatar>
  <b-avatar src="/foto.jpg" variant="light"></b-avatar>
  <b-avatar src="/foto.jpg" variant="light"></b-avatar>
  <b-avatar src="/foto.jpg" variant="light"></b-avatar>
</b-avatar-group>

Vue

<div className="d-block pr-2">
    <div className="d-inline-block mr-n2">
        <img className="rounded-circle size-2 border" src="https://picsum.photos/id/231/200" alt="Avatar"/> 
    </div>
    <div className="d-inline-block mr-n2">
        <img className="rounded-circle size-2 border" src="https://picsum.photos/id/232/200" alt="Avatar"/>  
    </div>
    <div className="d-inline-block mr-n2">
        <img className="rounded-circle size-2 border" src="https://picsum.photos/id/233/200" alt="Avatar"/> 
    </div>
    <div className="d-inline-block mr-n2">
        <img className="rounded-circle size-2 border" src="https://picsum.photos/id/234/200" alt="Avatar"/> 
    </div>
    <div className="d-inline-block mr-n2">
        <img className="rounded-circle size-2 border" src="https://picsum.photos/id/235/200" alt="Avatar"/> 
    </div>
</div>

Veja todos os tamanhos de avatares disponíveis em Classes extras.

O uso da estrutura acima requer a instalação das bibliotecas descritas em Tema para Bootstrap 4.