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)

Dark variant

Overlay

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.

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

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.