Notifications
Figma
Storybook
There is no design without discipline. There is no discipline without intelligence.There is no design without discipline. There is no discipline without intelligence.There is no design without discipline. There is no discipline without intelligence.There is no design without discipline. There is no discipline without intelligence.
Notifications (Уведомления) — это элемент дизайн-системы, который показывает пользователю информацию об изменении состояния в системе.
Существует четыре основных вида уведомлений: уведомление-информирование, уведомление-предупреждение, уведомление-ожидание, уведомление-подтверждение.
Размер
Карточку профиля можно использовать как на светлом фоне (Day), так и на темном (Night)
Темы
Карточку профиля можно использовать как на светлом фоне (Day), так и на темном (Night)
Виды
Карточку профиля можно использовать как на светлом фоне (Day), так и на темном (Night)
Форматирование
Анатомия:
  • Аватар
  • Имя Фамилия
  • Должность
  • Контакты
Содержание
Аватар:
  • Два вида на выбор: иконка или фото
  • С обоводкой и без

Текстовые элементы:
  • Фамилия Имя (Обязательно)
  • Должность / Роль (Необязательно)
  • Контакты: номер телефона (необязательно), почта (необязательно), гео (необязательно)

Иконки контактов:
  • Обязательно присутствие в горизонтальной и вертикальной версиях
Когда использовать
Может использоваться, как карточка персоны в блоках «Персоналии» на сайтах или, как карточка профиля в веб-приложениях, мессенджерах и почте
Поведение
  • Элемент не имеет поведения при нажатии или наведении курсора мыши.
  • Элемент не может быть перекрыт другим уведомлением. Каждое уведомление добавляется выше или ниже предыдущего.
  • Уведомления, находящиеся в модальных окнах или сайдпейджах, могут растягиваться по всей ширине родительского контейнера.
Overflow content
  • При скролле экрана уведомления закрепляются на своём месте.
  • Уведомление не может выходить за видимую область интерфейса. Скролл в подобных случаях невозможен.
  • Если уведомление растягиваются по ширине всех колонок, тогда оно центрируется по центру с соответствующими отступами.