Card Material Design alignment.

src/_variables.scss

@@ -225,17 +225,9 @@ $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
 /* ==========  Card  ========== */
 
 $card-background-color: unquote("rgb(#{$color-white})") !default;
-$heading-color: unquote("rgb(#{$color-primary-contrast})") !default;
+$card-action-link-color: unquote("rgb(#{$color-primary-dark})") !default;
-$heading-back-color: unquote("rgb(#{$color-primary-contrast})") !default;
+$card-image-placeholder-color: unquote("rgb(#{$color-accent})") !default;
-$heading-back-bgcolor: unquote("rgb(#{$color-primary-dark})") !default;
+$card-supporting-text-text-color: $text-color-primary !default;
-$action-link-color: unquote("rgb(#{$color-primary-dark})") !default;
-$caption-color: unquote("rgb(#{$color-primary-contrast})") !default;
-$caption-bgcolor: unquote("rgb(#{$color-primary-dark})") !default;
-$image-placeholder-color: unquote("rgb(#{$color-accent})") !default;
-$lower-text-color: unquote("rgb(#{$color-primary})") !default;
-
-/* Heading back */
-$heading-back-border: 0 none unquote("rgb(#{$color-white})") !default;
 
 /* ==========  Sliders ========== */
 
@@ -449,50 +441,33 @@ $checkbox-ripple-size: $checkbox-label-height * 1.5;
 $card-width: 330px !default;
 $card-height: 200px !default;
 $card-font-size: 16px !default;
-$card-heading-font-size: 24px !default;
+$card-title-font-size: 24px !default;
-$card-heading-height: 96px !default;
+$card-title-height: 96px !default;
 $card-horizontal-padding: 16px !default;
 $card-vertical-padding: 8px !default;
 
-$card-heading-perspective-origin-x: 165px !default;
+$card-title-perspective-origin-x: 165px !default;
-$card-heading-perspective-origin-y: 56px !default;
+$card-title-perspective-origin-y: 56px !default;
 
-$card-heading-transform-origin-x: 165px !default;
+$card-title-transform-origin-x: 165px !default;
-$card-heading-transform-origin-y: 56px !default;
+$card-title-transform-origin-y: 56px !default;
 
-$card-heading-text-transform-origin-x: 149px !default;
+$card-title-text-transform-origin-x: 149px !default;
-$card-heading-text-transform-origin-y: 48px !default;
+$card-title-text-transform-origin-y: 48px !default;
 
-$card-caption-perspective-origin-x: 165px !default;
+$card-supporting-text-font-size: 13px !default;
-$card-caption-perspective-origin-y: 16px !default;
+$card-supporting-text-line-height: 18px !default;
+$card-supporting-text-vertical-margin: 10px !default;
 
-$card-caption-font-size: 12px !default;
+$card-actions-height: 50px !default;
-$card-caption-height: 16px !default;
+$card-actions-font-size: 16px !default;
 
-$card-lower-font-size: 13px !default;
+$card-title-text-font-weight: 300 !default;
-$card-lower-line-height: 18px !default;
-$card-lower-height: 108px !default;
-$card-lower-vertical-margin: 10px !default;
-
-$card-bottom-height: 50px !default;
-$card-bottom-font-size: 16px !default;
-
-$card-bottom-anchor-height: 50px !default;
-$card-bottom-anchor-line-height: 50px !default;
-$card-bottom-anchor-font-size: 13px !default;
-
-$card-bottom-anchor-perspective-origin-x: 165px !default;
-$card-bottom-anchor-perspective-origin-y: 25px !default;
-
-$card-bottom-anchor-transform-origin-x: 165px !default;
-$card-bottom-anchor-transform-origin-y: 25px !default;
-
-$card-heading-text-font-weight: 300 !default;
 $card-z-index: 1 !default;
 
 /* Cover image */
-$cover-image-height: 186px !default;
+$card-cover-image-height: 186px !default;
-$background-image-url: '' !default;
+$card-background-image-url: '' !default;
 
 
 /* BUTTON */

src/card/README.md

