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.

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 -

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-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
overlay Boolean Enables overlay mode. false
elevated Boolean Enables elevated mode. false

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.