Десктопная версия
Мобильная версия
Используются для того, чтобы сообщить пользователю важную информацию и привлечь внимание.
![](https://qiwiguide.ru/wp-content/uploads/2019/05/Rounding@2x-1024x340.png)
Всегда располагайте информационные блоки на светло-серой плашке #F5F5F5, rgb (245, 245, 245) со стандартными закруглениями и cтандартными внутренними отступами.
Десктопная версия
![](https://qiwiguide.ru/wp-content/uploads/2019/05/Info-Card-Large@2x-1024x981.png)
![](https://qiwiguide.ru/wp-content/uploads/2019/05/Info-Cards-Sizes@2x-1024x468.png)
Включает в себя:
— иконку статуса или состояния 48×48px;
— заголовок уровня H4 (Desktop);
— основной текст Body M 300 (Normal);
— Simple Button в размере Normal (Desktop);
— Padding L.
![](https://qiwiguide.ru/wp-content/uploads/2019/05/Gray-Info-Card-Horisontal@2x-1024x523.png)
![](https://qiwiguide.ru/wp-content/uploads/2019/05/Info-Cards-Hor-Sizes@2x-1024x119.png)
Включает в себя:
— основной текст Body M 300 (Normal);
— Simple Button в размере Minor (Desktop);
— Padding S.
Выравнивание
![](https://qiwiguide.ru/wp-content/uploads/2019/02/Info-Block-Align-Center@2x-1024x498.png)
Когда в блоке с содержимым находится большое количество информации и он занимает много места, контент выравнивается по центру.
![](https://qiwiguide.ru/wp-content/uploads/2019/02/Info-Block-Align-Left@2x-1024x372.png)
Когда в блоке находится небольшое количество информации, контент выравнивается по левому краю.
Мобильная версия
![](https://qiwiguide.ru/wp-content/uploads/2019/05/Info-Blocks-Mobile-1024x875.png)
![](https://qiwiguide.ru/wp-content/uploads/2019/05/Info-Blocks-Mobile-Sizes-M-1024x731.png)
Включает в себя:
— иконку статуса или состояния 48×48px;
— заголовок уровня H4 (Mobile);
— основной текст Body S 300 (Normal);
— Simple Button в размере Accent (Mobile);
— Padding M.
![](https://qiwiguide.ru/wp-content/uploads/2019/05/Info-Blocks-Mobile-Sizes@2x-1024x826.png)
Включает в себя:
— иконку 24×24px;
— Body M 500 (Normal);
— Simple Button в размере Accent (Mobile);
— Padding S.