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.
Komponenty awatara wyświetlają obrazy profili użytkowników lub inicjały w kompaktowym, konfigurowalnym pojemniku. Zbudowane na podstawie niestandardowych właściwości CSS Frutjam, awatary reprezentują użytkowników, współpracowników lub członków zespołu w całym interfejsie. System awatarów obsługuje obrazy i tekst, wiele rozmiarów, kolorów, kształtów, wskaźników stanu, pierścieni i układów grupowych — idealnie nadaje się do list użytkowników, komentarzy, ekranów zespołów, sekcji profili i interfejsów wiadomości.
Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
| Klasa | Typ | Opis |
|---|---|---|
| avatar | Opierać | Okrągły pojemnik na awatar z inicjałami lub obrazem |
| avatar-group | Modyfikator | Nakładający się stos wielu awatarów |
| avatar-ring | Modyfikator | Dodaje kolorową ramkę wokół awatara |
| avatar-circle | Styl | Całkowicie okrągły kształt (domyślnie) |
| avatar-rounded | Styl | Zaokrąglony kształt prostokąta |
| avatar-square | Styl | Kwadratowy kształt bez zaokrągleń |
| avatar-online | Styl | Zielony wskaźnik stanu online |
| avatar-away | Styl | Żółty wskaźnik stanu nieobecności |
| avatar-busy | Styl | Czerwony wskaźnik stanu zajętości |
| avatar-offline | Styl | Szary wskaźnik stanu offline |
| avatar-xs | Rozmiar | Bardzo mały |
| avatar-sm | Rozmiar | Mały |
| avatar-md | Rozmiar | Średni (domyślny) |
| avatar-lg | Rozmiar | Duży |
| avatar-xl | Rozmiar | Bardzo duży |
| avatar-2xl | Rozmiar | 2x bardzo duży |
| avatar-primary | Kolor | Podstawowy kolor motywu |
| avatar-secondary | Kolor | Kolor motywu drugorzędnego |
| avatar-accent | Kolor | Kolor motywu akcentującego |
| avatar-neutral | Kolor | Neutralny kolor motywu |
| avatar-info | Kolor | Kolor semantyczny informacji |
| avatar-success | Kolor | Sukces semantyczny kolor |
| avatar-warning | Kolor | Ostrzeżenie kolor semantyczny |
| avatar-error | Kolor | Błąd koloru semantycznego |
| avatar-ring-primary | Kolor | Pierścionek w kolorze podstawowym |
| avatar-ring-secondary | Kolor | Pierścionek w kolorze wtórnym |
| avatar-ring-accent | Kolor | Pierścionek w akcentującym kolorze |
| avatar-ring-neutral | Kolor | Pierścionek w neutralnym kolorze |
| avatar-ring-info | Kolor | Pierścionek w kolorze informacyjnym |
| avatar-ring-success | Kolor | Pierścionek w kolorze sukcesu |
| avatar-ring-warning | Kolor | Pierścień w kolorze ostrzegawczym |
| avatar-ring-error | Kolor | Pierścień w kolorze błędu |
Podstawowe użycie
Twórz proste awatary za pomocą inicjałów tekstowych lub kolorów.
<div class="avatar">AB</div> |
<div className="avatar">AB</div> |
Awatar z obrazami
Wyświetlaj zdjęcia profilowe użytkowników z automatycznym dopasowywaniem obrazu i responsywnym rozmiarem.
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> |
Rozmiary awatarów
Użyj wariantów rozmiaru, aby skalować awatary od bardzo małych (xs) do 2x dużych (2xl) dla różnych kontekstów.
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> |
Kolory awatara
Zastosuj warianty kolorów, aby rozróżnić awatary według roli, zespołu lub statusu, gdy nie używasz obrazów.
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> |
Kształty awatarów
Wybieraj spośród okrągłych (domyślnych), zaokrąglonych lub kwadratowych kształtów, aby dopasować je do swojego systemu projektowania.
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> |
Awatar z inicjałami
Wyświetlaj inicjały użytkowników w celu szybkiej identyfikacji na listach, wątkach komentarzy i sekcjach zespołu.
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> |
Awatar ze wskaźnikiem stanu
Połącz awatary z plakietkami stanu, aby pokazać obecność lub dostępność użytkownika (online, offline, zajęty, nieobecny).
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> |
Awatar z obramowaniem pierścienia
Dodaj dekoracyjne pierścienie wokół awatarów, aby podkreślić, podkreślić status lub wizualnie oddzielić.
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> |
Warianty kolorów pierścionka
Wybierz kolory pierścieni niezależnie od kolorów tła awatara.
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> |
Grupa Awatarów
Układaj wiele awatarów z automatycznym marginesem ujemnym w celu nakładania się wyświetlania członków zespołu i współpracowników.
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> |
Grupa awatarów o różnych rozmiarach
Połącz wiele rozmiarów w grupie, aby uzyskać hierarchię wizualną.
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> |
Grupa awatarów ze statusem
Pokaż stan dostępności dla każdego członka w grupie zespołu.
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> |
Połączone warianty
Mieszaj i dopasowuj rozmiar, kolor, kształt, status i modyfikatory pierścieniowe, aby uzyskać złożone wyświetlanie awatarów.
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> |