!!!Vuetify
[Vue]

!!!Layout
!v-icon
*利用可能なアイコン
**https://material.io/tools/icons/?style=baseline

!!v-card
*Reference
**https://vuetifyjs.com/ja/components/cards
*Tutorial
*https://www.youtube.com/watch?v=pUwyeWLOnP4&list=PL4cUxeGkcC9g0MQZfHwKcuB0Yswgb3gA5&index=19
*パネルから画像まであらゆる用途に使用できる汎用的なコンポーネント
*card コンポーネントには、可能な限りマークアップを簡単にするためのたくさんのヘルパーコンポーネントが存在

 <template>
   <v-container class="my-5">
     <v-layout row wrap>
       <v-flex xs12 sm6 md4 lg3 v-for="n in num" :key="n.key">
        <v-card flat class="text-xs-center ma-3">
           <v-responsive class="pt-4">
             image goes here
           </v-responsive>
           <v-card-tesxt>
             <div class="subheading">{{ n.value }}</div>
             <div class="gray--text">hello</div>
           </v-card-tesxt>          
           <v-card-action>
             <v-btn flat color="gray">
               <v-icon small left>message</v-icon>
               <span>message</span>
             </v-btn>
           </v-card-action>
         </v-card>
       </v-flex>
     </v-layout>
   </v-container>
 </template>
 <script>
 
 export default {
   name: 'Home',
   data() {
     return {
       num: [
         {key:1,value:'one'},
         {key:2,value:'twe'},
         {key:3,value:'three'},
         {key:4,value:'four'},
         {key:5,value:'five'},
       ]
     }
   },
{{ref_image v-card.png}}