Profile
Profile — карточка персоны / профиля пользователя. Компонент состоит из аватара и текстового блока. Аватар имеет вариации по форме, размеру и наличию фотографии. Карточка может использоваться в двух ориентациях.
Figma
Темы
Карточку профиля можно использовать как на светлом фоне (Day), так и на темном (Night)
Виды аватара профиля
Аватар отличается по:
  1. Форме
  2. Наличию обводки
  3. Наличию фотографии
Форма аватара
Base
Brick
Round
Форма аватара
Base
Brick
Round
С обводкой и без обводки
No stroke
Stroke
С обводкой и без обводки
No stroke
Stroke
С иконкой и фотографией
Photo
Icon
С иконкой и фотографией
Photo
Icon
Размеры карточки персоны
У карточки персоны есть четыре размера: L, M, S, XS
XS
S
M
L
XS
S
M
L
Ориентация
У карточки персоны есть два положения текстового блока: горизонтальное и вертикальное
Выравнивание
Выравнивание текстового блока относительно аватара для горизонтальной ориентации: top и center
Center
Top
Center
Top
Форматирование
Анатомия:
  1. Аватар
  2. Имя Фамилия
  3. Должность
  4. Контакты
Содержание
Аватар:
  • Два вида на выбор: иконка или фото
  • С обоводкой и без

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

Иконки контактов:
  • Обязательно присутствие в горизонтальной и вертикальной версиях
Когда использовать
Может использоваться, как карточка персоны в блоках «Персоналии» на сайтах или, как карточка профиля в веб-приложениях, мессенджерах и почте
Поведение
Profile имеет четыре варианта размеров (L, M, S, XS), две ориентации (Vertical, Horizontal), светлую и темную версии.
Горизонтальный Profile имеет два типа выравнивания: по верхней границе и по центру.
Не может быть использован без элемента «Аватар».
Не может быть использован без элемента «Фамилия Имя».
Может быть использован без элементов «Должность» и «Контакты».
Может быть использован как с подложкой, так и без. Размер подложки, ее цвет и отступы не имеют жестких требований и устанавливаются исходя из контекста. Но при отсутствии подложки размер изображения должен быть такой же, как и с подложкой.
Цвет иконок можно выбрать.
Overflow content
В мобильной версии предпочтительнее вариант вертикальной ориентации. В случае использования горизонтальной ориентации появляется горизонтальный скролл.
Элемент не имеет фиксированной ширины / высоты (подбираются исходя из контекста).