Card
The v-card component is a versatile component that can be used for anything from a panel to a static image. The card component has numerous helper components to make markup as easy as possible. Components that have no listed options use Vue's functional component option for faster rendering and serve as markup sugar to make building easier.

Examples

#1 Basic
edit
As basic as it can get.

#2 Title and actions
edit
You can add both a title bar and an actions row to cards.

#3 Picture
edit
The v-card and v-card-row can both have a background image.

#4 Background
edit
You can also use images as card backgrounds

#5 Horizontal
edit
Cards can be arranged horizontally with the horizontal prop.

#6 Colored
edit
You can use any color in the Material design pallete as a background of a card.

#7 Hover and raised
edit
Use the raised and/or hover props to emphasize a card.

API

chevron_leftchevron_right