scrimba
Learn Vuetify
Cards
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

AboutCommentsNotes
Cards
Expand for more info
components
Card.vue
run
preview
console
<template>
<div>
<h3>Card</h3>
<v-card
class="mx-auto"
color="#26c6da"
dark
max-width="400"
>
<v-card-title>
<v-icon
large
left
>
mdi-twitter
</v-icon>
<span class="title font-weight-light">Twitter</span>
</v-card-title>

<v-card-text class="headline font-weight-bold">
"Vue Rocks!"
</v-card-text>

<v-card-actions>
<v-list-item class="grow">
<v-list-item-avatar color="grey darken-3">
<v-img
class="elevation-6"
src="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
></v-img>
</v-list-item-avatar>

<v-list-item-content>
<v-list-item-title>Evan You</v-list-item-title>
</v-list-item-content>

<v-row
align="center"
justify="end"
>
<v-icon class="mr-1">mdi-heart</v-icon>
<span class="subheading mr-2">256</span>
<span class="mr-1">·</span>
<v-icon class="mr-1">mdi-share-variant</v-icon>
<span class="subheading">45</span>
</v-row>
</v-list-item>
</v-card-actions>
</v-card>
</div>
</template>
Console
"Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools"
,
"You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html"
,
/index.html
-5:04