Выпадающие списки
dropdown
sm
md
lg
xl
В SIMAI Framework с помощью модификаторов можно создавать выпдающие списки
Описание
Выпадающие списки позволяют организовать в группу список ссылок (или кнопок) вызываемых нажатием на кнопку.
Выпадающий список на основе тега <button>
<div class="relative inline-flex">
<button class="flex items-cross-center radius-1/3 cursor-pointer wrap-none transiton focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-error hover:bg-error-container color-on-surface-inverse hover:c-white focus:block+hidden" aria-haspopup="true" aria-expanded="false">
Основная кнопка
<svg class="w-b0 fill-current m-left-1/3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full left-0 m-top-1/3" aria-labelledby="dropdownMenuButton">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие - другое</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
</div>
</div>Выпадающий список на основе тега <a>
Вы можете использовать для вызывающей список кнопки тег <a>. В этом случае используется кнопка созданная на основе ссылки.
<div class="relative inline-flex">
<a class="inline-flex items-cross-center radius-1/3 underline-none cursor-pointer wrap-none transition focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-error hover:bg-error-container color-on-surface-inverse hover:c-white" href="javascript:void(0)" id="dropdownMenuLink" aria-haspopup="true" aria-expanded="false">
Основная ссылка
<svg class="w-b0 fill-current m-left-1/3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
</a>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full left-0 m-top-1/3" aria-labelledby="dropdownMenuLink">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
</div>
</div>Оформление выпадающего списка
Для офомрления выпадающего списка используются модификаторы кнопок.
<div class="relative inline-flex">
<button class="flex items-cross-center radius-1/3 cursor-pointer wrap-none transiton focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-gray-5 border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-6 hover:c-white"
type="button" aria-haspopup="true" aria-expanded="false">
По умолчанию
<svg class="w-b0 fill-current m-left-1/3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full left-0 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>
<div class="relative inline-flex">
<button class="flex items-cross-center radius-1/3 cursor-pointer wrap-none transiton focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3"
aria-haspopup="true" aria-expanded="false" type="button">
Основная
<svg class="w-b0 fill-current m-left-1/3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full left-0 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>
<div class="relative inline-flex">
<button class="flex items-cross-center radius-1/3 cursor-pointer wrap-none transiton focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:c-white"
type="button" aria-haspopup="true" aria-expanded="false">
Вторичная
<svg class="w-b0 fill-current m-left-1/3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full left-0 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>
<div class="relative inline-flex">
<button class="flex items-cross-center radius-1/3 cursor-pointer wrap-none transiton focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-success border-success color-on-surface-inverse color-on-surface hover:bg-success-container"
type="button" aria-haspopup="true" aria-expanded="false">
Успех
<svg class="w-b0 fill-current m-left-1/3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full left-0 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>
<div class="relative inline-flex">
<button class="flex items-cross-center radius-1/3 cursor-pointer wrap-none transiton focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-primary-container border-info color-on-surface hover:bg-primary"
type="button" aria-haspopup="true" aria-expanded="false">
Информация
<svg class="w-b0 fill-current m-left-1/3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full left-0 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>
<div class="relative inline-flex">
<button class="flex items-cross-center radius-1/3 cursor-pointer wrap-none transiton focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-warning border-warning color-on-surface-inverse hover:bg-warning-container"
type="button" aria-haspopup="true" aria-expanded="false">
Предупреждение
<svg class="w-b0 fill-current m-left-1/3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full left-0 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>
<div class="relative inline-flex">
<button class="flex items-cross-center radius-1/3 cursor-pointer wrap-none transiton focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-danger border-danger color-on-surface-inverse hover:bg-error-container"
type="button" aria-haspopup="true" aria-expanded="false">
Опасность
<svg class="w-b0 fill-current m-left-1/3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full left-0 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>Выпадающий список с разделителем
Вы можете разделить кнопку выпадающего списка на две.
<div class="relative inline-flex">
<button type="button" class="flex items-cross-center radius-left-1/3 cursor-pointer wrap-none transition p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3">
Основная
</button>
<button class="flex items-cross-center radius-right-1/3 cursor-pointer wrap-none transition focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-main border-main color-on-surface-inverse hover:bg-opacity-3 hover:bg-surface-3" type="button" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Переключатель выпадающего списка</span>
<svg class="w-b0 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full -right-e8 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="ww-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>
<div class="relative inline-flex">
<button type="button" class="flex items-cross-center radius-left-1/3 cursor-pointer wrap-none transition p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:c-white">
Вторичная
</button>
<button class="flex items-cross-center radius-right-1/3 cursor-pointer wrap-none transition focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-surface-inverse hover:b-gray-8 hover:c-white" type="button" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Переключатель выпадающего списка</span>
<svg class="w-b0 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full -right-e8 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="ww-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>
<div class="relative inline-flex">
<button type="button" class="flex items-cross-center radius-left-1/3 cursor-pointer wrap-none transition p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-success border-success color-on-surface-inverse color-on-surface hover:bg-success-container">
Успех
</button>
<button class="flex items-cross-center radius-right-1/3 cursor-pointer wrap-none transition focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-success border-success color-on-surface-inverse color-on-surface hover:bg-success-container" type="button" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Переключатель выпадающего списка</span>
<svg class="w-b0 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full -right-e8 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="ww-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>
<div class="relative inline-flex">
<button type="button" class="flex items-cross-center radius-left-1/3 cursor-pointer wrap-none transition p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-primary-container border-info color-on-surface hover:bg-primary">
Информация
</button>
<button class="flex items-cross-center radius-right-1/3 cursor-pointer wrap-none transition focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-primary-container border-info color-on-surface hover:bg-primary" type="button" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Переключатель выпадающего списка</span>
<svg class="w-b0 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full -right-e8 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="ww-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>
<div class="relative inline-flex">
<button type="button" class="flex items-cross-center radius-left-1/3 cursor-pointer wrap-none transition p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-warning border-warning color-on-surface-inverse hover:bg-warning-container">
Предупреждение
</button>
<button class="flex items-cross-center radius-right-1/3 cursor-pointer wrap-none transition focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-warning border-warning color-on-surface-inverse hover:bg-warning-container" type="button" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Переключатель выпадающего списка</span>
<svg class="w-b0 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full -right-e8 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="ww-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>
<div class="relative inline-flex">
<button type="button" class="flex items-cross-center radius-left-1/3 cursor-pointer wrap-none transition p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-danger border-danger color-on-surface-inverse hover:bg-error-container">
Опасность
</button>
<button class="flex items-cross-center radius-right-1/3 cursor-pointer wrap-none transition focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-danger border-danger color-on-surface-inverse hover:bg-error-container" type="button" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Переключатель выпадающего списка</span>
<svg class="w-b0 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full -right-e8 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="ww-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>Выпадающие списки разных размеров
<div class="relative inline-flex">
<button class="flex items-cross-center radius-1/3 cursor-pointer wrap-none transiton focus:block+hidden p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 text-2 string-1 bg-error hover:bg-error-container color-on-surface-inverse hover:c-white" type="button" aria-haspopup="true" aria-expanded="false">
Большая кнопка
<svg class="w-b0 fill-current m-left-1/3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg> </button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full left-0 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>
<div class="relative inline-flex">
<button type="button" class="flex items-cross-center radius-left-1/3 cursor-pointer wrap-none transition p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 text-2 string-1 bg-error hover:bg-error-container color-on-surface-inverse hover:c-white">
Большая разделительная кнопка
</button>
<button class="flex items-cross-center radius-right-1/3 cursor-pointer wrap-none transition focus:block+hidden p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 text-2 string-1 bg-error hover:bg-error-container color-on-surface-inverse hover:c-white" type="button" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Переключатель выпадающего списка</span>
<svg class="w-b0 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full -right-e8 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>
<div class="relative inline-flex">
<button class="flex items-cross-center radius-1/3 cursor-pointer wrap-none transiton focus:block+hidden p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1/2 string-none bg-error hover:bg-error-container color-on-surface-inverse hover:c-white" type="button" aria-haspopup="true" aria-expanded="false">
Маленькая кнопка
<svg class="w-b0 fill-current m-left-1/3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full left-0 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>
<div class="relative inline-flex">
<button type="button" class="flex items-cross-center radius-left-1/3 cursor-pointer wrap-none transition p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1/2 string-none bg-error hover:bg-error-container color-on-surface-inverse hover:c-white">
Маленькая разделительная кнопка
</button>
<button class="flex items-cross-center radius-right-1/3 cursor-pointer wrap-none transition focus:block+hidden p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1/2 string-none bg-error hover:bg-error-container color-on-surface-inverse hover:c-white" type="button" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Переключатель выпадающего списка</span>
<svg class="w-b0 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
</button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full -right-e8 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>Раскрывающийся вверх список
<div class="relative inline-flex">
<button class="flex items-cross-center radius-1/3 cursor-pointer wrap-none transiton focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-error hover:bg-error-container color-on-surface-inverse hover:c-white" type="button" aria-haspopup="true" aria-expanded="false">
Раскрывающийся
<svg class="w-b0 fill-current m-left-1/3 rotate-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg> </button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden bottom-full left-0 m-bottom-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>
<div class="relative flex">
<button type="button" class="flex items-cross-center radius-left-1/3 cursor-pointer wrap-none transition p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-error hover:bg-error-container color-on-surface-inverse hover:c-white">
Разделение
</button>
<button class="flex items-cross-center radius-right-1/3 cursor-pointer wrap-none transition focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-error hover:bg-error-container color-on-surface-inverse hover:c-white" type="button" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Переключатель выпадающего списка</span>
<svg class="w-b0 fill-current rotate-8 m-left-1/3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg> </button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden bottom-full -right-e8 m-bottom-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white border-top-1 border-surface-lowest" href="javascript:void(0)">Отдельная ссылка</a>
</div>
</div>Выравнивание выпадающего списка по правому краю кнопки
<div class="relative inline-flex">
<button class="flex items-cross-center radius-1/3 cursor-pointer wrap-none transiton focus:block+hidden p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-1 string-none bg-error hover:bg-error-container color-on-surface-inverse hover:c-white" type="button" aria-haspopup="true" aria-expanded="false">
Это выпадающее меню выровнено по правому краю
<svg class="w-b0 fill-current m-left-1/3 rotate-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg> </button>
<div class="z-2 absolute bg-surface-0 radius-1/3 border-1 border-surface-lowest overflow-hidden hidden active:block-hidden top-full right-0 m-top-1/3">
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
<a class="w-full block p-top-1/3 p-bottom-1/3 p-right-1 p-left-1 wrap-none underline-none color-on-surface hover:c-main hover:bg-surface-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
</div>
</div>Адаптивность
Для установки адаптивности выпадающих списков, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.