# pt-card

Блок `pt-card` — карточка для представления информации в компактном формате.

```html
<div class="pt-card">
    <div class="pt-card__image"></div>
    <div class="pt-card__header"></div>
    <div class="pt-card__content"></div>
    <div class="pt-card__footer"></div>
</div>
```


## Живые примеры и дизайн

[pt-card на whitepaper.tools](http://whitepaper.tools/doc.html#/pt-card)


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

Модификатор блока | Значение                   | Описание
----------------- | -------------------------- | --------------------------------------------
`border`          | `around` `all`(depricated) | Выделение границ карточки
`shadow`          | `cloud`                    | Тень карточки
`vertical-align`  | `bottom` `center` `top`    | Выравнивание контентной области по вертикали
`view`            | `default`                  | Фон подложки

___


## Элемент header

Элемент с абсолютным позиционированием в верхней части родителя над остальным контентом. Рекомендуется для использования в роли шапки карточки или элемента `content`.

Модификаторы эемента `header` | Значение                                      | Описание
----------------------------- | --------------------------------------------- | ---------
`border`                      | `bottom`                                      | Отделение шапки полоской снизу
`distribute`                  | `default` `between` `center` `right`          | Распределение элементов по горизонтали
`space-a`                     | `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | Внутренние отступы вокруг элемента
`space-h`                     | `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | Внутренние отступы по горизонтали
`space-v`                     | `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | Внутренние отступы по вертикали

___


## Элемент content

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

Модификаторы элемента `content` | Значение                             | Описание
------------------------------- | ------------------------------------ | --------------------------------------
`distribute`                    | `between` `center` `right` `default` | Распределение элементов по горизонтали
`vertical-align`                | `baseline` `bottom` `center` `top`   | Вертикальное выравнивание в футере
`space-a`                       | `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | Внутренние отступы вокруг элемента
`space-h`                       | `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | Внутренние отступы по горизонтали
`space-v`                       | `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | Внутренние отступы по вертикали
`space-t`                       | `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | Внутренний отступ сверху
`space-b`                       | `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | Внутренний отступ снизу

___


## Элемент footer

Элемент с абсолютным позиционированием в нижней части родителя над остальным контентом. Рекомендуется для использования в роли подвала карточки или элемента `content`.

Модификаторы элемента `footer`  | Значение                             | Описание
------------------------------- | ------------------------------------ | --------------------------------------
`border`                        | `top`                                | Отделение футера полоской сверху
`distribute`                    | `between` `center` `right` `default` | Распределение элементов по горизонтали
`vertical-align`                | `baseline` `center` `top` `bottom`   | Вертикальное выравнивание в футере
`space-a`                       | `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | Внутренние отступы вокруг элемента
`space-h`                       | `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | Внутренние отступы по горизонтали
`space-v`                       | `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | Внутренние отступы по вертикали

___


## Элемент image

Элемент для изображения. Изображение с модификатором `size` в значении `cover` позиционируется абсолютно и используется как фон карточки.

Модификаторы элемента `image` | Значение      | Описание
----------------------------- | ------------- | -------------------------------------------
`size`                        | `cover`       | Использование изображения как фона карточки