Card
DashUI cards provide a flexible and extensible content container with multiple variants and options.
Basic Example
Below is an example of a basic card with mixed content and variant option.
Card Body
The building block of a card is the text prop. Use it whenever you need a padded section within a card.
Variant
The variant prop gives you easy access to several different card styles. Available variants are: elevated(default), flat, tonal, outlined, text, and plain.
Color
Cards can be colored by using any of the builtin colors and contextual names using the color prop.
Elevation
The elevation property provides up to 24 levels of shadow depth. By default, cards rest at 2dp.
Hover
When using the hover prop, the cards will increase its elevation when the mouse is hovered over them.
Href
The card becomes an anchor with the href prop.
Link
Add the link prop for the same style without adding an anchor.
Disabled
The disabled prop can be added in order to prevent a user from interacting with the card.
Image
Apply a specific background image to the Card.
Slots
The v-card component provides slots that enable you to customize content created by its props or to add additional content.
Slots give you greater control to customize the content of the v-card component while still taking advantage of the easy-to-use props.
Avatar and icon
You can use the prepend-avatar, append-avatar, prepend-iconand append-icon props or the prepend and append slots to place a v-icon that automatically injects the designated icon.
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.
el·ee·mos·y·nar·y
adjective
"an eleemosynary educational institution."
Content wraping
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 a combination of flex and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.
Media with text
Apply a specific background image to the Card.
Twiter 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.
Loading
Use an indeterminate v-progress-linear to indicate a loading state.
CONTENTS
Introduction
Basic Example
Card Body
Variant
Color
Elevation
Hover
Href
Link
Disabled
Image
Slots
Card Reveal
Content wraping
Custom actions
Grids
Horizontal cards
Media with text
Twiter card
Weather card
Loading