Avatar Component
CSS-only Tailwind CSS avatar for profile images. Sizes xs–xl, group stacking, and online/offline status indicator. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Thành phần hình đại diện hiển thị hình ảnh hồ sơ người dùng hoặc tên viết tắt trong một vùng chứa nhỏ gọn, có thể tùy chỉnh. Được xây dựng bằng các thuộc tính tùy chỉnh CSS của Frutjam, hình đại diện đại diện cho người dùng, cộng tác viên hoặc thành viên nhóm trên giao diện của bạn. Hệ thống hình đại diện hỗ trợ hình ảnh và văn bản, nhiều kích cỡ, màu sắc, hình dạng, chỉ báo trạng thái, vòng tròn và sắp xếp nhóm—lý tưởng cho danh sách người dùng, nhận xét, hiển thị nhóm, phần hồ sơ và giao diện nhắn tin.
Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
| Lớp học | Kiểu | Sự miêu tả |
|---|---|---|
| avatar | Căn cứ | Vùng chứa hình đại diện hình tròn có tên viết tắt hoặc hình ảnh |
| avatar-group | Công cụ sửa đổi | Xếp chồng nhiều hình đại diện |
| avatar-ring | Công cụ sửa đổi | Thêm đường viền vòng màu xung quanh hình đại diện |
| avatar-circle | Phong cách | Hình tròn hoàn toàn (mặc định) |
| avatar-rounded | Phong cách | Hình chữ nhật bo tròn |
| avatar-square | Phong cách | Hình vuông không bo tròn |
| avatar-online | Phong cách | Chỉ báo trạng thái trực tuyến màu xanh lá cây |
| avatar-away | Phong cách | Chỉ báo trạng thái đi màu vàng |
| avatar-busy | Phong cách | Chỉ báo trạng thái bận màu đỏ |
| avatar-offline | Phong cách | Chỉ báo trạng thái ngoại tuyến màu xám |
| avatar-xs | Kích cỡ | Cực nhỏ |
| avatar-sm | Kích cỡ | Bé nhỏ |
| avatar-md | Kích cỡ | Trung bình (mặc định) |
| avatar-lg | Kích cỡ | Lớn |
| avatar-xl | Kích cỡ | Cực lớn |
| avatar-2xl | Kích cỡ | cực lớn gấp 2 lần |
| avatar-primary | Màu sắc | Màu chủ đề chính |
| avatar-secondary | Màu sắc | Màu chủ đề phụ |
| avatar-accent | Màu sắc | Màu chủ đề nhấn mạnh |
| avatar-neutral | Màu sắc | Màu chủ đề trung tính |
| avatar-info | Màu sắc | Màu sắc ngữ nghĩa thông tin |
| avatar-success | Màu sắc | Màu ngữ nghĩa thành công |
| avatar-warning | Màu sắc | Màu ngữ nghĩa cảnh báo |
| avatar-error | Màu sắc | Lỗi ngữ nghĩa màu sắc |
| avatar-ring-primary | Màu sắc | Nhẫn có màu cơ bản |
| avatar-ring-secondary | Màu sắc | Nhẫn có màu phụ |
| avatar-ring-accent | Màu sắc | Nhẫn có màu nhấn |
| avatar-ring-neutral | Màu sắc | Nhẫn màu trung tính |
| avatar-ring-info | Màu sắc | Đổ chuông màu thông tin |
| avatar-ring-success | Màu sắc | Nhẫn màu thành công |
| avatar-ring-warning | Màu sắc | Chuông có màu cảnh báo |
| avatar-ring-error | Màu sắc | Đổ chuông bị lỗi màu |
Cách sử dụng cơ bản
Tạo hình đại diện đơn giản với tên viết tắt hoặc màu sắc văn bản.
<div class="avatar">AB</div> |
<div className="avatar">AB</div> |
Avatar có hình ảnh
Hiển thị ảnh hồ sơ người dùng với tính năng tự động điều chỉnh hình ảnh và điều chỉnh kích thước đáp ứng.
1 2 3 4 5 6 7 8 9 10 11 | <div class="avatar avatar-sm"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=32&height=32&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-md"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=40&height=40&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-lg"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=56&height=56&face_crop=true" alt="Strawbery" loading="lazy" /> </div> |
Kích thước hình đại diện
Sử dụng các biến thể kích thước để chia tỷ lệ hình đại diện từ cực nhỏ (xs) đến lớn gấp 2 lần (2xl) cho các bối cảnh khác nhau.
1 2 3 4 5 6 | <div class="avatar avatar-xs avatar-primary">XS</div> <div class="avatar avatar-sm avatar-secondary">SM</div> <div class="avatar avatar-md avatar-accent">MD</div> <div class="avatar avatar-lg avatar-primary">LG</div> <div class="avatar avatar-xl avatar-secondary">XL</div> <div class="avatar avatar-2xl avatar-accent">2XL</div> |
Màu sắc hình đại diện
Áp dụng các biến thể màu sắc để phân biệt hình đại diện theo vai trò, nhóm hoặc trạng thái khi không sử dụng hình ảnh.
1 2 3 4 5 6 7 8 | <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> <div class="avatar avatar-md avatar-neutral">E</div> <div class="avatar avatar-md avatar-success">F</div> <div class="avatar avatar-md avatar-warning">G</div> <div class="avatar avatar-md avatar-error">H</div> |
Hình đại diện
Choose from circular (default), rounded, or square shapes to match your design system.
1 2 3 | <div class="avatar avatar-lg avatar-circle avatar-primary">●</div> <div class="avatar avatar-lg avatar-rounded avatar-secondary">◇</div> <div class="avatar avatar-lg avatar-square avatar-accent">■</div> |
Avatar with Initials
Display user initials for quick identification in lists, comment threads, and team sections.
1 2 3 4 | <div class="avatar avatar-sm avatar-primary">JD</div> <div class="avatar avatar-md avatar-secondary">AR</div> <div class="avatar avatar-lg avatar-accent">MS</div> <div class="avatar avatar-xl avatar-info">KL</div> |
Avatar with Status Indicator
Combine avatars with status badges to show user presence or availability (online, offline, busy, away).
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-online avatar-primary">JD</div> <div class="avatar avatar-md avatar-offline avatar-secondary">AR</div> <div class="avatar avatar-md avatar-busy avatar-accent">MS</div> <div class="avatar avatar-md avatar-away avatar-info">KL</div> |
Avatar with Ring Border
Add decorative rings around avatars for emphasis, status highlighting, or visual separation.
1 2 3 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-lg avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-xl avatar-ring avatar-ring-accent avatar-accent">C</div> |
Ring Color Variants
Choose ring colors independently from avatar background colors.
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-md avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-md avatar-ring avatar-ring-accent avatar-accent">C</div> <div class="avatar avatar-md avatar-ring avatar-ring-info avatar-info">D</div> <div class="avatar avatar-md avatar-ring avatar-ring-success avatar-success">E</div> <div class="avatar avatar-md avatar-ring avatar-ring-warning avatar-warning">F</div> <div class="avatar avatar-md avatar-ring avatar-ring-error avatar-error">G</div> |
Avatar Group
Stack multiple avatars with automatic negative margin for overlapping display of team members and collaborators.
1 2 3 4 5 6 | <div class="avatar-group"> <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> </div> |
Avatar Group with Different Sizes
Combine multiple sizes within a group for visual hierarchy.
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-sm avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-lg avatar-accent">C</div> </div> |
Avatar Group with Status
Show availability status for each member in a team group.
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-md avatar-online avatar-primary">A</div> <div class="avatar avatar-md avatar-offline avatar-secondary">B</div> <div class="avatar avatar-md avatar-busy avatar-accent">C</div> </div> |
Combined Variants
Mix and match size, color, shape, status, and ring modifiers for complex avatar displays.
1 2 3 4 5 | <div class="avatar avatar-xl avatar-rounded avatar-ring avatar-ring-success avatar-success avatar-online">SK</div> <div class="avatar avatar-lg avatar-square avatar-ring avatar-ring-primary avatar-primary">AB</div> <div class="avatar avatar-2xl avatar-circle avatar-ring avatar-ring-error avatar-error avatar-busy">MR</div> |