<!-- 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;
}