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.

Usage

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


API

Name
active-class
Default
undefined
Type
string

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"

Name
append
Default
false
Type
boolean

Vue Router router-link prop

Name
color
Default
undefined
Type
string

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))

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
disabled
Default
false
Type
boolean

Route item is disabled

Name
elevation
Default
2
Type
number | string
Name
exact
Default
false
Type
boolean

Exactly match the link. Without this, '/' will match every route

Name
exact-active-class
Default
undefined
Type
string

Vue Router router-link prop

Name
flat
Default
false
Type
boolean

Removes card box shadow

Name
height
Default
undefined
Type
number | string

Manually define the height of the card

Name
hover
Default
false
Type
boolean

Apply a higher elevation on hover

Name
href
Default
undefined
Type
string | object

Will designate the component tag to <a>

Name
img
Default
undefined
Type
string

Specifies an image background

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
max-height
Default
undefined
Type
number | string

Sets the maximum height for the content

Name
max-width
Default
undefined
Type
number | string

Sets the maximum width for the content

Name
nuxt
Default
false
Type
boolean

Specifies the link is a nuxt-link

Name
raised
Default
false
Type
boolean

Specifies a higher default elevation

Name
replace
Default
false
Type
boolean

Vue Router router-link prop

Name
ripple
Default
undefined
Type
boolean | object

Applies the v-ripple directive

Name
tag
Default
'div'
Type
string

Specify a custom tag to use on the component

Name
target
Default
undefined
Type
string

Specify the target attribute.

Name
tile
Default
false
Type
boolean

Turn the card into a tile by removing the border radius

Name
to
Default
undefined
Type
string | object

Will designate the component tag to <router-link>

Name
width
Default
undefined
Type
number | string

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-card-media 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.