Uihub

Appearance

Avatar ​

Usage ​

See design usage guidelines

Avatars are user interface (UI) elements that display textual or visual content to represent a user’s identity.

Examples ​

Picture Avatar ​

Solid ​

html
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="small-avatar" alt="" srcset="">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="avatar" alt="" srcset="">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="large-avatar" alt="" srcset="">

Outlined ​

html
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="small-avatar avatar-outlined" alt="" srcset="">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="avatar avatar-outlined" alt="" srcset="">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="large-avatar avatar-outlined" alt="" srcset="">

Icon Avatar ​

Solid ​

useruseruser
html
<span class="u-icon u-icon-16">user</span>
<span class="u-icon u-icon-24">user</span>
<span class="u-icon u-icon-32">user</span>

Outlined ​

useruseruser
html
<span class="u-icon u-icon-16 avatar-outlined">user</span>
<span class="u-icon u-icon-24 avatar-outlined">user</span>
<span class="u-icon u-icon-32 avatar-outlined">user</span>

Text Avatar ​

Solid ​

GPGPGP
html
<span class="small-avatar-text">GP</span>
<span class="avatar-text">GP</span>
<span class="large-avatar-text">GP</span>

Outlined ​

GPGPGP
html
<span class="small-avatar-text avatar-outlined">GP</span>
<span class="avatar-text avatar-outlined">GP</span>
<span class="large-avatar-text avatar-outlined">GP</span>

Usage Guidelines ​