Card

The 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.

info

For more details about Vuetify’s usage of Card component, click Card page.
For more prop explanations, click Vuetify Card API page.

Props

Attribute	Description	Type	Default
activeClass	Configure the active CSS class applied.	string
append	Setting append prop always appends the relative path to the current path.	boolean	false
dark	Makes the theme black.	boolen
disabled	Removes the ability to click or target the component.	boolean	false
exact	Separates the component.	boolean	false
hover	Will apply an elevation of 4dp when hovered.	boolean	False
href	Designates the component as anchor and applies the href attribute.	string | object	undefined
img	specifies an image background for the card.	string	Undefined
link	Applies the light theme variant to the component.	boolean	false
loaderHeight	Specifies the height of the loader.	number|string	4
loading	Displays linear progress bar.	boolean|string	false
replace	Setting replace prop will call router.replace().	boolean	false
ripple	Applies the v-ripple directive.	boolean|object	false
to	Denotes the target route of the link.	string|object	Undefined
visible	Visibility of Card component.	boolean	true

Events

Attribute	Description
click	Emitted when component is clicked

Samples Component

Samples Qjson

Card
CardTitle