v-card コンポーネントは、パネルから画像まであらゆる用途に使用できる汎用的なコンポーネントです。card コンポーネントには、可能な限りマークアップを簡単にするためのたくさんのヘルパーコンポーネントが存在します。オプションを持たないコンポーネントはレンダリングを高速化し、構築を簡単にするための糖衣構文として機能するために、Vueのコンポーネント機能を使用しています。


A card has 3 basic components, v-card-title, 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-text: Primarily used for text content in a card. Applies padding for text, reduces its font-size to .875rem and changes its color to grey.
  • v-card-title: Provides a default font-size and padding for card titles. Font-size can be overwritten with typography classes, (/styles/typography).



Outlined cards

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


The v-card component is useful for wrapping content.

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-flex を使用することで、カスタマイズされた水平型Cardを作成することができます。v-card-mediacontain プロパティを使用すると、コンテナの内側に収まるように縮小することができます。



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.

Loading card

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.

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.


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

Edit this page | language on Github
StoreFor Enterprise