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

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

# 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 <b-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


Name Type Description Default
cols Number Defines the number of columns.

Valid values: 1, 2, 3, 4, 5, 6
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


Name Type Description Default
tag String Changes the underlying HTML element.

Valid value: HTML element
bg-variant String Sets the background variant color for the v-card wrapper.

Valid value: Color variant name or HEX color code
img-src String Adds an image to the card.

Valid value: Image URL
img-md-src String A breakpoint and pixel-density specific version of img-src -
img-position String Where to place the image.

Valid values: top, left and right
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
overlay Boolean Enables overlay mode. false
elevated Boolean Enables elevated mode. false
padding String Use to override default content padding shorthand classes. -


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.