Тени

Утилиты для управления тенями в стиле Material Design. Используют свойство box-shadow.

Классы

Класс

Уровень тени

elevation-0

Нет тени

elevation-1

Очень лёгкая

elevation-2

Лёгкая

elevation-3

Слабая

elevation-4

Заметная

elevation-5

Умеренная

elevation-6

Средняя

elevation-7

Средняя+

elevation-8

Выраженная

elevation-9

Сильная

elevation-10

Сильная+

elevation-11

Очень сильная

elevation-12

Высокая

elevation-13

Высокая+

elevation-14

Очень высокая

elevation-15

Очень высокая+

elevation-16

Глубокая

elevation-17

Глубокая+

elevation-18

Очень глубокая

elevation-19

Очень глубокая+

elevation-20

Максимальная

elevation-21

Максимальная+

elevation-22

Сверхмаксимальная

elevation-23

Сверхмаксимальная+

elevation-24

Самая высокая

Рекомендуемые уровни

Компонент

Уровень

Карточка по умолчанию

elevation-1 или elevation-2

Карточка при наведении

elevation-4

Навигационная панель

elevation-4

Выпадающий список

elevation-8

Боковая панель

elevation-16

Диалоговое окно

elevation-24

Примеры

<div class="elevation-0 pa-4 radius-4">Без тени</div>
<div class="elevation-2 pa-4 radius-4">Лёгкая карточка</div>
<div class="elevation-4 pa-4 radius-4">Приподнятая карточка</div>
<div class="elevation-8 pa-4 radius-4">Всплывающий элемент</div>
<div class="elevation-16 pa-4 radius-4">Боковая панель</div>
<div class="elevation-24 pa-4 radius-4">Диалог</div>