Figma: https://www.figma.com/file/7kl4eBgLcnK6OYgM01XVig/Patterns?node-id=1%3A1036

Небольшой, но достаточно часто встречающийся интерфейсный паттерн, который ставит графический элемент рядом с текстовым. Графический элемент может находиться с любой стороны. У него есть набор модификаторов на отступы и выравнивание по двум осям.

При увеличении контента следует увеличить расстояние между элементами, для этого у элемента image используется модификатор indent-right или indent-left c соответствующим значением

{
  block: 'cell',
  mods: { 'indent-right': 's' },
  content: [
    {
      elem: 'image,
      content: [
        {
          block: 'pictogram'
          mods: { name: 'settings', view: 'primary', size: 'm' }
        }
      ]
    },
    {
      elem: 'content',
      content: [
        {
          block: 'text',
          mods: { view: 'primary', size: 'm' },
          content: 'Персональные настройки'
        }
      ]
    }
  ]
}

Для отображения навигационных элементов можно изменить порядок. По необходимости элементы можно растаскивать по разным краям сущности.

{
  block: 'cell',
  mods: { distribute: 'between' },
  content: [
    {
      elem: 'content',
      content: [
        {
          block: 'text',
          mods: { view: 'primary', size: 'm' }
          content: 'Персональные настройки'
        }
      ]
    },
    {
      elem: 'image,
      content: [
        {
          block: 'pictogram'
          mods: { name: 'settings', view: 'primary', size: 'm' }
        }
      ]
    }
  ]
}

Для центрирования по вертикале у блока используется модификатор vertical-align с соответствующим значением.

{
  block: 'cell',
  mods: { 'indent-right': 'l' },
  content: [
        {
      elem: 'image,
      content: [
        {
          block: 'logo'
          mods: { name: 'yandex', size: 'm' }
        }
      ]
    },
    {
      elem: 'content',
      content: [
        {
          block: 'text',
          mods: { view: 'primary', size: 'm' },
          content: 'Ответы на любые вопросы'
        }
      ]
    }
  ]
}

Паттерн отлично подходит для отображения любых списков с пиктограммами, пользовательских блоков с аватарками и именем, и превью статей с изображением и описанием.

Модификаторы блока

Модификации