packages/docs/src/pages/en/components/sheets.md
The v-sheet component is a transformable piece of paper that provides a basic foundation for Vuetify features.
The sheet component has support for elevation, rounded corners, color, and more. It can be used as a container for other components or as a standalone.
<ExamplesUsage name="v-sheet" /> <PromotedEntry />| Component | Description |
|---|---|
| v-sheet | Primary Component |
The v-sheet component contains only a default slot.
| Element / Area | Description |
|---|---|
| 1. Container | The main content area |
Often when building out a user interface, you will need to create a container for content and other custom components. The v-sheet component is a great way to do this. It provides a baseline for elevation, rounded corners, and color.
Some of the standard props that can be applied to the v-sheet component are listed below.
The v-sheet component accepts a custom elevation between 0 and 5 (0 is default). The elevation property modifies the box-shadow property.
The rounded prop adds a default border-radius of 4px. By default, the v-sheet component has no border-radius. Customize the radius's size and location by providing a custom rounded value; e.g. a rounded value of tr-xl l-pill equates to rounded-tr-xl rounded-l-pill. Additional information is on the Border Radius page.
Sheets and components based on them can have different sizes and colors.
The v-sheet component accepts custom Material Design Color values such as warning, amber darken-3, and deep-purple accent — as well as rgb, rgba, and hexadecimal values.
The following are a collection of examples that demonstrate more advanced and real world use of the v-sheet component.
This example uses a sheet component to create a banner congratulating users for signing up for the Vuetify community.
<ExamplesExample file="v-sheet/misc-congratulations" />The following example uses a sheet component to create a banner that notifies users that the account balance has been reconciled.
<ExamplesExample file="v-sheet/misc-reconcile" />Creating a Privacy Policy notification is a great use case for the v-sheet component.
Even for simple use-cases, the v-sheet component is versatile makes it easy to contain content and other components.