# Card

Component name: <v-card>

Cards provide a flexible and extensible content container with multiple variants and options.

# Examples

# 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

# Components

# v-card-group

# API

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

# v-card

# API

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

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.