Cards provide a flexible and extensible content container with multiple variants and options.
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 be clickable. Try hovering your mouse on the cards.
Cards can have a tooltip.
Cards can use color variants such as "dark" or "primary", or even custom colors for campaign sites.
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.
|tag||String||Changes the underlying HTML element. |
Valid value: HTML element
|bg-variant||String||Sets the background variant color for the |
Valid value: Color variant name or HEX color code
|img-src||String||Adds an image to the card. |
Valid value: Image URL
|img-position||String||Where to place the image. |
|img-md-position||String||A breakpoint specific version of ||-|
|img-lg-position||String||A breakpoint specific version of ||-|
|img-align||String||Sets the image alignment. |
Valid value: Any
|overlay||Boolean||Enables overlay mode.||false|
|elevated||Boolean||Enables elevated mode.||false|
All other properties that are not defined above, will be passed to the component as html attributes. This is especially useful for adding the