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.

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"

Name

append

Default

false

Type

Boolean

Vue Router router-link prop

Name

color

Default

undefined

Type

String

Applies specified color to the control

Name

dark

Default

false

Type

Boolean

Applies the dark theme variant

Name

disabled

Default

false

Type

Boolean

Route item is disabled

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

auto

Type

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

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, only works with anchor tag.

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

String, Number

The width of the content

Name

default

Default Vue slot

Examples

Media with text

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