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)

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.

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.

# Card

# Examples

# Basic

# With image (left/right)

# With image (top)

# With tooltip

# Color variants

# Overlay

# Elevated

# Custom

# API