// .avatar--xs / --sm / výchozí / --lg / --xl

Velikosti

Pět přednastavených velikostí – xs (24), sm (32), md (40), lg (56), xl (80 px).

S fotografií
// .avatar--green / --red / --blue / --grey / --square

Iniciály & barvy

Avatar s textovými iniciálami v barevném pozadí. Čtvercová varianta .avatar--square.

Iniciály
JN
MK
TV
PB
AD
// .avatar--online / --away / --offline

Status badge

Barevná tečka v pravém dolním rohu indikuje přítomnost uživatele.

Online / Away / Offline
online
away
offline
// .avatar-group / .avatar--more

Avatar skupina

Překrývající se avatary pro zobrazení týmu nebo účastníků. .avatar--more zobrazuje přebytek.

Skupiny
+5
Výchozí (40px)
JN
MK
+12
Velká (56px)
// .info-panel / __image / __body / __title / __desc / __meta / __price

Profile info

Samostatný řádek profilu – avatar + jméno + popis + volitelná hodnota napravo. Třída .info-panel z _info_panel.scss. Vhodné jako záhlaví uživatele v kartě recenze nebo výpisu.

Základní – jméno + email + meta
Jan Novák
jan@example.cz
Admin
S cenou napravo + badge v nadpisu
Petr Novák Top
petr@example.cz
1 500 Kč/h
Bez avataru – jen body + meta
Jana Horáková
jana@example.cz
Redaktor