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 3 basic components,
v-card-media is deprecated, use
Media with text
Using the layout system, we can add custom text anywhere within the background.
v-flex, you can create customized horizontal cards. Use the
contain property to shrink the
v-img to fit inside the container, instead of covering.
Using grid lists, you can create beautiful layouts.
With a simple conditional, you can easily add supplementary text that is hidden until opened.
v-card component has multiple children components that help you build complex examples without having to worry about spacing. This example is comprised of the