# Sheets

The v-sheet component is the baseline for numerous components such as v-card, v-toolbar, and more. The available properties form the foundation of Material Design—the concept of paper and elevation (shadows).

# Usage

The v-sheet component is a transformable piece of paper that provides a basic foundation for Vuetify features. For example, properties such as rounded and shaped modify the border-radius property while elevation increase / decreases box-shadow.


# Examples

# Props

# Elevation

The v-sheet component accepts a custom elevation between 0 and 24 (0 is default). The elevation property modifies the box-shadow property. More information is located in the MD Elevation Design Specification.

# Rounded

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.

# Color

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.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:09/29/2020, 10:11:25 AM