diff --git a/demos/card.html b/demos/card.html
new file mode 100644
index 000000000..10d5e8b03
--- /dev/null
+++ b/demos/card.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2016 Google Inc. All rights reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>MDL Card Demo</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <script src="assets/material-design-lite.css.js" charset="utf-8"></script>
+    <style>
+      .demo-card {
+        max-width: 21.875rem; /* 350sp */
+        margin-bottom: 24px;
+      }
+
+      .demo-card--with-avatar .mdl-card__primary {
+        position: relative;
+      }
+
+      .demo-card--with-avatar .demo-card__avatar {
+        position: absolute;
+        background: #bdbdbd;
+        height: 2.5rem; /* 40sp */
+        width: 2.5rem; /* 40sp */
+        border-radius: 50%;
+      }
+
+      .demo-card--with-avatar .mdl-card__title,
+      .demo-card--with-avatar .mdl-card__subtitle {
+        margin-left: 56px;
+      }
+
+      .demo-card__16-9-media {
+        background-image: url("images/16-9.jpg");
+        background-size: cover;
+        background-repeat: no-repeat;
+        height: 12.313rem; /* 197sp, for 16:9 ratio with 350sp demo card width */
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>MDL Cards</h1>
+      <section class="demo-typography--section mdl-typography">
+        <div class="mdl-card demo-card">
+          <section class="mdl-card__media demo-card__16-9-media"></section>
+          <section class="mdl-card__supporting-text">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
+          </section>
+        </div>
+
+        <div class="mdl-card demo-card demo-card--with-avatar">
+          <section class="mdl-card__primary">
+            <div class="demo-card__avatar"></div>
+            <h1 class="mdl-card__title">Title</h1>
+            <h2 class="mdl-card__subtitle">Subhead</h2>
+          </section>
+          <section class="mdl-card__media demo-card__16-9-media"></section>
+          <section class="mdl-card__supporting-text">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
+          </section>
+          <section class="mdl-card__actions">
+            <button class="mdl-button mdl-card__action">Action 1</button>
+            <button class="mdl-button mdl-card__action">Action 2</button>
+          </section>
+        </div>
+
+        <div class="mdl-card demo-card demo-card--with-avatar">
+          <section class="mdl-card__primary">
+            <div class="demo-card__avatar"></div>
+            <h1 class="mdl-card__title">Title</h1>
+            <h2 class="mdl-card__subtitle">Subhead</h2>
+          </section>
+          <section class="mdl-card__media demo-card__16-9-media"></section>
+          <section class="mdl-card__actions mdl-card__actions--vertical">
+            <button class="mdl-button mdl-card__action">Action 1</button>
+            <button class="mdl-button mdl-card__action">Action 2</button>
+          </section>
+        </div>
+
+        <div class="mdl-card demo-card">
+          <section class="mdl-card__media demo-card__16-9-media"></section>
+          <section class="mdl-card__primary">
+            <h1 class="mdl-card__title mdl-card__title--large">Title goes here</h1>
+            <h2 class="mdl-card__subtitle">Subtitle here</h2>
+          </section>
+          <section class="mdl-card__actions">
+            <button class="mdl-button mdl-card__action">Action 1</button>
+            <button class="mdl-button mdl-card__action">Action 2</button>
+          </section>
+        </div>
+
+        <div class="mdl-card demo-card">
+          <section class="mdl-card__primary">
+            <h1 class="mdl-card__title mdl-card__title--large">Title goes here</h1>
+            <h2 class="mdl-card__subtitle">Subtitle here</h2>
+          </section>
+          <section class="mdl-card__supporting-text">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat.
+          </section>
+          <section class="mdl-card__actions">
+            <button class="mdl-button mdl-card__action">Action 1</button>
+            <button class="mdl-button mdl-card__action">Action 2</button>
+          </section>
+        </div>
+
+        <style>
+          .demo-card--bg-demo {
+            height: 21.875rem; /* 350sp */
+            background-image: url("images/1-1.jpg");
+            background-size: cover;
+            background-repeat: no-repeat;
+          }
+
+          .demo-card--bg-demo .mdl-card__primary,
+          .demo-card--bg-demo .mdl-card__actions {
+            background: rgba(0, 0, 0, .4);
+          }
+        </style>
+        <div class="mdl-card mdl-card--dark-theme demo-card demo-card--bg-demo">
+          <section class="mdl-card__primary">
+            <h1 class="mdl-card__title mdl-card__title--large">Title goes here</h1>
+            <h2 class="mdl-card__subtitle">Subtitle here</h2>
+          </section>
+          <section class="mdl-card__actions">
+            <button class="mdl-button mdl-button--dark-theme">Action 1</button>
+            <button class="mdl-button mdl-button--dark-theme">Action 2</button>
+          </section>
+        </div>
+
+        <style>
+          .demo-card--small {
+            max-width: 10.938rem; /* 175sp */
+          }
+
+          .demo-card--small .mdl-card__media {
+            background-image: url("images/1-1.jpg");
+            background-size: cover;
+            background-repeat: no-repeat;
+            height: 10.938rem; /* 175sp, for 1:1 ratio with 175sp demo card width */
+          }
+        </style>
+        <div class="mdl-card demo-card demo-card--small">
+          <section class="mdl-card__media">
+            <h1 class="mdl-card__title mdl-card__title--large">Title</h1>
+          </section>
+          <section class="mdl-card__actions">
+            <button class="mdl-button mdl-card__action">Action 1</button>
+          </section>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/demos/images/1-1.jpg b/demos/images/1-1.jpg
new file mode 100644
index 000000000..357a3d025
Binary files /dev/null and b/demos/images/1-1.jpg differ
diff --git a/demos/images/16-9.jpg b/demos/images/16-9.jpg
new file mode 100644
index 000000000..95a7a1774
Binary files /dev/null and b/demos/images/16-9.jpg differ
diff --git a/demos/index.html b/demos/index.html
index 1da90370e..9a7d5c47b 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -25,6 +25,7 @@
       <nav>
         <ul>
           <li><a href="button.html">Button</a></li>
+          <li><a href="card.html">Card</a></li>
           <li><a href="checkbox.html">Checkbox</a></li>
           <li><a href="fab.html">FAB</a></li>
           <li><a href="radio.html">Radio</a></li>
diff --git a/packages/material-design-lite/material-design-lite.scss b/packages/material-design-lite/material-design-lite.scss
index 9fa2b96c8..aca303963 100644
--- a/packages/material-design-lite/material-design-lite.scss
+++ b/packages/material-design-lite/material-design-lite.scss
@@ -16,6 +16,7 @@
 
 @import "mdl-animation/mdl-animation";
 @import "mdl-button/mdl-button";
+@import "mdl-card/mdl-card";
 @import "mdl-checkbox/mdl-checkbox";
 @import "mdl-fab/mdl-fab";
 @import "mdl-radio/mdl-radio";
diff --git a/packages/material-design-lite/package.json b/packages/material-design-lite/package.json
index cd499f410..85d941d72 100644
--- a/packages/material-design-lite/package.json
+++ b/packages/material-design-lite/package.json
@@ -8,6 +8,7 @@
     "mdl-auto-init": "^1.0.0",
     "mdl-base": "^1.0.0",
     "mdl-button": "^1.0.0",
+    "mdl-card": "^1.0.0",
     "mdl-checkbox": "^1.0.0",
     "mdl-fab": "^1.0.0",
     "mdl-radio": "^1.0.0",
diff --git a/packages/mdl-card/README.md b/packages/mdl-card/README.md
new file mode 100644
index 000000000..fef792fe4
--- /dev/null
+++ b/packages/mdl-card/README.md
@@ -0,0 +1,129 @@
+# mdl-card
+
+MDL card is a component that implements the
+[Material Design card component](https://material.google.com/components/cards.html), and makes it available to
+developers as a set of CSS classes.
+
+## Installation
+
+> Note: Installation via the npm registry will be available after alpha.
+
+
+## Usage
+
+```html
+<div class="mdl-card">
+  <section class="mdl-card__primary">
+    <h1 class="mdl-card__title mdl-card__title--large">Title goes here</h1>
+    <h2 class="mdl-card__subtitle">Subtitle here</h2>
+  </section>
+  <section class="mdl-card__supporting-text">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+    commodo consequat.
+  </section>
+  <section class="mdl-card__actions">
+    <button class="mdl-button mdl-card__action">Action 1</button>
+    <button class="mdl-button mdl-card__action">Action 2</button>
+  </section>
+</div>
+```
+
+Cards don't come with a predefined width or height. They expand horizontally to fill all available space, and vertically
+to fit their contents.
+
+If you'd like to maintain a consistent height and width across cards, you'll need to set it in your styles:
+
+```css
+.my-card-container .mdl-card {
+  height: 350px;
+  width: 350px;
+}
+```
+
+Content will be bottom-aligned if it's smaller than the height of the card.
+
+
+### Content blocks
+
+Cards are composed of different content blocks, which are typically laid out in vertical succession.
+
+
+#### Rich media
+
+```css
+#example .mdl-card__media {
+  background-image: url("pretty.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 90px;
+}
+```
+
+```html
+<section class="mdl-card__media"></section>
+```
+
+This area is used for showing rich media in cards. Use the `mdl-card__media` CSS class.
+
+
+#### Actions
+
+```html
+<section class="mdl-card__actions">
+  <button class="mdl-button mdl-card__action">Action 1</button>
+  <button class="mdl-button mdl-card__action">Action 2</button>
+</section>
+```
+
+This area is used for showing different actions the user can take. It's typically used with buttons, as in the example
+above, or with icon buttons, as below:
+
+> TODO(sgomes): Add icon button support and example.
+
+You can use the `mdl-card__actions--vertical` option to lay actions out vertically instead of horizontally:
+
+```html
+<section class="mdl-card__actions mdl-card__actions--vertical">
+  <button class="mdl-button mdl-card__action">Action 1</button>
+  <button class="mdl-button mdl-card__action">Action 2</button>
+</section>
+```
+
+Be sure to include the `mdl-card__action` class on every action for correct positioning.
+
+#### Primary title / text
+
+```html
+<section class="mdl-card__primary">
+  <h1 class="mdl-card__title mdl-card__title--large">Title goes here</h1>
+  <h2 class="mdl-card__subtitle">Subtitle here</h2>
+</section>
+```
+
+This area is used for titles and subtitles:
+
+| Class                    | Description                                     |
+| ------------------------ | ----------------------------------------------- |
+| `mdl-card__primary`      | Defines the primary text / title content block. |
+| `mdl-card__title`        | A title block.                                  |
+| `mdl-card__title--large` | An option for the title, to make it larger.     |
+| `mdl-card__subtitle`     | A subtitle block.                               |
+
+Note that the title and subtitle classes can also be used outside of the primary title / text content block.
+
+
+#### Supporting text
+
+```html
+<section class="mdl-card__supporting-text">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+  commodo consequat.
+</section>
+```
+
+This area is used for displaying the bulk of the textual content of the card. Use the `mdl-card__supporting-text` CSS
+class.
diff --git a/packages/mdl-card/mdl-card.scss b/packages/mdl-card/mdl-card.scss
new file mode 100644
index 000000000..7d4bf6167
--- /dev/null
+++ b/packages/mdl-card/mdl-card.scss
@@ -0,0 +1,147 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "mdl-typography/mixins";
+
+/* postcss-bem-linter: define card */
+.mdl-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 0;
+
+  /* TODO(sgomes): replace with elevation mixin once mdl-elevation is in. */
+  box-shadow:
+    0 3px 1px -2px rgba(0, 0, 0, .2),
+    0 2px 2px 0 rgba(0, 0, 0, .14),
+    0 1px 5px 0 rgba(0, 0, 0, .12);
+
+  overflow: hidden;
+  box-sizing: border-box;
+
+  &__primary {
+    padding: 16px;
+
+    /* Add extra space before large title. */
+    .mdl-card__title--large {
+      padding-top: 8px;
+    }
+
+    /* Add extra padding if this is the last block. */
+    &:last-child {
+      padding-bottom: 24px;
+    }
+  }
+
+  &__supporting-text {
+    padding: 8px 16px;
+
+    @include mdl-typography(body1);
+    @include mdl-typography-color(primary, true);
+
+    /* Adjust text color for dark theme. */
+    .mdl-card--dark-theme > &,
+    .mdl-theme--dark & {
+      @include mdl-typography-color(primary, false);
+    }
+
+    /* Remove top padding if immediately preceded by a primary block. */
+    .mdl-card__primary + & {
+      margin-top: -8px;
+      padding-top: 0;
+    }
+
+    /* Add extra padding if this is the last block. */
+    &:last-child {
+      padding-bottom: 24px;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    padding: 8px;
+    box-sizing: border-box;
+
+    /* Adjust text color for dark theme. */
+    .mdl-card--dark-theme > &,
+    .mdl-theme--dark & {
+      @include mdl-typography-color(primary, false);
+    }
+
+    /* Tweak button paddings and margins when they're used as actions */
+    .mdl-card__action {
+      margin: 0 8px 0 0;
+    }
+    .mdl-card__action:last-child {
+      margin-right: 0;
+    }
+
+    /* Vertical actions (one per line) */
+    &--vertical {
+      flex-flow: column;
+      align-items: flex-start;
+
+      .mdl-card__action {
+        margin: 0 0 4px;
+      }
+      .mdl-card__action:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &__media {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: 16px;
+    box-sizing: border-box;
+  }
+
+  &__title {
+    @include mdl-typography(body2);
+    @include mdl-typography-color(primary, true);
+
+    /* Adjust text color for dark theme. */
+    .mdl-card--dark-theme &,
+    .mdl-theme--dark & {
+      @include mdl-typography-color(primary, false);
+    }
+
+    margin: -.063rem 0; /* -1sp 0 */
+  }
+
+  &__title--large {
+    @include mdl-typography(headline);
+
+    margin: 0;
+  }
+
+  &__subtitle {
+    @include mdl-typography(body1);
+    @include mdl-typography-color(secondary, true);
+
+    /* Adjust text color for dark theme. */
+    .mdl-card--dark-theme &,
+    .mdl-theme--dark & {
+      @include mdl-typography-color(primary, false);
+    }
+
+    margin: -.063rem 0; /* -1sp 0 */
+  }
+}
+
+/* postcss-bem-linter: end */
diff --git a/packages/mdl-card/package.json b/packages/mdl-card/package.json
new file mode 100644
index 000000000..a46b3d9e6
--- /dev/null
+++ b/packages/mdl-card/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "mdl-card",
+  "version": "1.0.0",
+  "description": "The Material Design Lite card component",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "mdl-typography": "^1.0.0"
+  },
+  "devDependencies": {
+    "mdl-button": "^1.0.0"
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
index cbcc86ef3..28dda3347 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -77,6 +77,7 @@ module.exports = [{
         './packages/material-design-lite/material-design-lite.scss'),
     'mdl-animation': path.resolve('./packages/mdl-animation/mdl-animation.scss'),
     'mdl-button': path.resolve('./packages/mdl-button/mdl-button.scss'),
+    'mdl-card': path.resolve('./packages/mdl-card/mdl-card.scss'),
     'mdl-checkbox': path.resolve('./packages/mdl-checkbox/mdl-checkbox.scss'),
     'mdl-fab': path.resolve('./packages/mdl-fab/mdl-fab.scss'),
     'mdl-ripple': path.resolve('./packages/mdl-ripple/mdl-ripple.scss'),
