# 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. | - |
General 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.
# Component Variants
# v-contact-card
v-contact-card is a specialized card component variant for displaying contact information.
# API (v-contact-card)
| Name | Type | Description | Default |
|---|---|---|---|
people | Boolean | Show people background instead of a map background <v-contact-card people> | false |
aside | Boolean | Display the button/link in a right column on desktop, instead of at the bottom <v-contact-card aside> | false |
label | String | Label for the card, e.g. "Personline oplysninger" <v-contact-card label="Personline oplysninger"> | null |
header | String | Header text for the card, e.g. "Peter Madsen" <v-contact-card header="Peter Madsen"> | null |
About Component Variants
Variants are custom components built on the base styles of the primary component. They are not included in the main component to keep the core components as clean and flexible as possible and to reduce complexity.