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.
# Functional Components
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>
Provides a default font-size and padding for card subtitles. Font-size can be overwritten with typography classes.
Primarily used for text content in a card. Applies padding for text, reduces its font-size to .875rem.
Provides a default font-size and padding for card titles. Font-size can be overwritten with typography classes.
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.
An outlined card has 0 elevation and contains a soft border.
# 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
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.
Using grids, you can create beautiful layouts.
# Horizontal cards
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
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
# 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.