@@ -37,16 +37,16 @@ To use any MDL component, you must include the minified CSS and JavaScript files
  3. Add one or more MDL classes, separated by spaces, to the "outer" div and the "inner" divs (depending on their intended use) using the `class` attribute.
 ```html
 <div class="mdl-card">
-  <div class="mdl-card__heading">
+  <div class="mdl-card__title">
   ...
   </div>
-  <div class="mdl-card__img-container">
+  <div class="mdl-card__media">
   ...
   </div>
-  <div class="mdl-card__lower">
+  <div class="mdl-card__supporting-text">
   ...
   </div>
-  <div class="mdl-card__bottom">
+  <div class="mdl-card__actions">
   ...
   </div>
 </div>
@@ -54,16 +54,16 @@ To use any MDL component, you must include the minified CSS and JavaScript files
 &nbsp;4. Add content to each "inner" div, again depending on its intended use, using standard HTML elements and, optionally, additional MDL classes.
 ```html
 <div class="mdl-card">
-  <div class="mdl-card__heading">
+  <div class="mdl-card__title">
-    <h2 class="mdl-card__heading-text">Heading Text Goes Here</h2>
+    <h2 class="mdl-card__title-text">title Text Goes Here</h2>
   </div>
-  <div class="mdl-card__img-container">
+  <div class="mdl-card__media">
     <img src="photo.jpg" width="220" height="140" border="0" alt="" style="padding:20px;">
   </div>
-  <div class="mdl-card__lower">
+  <div class="mdl-card__supporting-text">
     This text might describe the photo and provide further information, such as where and when it was taken.
   </div>
-  <div class="mdl-card__bottom">
+  <div class="mdl-card__actions">
     <a href="(URL or function)">Related Action</a>
   </div>
 </div>
@@ -73,19 +73,19 @@ The card component is ready for use.
 
 ####Examples
 
-A card (no shadow) with a heading, image, text, and action.
+A card (no shadow) with a title, image, text, and action.
 
 ```html
 <div class="mdl-card">
-  <div class="mdl-card__heading">
+  <div class="mdl-card__title">
-     <h2 class="mdl-card__heading-text">Auckland Sky Tower<br/>Auckland, New Zealand</h2>
+     <h2 class="mdl-card__title-text">Auckland Sky Tower<br/>Auckland, New Zealand</h2>
   </div>
-  <div class="mdl-card__img-container"><img src="skytower.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
+  <div class="mdl-card__media"><img src="skytower.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
   </div>
-  <div class="mdl-card__lower">
+  <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 class="mdl-card__bottom">
+  <div class="mdl-card__actions">
      <a href="http://en.wikipedia.org/wiki/Sky_Tower_%28Auckland%29">Wikipedia entry</a>
   </div>
 </div>
@@ -95,12 +95,12 @@ Card (level-3 shadow) with an image, caption, and text:
 
 ```html
 <div class="mdl-card mdl-shadow--4dp">
-  <div class="mdl-card__img-container"><img src="skytower.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
+  <div class="mdl-card__media"><img src="skytower.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
   </div>
-  <div class="mdl-card__caption">
+  <div class="mdl-card__supporting-text">
     Auckland Sky Tower, taken March 24th, 2014
   </div>
-  <div class="mdl-card__lower">
+  <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>
@@ -113,14 +113,11 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
 |-----------|--------|---------|
 | `mdl-card` | Defines div element as an MDL card container | Required on "outer" div |
 | `mdl-shadow--2dp through mdl-shadow--8dp` | Assigns variable shadow depths (1-5) to card | Optional, goes on "outer" div; if omitted, no shadow is present |
-| `mdl-card__heading` | Defines div as a card heading container(1) | Required on "inner" heading div |
+| `mdl-card__title` | Defines div as a card title container | Required on "inner" title div |
-| `mdl-card__heading-text` | Assigns appropriate text characteristics to card heading | Required on head tag (H1 - H6) inside heading div |
+| `mdl-card__title-text` | Assigns appropriate text characteristics to card title | Required on head tag (H1 - H6) inside title div |
-| `mdl-card__img-container` | Defines div as a card image container | Required on "inner" image div |
+| `mdl-card__media` | Defines div as a card media container | Required on "inner" media div |
-| `mdl-card__lower` | Defines div as a card body text container(1) 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__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__caption` | Defines div as a card caption container and assigns appropriate text characteristics to caption text | Required on "inner" caption 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__bottom` | Defines div as a card bottom text container(1) (typically an action bar) and assigns appropriate text characteristics to bottom text | Required on "inner" bottom div; content goes directly inside the div with no intervening containers |
-
-(1) Although some class names imply positioning, they really just semantically define the styling of the content. The actual positions of the "inner" divs within the card are determined by order of appearance (i.e., top-down). You may use them in any order, so long as they maintain their relationships as siblings and as direct children of the "outer" container div.
 
 ##More information
 For working examples of the **card** component, see the MDL [card demo page](www.github.com/google/material-design-lite/src/card/demo.html).

