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.

API

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.

v-sheet/prop-elevation.vue

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.

v-sheet/prop-rounded.vue

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.

v-sheet/prop-color.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.