Avatar

.avatar 可直接用於 <img class="avatar"> 或是 <div class="avatar">,建議使用 <div class="avatar">。Avatar 初始寬度為 100%,建議使用正方形。可指定大小。

使用 <img>

米漿
<img class="avatar" src="{img path}">

使用 <div> 時,<div>是作為容器的存在,需要配置一個 .avatar_obj 作為圖片顯示的媒介:

<div class="avatar"> <span class="avatar_obj" style="background-image: url({img path})"></span> </div>

當圖片為空值,請移除 <span class="avatar_obj">

<div class="avatar"></div>

尺寸 Sizes

頭像的尺寸總共有 6 種,請見以下表格。

尺寸 圓角
sz:xs 24px 3px
sz:sm 48px 6px
sz:md 64px 8px
sz:lg 96px 12px
sz:xl 128px 16px
sz:xxl 160px 20px
<div class="avatar sz:xs"></div> <div class="avatar sz:sm"></div> <div class="avatar sz:md"></div> <div class="avatar sz:lg"></div> <div class="avatar sz:xl"></div> <div class="avatar sz:xxl"></div>

Square

若想維持正方形,可在 .avatar 加上 :square。同時可搭配上述六種尺寸。

<div class="avatar :square"></div>

使用文字

當圖片尚未上傳,可保留空值也可以使用第一個文字或字母,只需要在 .avatar_obj 內加入文字就能使用。

<div class="avatar"> <span class="avatar_obj">{TEXT}</span> </div>

使用 Icon

作法與上述相同,只需要將 Icon 放入 .avatar_obj 內即可。

<div class="avatar"> <span class="avatar_obj"> <i class="icon fab fa-android"> </span> </div>

配色

Avatar 除了預設之外還有四個基本色,如果有另外掛載 Lazy colour 則可以有更多選擇。

基本色

P
.clr:primary
S
.clr:secondary
D
.clr:dark
L
.clr:light
<div class="avatar clr:primary"></div> <div class="avatar clr:secondary"></div> <div class="avatar clr:dark"></div> <div class="avatar clr:light"></div>

色票群

.avatar 加上 .clr:*

r
.clr:red
o
.clr:orange
f
.clr:fire
y
.clr:yellow
o
.clr:olive
s
.clr:sapphire
c
.clr:cyan
m
.clr:magenta
b
.clr:bone
s
.clr:silver
m
.clr:momo
r
.clr:rosewood
s
.clr:skin
c
.clr:chartreuse
g
.clr:green
a
.clr:aegean
b
.clr:blue
v
.clr:violet
b
.clr:brown
g
.clr:gray

品牌 CI 配色

.avatar 加上 .tbc:*

y
.tbc:youtube
g
.tbc:googleplus
p
.tbc:pinterest
w
.tbc:weibo
r
.tbc:rss
s
.tbc:snapchat
w
.tbc:whatsapp
w
.tbc:wechat
l
.tbc:line
s
.tbc:slack
t
.tbc:tumblr
b
.tbc:behance
m
.tbc:messager
s
.tbc:skype
d
.tbc:dropbox
v
.tbc:viemo
t
.tbc:twitter
l
.tbc:linkedin
f
.tbc:facebook
v
.tbc:vk
p
.tbc:paypal
y
.tbc:yahoo

陰影

.avatar 加上 .:shadow

K