What's the difference between Vuetify card and sheet?

Viewed 3793

Vuetify docs define the sheet as follows:

The v-sheet is designed to power other paper components within Vuetify. It is meant to be used as a low level component.

card according to docs is this:

The v-card component is a versatile component that can be used for anything from a panel to a static image.

To me (not JS person) they seem very similar. Are they interchangeable? When to use one but not the other? Can you illustrate with examples?

3 Answers

Your question to me sounds little bit like "What is a difference between html div and section tags?"

Do you get me? I it is semantic thing.

"Low level" components tells me that you can use v-sheet in v-card but you shouldn't do the opposite.

Like putting span in p is ok, but doing the other way is a wrong practice.

Hope that helps you ;-)

VSheet and VCard will look quite similar and is quite similar because like most other component from vuetify VCard is made from the VSheet base.

A good use case for using VSheet is for creating your own custom component. Say you not happy with the look and feel of VCard and you want to create your own variant you would use VSheet as your base.

v-card has slots for title, subtitle, text, and actions.

v-card uses v-sheet and adds these areas.

If you do not need those areas, use v-sheet, as v-card adds extra overhead with extra HTML content and CSS styling.

Related