This is the Vuetify 3 documentation, examples and information may be broken or outdated.

Cards

The v-card component is a versatile an enhanced version of v-sheet that provides a simple interface for headings, text, images, icons, and more

Usage

The v-card component is a stylish way to wrap different types of content; such as tables, images, or user actions.

Anatomy

The recommended placement of elements inside of v-card is:

  • Place v-card-title, v-card-subtitle or other title text on top
  • Place v-card-text and other forms of media below the card header
  • Place v-card-actions after card content

Element / AreaDescription
1. ContainerThe Card container holds all v-card components
2. Title (optional)A heading with increased font-size
3. Subtitle (optional)A subheading with a lower emphasis text color
4. Text (optional)A content area with a lower emphasis text color
5. Actions (optional)A content area that typically contains one or more v-btn components

API

ComponentDescription
v-cardPrimary Component
v-card-titleFunctional component used to display the Card’s title. Wraps the #title slot
v-card-subtitleFunctional component used to display the Card’s subtitle. Wraps the #subtitle slot.
v-card-textFunctional component used to display the Card’s subtitle. Wraps the #text slot.
v-card-actionsFunctional component that modifies the default styling of v-btn and provides a container for user actions

Basics

There are three ways you can populate a v-card with content. The first one is by using props, the second one is by slots, and the third one is by manually using the v-card-* components.

v-card/basics-content.vue

Props give you an easy interface to display text-only content. They can also be used to easily render images and icons.

Use slots if you need to render more complex content. If you need full control over the content, use markup.

In some cases it is possible to combine the different options, like the example below where props, slots and markup have all been used.

v-card/basics-combine.vue

Examples

Props

Outlined

A card with the variant prop set to outlined has zero elevation.

v-card/prop-outlined.vue

Misc

Card Reveal

Using v-expand-transition and a @click event you can have a card that reveals more information once the button is clicked, activating the hidden card to be revealed.

v-card/misc-card-reveal.vue

Content wrapping

The v-card component is useful for wrapping content.

v-card/misc-content-wrapping.vue

Custom actions

With a simple conditional, you can easily add supplementary text that is hidden until opened.

v-card/misc-custom-actions.vue

Grids

Using grids, you can create beautiful layouts.

v-card/misc-grids.vue

Horizontal cards

TODO: better description

v-card/misc-horizontal-cards.vue

Information card

Cards are entry points to more detailed information. To keep things concise, ensure to limit the number of actions the user can take.

v-card/misc-information-card.vue

Media with text

Using the layout system, we can add custom text anywhere within the background.

v-card/misc-media-with-text.vue

Twitter card

The v-card component has multiple children components that help you build complex examples without having to worry about spacing. This example is comprised of the v-card-title, v-card-text and v-card-actions components.

v-card/misc-twitter-card.vue

Weather card

Using v-list-items and a v-slider, we are able to create a unique weather card. The list components ensure that we have consistent spacing and functionality while the slider component allows us to provide a useful interface of selection to the user.

v-card/misc-weather-card.vue

Loading

Use an indeterminate v-progress-linear to indicate a loading state.

v-card/prop-loading.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.