Avatar

A representative image of a person.
Example
Theme
Default
Default
Light
Dark
Scale
Medium
Large
Medium
Small
An unimportant image placeholder for demonstration
<span class="ts-avatar">
    <img src="user.png">
</span>
Variations
Text

It is possible to use name abbreviation instead when there is no user picture.

YO
<span class="ts-avatar is-text">
    YO
</span>
<span class="ts-avatar is-text"></span>
Circular

Presents a circular Avatar.

An unimportant image placeholder for demonstration
<span class="ts-avatar is-circular">
    <img src="user.png">
</span>
Bordered

Draws a border if it is hard to tell the edge of the picture.

An unimportant image placeholder for demonstration
<span class="ts-avatar is-bordered">
    <img src="user.png">
</span>
Group

Displays a group of the Avatars.

+3 An unimportant image placeholder for demonstration US An unimportant image placeholder for demonstration
<span class="ts-avatar is-group">
    <span class="ts-avatar is-circular is-text">
        +3
    </span>
    <span class="ts-avatar">
        <img src="user.png">
    </span>
    <span class="ts-avatar is-text">
        US
    </span>
    <span class="ts-avatar">
        <img src="user.png">
    </span>
</span>
Sizes

Different sizes of the pictures.

An unimportant image placeholder for demonstration An unimportant image placeholder for demonstration An unimportant image placeholder for demonstration
<span class="ts-avatar is-small">
    <img src="user.png">
</span>
<span class="ts-avatar">
    <img src="user.png">
</span>
<span class="ts-avatar is-large">
    <img src="user.png">
</span>
Looking for similar components?
Designed by Yami Odymel from Taiwan with the love of the contributors ❤️. The source code is licensed under MIT and the documents are CC 0 public domain. Tocas UI is a design language of Caris Events, which is owned by Sorae & Co.
Translators: Yami Odymel
An organization brand logo that owns Tocas UI