# pt-icon-plus

Самый маленький и самый популярный паттерн. `pt-icon-plus` ставит графический элемент, не обязательно иконку, рядом с контентом.

```html
<div class="pt-icon-plus">
    <div class="pt-icon-plus__icon">
        // тут иконка
    </div>
    <div class="pt-icon-plus__block">
        // тут остальная часть
    </div>
</div>
```

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

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


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

Модификаторы     | Значение                           | Описание
---------------- | ---------------------------------- | ----------------------------------------------------
`vertical-align` | `bottom` `center` `top` `baseline` | Вертикальное выравнивание иконки относительно текста
`distribute`     | `between` `center`                 | Распределение контента по горизонтали
`xs-direction`   | `column` `row`                     | Расположение элементов в строку или в колонку на экранах от xs
`s-direction`    | `column` `row`                     | Расположение элементов в строку или в колонку на экранах от s
`m-direction`    | `column` `row`                     | Расположение элементов в строку или в колонку на экранах от m
`l-direction`    | `column` `row`                     | Расположение элементов в строку или в колонку на экранах от l

___


### Элемент icon

Элемент-контейнер для графического элемента. Может располагаться как до, так и после блока с текстом.

Модификаторы элемента `icon` | Значение                                            | Описание                 
---------------------------- | --------------------------------------------------- | ------------------------- 
`offset`                     | `2xs` `xs` `s` `m` `l`                              | Компенсация сверху
`offset`                     | `no`                                                | *DEPRECATED* Отмена компенсации сверху
`indent`                     | `2xs` `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | Отступ между иконкой и контентом
`indent-l`                   | `2xs` `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | *DEPRECATED* Отступ слева
`indent-r`                   | `2xs` `xs` `s` `m` `l` `xl` `2xl` `3xl` `4xl` `5xl` | *DEPRECATED* Отступ справа

Если в качестве графического элемента используется блок icon, то в самом svg-файле лучше не указывать цвета, а использовать значение currentColor. Тогда можно миксовать текстовый блок к `pt-icon-plus`, тогда не нужно будет применять модификатор на цвет у иконки. Это удобно, когда цвет контента всего блока должен меняться по ховеру.

```html
<div class="pt-icon-plus text text_size_s text_line-height_m text_view_brand">
    <div class="icon icon_size_s icon_name_dot pt-icon-plus__icon pt-icon-plus__icon_indent-r_xs">
        <svg></svg>
    </div>
    Физики ускорили сбор росы с помощью канавок
</div>
```

___


### Элемент block

Элемент в который вкладывается контент, например текст. Используется без модификаторов.