Wide Card

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>`&lt;style&gt;
    .demo-card-square.mdl-card{
        width:320px;
        height: 320px;
    }
    .demo-card-square&gt;.mdl-card__title{
        color: #fff;
  background:
    url('https://getmdl.io/assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;/body&gt;
&lt;div class="demo-card-square mdl-card mdl-shadow--2dp"&gt;
    &lt;div class="mdl-card__title mdl-card--expand"&gt;
        &lt;h2 class="mdl-card__title-text"&gt;
            Square Card
        &lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="mdl-card__supporting-text"&gt;
        Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text; Supporting Text;
    &lt;/div&gt;
    &lt;div class="mdl-card__actions mdl-card--border"&gt;
        &lt;a href="" class="mdl-button mdl-js-button mdl-js-ripple-effect"&gt;View Update&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
`</pre>

### Image Card

![Image Card](http://7xu8mu.com1.z0.glb.clouddn.com/wp-content/uploads/ImageCard.png)

<pre>`&lt;style&gt;
    .demo-card-image.mdl-card{
        width: 256px;
        height: 256px;
        background: url('https://getmdl.io/assets/demos/image_card.jpg') center/cover;
    }
    .demo-card-image&gt;.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;
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;/body&gt;
&lt;div class="demo-card-image mdl-card mdl-shadow--2dp"&gt;
    &lt;div class="mdl-cart__title mdl-card--expand"&gt;&lt;/div&gt;
    &lt;div class="mdl-card__actions"&gt;
        &lt;span class="demo-card-image__filename"&gt;Image Filename&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
`</pre>

### Event Card

![Event Card](http://7xu8mu.com1.z0.glb.clouddn.com/wp-content/uploads/EventCard.png)

<pre>`&lt;style&gt;
    .demo-card-event.mdl-card{
        width: 256px;
        height: 256px;
        background: #3E4EB8;
    }
    .demo-card-event&gt;.mdl-card__actions{
        border-color: rgba(255,255,255,0.2);
    }
    .demo-card-event&gt;.mdl-card__title{
        align-items: flex-start;
    }
    .demo-card-event&gt;.mdl-card__title&gt;h4{
        margin-top: 0;
    }
    .demo-card-event&gt;.mdl-card__actions{
        display: flex;
        box-sizing: border-box;
        align-items: center;
    }
    .demo-card-event&gt;.mdl-card__actions&gt;.material-icons{
        padding-right: 10px;
    }
    .demo-card-event&gt;.mdl-card__title, .demo-card-event&gt;.mdl-card__actions, .demo-card-event&gt;.mdl-card__actions&gt;.mdl-button{
        color:#fff;
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;/body&gt;
    &lt;div class="demo-card-event mdl-card mdl-shadow--2dp"&gt;
        &lt;div class="mdl-card__title mdl-card--expand"&gt;
            &lt;h4&gt;
                Featured event:&lt;br&gt;
                May 24, 2016&lt;br&gt;
                7 - 11pm
            &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="mdl-card__actions mdl-card--border"&gt;
            &lt;a href="#" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"&gt;
                Add to Calendar
            &lt;/a&gt;
            &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
            &lt;i class="material-icons"&gt;Evnet&lt;/i&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;