Avatar & List

Avatar

Avatar คือรูปประจำตัว (หรือตัวอักษรย่อ) ขนาดกลม border-radius: 9999px — ใช้ตัวอักษรย่อเมื่อไม่มีรูปจริง โดยมี 5 ขนาดมาตรฐาน

ขนาด (Avatar sizes)

token	ขนาด	ฟอนต์ตัวอักษรย่อ
avatar.sizes.xs	24px	10px
avatar.sizes.sm	32px	12px
avatar.sizes.md	40px	14px
avatar.sizes.lg	48px	16px
avatar.sizes.xl	64px	20px

Avatar 5 ขนาด · พื้นแบรนด์

PP

xs·24

PP

sm·32

PP

md·40

PP

lg·48

PP

xl·64

สีพื้นหลัง (Avatar variants)

รูปแบบ	พื้นหลัง	ตัวอักษร	ใช้เมื่อ
Brand	#FF6727	#FFFFFF	ผู้ใช้หลัก / คนแรกในกลุ่ม
Neutral	#EBECF0	#63666F	บุคคลทั่วไป / รอรูปจริง
Success	#C8F2DD	#0F6A46	สถานะบวก เช่น Active user
Warning	#FFE9A8	#9A7000	สถานะรอ / pending
Outline (user icon)	#FFFFFF	#989AA5 + border #C9CAD4	ยังไม่มีข้อมูล / anonymous

Avatar variants จริง

PP

BG

TK

AR

👤

ตัวบ่งชี้สถานะ (Online indicator)

dot สถานะวางมุมขวาล่างของ avatar — online-color #22A06B / away-color #D4A017 / offline-color #C9CAD4 · ขนาด dot 10px (avatar.online-dot-size)

Online / Away / Offline

PP

BG

TK

online #22A06B · away #D4A017 · offline #C9CAD4 — dot มี border ขาว 2px เสมอเพื่อแยกจากพื้น

Avatar group

หลายคนรวมกันให้ ซ้อนทับกัน ด้วย offset -8px (avatar.group-offset) — ผู้ที่เหลือเกิน 4 คนแสดงเป็น +N ด้วยพื้น neutral

Avatar group

PP

BG

TK

AR

+3

กลุ่มสีใช้ 600 ของแต่ละชุด: brand #FF6727, grey #63666F, success #22A06B, warning #D4A017 — ทับกัน -8px มี border ขาว 2px

List items

List item คือแถวรายการ ประกอบด้วย avatar + ชื่อ + รายละเอียดรอง + องค์ประกอบท้ายแถว (tag/chevron) — กรอบ border: 1px solid #EBECF0 · border-radius: 10px

List item จริง

PP

Panupong Phetcharat

panupong.p@bgrimmpower.com

Active

BG

B.Grimm Power

Energy Business Unit

→

TK

Thanakit K.

Digital Transformation

Pending

ชื่อ #22242A 600 · รายละเอียดรอง #989AA5 12px · ท้ายแถวใช้ tag สถานะหรือ chevron #989AA5 — ตาม bgrimm-design-preview_5.html

โครงสร้าง

ส่วน	ค่า
avatar	ขนาด md (40px) ตามปกติ / xs ในตาราง
ชื่อหลัก	#22242A · 14px · weight 600
รายละเอียดรอง	#989AA5 · 12px
ท้ายแถว	tag สถานะ หรือ chevron → #989AA5
ระยะระหว่างแถว	padding: 10px 14px · คั่น border-bottom: 1px solid #EBECF0

กติกา

• ห้ามใส่รูปจริงที่ไม่ผ่านอนุมัติลง avatar — ใช้ตัวอักษรย่อ (2 ตัว) หรือ icon คนแทน
• avatar ตัวอักษรย่อ: ใช้ตัวแรกของชื่อ + นามสกุล (PP, BG, TK) — ไม่ใช้ชื่อกลาง
• focus state สำหรับ avatar ที่เป็นลิงก์/ปุ่มต้องมองเห็นชัด (outline: 2px solid #FF6727)
• list item ที่คลิกได้: พื้น hover #FCFEFF และมี cursor: pointer + aria ที่ถูกต้อง

Token ครบชุดอยู่ใน bgrimm.tokens.json → component.avatar