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.

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

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

제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.

간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.

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

The v-card component is useful for wrapping content.

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

레이아웃 시스템을 이용해 커스텀 텍스트를 백그라운드 위의 어느 곳에든 넣을 수 있습니다.

Using grids, you can create beautiful layouts.

v-flex를 이용해 커스텀 수평 카드를 만들 수 있습니다. v-card-media가 컨테이너를 덮지 않고 딱 맞게 들어갈 수 있도록 contain 속성(property)를 사용해서 크기를 줄이세요(shrink).

간단한 조건과 함께 열릴때 까지 보이지 않는 추가 텍스트를 쉽게 넣을 수 있습니다.

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.

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.

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.

Using v-list-item and v-img allows us to create unique card layouts in an advanced setting

더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!