v-card component is a versatile and enhanced version of v-sheetthat provides a simple interface for headings, text, images, icons, and more
v-card component is a stylish way to wrap different types of content; such as tables, images, or user actions.
|v-card-item||Sub-component used to wrap the Card’s |
|v-card-title||Sub-component used to display the Card’s title. Wraps the |
|v-card-subtitle||Sub-component used to display the Card’s subtitle. Wraps the |
|v-card-text||Sub-component used to display the Card’s text. Wraps the |
|v-card-actions||Sub-component that modifies the default styling of v-btn. Wraps the |
The recommended placement of elements inside of
v-card-subtitleor other title text on top
v-card-textand other forms of media below the card header
v-card-actionsafter card content
|Element / Area||Description|
|1. Container||The Card container holds all |
|2. Title (optional)||A heading with increased font-size|
|3. Subtitle (optional)||A subheading with a lower emphasis text color|
|4. Text (optional)||A content area with a lower emphasis text color|
|5. Actions (optional)||A content area that typically contains one or more v-btncomponents|
There are three ways you can populate a
v-card with content. The first one is by using props, the second one is by slots, and the third one is by manually using the
Props give you an easy interface to display text-only content. They can also be used to easily render images and icons.
Use slots if you need to render more complex content. If you need full control over the content, use markup.
In some cases it is possible to combine the different options, like the example below where props, slots and markup have all been used.
In general slots take precedence over props. So if you provide both text prop and use text slot, then only the slot content will be rendered.
A card with the variant prop set to
outlined has zero elevation.
Using v-expand-transitionand a
@click event you can have a card that reveals more information once the button is clicked, activating the hidden card to be revealed.
v-card component is useful for wrapping content.
With a simple conditional, you can easily add supplementary text that is hidden until opened.
Using grids, you can create beautiful layouts.
TODO: better description
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.
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
Using v-list-itemsand 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.
Use an indeterminate v-progress-linearto indicate a loading state.