Wide Card
<style>
.demo-card-wide.mdl-card{
width:512px
}
.demo-card-wide>.mdl-card__title{
color: #fff;
height: 176px;
background: url("https://getmdl.io/assets/demos/welcome_card.jpg") center/cover;
}
</style>
</head>
<body>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">TItle</h2>
</div>
<div class="mdl-card__supporting-text">
Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text;
</div>
<div class="mdl-card__actions mdl-card--border">
<a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">Get Start</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">Share</button>
</div>
</div>
</body>
`</pre>
### Square Card
![Square Card](http://7xu8mu.com1.z0.glb.clouddn.com/wp-content/uploads/squareCard.png)
<pre>`<style>
.demo-card-square.mdl-card{
width:320px;
height: 320px;
}
.demo-card-square>.mdl-card__title{
color: #fff;
background:
url('https://getmdl.io/assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
}
</style>
</head>
</body>
<div class="demo-card-square mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">
Square Card
</h2>
</div>
<div class="mdl-card__supporting-text">
Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text;
</div>
<div class="mdl-card__actions mdl-card--border">
<a href="" class="mdl-button mdl-js-button mdl-js-ripple-effect">View Update</a>
</div>
</div>
</body>
`</pre>
### Image Card
![Image Card](http://7xu8mu.com1.z0.glb.clouddn.com/wp-content/uploads/ImageCard.png)
<pre>`<style>
.demo-card-image.mdl-card{
width: 256px;
height: 256px;
background: url('https://getmdl.io/assets/demos/image_card.jpg') center/cover;
}
.demo-card-image>.mdl-card__actions{
height: 52px;
padding:16px;
background: rgba(0,0,0,0.2);
}
.demo-card-image__filename{
color: #fff;
font-size: 14px;
font-weight: 500;
}
</style>
</head>
</body>
<div class="demo-card-image mdl-card mdl-shadow--2dp">
<div class="mdl-cart__title mdl-card--expand"></div>
<div class="mdl-card__actions">
<span class="demo-card-image__filename">Image Filename</span>
</div>
</div>
</body>
`</pre>
### Event Card
![Event Card](http://7xu8mu.com1.z0.glb.clouddn.com/wp-content/uploads/EventCard.png)
<pre>`<style>
.demo-card-event.mdl-card{
width: 256px;
height: 256px;
background: #3E4EB8;
}
.demo-card-event>.mdl-card__actions{
border-color: rgba(255,255,255,0.2);
}
.demo-card-event>.mdl-card__title{
align-items: flex-start;
}
.demo-card-event>.mdl-card__title>h4{
margin-top: 0;
}
.demo-card-event>.mdl-card__actions{
display: flex;
box-sizing: border-box;
align-items: center;
}
.demo-card-event>.mdl-card__actions>.material-icons{
padding-right: 10px;
}
.demo-card-event>.mdl-card__title, .demo-card-event>.mdl-card__actions, .demo-card-event>.mdl-card__actions>.mdl-button{
color:#fff;
}
</style>
</head>
</body>
<div class="demo-card-event mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<h4>
Featured event:<br>
May 24, 2016<br>
7 - 11pm
</h4>
</div>
<div class="mdl-card__actions mdl-card--border">
<a href="#" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Add to Calendar
</a>
<div class="mdl-layout-spacer"></div>
<i class="material-icons">Evnet</i>
</div>
</div>
</body>