![](https://developer.android.com/static/wear/images/vignette/vignette-hero.png)

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

## Anatomy

![](https://developer.android.com/static/wear/images/vignette/vignette-anatomy.png)  
A. Ellipse

B. Mask

<br />

<br />

## Adaptive layouts

![](https://developer.android.com/static/wear/images/vignette/vignette-adaptive-layout-usage.png)  
![](https://developer.android.com/static/wear/images/vignette/vignette-LS-whole.png)  
**Whole**

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

<br />

<br />

![](https://developer.android.com/static/wear/images/vignette/vignette-LS-top.png)  
**Top**

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

<br />

<br />

![](https://developer.android.com/static/wear/images/vignette/vignette-LS-bottom.png)  
**Bottom**

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

<br />

<br />