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.