Компонент Vignette показывает пользователям, что есть еще контент, который можно просмотреть.
Анатомия

А. Эллипс
Б. Маска
Адаптивные макеты

Весь
Виньетка пропорционально увеличивается до размера экрана. Это справедливо для всех вариантов этого компонента (целого, верхнего и нижнего).

Вершина
Виньетка пропорционально увеличивается до размера экрана. Это справедливо для всех вариантов этого компонента (целого, верхнего и нижнего).

Нижний
Виньетка пропорционально увеличивается до размера экрана. Это справедливо для всех вариантов этого компонента (целого, верхнего и нижнего).