Vuetify Basic

by Asif Sharif Shahid

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<div id="app">
  <v-app id="inspire">
      <v-card>
        <v-container
          fluid
          style="min-height: 0; height: 250px; overflow-y: auto; border: solid "
          grid-list-lg
        >
          <v-layout row wrap>
            <v-flex xs4>
              <v-card color="blue-grey darken-2" class="white--text">
                <v-card-title primary-title>
                  <div class="headline">Unlimited music now</div>
                </v-card-title>
                <v-card-actions>
                  <v-btn flat dark>Listen now</v-btn>
                </v-card-actions>
              </v-card>
            </v-flex>
            <v-flex xs4>
              <v-card color="blue-grey darken-2" class="white--text">
                <v-card-title primary-title>
                  <div class="headline">Unlimited music now</div>
                </v-card-title>
                <v-card-actions>
                  <v-btn flat dark>Listen now</v-btn>
                </v-card-actions>
              </v-card>
            </v-flex>
            <v-flex xs4>
              <v-card color="blue-grey darken-2" class="white--text">
                <v-card-title primary-title>
                  <div class="headline">Unlimited music now</div>
                </v-card-title>
                <v-card-actions>
                  <v-btn flat dark>Listen now</v-btn>
                </v-card-actions>
              </v-card>
            </v-flex>
          </v-layout>
          <v-layout row wrap>
            <v-flex xs4>
              <v-card color="blue-grey darken-2" class="white--text">
                <v-card-title primary-title>
                  <div class="headline">Unlimited music now</div>
                </v-card-title>
               ...

CSS

.layout.wrap {
    height: 50%;
}

.application .theme--light.card, .theme--light .card {
    height: 100% !important;
}

.card__title--primary {
    padding-top: 3px;
}

JavaScript

Vue.use(Vuetify);

var vm = new Vue({
	el: "#app",
  data: {
  }
});