<!-- LAYOUT CONTAINER -->
<!-- Simple header with fixed tabs. -->
<div class="mdl-layout mdl-js-layout">

  <!-- All your template markup goes here -->

  <main class="mdl-layout__content">

    <div class="mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">Card title</h2>
      </div>
      <div class="mdl-card__media">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/litter-card.jpg" alt="">
      </div>
      <div class="mdl-card__supporting-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
							Read more
					</a>
      </div>
    </div>
    <!-- /.mdl-card -->

  </main>
  <!-- /.mdl-layout__content -->
</div>
<!-- /.mdl-layout -->
img {
  max-width: 100%;
  height: auto;
}

.demo-grid {
  background-color: gray;
}

.demo-grid .mdl-cell {
  background-color: beige;
  padding: 1.5em 0.5em 0.5em;
}

.mdl-card {
  margin: auto;
}

.mdl-layout {
  margin-top: 30px;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:300,400,500,700
  2. https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css
  3. https://fonts.googleapis.com/icon?family=Material+Icons

External JavaScript

  1. https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js