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.


A card has 4 basic components, v-card-media, v-card-title, v-card-text and v-card-actions.



Media with text

Using the layout system, we can add custom text anywhere within the background.

Horizontal cards

Using v-flex, you can create customized horizontal cards. Use the contain property to shrink the v-card-media to fit inside the container, instead of covering.


Using grid lists, you can create beautiful layouts.

Custom actions

With a simple conditional, you can easily add supplementary text that is hidden until opened.