Vue Material Demo

HTML

<link rel="stylesheet" href="https://unpkg.com/vue-material@latest/dist/vue-material.css">
<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"></script>
<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
<script src="https://unpkg.com/vue-material@latest"></script>
<div id="app">

  <div class="edit">

    <h1 class="md-display-3">Connect to be more</h1>
    <h2 class="md-subhead">Always be aware of the state of your business </h2>

  </div>

  <div id="canvas">

    <md-layout md-row md-columns id="rightColumn">

      <md-layout md-column>
        <h1 class="" id="entitle">Connect soft documents</h1>
      </md-layout>
      
        <md-layout md-column>
        <h1 class="" id="entitle">Connect soft documents</h1>
      </md-layout>


    </md-layout>

  </div>



</div>

CSS

.edit {
  text-align: center;
    font-family: Heiti SC;
}

    #entitle {
        
    line-height: 1.2em;
    }
.md-display-3 {
  
  font-family: Heiti SC;
}

/*  media queries  */


/*  tablet  */

@media screen and (max-width: 600px) {
  .md-column {
    float: none !important;
    margin: auto;
    text-align: center;
    width: 46%;
  }
}

#entitle {
  
}

#rightColumn {
  background-color: aqua;
  font-family: Heiti SC;
}

JavaScript

Vue.use(VueMaterial)

var App = new Vue({
  el: '#app'
})