<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
	<main class="mdl-layout__content">
		<div class="mdl-grid">
			<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp">
				<figure class="mdl-card__media">
					<img src="https://tfirdaus.github.io/mdl/images/laptop.jpg" alt="" />
				</figure>
				<div class="mdl-card__title">
					<h1 class="mdl-card__title-text">Learning Web Design</h1>
				</div>
				<div class="mdl-card__supporting-text">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
				</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 class="mdl-layout-spacer"></div>
    	<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
					<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
	  </div>
			</div>
			
			
			
			<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp">
				<figure class="mdl-card__media">
					<img src="https://tfirdaus.github.io/mdl/images/html5.jpg" alt="" />
				</figure>
				<div class="mdl-card__title">
					<h1 class="mdl-card__title-text">Learning HTML</h1>
				</div>
				<div class="mdl-card__supporting-text">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
				</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 class="mdl-layout-spacer"></div>
    	<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
					<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
	  </div>
			</div>
		</div>
	</main>
</div>
.mdl-grid {
	max-width: 600px;
}
.mdl-card__media {
	margin: 0;
}
.mdl-card__media > img {
	max-width: 100%;
}
.mdl-card__actions {
	display: flex;
	box-sizing:border-box;
	align-items: center;
}
.mdl-card__actions > .mdl-button--icon {
	margin-right: 3px;
	margin-left: 3px;
}

External CSS

  1. https://fonts.googleapis.com/icon?family=Material+Icons
  2. https://storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css

External JavaScript

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