Figma: https://www.figma.com/file/3d3CsJ3OJQDW0dsdtoCEDZ/Templates?node-id=1%3A254

Является базой для разбивки всей контентной части страницы. Секция может использоваться как один раз, так и многократно в рамках одного экрана, при этом содержать одну или две области для наполнения содержимым. Если области две, то c помощь модификатора structure происходит управление их пропорциональным соотношение внутри.

Модификатор space-vertical позволяет управлять вертикальным отступом, горизонтальные же отступы вычисляются динамически, в зависимости от размера экрана и ширины контейнера.

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

{
  block: 'tpl-section',
  mods: { structure: '50-50', size: 'l', 'space-v': 'half' },
  content: [
    {
      elem: 'area',
      content: {
        elem: 'container',
        content: [ ... ]
      }
    },
    {
      elem: 'area',
      elemMods: { view: 'ghost' },
      content: {
        elem: 'container',
        content: [ ... ]
      }
    }
  ]
}

{
  block: 'tpl-section',
  mods: { structure: '50-50', size: 'm', 'space-v': 'half' },
  content: [
    {
      elem: 'area',
      content: {
        elem: 'container',
        content: [ ... ]
      }
    },
    {
      elem: 'area',
      elemMods: { view: 'ghost' },
      content: {
        elem: 'container',
        content: [ ... ]
      }
    }
  ]
}

{
  block: 'tpl-section',
  mods: { structure: '50-50', size: 's', 'space-v': 'half' },
  content: [
    {
      elem: 'area',
      content: {
        elem: 'container',
        content: [ ... ]
      }
    },
    {
      elem: 'area',
      elemMods: { view: 'ghost' },
      content: {
        elem: 'container',
        content: [ ... ]
      }
    }
  ]
}

Элемент area

Элемент area задаёт безопасные отступы по бокам, чтобы контент не прилипал к краям экрана. Размер отступов переопределяется в зависимости от ширины экрана.

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