<div id="app">
<v-app id="inspire">
<v-card
max-width="400"
class="mx-auto"
>
<v-system-bar color="pink darken-2"></v-system-bar>
<v-app-bar dark color="pink">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>My Music</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-app-bar>
<v-container
class="pa-2"
fluid
grid-list-md
>
<v-layout column>
<v-flex>
<v-card
color="#385F73"
dark
>
<v-card-text class="white--text">
<div class="headline mb-2">Unlimited music now</div>
Listen to your favorite artists and albums whenever and wherever, online and offline.
</v-card-text>
<v-card-actions>
<v-btn text>Listen Now</v-btn>
</v-card-actions>
</v-card>
</v-flex>
<v-flex
v-for="(item, i) in items"
:key="i"
>
<v-card
:color="item.color"
dark
>
<v-list-item three-line>
<v-list-item-content>
<v-list-item-title
class="headline mb-2"
v-text="item.title"
></v-list-item-title>
<v-list-item-subtitle v-text="item.artist"></v-list-item-subtitle>
<v-btn class="btn-bottom-left">Прижми меня к низу</v-btn>
</v-list-item-content>
<v-list-item-avatar
size="125"
tile
>
<v-img :src="item.src"></v-img>
</v-list-item-avatar>
</v-list-item>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: [
{
color: '#1F7087',
src: 'https://cdn.vuetifyjs.com/images/cards/foster.jpg',
title: 'Supermodel',
artist: 'Foster the People',
},
{
color: '#952175',
src: 'https://cdn.vuetifyjs.com/images/cards/halcyon.png',
title: 'Halcyon Days',
artist: 'Ellie Goulding',
},
],
}),
})
View Compiled