Skip to main content

​
Card

The VCard component is a versatile container that can be used to display content containing a variety of elements such as images, text, and actions. Cards are entry points to more detailed information.

​
Usage

<template>
  <v-card>
    <v-card-title>Card Title</v-card-title>
    <v-card-text>Card content goes here</v-card-text>
  </v-card>
</template>

​
Props

​
title
string | number | boolean
Title text displayed at the top of the card
​
subtitle
string | number | boolean
Subtitle text displayed below the title
​
text
string | number | boolean
Main text content of the card
​
image
string
URL for a header image
​
prependAvatar
string
Avatar image URL displayed before the title
​
prependIcon
IconValue
Icon displayed before the title
​
appendAvatar
string
Avatar image URL displayed after the title
​
appendIcon
IconValue
Icon displayed after the title
​
disabled
boolean
default:"false"
Removes the card’s click functionality
​
flat
boolean
default:"false"
Removes the card’s elevation
​
hover
boolean
default:"false"
Applies hover effect with elevation change
​
link
boolean
Makes the card a link (automatically detected when using to or href)
​
ripple
boolean | object
default:"true"
Applies the ripple directive
​
to
string | object
Vue Router location for the card link
​
href
string
Standard anchor href attribute
​
loading
boolean | string
Displays a loading bar at the top of the card
​
border
string | number | boolean
Applies border styles to the component
​
color
string
Applies specified color to the card background
​
density
string
Adjusts the vertical height. Options: default, comfortable, compact
​
elevation
string | number
Elevation level (0-24)
​
height
string | number
Sets the height of the component
​
maxHeight
string | number
Sets the maximum height of the component
​
maxWidth
string | number
Sets the maximum width of the component
​
minHeight
string | number
Sets the minimum height of the component
​
minWidth
string | number
Sets the minimum width of the component
​
width
string | number
Sets the width of the component
​
location
string
Positions the element. Options: combinations of top, bottom, start, end
​
position
string
CSS position property. Options: static, relative, fixed, absolute, sticky
​
rounded
string | number | boolean
Border radius of the card
​
tag
string
default:"div"
Specify a custom HTML tag to use on the root element
​
variant
string
default:"elevated"
Applies a distinct style. Options: flat, text, elevated, tonal, outlined, plain

​
Slots

​
default
The default slot for card content
​
image
Slot for custom header image content
​
item
Slot that replaces the default card item (title/subtitle area)
​
prepend
Slot for content before the title
​
title
Slot for custom title content
​
subtitle
Slot for custom subtitle content
​
append
Slot for content after the title
​
text
Slot for custom text content
​
actions
Slot for action buttons at the bottom of the card
​
loader
Slot for custom loading indicator

​
Examples

​
Basic Card

<template>
  <v-card width="400">
    <v-card-title>Card Title</v-card-title>
    <v-card-subtitle>Card Subtitle</v-card-subtitle>
    <v-card-text>
      This is the main content of the card. It can contain any text or components.
    </v-card-text>
    <v-card-actions>
      <v-btn>Action</v-btn>
    </v-card-actions>
  </v-card>
</template>

​
Card with Image

<template>
  <v-card width="400">
    <v-img
      src="/landscape.jpg"
      height="200"
      cover
    />
    <v-card-title>Beautiful Landscape</v-card-title>
    <v-card-text>
      A stunning view captured at sunrise.
    </v-card-text>
    <v-card-actions>
      <v-btn color="primary">View More</v-btn>
    </v-card-actions>
  </v-card>
</template>

​
Card with Avatar and Icons

<template>
  <v-card
    width="400"
    prepend-avatar="/user.jpg"
    title="John Doe"
    subtitle="@johndoe"
    append-icon="mdi-dots-vertical"
  >
    <v-card-text>
      Just posted a new article about Vue.js best practices!
    </v-card-text>
    <v-card-actions>
      <v-btn prepend-icon="mdi-heart" variant="text">Like</v-btn>
      <v-btn prepend-icon="mdi-share-variant" variant="text">Share</v-btn>
    </v-card-actions>
  </v-card>
</template>

​
Clickable Card

<template>
  <v-card
    hover
    to="/details"
    width="300"
  >
    <v-card-title>Clickable Card</v-card-title>
    <v-card-text>
      This card navigates to another page when clicked.
    </v-card-text>
  </v-card>
</template>

​
Card Variants

<template>
  <div class="d-flex flex-wrap gap-4">
    <v-card variant="elevated" width="200">
      <v-card-title>Elevated</v-card-title>
    </v-card>
    
    <v-card variant="flat" width="200">
      <v-card-title>Flat</v-card-title>
    </v-card>
    
    <v-card variant="tonal" width="200" color="primary">
      <v-card-title>Tonal</v-card-title>
    </v-card>
    
    <v-card variant="outlined" width="200">
      <v-card-title>Outlined</v-card-title>
    </v-card>
  </div>
</template>

​
Loading Card

<template>
  <v-card
    :loading="loading"
    width="400"
  >
    <v-card-title>Loading Example</v-card-title>
    <v-card-text>
      This card shows a loading indicator at the top.
    </v-card-text>
    <v-card-actions>
      <v-btn @click="loading = !loading">
        Toggle Loading
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(false)
</script>

Build docs developers (and LLMs) love

Get started for freeTalk to us