Параметры блока
В одну строку
В две строки
С иконкой или логотипом
Составное меню
Состояния
Множественный селект
Мобильная версия
Параметры блока
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Dropdown-Width-1024x819.png)
Ширина выпадающего меню равняется ширине текстового поля.
Используйте для выпадающего меню плашку со стандартными закруглениями 10px и тенью уровня Z4.
В одну строку
![](https://qiwiguide.ru/wp-content/uploads/2019/01/1-line_dropdown-1024x631.png)
Используйте стиль основного текста Body M 500 (Normal).
В две строки
![](https://qiwiguide.ru/wp-content/uploads/2019/01/2-lines_dropdown-1-1024x636.png)
Используйте стиль основного текста Body M 500 (Normal).
Для примечания — Body S 300 (Normal) в сером цвете.
С иконкой или логотипом
![](https://qiwiguide.ru/wp-content/uploads/2019/01/dropdownlogos-1024x577.png)
Используйте стиль основного текста Body M 500 (Normal).
Для примечания — Body S 300 (Normal) в сером цвете.
Добавляйте к списку логотипы провайдеров.
Составное меню
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Complicated-Menu-926x1024.png)
Составное меню может содержать:
— Simple button;
— контентные ссылки;
— разделители;
— логотипы провайдеров;
— аватарки;
— иконки.
Выравнивайте контент по левому краю. При необходимости помещайте между контентными блоками разделитель.
Состояния
![](https://qiwiguide.ru/wp-content/uploads/2019/01/States-1024x714.png)
![]() | Выбранное | #E6E6E6 rgb (230, 230, 230) |
![]() | Наведенное | #F5F5F5 rgb (245, 245, 245) |
![]() | Нормальное | #FFF rgb (255, 255, 255) |
Множественный селект
![](https://qiwiguide.ru/wp-content/uploads/2019/02/Multiple-Select-1024x674.png)
Применяйте множественный селект, когда в выпадающем меню можно выбрать несколько пунктов. Отмечайте выбранные пункты черной галочкой 24×24px.
Мобильная версия
![](https://qiwiguide.ru/wp-content/uploads/2019/02/Dropup-qiwi-mobile-1024x880.png)
В мобильной версии выпадающее меню появляется в окне, всплывающем в нижней части экрана. Меню размещается на белой плашке без закруглений с тенью Z 4. К шапке меню добавляется тень Z 1.
Размещайте выпадающее меню на фоне #F5F5F5 с прозрачностью 70%, rgba (245, 245, 245, 70).
![](https://qiwiguide.ru/wp-content/uploads/2019/02/Drop-up@2x-1024x566.png)
Мобильное выпадающее меню включает в себя:
— название в стиле Body L 500 (Compact);
— основной текст Body M 500 (Normal) в черном цвете;
— примечание Body M 500 (Normal) в сером цвете;
— иконку 24×24px.