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

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Header

<div class="app">
  <div class="row mb-5">
    <div class="col-12">
      <v-card
        img-src="/assets/v-card-6.jpg"
        img-md-position="left"
        overlay
      >
        <h1>Header</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </v-card>
    </div>
  </div>

  <div class="row mb-5">
    <div class="col-12">
      <v-card
        class="text-white"
        img-src="/assets/v-card-3.jpg"
        img-md-position="right"
        bg-variant="dark"
        overlay
      >
        <h1>Header</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </v-card>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 mb-5">
      <v-card
        class="text-white"
        img-src="/assets/v-card-2.jpg"
        bg-variant="dark"
        overlay
      >
        <h1>Header</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </v-card>
    </div>
    <div class="col-md-4 mb-5">
      <v-card
        class="text-white"
        img-src="/assets/v-card-3.jpg"
        bg-variant="dark"
        overlay
      >
        <h1>Header</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </v-card>
    </div>
    <div class="col-md-4 mb-5">
      <v-card
        class="text-white"
        img-src="/assets/v-card-4.jpg"
        bg-variant="dark"
        overlay
      >
        <h1>Header</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </v-card>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 mb-5">
      <v-card
        img-src="/assets/v-card-2.jpg"
        overlay
      >
        <h1>Header</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </v-card>
    </div>
    <div class="col-md-4 mb-5">
      <v-card
        img-src="/assets/v-card-3.jpg"
        overlay
      >
        <h1>Header</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </v-card>
    </div>
    <div class="col-md-4 mb-5">
      <v-card
        img-src="/assets/v-card-4.jpg"
        overlay
      >
        <h1>Header</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </v-card>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

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.

# Card

# Examples

# Basic

Header

Header

Header

# With image (left/right)

Header

Header

# With image (top)

Header

Header

Header

# Dark variant

Header

Header

# Overlay

Header

Header

Header

Header

Header

Header

Header

Header

# Custom

Header

# API

Card

Examples

Basic

With image (left/right)

With image (top)

Dark variant

Overlay

Custom

API