src/card/_card.scss

@@ -27,99 +27,68 @@
   border-radius: 2px;
 }
 
-.mdl-card__img-container {
+.mdl-card__media {
-  background-color     : $image-placeholder-color;
+  background-color     : $card-image-placeholder-color;
-  @if str_length($background-image-url) > 0 {
+  @if str_length($card-background-image-url) > 0 {
-  background-image     : url($background-image-url);
+  background-image     : url($card-background-image-url);
   }
   background-repeat    : repeat;
   background-position  : 50% 50%;
   background-size      : cover;
   background-origin    : padding-box;
   background-attachment: scroll;
-  height               : $cover-image-height;
+  height               : $card-cover-image-height;
 }
 
-.mdl-card__heading {
+.mdl-card__title {
   align-items       : center;
-  background        : $heading-back-bgcolor none repeat scroll 0 0 / auto padding-box border-box;
+  display: block;
-  border            : $heading-back-border;
-  color             : $heading-back-color;
   display           : flex;
-  font-size         : $card-heading-font-size;
+  font-size         : $card-title-font-size;
-  height            : $card-heading-height;
+  height            : $card-title-height;
   justify-items     : stretch;
   line-height       : normal;
   padding           : $card-vertical-padding $card-horizontal-padding;
-  perspective-origin: $card-heading-perspective-origin-x $card-heading-perspective-origin-y;
+  perspective-origin: $card-title-perspective-origin-x $card-title-perspective-origin-y;
-  transform-origin  : $card-heading-transform-origin-x $card-heading-transform-origin-y;
+  transform-origin  : $card-title-transform-origin-x $card-title-transform-origin-y;
   width             : 100%;
 }
 
-.mdl-card__heading-text {
+.mdl-card__title-text {
   align-self      : center;
-  color           : $heading-color;
+  display: block;
   display         : flex;
   font-size       : inherit;
-  font-weight     : $card-heading-text-font-weight;
+  font-weight     : $card-title-text-font-weight;
-  height          : $card-heading-height;
+  height          : $card-title-height;
-  justify-self    : stretch;
   line-height     : normal;
   overflow        : hidden;
-  transform-origin: $card-heading-text-transform-origin-x $card-heading-text-transform-origin-y;
+  transform-origin: $card-title-text-transform-origin-x $card-title-text-transform-origin-y;
   width           : 90%;
 }
 
-.mdl-card__caption {
+.mdl-card__supporting-text {
-  background        : $caption-bgcolor none repeat scroll 0 0 / auto padding-box border-box;
+  color          : $card-supporting-text-text-color;
-  color             : $caption-color;
+  font-size      : $card-supporting-text-font-size;
-  font-size         : $card-caption-font-size;
+  line-height    : $card-supporting-text-line-height;
-  height            : $card-caption-height;
+  margin         : $card-supporting-text-vertical-margin 0;
-  line-height       : normal;
+  overflow       : hidden;
   padding        : $card-vertical-padding $card-horizontal-padding;
-  perspective-origin: $card-caption-perspective-origin-x $card-caption-perspective-origin-y;
-  width             : 100%;
-}
-
-.mdl-card__lower {
-  color          : $lower-text-color;
-  font-size      : $card-lower-font-size;
-  height         : $card-lower-height;
-  line-height    : $card-lower-line-height;
-  margin         : $card-lower-vertical-margin 0;
-  overflow       : hidden;
-  padding        : 0 $card-horizontal-padding;
   width          : 90%;
 }
 
-.mdl-card__bottom {
+.mdl-card__actions {
-  font-size  : $card-bottom-font-size;
+  font-size  : $card-actions-font-size;
-  height     : $card-bottom-height;
+  height     : $card-actions-height;
   line-height: normal;
   width      : 100%;
-  border-top : 1px solid rgba(0,0,0,.16);
+  background-color: rgba(0,0,0,0);
+  padding: 0 8px;
 }
 
-.mdl-card__bottom a {
-  box-sizing        : border-box;
-  color             : $action-link-color;
-  cursor            : pointer;
-  display           : inline-block;
-  font-size         : $card-bottom-anchor-font-size;
-  font-weight       : normal;
-  height            : $card-bottom-anchor-height;
-  line-height       : $card-bottom-anchor-line-height;
-  padding           : 0 $card-horizontal-padding;
-  perspective-origin: $card-bottom-anchor-perspective-origin-x $card-bottom-anchor-perspective-origin-y;
-  text-transform    : uppercase;
-  transform-origin  : $card-bottom-anchor-transform-origin-x $card-bottom-anchor-transform-origin-y;
-  width             : 100%;
-  text-decoration   : none;
-}
 
 .mdl-card__menu {
   position: absolute;
   right: 0;
   top: 0;
-  color: $heading-color;
 }

src/card/demo.html

@@ -16,65 +16,59 @@
   <body class="demo-page demo-page--card">
   <div class="demo-preview-block">
     <div class="mdl-card mdl-shadow--2dp">
-      <div class="mdl-card__img-container">
+      <div class="mdl-card__title">
+         <h2 class="mdl-card__title-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
       </div>
-      <div class="mdl-card__heading">
+      <div class="mdl-card__supporting-text">
-         <h2 class="mdl-card__heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
-      </div>
-      <div class="mdl-card__caption">
         March 24th, 2014
       </div>
-      <div class="mdl-card__lower">
+      <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__bottom">
+      <div class="mdl-card__actions">
-         <a href="#">Some Action</a>
+         <a href="#" class="mdl-button">Some Action</a>
       </div>
     </div>
     <div class="mdl-card mdl-shadow--3dp demo-card--wide">
-      <div class="mdl-card__img-container">
+      <div class="mdl-card__title">
+         <h2 class="mdl-card__title-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
       </div>
-      <div class="mdl-card__heading">
+      <div class="mdl-card__supporting-text">
-         <h2 class="mdl-card__heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
-      </div>
-      <div class="mdl-card__caption">
         March 24th, 2014
       </div>
-      <div class="mdl-card__lower">
+      <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__bottom">
+      <div class="mdl-card__actions">
-         <a href="#">Some Action</a>
+         <a href="#" class="mdl-button">Some Action</a>
       </div>
     </div>
     <div class="mdl-card mdl-shadow--4dp">
-      <div class="mdl-card__img-container">
+      <div class="mdl-card__title">
+         <h2 class="mdl-card__title-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
       </div>
-      <div class="mdl-card__heading">
+      <div class="mdl-card__supporting-text">
-         <h2 class="mdl-card__heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
-      </div>
-      <div class="mdl-card__caption">
         March 24th, 2014
       </div>
-      <div class="mdl-card__lower">
+      <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__bottom">
+      <div class="mdl-card__actions">
-         <a href="#">Some Action</a>
+         <a href="#" class="mdl-button">Some Action</a>
       </div>
     </div>
     <div class="mdl-card mdl-shadow--4dp">
-      <div class="mdl-card__heading">
+      <div class="mdl-card__title">
-         <h2 class="mdl-card__heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
+         <h2 class="mdl-card__title-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
       </div>
-      <div class="mdl-card__caption">
+      <div class="mdl-card__supporting-text">
         March 24th, 2014
       </div>
-      <div class="mdl-card__lower">
+      <div class="mdl-card__supporting-text">
         Lorem ipsum dolor sit amet.
       </div>
-      <div class="mdl-card__bottom">
+      <div class="mdl-card__actions">
-         <a href="#">Some Action</a>
+         <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">

templates/article/index.html

@@ -55,7 +55,7 @@
             </label>
             <div class="mdl-textfield__expandable-holder">
               <input class="mdl-textfield__input" type="text" id="search" />
-              <label class="mdl-textfield__label" for="expando1">Enter your query...</label>
+              <label class="mdl-textfield__label" for="search">Enter your query...</label>
             </div>
           </div>
         </div>

templates/blog/entry.html

@@ -65,10 +65,10 @@
       <main class="mdl-layout__content mdl-grid">
 
         <div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">
-          <div class="mdl-card--img-container mdl-color-text--grey-50">
+          <div class="mdl-card__media mdl-color-text--grey-50">
             <h3>On the road again</h3>
           </div>
-          <div class="mdl-color-text--grey-700 mdl-card--lower meta">
+          <div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">
             <img src="images/logo.svg" class="logo">
             <div>
               <strong>The Newist</strong>
@@ -79,7 +79,7 @@
             <div><i class="material-icons">bookmark</i></div>
             <div><i class="material-icons">share</i></div>
           </div>
-          <div class="mdl-color-text--grey-700 mdl-card--bottom">
+          <div class="mdl-color-text--grey-700 mdl-card__supporting-text">
             <p>
               Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Sunt velit aliquip sunt elit ex nulla reprehenderit qui ut eiusmod ipsum do. Duis veniam reprehenderit laborum occaecat id proident nulla veniam. Duis enim deserunt voluptate aute veniam sint pariatur exercitation. Irure mollit est sit labore est deserunt pariatur duis aute laboris cupidatat. Consectetur consequat esse est sit veniam adipisicing ipsum enim irure.
             </p>
@@ -90,7 +90,7 @@
               Cillum ullamco eu cupidatat excepteur Lorem minim sint quis officia irure irure sint fugiat nostrud. Pariatur Lorem irure excepteur Lorem non irure ea fugiat adipisicing esse nisi ullamco proident sint. Consectetur qui quis cillum occaecat ullamco veniam et Lorem cupidatat pariatur. Labore officia ex aliqua et occaecat velit dolor deserunt minim velit mollit irure. Cillum cupidatat enim officia non velit officia labore. Ut esse nisi voluptate et deserunt enim laborum qui magna sint sunt cillum. Id exercitation labore sint ea labore adipisicing deserunt enim commodo consectetur reprehenderit enim. Est anim nostrud quis non fugiat duis cillum. Aliquip enim officia ad commodo id.
             </p>
           </div>
-          <div class="mdl-color-text--primary-contrast mdl-card--bottom comments">
+          <div class="mdl-color-text--primary-contrast mdl-card__supporting-text comments">
             <form>
               <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                 <textarea rows=1 class="mdl-textfield__input" id="comment"></textarea>

templates/blog/index.html

@@ -63,10 +63,10 @@
       </header>
       <main class="mdl-layout__content mdl-grid">
         <div class="mdl-card coffee-pic mdl-cell mdl-cell--8-col">
-          <div class="mdl-card--img-container mdl-color-text--grey-50">
+          <div class="mdl-card__media mdl-color-text--grey-50">
             <h3><a href="entry.html">Coffee Pic</a></h3>
           </div>
-          <div class="mdl-card--bottom meta mdl-color-text--grey-600">
+          <div class="mdl-card__supporting-text meta mdl-color-text--grey-600">
             <img src="images/logo.svg" class="logo">
             <div>
               <strong>The Newist</strong>
@@ -75,11 +75,11 @@
           </div>
         </div>
         <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
-          <div class="mdl-card--img-container mdl-color--primary mdl-color-text--grey-600">
+          <div class="mdl-card__media mdl-color--primary mdl-color-text--grey-600">
             <img src="images/logo.svg">
             +1,337
           </div>
-          <div class="mdl-card--bottom meta mdl-color-text--grey-600">
+          <div class="mdl-card__supporting-text meta mdl-color-text--grey-600">
             <div>
               <strong>The Newist</strong>
             </div>
@@ -94,13 +94,13 @@
           </div>
         </div>
         <div class="mdl-card on-the-road-again mdl-cell mdl-cell--8-col">
-          <div class="mdl-card--img-container mdl-color-text--grey-50">
+          <div class="mdl-card__media mdl-color-text--grey-50">
             <h3><a href="entry.html">On the road again</a></h3>
           </div>
-          <div class="mdl-color-text--grey-600 mdl-card--lower">
+          <div class="mdl-color-text--grey-600 mdl-card__supporting-text">
             Ea mollit dolore esse velit mollit in dolore nostrud nulla sint. Ex occaecat dolor consectetur aliqua occaecat proident nisi. Esse do aute sit labore ipsum. Enim sunt anim et do magna occaecat consequat occaecat commodo sunt proident. Officia esse irure cillum laborum nostrud consequat nulla quis nostrud tempor dolore commodo.
           </div>
-          <div class="mdl-card--bottom meta mdl-color-text--grey-600">
+          <div class="mdl-card__supporting-text meta mdl-color-text--grey-600">
             <img src="images/logo.svg" class="logo">
             <div>
               <strong>The Newist</strong>
@@ -109,13 +109,13 @@
           </div>
         </div>
         <div class="mdl-card subscribe mdl-color-text--grey-600 mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
-          <div class="mdl-card--header">
+          <div class="mdl-card__title">
             <h3>About</h3>
           </div>
-          <div class="mdl-card--lower mdl-color-text--grey-600">
+          <div class="mdl-card__supporting-text mdl-color-text--grey-600">
             Elit ullamco pariatur irure quis Lorem consectetur dolor tempor minim ullamco velit. Dolor enim proident aliquip quis sit ullamco cupidatat aliqua ullamco proident ex non culpa. In laboris cillum ipsum adipisicing mollit. Irure ea et non anim labore exercitation consectetur cupidatat ea. Adipisicing eu pariatur commodo quis aute et consequat labore occaecat. Occaecat et cupidatat esse dolore officia incididunt ad in labore proident cupidatat. Ipsum ad qui quis occaecat culpa consequat minim. Ipsum culpa enim elit pariatur incididunt ad anim. Mollit laboris eu officia ipsum sit sit exercitation dolor adipisicing nulla. Ea eu consectetur eu laboris fugiat irure deserunt veniam in esse nulla et.
           </div>
-          <div class="mdl-card--bottom meta">
+          <div class="mdl-card__actions meta">
             <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
               <i class="material-icons">share</i>
             </button>
@@ -133,13 +133,13 @@
           </div>
         </div>
         <div class="mdl-card amazing mdl-cell mdl-cell--8-col">
-          <div class="mdl-card--header mdl-color--accent mdl-color-text--grey-50">
+          <div class="mdl-card__title mdl-color--accent mdl-color-text--grey-50">
             <h3 class="quote"><a href="entry.html">I couldn’t take any pictures but this was an amazing thing…</a></h3>
           </div>
-          <div class="mdl-card--lower mdl-color-text--grey-600">
+          <div class="mdl-card__supporting-text mdl-color-text--grey-600">
             Ea mollit dolore esse velit mollit in dolore nostrud nulla sint. Ex occaecat dolor consectetur aliqua occaecat proident nisi. Esse do aute sit labore ipsum. Enim sunt anim et do magna occaecat consequat occaecat commodo sunt proident. Officia esse irure cillum laborum nostrud consequat nulla quis nostrud tempor dolore commodo.
           </div>
-          <div class="mdl-card--bottom meta mdl-color-text--grey-600">
+          <div class="mdl-card__supporting-text meta mdl-color-text--grey-600">
             <img src="images/logo.svg" class="logo">
             <div>
               <strong>The Newist</strong>
@@ -149,13 +149,13 @@
         </div>
         <div class="empty mdl-cell mdl-cell--4-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
         <div class="mdl-card shopping mdl-cell mdl-cell--8-col">
-          <div class="mdl-card--img-container mdl-color-text--grey-50">
+          <div class="mdl-card__media mdl-color-text--grey-50">
             <h3><a href="entry.html">Shopping</a></h3>
           </div>
-          <div class="mdl-color-text--grey-600 mdl-card--lower">
+          <div class="mdl-card__supporting-text mdl-color-text--grey-600">
             Ea mollit dolore esse velit mollit in dolore nostrud nulla sint. Ex occaecat dolor consectetur aliqua occaecat proident nisi. Esse do aute sit labore ipsum. Enim sunt anim et do magna occaecat consequat occaecat commodo sunt proident. Officia esse irure cillum laborum nostrud consequat nulla quis nostrud tempor dolore commodo.
           </div>
-          <div class="mdl-card--bottom meta mdl-color-text--grey-600">
+          <div class="mdl-card__supporting-text meta mdl-color-text--grey-600">
             <img src="images/logo.svg" class="logo">
             <div>
               <strong>The Newist</strong>

templates/blog/styles.css

@@ -35,11 +35,11 @@ main.mdl-layout__content {
   align-items: stretch;
   min-height: 460px;
 }
-.mdl-card--header {
+.mdl-card__title {
   padding: 16px;
   flex-grow: 1;
 }
-.mdl-card--img-container {
+.mdl-card__media {
   box-sizing: border-box;
   background-size: cover;
   padding: 40px;
@@ -48,25 +48,30 @@ main.mdl-layout__content {
   flex-direction: row;
   align-items: flex-end;
 }
-.mdl-card--img-container a,
+.mdl-card__media a,
-.mdl-card--header a {
+.mdl-card__title a {
   color: inherit;
 }
-.mdl-card--lower {
+.mdl-card__supporting-text {
   width: auto;
   flex-grow: 1;
   color: rgba(0, 0, 0, 0.87);
 }
-.mdl-card--header ~ .mdl-card--lower {
+.mdl-card__title ~ .mdl-card__supporting-text {
   flex-grow: 0;
 }
-.mdl-card--img-container ~ .mdl-card--lower {
+.mdl-card__media ~ .mdl-card__supporting-text {
   flex-grow: 0;
 }
 
-.mdl-card--lower ~ .mdl-card--bottom {
+.mdl-card__supporting-text ~ .mdl-card__actions {
   border-top: 1px solid #CCC;
 }
+
+.mdl-card__actions :first-child {
+  margin-left: 0;
+}
+
 .meta {
   box-sizing: border-box;
   padding: 16px;
@@ -99,24 +104,24 @@ main.mdl-layout__content {
   flex-direction: column;
 }
 
-.coffee-pic .mdl-card--img-container {
+.coffee-pic .mdl-card__media {
   background-image: url('images/coffee.jpg');
 }
-.something-else .mdl-card--img-container {
+.something-else .mdl-card__media {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
-.something-else .mdl-card--img-container img {
+.something-else .mdl-card__media img {
   width: 33%;
   height: 33;
   margin-bottom: 10px;
 }
-.on-the-road-again .mdl-card--img-container {
+.on-the-road-again .mdl-card__media {
   background-image: url('images/road.jpg');
 }
-.shopping .mdl-card--img-container {
+.shopping .mdl-card__media {
   background-image: url('images/shopping.jpg');
 }
 
@@ -163,20 +168,20 @@ h3.quote:after {
   width: 100%;
   height: auto;
 }
-.blogpost main > .mdl-card > .mdl-card--bottom {
+.blogpost main > .mdl-card > .mdl-card__actions {
   box-sizing: border-box;
   height: auto;
   padding: 80px 120px;
 }
 @media (max-width: 480px) {
-  .blogpost main > .mdl-card > .mdl-card--bottom {
+  .blogpost main > .mdl-card > .mdl-card__actions {
     padding: 20px 30px;
   }
 }
-.blogpost main > .mdl-card .mdl-card--img-container {
+.blogpost main > .mdl-card .mdl-card__media {
   background-image: url('images/road_big.jpg');
 }
-.blogpost main .mdl-card--bottom {
+.blogpost main .mdl-card__actions {
   border: 0 !important;
 }
 .blogpost .comments {

templates/dashboard/index.html

@@ -26,9 +26,8 @@
     <link rel="canonical" href="http://www.example.com/">
     -->
 
-    <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-      rel="stylesheet">
     <link rel="stylesheet" href="material.min.css">
     <link rel="stylesheet" href="styles.css">
     <style>
@@ -53,7 +52,7 @@
             </label>
             <div class="mdl-textfield__expandable-holder">
               <input class="mdl-textfield__input" type="text" id="search" />
-              <label class="mdl-textfield__label" for="expando1">Enter your query...</label>
+              <label class="mdl-textfield__label" for="search">Enter your query...</label>
             </div>
           </div>
           <span class="mdl-layout-title">Home</span>
@@ -62,9 +61,9 @@
             <i class="material-icons">more_vert</i>
           </button>
           <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
-            <button class="mdl-menu__item">What is </button>
+            <li class="mdl-menu__item">What is </li>
-            <button class="mdl-menu__item">supposed to </button>
+            <li class="mdl-menu__item">supposed to </li>
-            <button class="mdl-menu__item">be here?</button>
+            <li class="mdl-menu__item">be here?</li>
           </ul>
         </div>
       </header>
@@ -123,18 +122,18 @@
         </div>
         <div class="cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid">
           <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--12-col-desktop">
-            <div class="mdl-card--heading mdl-color--teal-300 dog">
+            <div class="mdl-card__title mdl-color--teal-300 dog">
-              <h2 class="mdl-card--heading-text">Updates</h2>
+              <h2 class="mdl-card__title-text">Updates</h2>
             </div>
-            <div class="mdl-card--lower mdl-color-text--grey-600">
+            <div class="mdl-card__supporting-text mdl-color-text--grey-600">
               Non dolore elit adipisicing ea reprehenderit consectetur culpa.
             </div>
-            <div class="mdl-card--bottom ">
+            <div class="mdl-card__actions ">
-              <a href="#">Read More</a>
+              <a href="#" class="mdl-button">Read More</a>
             </div>
           </div>
           <div class="mdl-card mdl-color--deep-purple-500 mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--12-col-desktop">
-            <div class="mdl-card--lower mdl-color-text--blue-grey-50">
+            <div class="mdl-card__supporting-text mdl-color-text--blue-grey-50">
               <h3>View options</h3>
               <ul>
                 <label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
@@ -155,7 +154,7 @@
                 </label>
               </ul>
             </div>
-            <div class="mdl-card--bottom">
+            <div class="mdl-card__actions">
               <a href="#" class=" mdl-color-text--blue-grey-50">Change location</a>
               <div class="mdl-layout-spacer"></div>
               <i class="material-icons">location_on</i>

templates/dashboard/styles.css

@@ -79,17 +79,17 @@ html, body {
   display: flex;
   flex-direction: column;
 }
-.cards .mdl-card--heading {
+.cards .mdl-card__title {
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
   flex-grow: 1;
 }
-.cards .mdl-card--lower {
+.cards .mdl-card__supporting-text {
   height: auto;
   flex-grow: 0;
 }
-.cards .mdl-card--heading h2 {
+.cards .mdl-card__title h2 {
   height: auto;
   align-self: flex-end;
 }

templates/text-only/index.html

@@ -71,12 +71,12 @@
               <i class="material-icons">play_circle_fill</i>
             </header>
             <div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
-              <div class="mdl-card--lower">
+              <div class="mdl-card__supporting-text">
                 <h3>Features</h3>
                 Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Nostrud in laboris labore nisi amet do dolor eu fugiat consectetur elit cillum esse. Pariatur occaecat nisi laboris tempor laboris eiusmod qui id Lorem esse commodo in. Exercitation aute dolore deserunt culpa consequat elit labore incididunt elit anim.
               </div>
-              <div class="mdl-card--bottom">
+              <div class="mdl-card__actions">
-                <a href="#">Read our features</a>
+                <a href="#" class="mdl-button">Read our features</a>
               </div>
             </div>
             <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn1">
@@ -90,7 +90,7 @@
           </section>
           <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
             <div class="mdl-card mdl-cell mdl-cell--12-col">
-              <div class="mdl-card--lower mdl-grid mdl-grid--no-spacing">
+              <div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing">
                 <h3 class="mdl-cell mdl-cell--12-col">Details</h3>
                 <div class="section__circle mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                   <div class="mdl-color--primary"></div>
@@ -111,8 +111,8 @@
                   Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis proident minim.
                 </div>
               </div>
-              <div class="mdl-card--bottom">
+              <div class="mdl-card__actions">
-                <a href="#">Read our features</a>
+                <a href="#" class="mdl-button">Read our features</a>
               </div>
             </div>
             <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn2">
@@ -126,12 +126,12 @@
           </section>
           <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
             <div class="mdl-card mdl-cell mdl-cell--12-col">
-              <div class="mdl-card--lower">
+              <div class="mdl-card__supporting-text">
                 <h3>Technology</h3>
                 Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Nostrud in laboris labore nisi amet do dolor eu fugiat consectetur elit cillum esse. Pariatur occaecat nisi laboris tempor laboris eiusmod qui id Lorem esse commodo in. Exercitation aute dolore deserunt culpa consequat elit labore incididunt elit anim.
               </div>
-              <div class="mdl-card--bottom">
+              <div class="mdl-card__actions">
-                <a href="#">Read our features</a>
+                <a href="#" class="mdl-button">Read our features</a>
               </div>
             </div>
             <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn3">

templates/text-only/styles.css

@@ -69,7 +69,7 @@ section .section__circle--big > div {
 section.section--center .section__text:not(:last-child) {
   border-bottom: 1px solid rgba(0,0,0,.13);
 }
-.mdl-card .mdl-card--lower > h3:first-child {
+.mdl-card .mdl-card__supporting-text > h3:first-child {
   margin-bottom: 24px !important;
 }
 
@@ -108,13 +108,13 @@ section.section--center .section__text:not(:last-child) {
 .mdl-card > * {
   height: auto;
 }
-.mdl-card--bottom {
+.mdl-card__actions {
   color: inherit;
 }
-.mdl-card--bottom a {
+.mdl-card__actions a {
   color: inherit;
 }
-.mdl-card--lower {
+.mdl-card__supporting-text {
   flex-grow: 1;
   margin: 32px;
   padding: 0;