# Cards

The v-card component is a versatile component that can be used for anything from a panel to a static image. The card component has numerous helper components to make markup as easy as possible. Components that have no listed options use Vue’s functional component option for faster rendering and serve as markup sugar to make building easier.

# Usage

A card has 4 basic components, v-card-title, v-card-subtitle, v-card-text and v-card-actions.


# Functional Components

# 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-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.
Edit this page on GitHub
Last updated:07/05/2022, 9:08:15 PM