Card Classic

Classic Card is a single <v-card> component that provides an extensible content container with multiple variants and options. See the API table at the bottom of this page for all available options - and also check out the code examples by viewing the code tabs below.

Basic

The most basic card needs only an <v-card> element with some content.

V-alignment justified to top & bottom

The basic card but where texts are ligned to top and bottom.

With image (left/right)

Cards include a few options for working with images. Here's an example with images at either end of a card.

With image (top)

With video player overlay

Clickable

Cards can be clickable. Try hovering your mouse on the cards.

With tooltip

Cards can have a tooltip.

Color variants

Cards can use color variants such as "dark" or "primary", or even custom colors for campaign sites.

Overlay

Elevated

Custom

For occasions where you need more control of the card layout, it's possible to manually place sub-components and images inside <v-card>. See the example below.

Card groups

For occasions where you have an undetermined number of v-card components.

Animated card group

API

API (v-card)

Name	Type	Description	Default
tag	String	Changes the underlying HTML element. Valid value: HTML element	div
bg-variant	String	Sets the background variant color for the v-card wrapper. Valid value: Color variant name or HEX color code	light
img-src	String	Adds an image to the card. Valid value: Image URL	-
img-md-src	String	A wider/larger version of img-src for larger screens	-
img-position	String	Where to place the image. Valid values: top, left and right	top
img-md-position	String	A breakpoint specific version of img-position	-
img-lg-position	String	A breakpoint specific version of img-position	-
img-align	String	Sets the image alignment. Valid value: Any background-position property	center
alt	String	Sets the alt attr for images	-
overlay	Boolean	Enables overlay mode.	false
video	Boolean	Enables overlay with video play button - only works with an image	false
elevated	Boolean	Enables elevated mode.	false
padding	String	Use to override default content padding shorthand classes.	-

API (v-card-group)

Name	Type	Description	Default
cols	Number	Defines the number of columns. Valid values: 1, 2, 3, 4, 5, 6	1
cols-sm	Number	A breakpoint specific version of cols	-
cols-md	Number	A breakpoint specific version of cols	-
cols-lg	Number	A breakpoint specific version of cols	-
animated	Boolean	Enables card animation.	false

General notice

All other properties that are not defined above, will be passed to the component as html attributes. This is especially useful for adding the class attribute.