How to Create Cards with Vuetify

The Card component in Vuetify is one that can be used for a wide range of things. We can use it to wrap a toolbar component, to contain a list, or just to display a static image. We can customize certain card features, such as colour, elevation, and size. In this article, you’ll learn how to create a simple card with the UI library.

The “v-card” Component

v-card is the name of the component provided by Vuetify for creating cards. We've created one in the code below and customized its height and width with the respective props:

<template>
  <v-app>
    <div class="d-flex justify-center ma-4">
      <v-card height="150" width="350"></v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

The “v-card-title” Component

v-card comes along with certain supplementary components meant to be used in it (as children). One of such is the v-card-title component. As the name implies, it allows us to set the title of a card. For example:

<template>
  <v-app>
    <div class="d-flex justify-center ma-4">
      <v-card height="150" width="350">
        <v-card-title>data.zip</v-card-title>
      </v-card>
    </div>
  </v-app>
</template>
...

The “v-card-subtitle” Component

We can also set card subtitles with the v-card-subtitle component. Being a subtitle, it is styled with a regular font-weight and smaller font size than the title.

<template>
  <v-app>
    <div class="d-flex justify-center ma-4">
      <v-card height="150" width="350">
        <v-card-title>data.zip</v-card-title>
        <v-card-subtitle>Your data is ready</v-card-subtitle>
      </v-card>
    </div>
  </v-app>
</template>
...

Beautify with Vuetify

The complete guide to creating elegant web apps with the Vuetify Material Design framework.

Download a free copy here!

The “v-card-text” Component

We can use the v-card-text component to add text for the card body:

<template>
  <v-app>
    <div class="d-flex justify-center ma-4">
      <v-card width="350">
        <v-card-title>data.zip</v-card-title>
        <v-card-subtitle>Your data is ready</v-card-subtitle>
        <v-card-text
          >You can now download an archive of all your data within the next 24
          hours.</v-card-text
        >
      </v-card>
    </div>
  </v-app>
</template>
...

The “v-card-actions” Component

The v-card-actions component serves as a container for interactive components (like buttons) that let us take certain actions related to the information on the card:

<template>
  <v-app>
    <div class="d-flex justify-center ma-4">
      <v-card width="350">
        <v-card-title>data.zip</v-card-title>
        <v-card-subtitle>Your data is ready</v-card-subtitle>
        <v-card-text
          >You can now download an archive of all your data within the next 24
          hours.</v-card-text
        >
        <v-card-actions>
          <v-btn text color="primary">Download</v-btn>
          <v-btn text>Cancel</v-btn>
        </v-card-actions>
      </v-card>
    </div>
  </v-app>
</template>
...

Outlined Cards

Setting the outlined property of the v-card component to true will remove the elevation of the card:

<template>
  <v-app>
    <div class="d-flex justify-center ma-4">
      <v-card width="350" outlined>
        <v-card-title>data.zip</v-card-title>
        <v-card-subtitle>Your data is ready</v-card-subtitle>
        <v-card-text
          >You can now download an archive of all your data within the next 24
          hours.</v-card-text
        >
        <v-card-actions>
          <v-btn text color="primary">Download</v-btn>
          <v-btn text>Cancel</v-btn>
        </v-card-actions>
      </v-card>
    </div>
  </v-app>
</template>
...

The “elevation” Prop

We can also set the specific amount of elevation we want for a card with the elevation prop:

<template>
  <v-app>
    <div class="d-flex justify-center ma-4">
      <v-card width="350" elevation="5">
        <v-card-title>data.zip</v-card-title>
        <v-card-subtitle>Your data is ready</v-card-subtitle>
        <v-card-text
          >You can now download an archive of all your data within the next 24
          hours.</v-card-text
        >
        <v-card-actions>
          <v-btn text color="primary">Download</v-btn>
          <v-btn text>Cancel</v-btn>
        </v-card-actions>
      </v-card>
    </div>
  </v-app>
</template>
...

Summary

Vuetify provides the v-card component for creating cards, which are used for a variety of functions.

Sign up for our weekly newsletter to keep up to date with more great content from us!

Get the updated article at codingbeautydev.com.