Avatar アバター · kf-avatar
人を表す丸。頭文字か写真。
HTML
<div class="kf-row" id="a"></div>
<script>
document.getElementById('a').innerHTML =
Kafune.avatarHtml({ name: 'Aoba', size: 'sm' }) + Kafune.avatarHtml({ name: '佐藤' }) + Kafune.avatarHtml({ name: 'Kei F', size: 'lg' }) +
'<span class="kf-row" style="gap:8px">' + Kafune.avatarHtml({ name: '佐藤' }) + '<span>佐藤</span></span>';
</script>span.kf-avatarに頭文字 1〜2 文字。Kafune.avatarHtml({ name, size })が頭文字を切り出す(英字は最初の 2 語の頭、日本語は先頭 1 字)。- 大きさは 28px(既定)、
kf-avatar-sm22px、kf-avatar-lg40px。 - 地は
accent-soft、文字はink-strong。人ごとに色を変えない。 - 写真を使うなら中に
img。alt は名前。 - 名前を省いてアバターだけにしない。横に名前を置くか、
titleを付ける。