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