Avatar

Neu in Bootstrap v6.0.0

Avatare stellen Personen oder Objekte dar – als Bild oder, als Ersatz, mit Initialen.

Bootstrap 6 bringt dafür eine eigene Komponente mit. Der Wrapper .avatar nimmt ein Bild oder Text auf und bietet Platz für Zusatzfunktionen wie Statusanzeigen. Mehrere Avatare lassen sich zu einem überlappenden Stapel gruppieren.

  • Bild oder Initialen:.avatar-img für Fotos, Text für Kürzel – in allen Themenfarben, auch dezent mit .avatar-subtle.
  • Fünf Größen: von .avatar-xs bis .avatar-xl, frei über --bs-avatar-size.
  • Status: Online, Offline, Beschäftigt und Abwesend mit eigener Form und Farbe.
  • Stapel:.avatar-stack gruppiert Avatare, auch mit Zähler für weitere Personen.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Beispiele

Ein Avatar zeigt entweder ein Bild oder ersatzweise Initialen.

Bild

Für Bild-Avatare kombinierst du .avatar mit einem .avatar-img. Der Wrapper erleichtert Erweiterungen wie Statusanzeigen oder Stapel. Brauchst du nur ein einzelnes Element, reicht .avatar-img allein.

mdo
<span class="avatar">
  <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>

Im Wrapper füllt das Bild die Fläche aus, die Größe kommt aus --avatar-size. Ohne Wrapper richtet sich .avatar-img nach seinen eigenen Attributen width und height – setze sie also auf die gewünschte Größe.

mdo
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo" width="50" height="50">

Initialen

Steht Text in .avatar, entsteht ein Initialen-Avatar. Mit .theme-{farbe} wählst du die Farbe.

ABCDEFGGGHIJKLMNOP
<span class="avatar">AB</span>
<span class="avatar theme-primary">CD</span>
<span class="avatar theme-accent">EF</span>
<span class="avatar theme-success">GG</span>
<span class="avatar theme-danger">GH</span>
<span class="avatar theme-warning">IJ</span>
<span class="avatar theme-info">KL</span>
<span class="avatar theme-inverse">MN</span>
<span class="avatar theme-secondary">OP</span>

Mit .avatar-subtle wird der Avatar dezenter eingefärbt.

ABCDEFGGGHIJKLMNOP
<span class="avatar">AB</span>
<span class="avatar avatar-subtle theme-primary">CD</span>
<span class="avatar avatar-subtle theme-accent">EF</span>
<span class="avatar avatar-subtle theme-success">GG</span>
<span class="avatar avatar-subtle theme-danger">GH</span>
<span class="avatar avatar-subtle theme-warning">IJ</span>
<span class="avatar avatar-subtle theme-info">KL</span>
<span class="avatar avatar-subtle theme-inverse">MN</span>
<span class="avatar avatar-subtle theme-secondary">OP</span>

Größen

Es gibt fünf Größen: sehr klein, klein, Standard, groß und sehr groß.

mdomdomdomdomdo
<span class="avatar avatar-xs">
  <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar avatar-sm">
  <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
  <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar avatar-lg">
  <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar avatar-xl">
  <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>

Eine freie Größe setzt du über die Variable --bs-avatar-size.

mdo
<span class="avatar" style="--bs-avatar-size: 8rem;">
  <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>

Statusanzeige

Ein .avatar-status-Element im Avatar zeigt den Status an. Jeder Status hat eine eigene Form und Farbe:

  • .status-online – grüner Kreis
  • .status-offline – graues, abgerundetes Quadrat
  • .status-busy – rotes, abgerundetes Quadrat
  • .status-away – gelber Kreis

Da der Status nur über Farbe und Form vermittelt wird, braucht jedes .avatar-status ein role="img" und ein aria-label, damit Hilfstechnologien ihn ansagen können.

mdomdomdomdo
<span class="avatar">
  <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  <span class="avatar-status status-online" role="img" aria-label="Online"></span>
</span>
<span class="avatar">
  <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  <span class="avatar-status status-offline" role="img" aria-label="Offline"></span>
</span>
<span class="avatar">
  <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  <span class="avatar-status status-busy" role="img" aria-label="Beschäftigt"></span>
</span>
<span class="avatar">
  <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  <span class="avatar-status status-away" role="img" aria-label="Abwesend"></span>
</span>

Status in verschiedenen Größen

Die Statusanzeige wächst mit der Avatar-Größe mit.

mdomdomdomdomdo
<span class="avatar avatar-xs">
  <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  <span class="avatar-status status-online" role="img" aria-label="Online"></span>
</span>
<span class="avatar avatar-sm">
  <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  <span class="avatar-status status-online" role="img" aria-label="Online"></span>
</span>
<span class="avatar">
  <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  <span class="avatar-status status-online" role="img" aria-label="Online"></span>
</span>
<span class="avatar avatar-lg">
  <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  <span class="avatar-status status-online" role="img" aria-label="Online"></span>
</span>
<span class="avatar avatar-xl">
  <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  <span class="avatar-status status-online" role="img" aria-label="Online"></span>
</span>

Avatar-Stapel

.avatar-stack fasst mehrere Avatare überlappend zusammen. Die Avatare werden in umgekehrter Reihenfolge gezeichnet, der erste liegt also oben. Wie stark sie sich überlappen, hängt prozentual von der Avatar-Größe ab.

mdomdomdomdomdo
<div class="avatar-stack">
  <span class="avatar">
    <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  </span>
</div>

Stapel in verschiedenen Größen

Als Kurzform gibt es die Größenklassen auch für .avatar-stack, z. B. .avatar-stack-sm oder .avatar-stack-xl.

mdomdomdo
mdomdomdo
mdomdomdo
mdomdomdo
mdomdomdo
<div class="avatar-stack avatar-stack-xs">
  <span class="avatar">
    <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  </span>
  <!-- … -->
</div>

<div class="avatar-stack avatar-stack-sm">…</div>
<div class="avatar-stack">…</div>
<div class="avatar-stack avatar-stack-lg">…</div>
<div class="avatar-stack avatar-stack-xl">…</div>

Stapel mit Zähler

Ein Initialen-Avatar am Ende zeigt an, wie viele weitere Personen dazugehören.

mdomdomdo+5
<div class="avatar-stack">
  <span class="avatar">
    <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  </span>
  <span class="avatar theme-secondary">+5</span>
</div>
mdomdomdo+5
<div class="avatar-stack avatar-stack-xl">
  <span class="avatar">
    <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
  </span>
  <span class="avatar theme-secondary">+5</span>
</div>

CSS-Variablen, Sass-Tokens und die Sass-Map $avatar-sizes findest du in der Originaldokumentation.