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

Предназначен для отображения информации в компактном формате. По своей структуре имеет три ключевых элемента: header, content и footer.

У смыслового блока к которому применяется карточка обязательно должна указываться высота. Элементы header и footer имеют абсолютное позиционирование и прибиваются к верхней и нижней части блока над остальным контентом.

У каждого из элементов карточки на первом уровне вложенности есть модификаторы на внутренние отступы и модификации на расположение контента внутри.

Их можно увеличивать в зависимости от того, куда встраивается карточка и какое наполнение она имеет.

Модификатор

{
  block: 'card',
  mods: { view: 'default' },
  content: [
    {
      elem: 'content',
      elemMods: { 
        'space-v': 'xl', 
        'distribute': 'center', 
        'vertical-align': 'center' 
      },
      content: [ ... ]
    }
  ]
}

Элемент content

Основной дочерний элемент паттерна card в котором лежит весь контент.

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

{
  block: 'card',
  mods: { view: 'default' },
  content: [
    {
      elem: 'header',
      content: [ ... ]
    },
    {
      elem: 'footer',
      content: [ ... ]
    }
  ]
}

Элемент header