<div class="demo-preview-block"> <h2>Wide card with share menu button</h2> <style> .demo-card-wide.mdl-card { width: 512px; } .demo-card-wide > .mdl-card__title { color: #fff; height: 176px; background: url('demo-images/welcome_card.jpg') center / cover; } .demo-card-wide > .mdl-card__menu { color: #fff; } </style> <div class="mdl-card mdl-shadow--2dp demo-card-wide"> <div class="mdl-card__title"> <h2 class="mdl-card__title-text mdl-color-text--white">Welcome</h2> </div> <div class="mdl-card__supporting-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia... </div> <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> Get Started </a> </div> <div class="mdl-card__menu"> <button id="share-demo" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> <i class="material-icons">share</i> </button> <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="share-demo"> <button class="mdl-menu__item">Item 1</button> <button class="mdl-menu__item">Item 2</button> <button class="mdl-menu__item" disabled>Item 3</button> </ul> </div> </div> <h2>Square card</h2> <style> .demo-card-square.mdl-card { width: 320px; height: 320px; } .demo-card-square > .mdl-card__title { color: #fff; background: url('demo-images/dog.png') bottom right 15% no-repeat #46B6AC; } </style> <div class="mdl-card mdl-shadow--2dp demo-card-square"> <div class="mdl-card__title mdl-card--expand"> <h2 class="mdl-card__title-text">Update</h2> </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"> View Updates </a> </div> </div> <h2>Image card</h2> <style> .demo-card-image.mdl-card { width: 256px; height: 256px; background: url('demo-images/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; } </style> <div class="mdl-card mdl-shadow--2dp demo-card-image"> <div class="mdl-card__title mdl-card--expand"></div> <div class="mdl-card__actions"> <span class="demo-card-image__filename">Image.jpg</span> </div> </div> <h2>Event card</h2> <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__title, .demo-card-event > .mdl-card__actions, .demo-card-event > .mdl-card__actions > .mdl-button { color: #fff; } </style> <div class="mdl-card mdl-shadow--2dp demo-card-event"> <div class="mdl-card__title mdl-card--expand"> <h4 class="mdl-color-text--white"> Featured event:<br> May 24, 2016<br> 7-11pm </h4> </div> <div class="mdl-card__actions mdl-card--border"> <a 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">event</i> </div> </div> <div class="mdl-card mdl-shadow--2dp"> <div class="mdl-card__title mdl-color--primary"> <h2 class="mdl-card__title-text mdl-color-text--accent">Integer lectus lacus, condimentum vitae lectus vitae</h2> </div> <div class="mdl-card__supporting-text"> March 24th, 2014 </div> <div class="mdl-card__supporting-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia. Donec ut risus suscipit, convallis diam et, mattis urna. Phasellus sit amet ipsum nisl. Aliquam sed dictum neque. Vestibulum tempus at lacus et volutpat. Mauris molestie vel mauris id scelerisque. </div> <div class="mdl-card__actions"> <a href="#" class="mdl-button">Some Action</a> </div> </div> <div class="mdl-card mdl-shadow--4dp"> <div class="mdl-card__title mdl-color--primary"> <h2 class="mdl-card__title-text mdl-color-text--accent">Integer lectus lacus, condimentum vitae lectus vitae</h2> </div> <div class="mdl-card__supporting-text"> March 24th, 2014 </div> <div class="mdl-card__supporting-text"> Lorem ipsum dolor sit amet. </div> <div class="mdl-card__actions"> <a href="#" class="mdl-button">Some Action</a> </div> <div class="mdl-card__menu"> <button id="btn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color-text--white"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="btn"> <button class="mdl-menu__item">Item 1</button> <button class="mdl-menu__item">Item 2</button> <button class="mdl-menu__item" disabled>Item 3</button> </ul> </div> </div> </div>