Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.
The Material Design Lite (MDL) card component is a user interface element representing a virtual piece of paper that contains related data — such as a photo, some text, and a link — that are all about a single subject.
Cards are a convenient means of coherently displaying related content that is composed of different types of objects. They are also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length. Cards have a constant width and a variable height, depending on their content.
1. Add to html head, BEFORE essentials.css: <link href="assets/plugins/mdl/material.indigo-blue.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 2. Add .enable-materialdesign class to body: <body class="smoothscroll enable-animation enable-materialdesign"> NOTE: if you don't need 'Material Design Lite' javascript plugin, skip step 2 (.enable-materialdesign class is used by assets/js/scripts.js to load MDL plugin from assets/plugins/mdl/) COLOR SCHEME: We use blue as default color scheme. You can create your own material design color: Click to create your material design color Credits: MDL official
<!-- WIDE CARD --> <div class="demo-card-wide mdl-card mdl-shadow--2dp"> <!-- height-50, height-100, height-150, height-200, heitgh-250, etc --> <div class="mdl-card__title height-200 text-white" style="background: url('demo_files/images/mdl-art-min.jpg') center / cover;"> <h2 class="mdl-card__title-text">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 href="#" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> Get Started </a> </div> <!-- text-white, text-black, text-yellow, etc (see essentials.css)--> <div class="mdl-card__menu text-white"> <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> <i class="material-icons">share</i> </button> </div> </div>
<!-- SQUARE CARD --> <div class="demo-card-square mdl-card mdl-shadow--2dp height-300 width-300"> <!-- width-50, width-100, width-150, width-200, width-250, etc height-50, height-100, height-150, height-200, heitgh-250, etc --> <div class="mdl-card__title mdl-card--expand" style="background: url('demo_files/images/mdl-art-min.jpg') top left 15% no-repeat #46B6AC;"> <!-- text-white, text-black, text-yellow, etc (see essentials.css)--> <h2 class="mdl-card__title-text text-white">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 href="#" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> View Updates </a> </div> </div>
<!-- IMAGE --> <!-- width-50, width-100, width-150, width-200, width-250, etc height-50, height-100, height-150, height-200, heitgh-250, etc --> <div class="mdl-card-image mdl-card mdl-shadow--2dp width-250 height-250" style="background: url('demo_files/images/mdl-art-min.jpg') center / cover;"> <div class="mdl-card__title mdl-card--expand"></div> <div class="mdl-card__actions"> <span class="mdl-card-image__filename">Image.jpg</span> </div> </div> <!-- EVENT --> <!-- width-50, width-100, width-150, width-200, width-250, etc height-50, height-100, height-150, height-200, heitgh-250, etc --> <div class="mdl-card-event mdl-card mdl-shadow--2dp width-250 height-250 bg-blue text-white"> <div class="mdl-card__title mdl-card--expand text-white"> <h4 class="text-white size-25"> Featured event:<br> May 24, 2016<br> 7-11pm </h4> </div> <div class="mdl-card__actions mdl-card--border text-white"> <a href="#" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect text-white"> Add to Calendar </a> <div class="mdl-layout-spacer"></div> <i class="material-icons">event</i> </div> </div>
<!-- NO SHADOW --> <div class="mdl-card mdl-mobile-fullwidth"> <div class="mdl-card__title nopadding-left nopadding-right"> <h2 class="mdl-card__title-text size-20"> Auckland Sky Tower <br> <span class="size-15">New Zealand</span> </h2> </div> <div class="mdl-card__media"> <img class="padding-6 img-responsive" src="demo_files/images/mdl-art-min.jpg" alt=""> </div> <div class="mdl-card__supporting-text nopadding-left nopadding-right"> The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere. </div> <div class="mdl-card__actions"> <a href="http://en.wikipedia.org/wiki/Sky_Tower_%28Auckland%29" target="_blank">Wikipedia entry</a> </div> </div> <!-- SHADOW LEVEL 3 --> <div class="mdl-card mdl-mobile-fullwidth mdl-shadow--4dp"> <div class="mdl-card__media"> <img class="padding-6 img-responsive" src="demo_files/images/mdl-art-min.jpg" alt=""> </div> <div class="mdl-card__supporting-text"> <b>Auckland Sky Tower, taken March 24th, 2014</b> </div> <div class="mdl-card__supporting-text"> The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere. </div> </div>
MDL class | Effect | Remarks |
---|---|---|
mdl-card |
Defines div element as an MDL card container | Required on "outer" div |
mdl-card--border |
Adds a border to the card section that it's applied to | Used on the "inner" divs |
mdl-shadow--2dp through mdl-shadow--16dp |
Assigns variable shadow depths (2, 3, 4, 6, 8, or 16) to card | Optional, goes on "outer" div; if omitted, no shadow is present |
mdl-card__title |
Defines div as a card title container | Required on "inner" title div |
mdl-card__title-text |
Assigns appropriate text characteristics to card title | Required on head tag (H1 - H6) inside title div |
mdl-card__subtitle-text |
Assigns text characteristics to a card subtitle | Optional. Should be a child of the title element. |
mdl-card__media |
Defines div as a card media container | Required on "inner" media div |
mdl-card__supporting-text |
Defines div as a card body text container and assigns appropriate text characteristics to body text | Required on "inner" body text div; text goes directly inside the div with no intervening containers |
mdl-card__actions |
Defines div as a card actions container and assigns appropriate text characteristics to actions text | Required on "inner" actions div; content goes directly inside the div with no intervening containers |
mdl-card__menu |
Defines element as top right menu button | Optional. Should be a child of the mdl-card element. |