Vignette

The Vignette component displays to the users that there’s more content to see.

Anatomy

A. Ellipse

B. Mask

Adaptive layouts

Whole

The vignette scales up proportionally to fill the screen. This is true for all variants of this component (whole, top and bottom).

Top

The vignette scales up proportionally to fill the screen. This is true for all variants of this component (whole, top and bottom).

Bottom

The vignette scales up proportionally to fill the screen. This is true for all variants of this component (whole, top and bottom).