範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小

<span class="ts-avatar">
<img src="user.png">
</span>
外觀
大頭貼在沒有圖片的時候也能夠用使用者的名稱縮寫替代。
YO
羽
<span class="ts-avatar is-text">
YO
</span>
<span class="ts-avatar is-text">
羽
</span>
將部份使用者以群組呈現。
+3
US


<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>
以不同的大小尺寸呈現頭貼。



<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>
在尋找相似的元件嗎?