# Cards

The v-card component is a versatile and enhanced sheet of paper that provides a simple interface for headings, text, images, icons, and more. Card components that have no listed options, such as v-card-header, are functional components that serve as markup sugar that help make your code more readable.

# Usage

Usage example coming soon...

# API

# Functional Components

The v-card component has multiple special elements called functional components; very fast and stateless. Visit the official Vue documentation for more information on functional components.

The following snippet shows the default structure of a card:

<v-card>
  <v-card-img>
    <v-img src="..." />
  </v-card-img>

  <v-card-media>
    <v-img src="..." />
  </v-card-media>

  <v-card-header>
    <v-card-avatar>
      <v-avatar image="...">
    </v-card-avatar>

    <v-card-header-text>
      <v-card-title>...</v-card-title>

      <v-card-subtitle>...</v-card-subtitle>
    </v-card-header-text>

    <v-card-avatar>
      <v-avatar icon="...">
    </v-card-avatar>
  </v-card-header>

  <v-card-text>...</v-card-text>

  <v-card-actions>
    <v-btn>Action 1</v-btn>

    <v-btn>Action 2</v-btn>
  </v-card-actions>
</v-card>

# v-card-actions

The container used for placing actions for a card, such as v-btn or v-menu. Also applies special margin to buttons so that they properly line up with other card content areas.

# v-card-avatar

TODO

# v-card-header

TODO

# v-card-header-text

TODO

# v-card-img

TODO

# v-card-subtitle

Provides a default font-size and padding for card subtitles. Font-size can be overwritten with typography classes.

# v-card-text

Primarily used for text content in a card. Applies padding for text, reduces its font-size to .875rem.

# v-card-title

Provides a default font-size and padding for card titles. Font-size can be overwritten with typography classes.

# Examples

# Props

# Loading

Cards can be set to a loading state when processing a user action. This disables further actions and provides visual feedback with an indeterminate v-progress-linear.

# Outlined

An outlined card has 0 elevation and contains a soft border.

# 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.

# Content wrapping

The v-card component is useful for wrapping content.

# Custom actions

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

# Grids

Using grids, you can create beautiful layouts.

# Horizontal cards

Using v-col, you can create customized horizontal cards. Use the contain property to shrink the v-img to fit inside the container, instead of covering.

# 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.

# Media with text

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

# 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.

# 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.

Ready for more?

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