ДокументацияРазделы, компоненты, системы и их подразделы
Аватары
Идентификация людей и объектов
Data Display
Аватар даёт объекту узнаваемое лицо
Используйте изображение, инициалы или короткий fallback для человека, команды и проекта. Аватар помогает распознать объект, но не заменяет его имя.
Изображение и инициалы
Если изображение может отсутствовать или не загрузиться, приложение должно подготовить понятный fallback с инициалами.
.ox-avatar img
АС
.ox-avatar
AT
fallback
HTMLСодержимое
<span class="ox-avatar">
<img src="/user.jpg" alt="Анна Смирнова">
</span>
<span class="ox-avatar" role="img" aria-label="Анна Смирнова">
АС
</span>Три размера
Средний размер используется по умолчанию. Small подходит плотным спискам, large — профилю и выраженной идентичности.
АС
.ox-avatar-smАС
.ox-avatarАС
.ox-avatar-lgСтатус присутствия
Базовый status показывает положительное состояние. Warning и danger меняют цвет индикатора, но смысл всегда нужно продублировать текстом.
АС
.ox-avatar-statusВ сетиМО
.ox-avatar-status-warningОтошёлОВ
.ox-avatar-status-dangerНедоступнаГруппа участников
Перекрытие экономит место. Последний элемент может показывать количество участников, которые не поместились в видимую группу.
АС
МО
ОВ
+3
.ox-avatar-group
Имя остаётся обязательным
Скринридер должен получить имя объекта, а пользователь — увидеть его рядом с аватаром в важных сценариях.
alt="Анна Смирнова"Используйте содержательный alt, когда изображение само идентифицирует человека.role="img" + aria-labelДаёт доступное имя аватару, построенному на инициалах.ox-avatar-statusЦветная точка декоративна: состояние повторяется текстом или в aria-label.Имя рядомВ профиле, таблице или списке не полагайтесь только на фотографию.