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.
v-card-media is deprecated, use v-img instead.
API
Class bound when component is active. warning Depending upon the component, this could cause side effects. If you need to add a custom class on top of a default, just do active-class="default-class your-class"
Vue Router router-link prop
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))
Applies the dark theme variant
Route item is disabled
Designates an elevation between 0 and 24
Exactly match the link. Without this, '/' will match every route
Vue Router router-link prop
Removes card box shadow
Manually define the height of the card
Apply a higher elevation on hover
Will designate the component tag to <a>
Specifies an image background
Applies the light theme variant
Sets the maximum height for the content
Sets the maximum width for the content
Components.Cards.
Components.Cards.
Specifies the link is a nuxt-link
Specifies a higher default elevation
Vue Router router-link prop
Applies the v-ripple directive
Specify a custom tag to use on the component
Specify the target attribute.
Removes the component's border-radius
Will designate the component tag to <router-link>
The width of the content
Examples
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-img to fit inside the container, instead of covering.
Grids
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.
Twitter card
The 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 v-card-title, v-card-text and v-card-actions components.