diff --git a/docs/src/App.vue b/docs/src/App.vue
index 4aa4218..781ebc7 100644
--- a/docs/src/App.vue
+++ b/docs/src/App.vue
@@ -39,6 +39,10 @@
                   <router-link exact to="/components/button-toggle">Button Toggle</router-link>
                 </md-list-item>
 
+                <md-list-item class="md-inset">
+                  <router-link exact to="/components/card">Card</router-link>
+                </md-list-item>
+
                 <md-list-item class="md-inset">
                   <router-link exact to="/components/checkbox">Checkbox</router-link>
                 </md-list-item>
diff --git a/docs/src/assets/avatar-2.jpg b/docs/src/assets/avatar-2.jpg
new file mode 100644
index 0000000..b085d06
Binary files /dev/null and b/docs/src/assets/avatar-2.jpg differ
diff --git a/docs/src/assets/avatar.png b/docs/src/assets/avatar.png
new file mode 100644
index 0000000..c0924e0
Binary files /dev/null and b/docs/src/assets/avatar.png differ
diff --git a/docs/src/assets/card-example.jpg b/docs/src/assets/card-example.jpg
new file mode 100644
index 0000000..f83e3fe
Binary files /dev/null and b/docs/src/assets/card-example.jpg differ
diff --git a/docs/src/assets/card-image-1.jpg b/docs/src/assets/card-image-1.jpg
new file mode 100644
index 0000000..8380353
Binary files /dev/null and b/docs/src/assets/card-image-1.jpg differ
diff --git a/docs/src/assets/card-image-2.jpg b/docs/src/assets/card-image-2.jpg
new file mode 100644
index 0000000..2ab8328
Binary files /dev/null and b/docs/src/assets/card-image-2.jpg differ
diff --git a/docs/src/assets/card-image-3.jpg b/docs/src/assets/card-image-3.jpg
new file mode 100644
index 0000000..1994ef9
Binary files /dev/null and b/docs/src/assets/card-image-3.jpg differ
diff --git a/docs/src/assets/card-sky.jpg b/docs/src/assets/card-sky.jpg
new file mode 100644
index 0000000..4c07815
Binary files /dev/null and b/docs/src/assets/card-sky.jpg differ
diff --git a/docs/src/assets/card-weather.png b/docs/src/assets/card-weather.png
new file mode 100644
index 0000000..5a5def5
Binary files /dev/null and b/docs/src/assets/card-weather.png differ
diff --git a/docs/src/assets/cover.png b/docs/src/assets/cover.png
new file mode 100644
index 0000000..0f7a19d
Binary files /dev/null and b/docs/src/assets/cover.png differ
diff --git a/docs/src/pages/Changelog.vue b/docs/src/pages/Changelog.vue
index 845b7f8..93b4a2e 100644
--- a/docs/src/pages/Changelog.vue
+++ b/docs/src/pages/Changelog.vue
@@ -2,6 +2,14 @@
   <single-page class="single-page-home" label="Changelog">
     <single-page-banner label="Changelog"></single-page-banner>
 
+    <section>
+      <h2 class="md-headline">v0.2.0 - New components</h2>
+      <h3 class="md-title">New Components:</h3>
+      <ul>
+        <li>Cards</li>
+      </ul>
+    </section>
+
     <section>
       <h2 class="md-headline">v0.1.2 - Minor Fixes</h2>
       <ul>
@@ -47,7 +55,7 @@
       <h3 class="md-title">UI Elements:</h3>
       <ul>
         <li>Themes</li>
-        <li>Tipography</li>
+        <li>Typography</li>
         <li>Fluid Media</li>
         <li>Custom Scrollbar</li>
         <li>Selection Styles</li>
diff --git a/docs/src/pages/components/Card.vue b/docs/src/pages/components/Card.vue
new file mode 100644
index 0000000..6792f78
--- /dev/null
+++ b/docs/src/pages/components/Card.vue
@@ -0,0 +1,761 @@
+<template>
+  <demo-page label="Components - Card">
+    <div slot="examples">
+      <demo-example label="Regular Cards">
+        <md-card>
+          <md-card-media>
+            <img src="assets/card-image-1.jpg" alt="People">
+          </md-card-media>
+
+          <md-card-header>
+            <div class="md-title">Title goes here</div>
+            <div class="md-subhead">Subtitle here</div>
+          </md-card-header>
+
+          <md-card-actions>
+            <md-button>Action</md-button>
+            <md-button>Action</md-button>
+          </md-card-actions>
+
+          <md-card-content>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
+          </md-card-content>
+        </md-card>
+
+        <md-card>
+          <md-card-header>
+            <md-card-header-text>
+              <div class="md-title">Title goes here</div>
+              <div class="md-subhead">Subtitle here</div>
+            </md-card-header-text>
+
+            <md-button class="md-icon-button">
+              <md-icon>more_vert</md-icon>
+            </md-button>
+          </md-card-header>
+
+          <md-card-media>
+            <img src="assets/card-image-1.jpg" alt="People">
+          </md-card-media>
+
+          <md-card-content>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
+          </md-card-content>
+        </md-card>
+
+        <md-card>
+          <md-card-media>
+            <img src="assets/card-image-2.jpg" alt="People">
+          </md-card-media>
+
+          <md-card-content>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.
+          </md-card-content>
+        </md-card>
+
+        <md-card>
+          <md-card-media>
+            <img src="assets/card-image-2.jpg" alt="People">
+          </md-card-media>
+
+          <md-card-header>
+            <div class="md-title">Title goes here</div>
+            <div class="md-subhead">Subtitle here</div>
+          </md-card-header>
+
+          <md-card-actions>
+            <md-button>Action</md-button>
+            <md-button>Action</md-button>
+          </md-card-actions>
+        </md-card>
+      </demo-example>
+
+      <demo-example label="Hover Effect">
+        <md-card md-with-hover>
+          <md-card-header>
+            <div class="md-title">Title goes here</div>
+            <div class="md-subhead">Subtitle here</div>
+          </md-card-header>
+
+          <md-card-content>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
+          </md-card-content>
+
+          <md-card-actions>
+            <md-button>Action</md-button>
+            <md-button>Action</md-button>
+          </md-card-actions>
+        </md-card>
+
+        <md-card md-with-hover>
+          <md-card-media v-md-ink-ripple>
+            <img src="assets/card-image-1.jpg" alt="People">
+          </md-card-media>
+
+          <md-card-actions>
+            <md-button class="md-icon-button">
+              <md-icon>favorite</md-icon>
+            </md-button>
+
+            <md-button class="md-icon-button">
+              <md-icon>bookmark</md-icon>
+            </md-button>
+
+            <md-button class="md-icon-button">
+              <md-icon>share</md-icon>
+            </md-button>
+          </md-card-actions>
+        </md-card>
+
+        <md-card md-with-hover>
+          <md-card-header>
+            <md-avatar>
+              <img src="assets/avatar.png" alt="People">
+            </md-avatar>
+
+            <div class="md-title">Title goes here</div>
+            <div class="md-subhead">Subtitle here</div>
+          </md-card-header>
+
+          <md-card-media>
+            <img src="assets/card-image-1.jpg" alt="People">
+          </md-card-media>
+
+          <md-card-content>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.
+          </md-card-content>
+
+          <md-card-actions>
+            <md-button>Action</md-button>
+            <md-button>Action</md-button>
+          </md-card-actions>
+        </md-card>
+      </demo-example>
+
+      <demo-example label="Image cover with predefined aspect ratio">
+        <md-card>
+          <md-card-media-cover md-text-scrim>
+            <md-card-media md-ratio="16:9">
+              <img src="assets/card-sky.jpg" alt="Skyscraper">
+            </md-card-media>
+
+            <md-card-area>
+              <md-card-header>
+                <div class="md-title">Title goes here</div>
+                <div class="md-subhead">Subtitle here</div>
+              </md-card-header>
+
+              <md-card-actions>
+                <md-button>Action</md-button>
+                <md-button>Action</md-button>
+              </md-card-actions>
+            </md-card-area>
+          </md-card-media-cover>
+        </md-card>
+
+        <md-card>
+          <md-card-media-cover md-solid>
+            <md-card-media md-ratio="1:1">
+              <img src="assets/card-sky.jpg" alt="Skyscraper">
+            </md-card-media>
+
+            <md-card-area>
+              <md-card-header>
+                <div class="md-title">Title goes here</div>
+                <div class="md-subhead">Subtitle here</div>
+              </md-card-header>
+
+              <md-card-actions>
+                <md-button>Action</md-button>
+                <md-button>Action</md-button>
+              </md-card-actions>
+            </md-card-area>
+          </md-card-media-cover>
+        </md-card>
+      </demo-example>
+
+      <demo-example label="Media">
+        <md-card>
+          <md-card-header>
+            <md-card-header-text>
+              <div class="md-title">Title goes here</div>
+              <div class="md-subhead">Subtitle here</div>
+            </md-card-header-text>
+
+            <md-card-media>
+              <img src="assets/avatar-2.jpg" alt="People">
+            </md-card-media>
+          </md-card-header>
+
+          <md-card-actions>
+            <md-button>Action</md-button>
+            <md-button>Action</md-button>
+          </md-card-actions>
+        </md-card>
+
+        <md-card>
+          <md-card-header>
+            <md-card-header-text>
+              <div class="md-title">Title goes here</div>
+              <div class="md-subhead">Subtitle here</div>
+            </md-card-header-text>
+
+            <md-card-media md-medium>
+              <img src="assets/card-weather.png" alt="People">
+            </md-card-media>
+          </md-card-header>
+
+          <md-card-actions>
+            <md-button>Action</md-button>
+            <md-button>Action</md-button>
+          </md-card-actions>
+        </md-card>
+
+        <md-card>
+          <md-card-header>
+            <md-card-header-text>
+              <div class="md-title">Title goes</div>
+              <div class="md-subhead">Subtitle here</div>
+            </md-card-header-text>
+
+            <md-card-media md-big>
+              <img src="assets/card-weather.png" alt="People">
+            </md-card-media>
+          </md-card-header>
+
+          <md-card-actions>
+            <md-button>Action</md-button>
+            <md-button>Action</md-button>
+          </md-card-actions>
+        </md-card>
+
+        <md-card>
+          <md-card-media-actions>
+            <md-card-media>
+              <img src="assets/cover.png" alt="Cover">
+            </md-card-media>
+
+            <md-card-actions>
+              <md-button class="md-icon-button">
+                <md-icon>favorite</md-icon>
+              </md-button>
+
+              <md-button class="md-icon-button">
+                <md-icon>bookmark</md-icon>
+              </md-button>
+
+              <md-button class="md-icon-button">
+                <md-icon>share</md-icon>
+              </md-button>
+            </md-card-actions>
+          </md-card-media-actions>
+        </md-card>
+      </demo-example>
+
+      <demo-example label="Full control">
+        <md-card>
+          <md-card-area>
+            <md-card-media>
+              <img src="assets/card-image-1.jpg" alt="People">
+            </md-card-media>
+
+            <md-card-header>
+              <div class="md-title">Title goes here</div>
+              <div class="md-subhead">Subtitle here</div>
+            </md-card-header>
+
+            <md-card-content>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
+            </md-card-content>
+          </md-card-area>
+
+          <md-card-actions>
+            <md-button>Action</md-button>
+            <md-button>Action</md-button>
+          </md-card-actions>
+        </md-card>
+
+        <md-card>
+          <md-card-media>
+            <img src="assets/card-image-1.jpg" alt="People">
+          </md-card-media>
+
+          <md-card-header>
+            <div class="md-title">Title goes here</div>
+            <div class="md-subhead">Subtitle here</div>
+          </md-card-header>
+
+          <md-card-expand>
+            <md-card-actions>
+              <md-button>Action</md-button>
+              <md-button>Action</md-button>
+              <span style="flex: 1"></span>
+              <md-button class="md-icon-button" md-expand-trigger>
+                <md-icon>keyboard_arrow_down</md-icon>
+              </md-button>
+            </md-card-actions>
+
+            <md-card-content>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
+            </md-card-content>
+          </md-card-expand>
+        </md-card>
+
+        <md-card class="card-example" v-md-theme="'blue'">
+          <md-card-area md-inset>
+            <md-card-media md-ratio="16:9">
+              <img src="assets/card-example.jpg" alt="Coffee House">
+            </md-card-media>
+
+            <md-card-header>
+              <h2 class="md-title">Coffee House</h2>
+              <div class="md-subhead">
+                <md-icon>location_on</md-icon>
+                <span>2 miles</span>
+              </div>
+            </md-card-header>
+
+            <md-card-content>
+              Illy Coffee served with a complimentary Leonidas Belgian Chocolate with all beverages.
+            </md-card-content>
+          </md-card-area>
+
+          <md-card-content>
+            <h3 class="md-subheading">Today's availability</h3>
+            <div class="card-reservation">
+              <md-icon>access_time</md-icon>
+              <md-button-toggle type="radio" class="md-button-group">
+                <md-button>5:30PM</md-button>
+                <md-button>7:30PM</md-button>
+                <md-button>9:00PM</md-button>
+              </md-button-toggle>
+            </div>
+          </md-card-content>
+
+          <md-card-actions>
+            <md-button class="md-primary">Reserve</md-button>
+          </md-card-actions>
+        </md-card>
+      </demo-example>
+    </div>
+
+    <div slot="code">
+      <demo-example label="Regular Cards">
+        <code-block lang="xml">
+&lt;md-card&gt;
+  &lt;md-card-media&gt;
+    &lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
+  &lt;/md-card-media&gt;
+
+  &lt;md-card-header&gt;
+    &lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
+    &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+  &lt;/md-card-header&gt;
+
+  &lt;md-card-actions&gt;
+    &lt;md-button&gt;Action&lt;/md-button&gt;
+    &lt;md-button&gt;Action&lt;/md-button&gt;
+  &lt;/md-card-actions&gt;
+
+  &lt;md-card-content&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
+  &lt;/md-card-content&gt;
+&lt;/md-card&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-card&gt;
+  &lt;md-card-header&gt;
+    &lt;md-card-header-text&gt;
+      &lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
+      &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+    &lt;/md-card-header-text&gt;
+
+    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+      &lt;md-icon&gt;more_vert&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+  &lt;/md-card-header&gt;
+
+  &lt;md-card-media&gt;
+    &lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
+  &lt;/md-card-media&gt;
+
+  &lt;md-card-content&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
+  &lt;/md-card-content&gt;
+&lt;/md-card&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-card&gt;
+  &lt;md-card-media&gt;
+    &lt;img src=&quot;assets/card-image-2.jpg&quot; alt=&quot;People&quot;&gt;
+  &lt;/md-card-media&gt;
+
+  &lt;md-card-content&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.
+  &lt;/md-card-content&gt;
+&lt;/md-card&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-card&gt;
+  &lt;md-card-media&gt;
+    &lt;img src=&quot;assets/card-image-2.jpg&quot; alt=&quot;People&quot;&gt;
+  &lt;/md-card-media&gt;
+
+  &lt;md-card-header&gt;
+    &lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
+    &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+  &lt;/md-card-header&gt;
+
+  &lt;md-card-actions&gt;
+    &lt;md-button&gt;Action&lt;/md-button&gt;
+    &lt;md-button&gt;Action&lt;/md-button&gt;
+  &lt;/md-card-actions&gt;
+&lt;/md-card&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Hover Effect">
+        <code-block lang="xml">
+&lt;md-card md-with-hover&gt;
+  &lt;md-card-header&gt;
+    &lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
+    &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+  &lt;/md-card-header&gt;
+
+  &lt;md-card-content&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
+  &lt;/md-card-content&gt;
+
+  &lt;md-card-actions&gt;
+    &lt;md-button&gt;Action&lt;/md-button&gt;
+    &lt;md-button&gt;Action&lt;/md-button&gt;
+  &lt;/md-card-actions&gt;
+&lt;/md-card&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-card md-with-hover&gt;
+  &lt;md-card-media v-md-ink-ripple&gt;
+    &lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
+  &lt;/md-card-media&gt;
+
+  &lt;md-card-actions&gt;
+    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+      &lt;md-icon&gt;favorite&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+
+    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+      &lt;md-icon&gt;bookmark&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+
+    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+      &lt;md-icon&gt;share&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+  &lt;/md-card-actions&gt;
+&lt;/md-card&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-card md-with-hover&gt;
+  &lt;md-card-header&gt;
+    &lt;md-avatar&gt;
+      &lt;img src=&quot;assets/avatar.png&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-avatar&gt;
+
+    &lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
+    &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+  &lt;/md-card-header&gt;
+
+  &lt;md-card-media&gt;
+    &lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
+  &lt;/md-card-media&gt;
+
+  &lt;md-card-content&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.
+  &lt;/md-card-content&gt;
+
+  &lt;md-card-actions&gt;
+    &lt;md-button&gt;Action&lt;/md-button&gt;
+    &lt;md-button&gt;Action&lt;/md-button&gt;
+  &lt;/md-card-actions&gt;
+&lt;/md-card&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Image cover with predefined aspect ratio">
+        <code-block lang="xml">
+&lt;md-card&gt;
+  &lt;md-card-media-cover md-text-scrim&gt;
+    &lt;md-card-media md-ratio=&quot;16:9&quot;&gt;
+      &lt;img src=&quot;assets/card-sky.jpg&quot; alt=&quot;Skyscraper&quot;&gt;
+    &lt;/md-card-media&gt;
+
+    &lt;md-card-area&gt;
+      &lt;md-card-header&gt;
+        &lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
+        &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+      &lt;/md-card-header&gt;
+
+      &lt;md-card-actions&gt;
+        &lt;md-button&gt;Action&lt;/md-button&gt;
+        &lt;md-button&gt;Action&lt;/md-button&gt;
+      &lt;/md-card-actions&gt;
+    &lt;/md-card-area&gt;
+  &lt;/md-card-media-cover&gt;
+&lt;/md-card&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-card&gt;
+  &lt;md-card-media-cover md-solid&gt;
+    &lt;md-card-media md-ratio=&quot;1:1&quot;&gt;
+      &lt;img src=&quot;assets/card-sky.jpg&quot; alt=&quot;Skyscraper&quot;&gt;
+    &lt;/md-card-media&gt;
+
+    &lt;md-card-area&gt;
+      &lt;md-card-header&gt;
+        &lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
+        &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+      &lt;/md-card-header&gt;
+
+      &lt;md-card-actions&gt;
+        &lt;md-button&gt;Action&lt;/md-button&gt;
+        &lt;md-button&gt;Action&lt;/md-button&gt;
+      &lt;/md-card-actions&gt;
+    &lt;/md-card-area&gt;
+  &lt;/md-card-media-cover&gt;
+&lt;/md-card&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Media">
+        <code-block lang="xml">
+&lt;md-card&gt;
+  &lt;md-card-header&gt;
+    &lt;md-card-header-text&gt;
+      &lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
+      &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+    &lt;/md-card-header-text&gt;
+
+    &lt;md-card-media&gt;
+      &lt;img src=&quot;assets/avatar-2.jpg&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-card-media&gt;
+  &lt;/md-card-header&gt;
+
+  &lt;md-card-actions&gt;
+    &lt;md-button&gt;Action&lt;/md-button&gt;
+    &lt;md-button&gt;Action&lt;/md-button&gt;
+  &lt;/md-card-actions&gt;
+&lt;/md-card&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-card&gt;
+  &lt;md-card-header&gt;
+    &lt;md-card-header-text&gt;
+      &lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
+      &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+    &lt;/md-card-header-text&gt;
+
+    &lt;md-card-media md-medium&gt;
+      &lt;img src=&quot;assets/card-weather.png&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-card-media&gt;
+  &lt;/md-card-header&gt;
+
+  &lt;md-card-actions&gt;
+    &lt;md-button&gt;Action&lt;/md-button&gt;
+    &lt;md-button&gt;Action&lt;/md-button&gt;
+  &lt;/md-card-actions&gt;
+&lt;/md-card&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-card&gt;
+  &lt;md-card-header&gt;
+    &lt;md-card-header-text&gt;
+      &lt;div class=&quot;md-title&quot;&gt;Title goes&lt;/div&gt;
+      &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+    &lt;/md-card-header-text&gt;
+
+    &lt;md-card-media md-big&gt;
+      &lt;img src=&quot;assets/card-weather.png&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-card-media&gt;
+  &lt;/md-card-header&gt;
+
+  &lt;md-card-actions&gt;
+    &lt;md-button&gt;Action&lt;/md-button&gt;
+    &lt;md-button&gt;Action&lt;/md-button&gt;
+  &lt;/md-card-actions&gt;
+&lt;/md-card&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-card&gt;
+  &lt;md-card-media-actions&gt;
+    &lt;md-card-media&gt;
+      &lt;img src=&quot;assets/cover.png&quot; alt=&quot;Cover&quot;&gt;
+    &lt;/md-card-media&gt;
+
+    &lt;md-card-actions&gt;
+      &lt;md-button class=&quot;md-icon-button&quot;&gt;
+        &lt;md-icon&gt;favorite&lt;/md-icon&gt;
+      &lt;/md-button&gt;
+
+      &lt;md-button class=&quot;md-icon-button&quot;&gt;
+        &lt;md-icon&gt;bookmark&lt;/md-icon&gt;
+      &lt;/md-button&gt;
+
+      &lt;md-button class=&quot;md-icon-button&quot;&gt;
+        &lt;md-icon&gt;share&lt;/md-icon&gt;
+      &lt;/md-button&gt;
+    &lt;/md-card-actions&gt;
+  &lt;/md-card-media-actions&gt;
+&lt;/md-card&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Full control">
+        <code-block lang="xml">
+&lt;md-card&gt;
+  &lt;md-card-area&gt;
+    &lt;md-card-media&gt;
+      &lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-card-media&gt;
+
+    &lt;md-card-header&gt;
+      &lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
+      &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+    &lt;/md-card-header&gt;
+
+    &lt;md-card-content&gt;
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
+    &lt;/md-card-content&gt;
+  &lt;/md-card-area&gt;
+
+  &lt;md-card-actions&gt;
+    &lt;md-button&gt;Action&lt;/md-button&gt;
+    &lt;md-button&gt;Action&lt;/md-button&gt;
+  &lt;/md-card-actions&gt;
+&lt;/md-card&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-card&gt;
+  &lt;md-card-media&gt;
+    &lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
+  &lt;/md-card-media&gt;
+
+  &lt;md-card-header&gt;
+    &lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
+    &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+  &lt;/md-card-header&gt;
+
+  &lt;md-card-expand&gt;
+    &lt;md-card-actions&gt;
+      &lt;md-button&gt;Action&lt;/md-button&gt;
+      &lt;md-button&gt;Action&lt;/md-button&gt;
+      &lt;span style=&quot;flex: 1&quot;&gt;&lt;/span&gt;
+      &lt;md-button class=&quot;md-icon-button&quot; md-expand-trigger&gt;
+        &lt;md-icon&gt;keyboard_arrow_down&lt;/md-icon&gt;
+      &lt;/md-button&gt;
+    &lt;/md-card-actions&gt;
+
+    &lt;md-card-content&gt;
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
+    &lt;/md-card-content&gt;
+  &lt;/md-card-expand&gt;
+&lt;/md-card&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-card class=&quot;card-example&quot; v-md-theme=&quot;&#039;blue&#039;&quot;&gt;
+  &lt;md-card-area md-inset&gt;
+    &lt;md-card-media md-ratio=&quot;16:9&quot;&gt;
+      &lt;img src=&quot;assets/card-example.jpg&quot; alt=&quot;Coffee House&quot;&gt;
+    &lt;/md-card-media&gt;
+
+    &lt;md-card-header&gt;
+      &lt;h2 class=&quot;md-title&quot;&gt;Coffee House&lt;/h2&gt;
+      &lt;div class=&quot;md-subhead&quot;&gt;
+        &lt;md-icon&gt;location_on&lt;/md-icon&gt;
+        &lt;span&gt;2 miles&lt;/span&gt;
+      &lt;/div&gt;
+    &lt;/md-card-header&gt;
+
+    &lt;md-card-content&gt;
+      Illy Coffee served with a complimentary Leonidas Belgian Chocolate with all beverages.
+    &lt;/md-card-content&gt;
+  &lt;/md-card-area&gt;
+
+  &lt;md-card-content&gt;
+    &lt;h3 class=&quot;md-subheading&quot;&gt;Today&#039;s availability&lt;/h3&gt;
+    &lt;div class=&quot;card-reservation&quot;&gt;
+      &lt;md-icon&gt;access_time&lt;/md-icon&gt;
+      &lt;md-button-toggle type=&quot;radio&quot; class=&quot;md-button-group&quot;&gt;
+        &lt;md-button&gt;5:30PM&lt;/md-button&gt;
+        &lt;md-button&gt;7:30PM&lt;/md-button&gt;
+        &lt;md-button&gt;9:00PM&lt;/md-button&gt;
+      &lt;/md-button-toggle&gt;
+    &lt;/div&gt;
+  &lt;/md-card-content&gt;
+
+  &lt;md-card-actions&gt;
+    &lt;md-button class=&quot;md-primary&quot;&gt;Reserve&lt;/md-button&gt;
+  &lt;/md-card-actions&gt;
+&lt;/md-card&gt;
+        </code-block>
+      </demo-example>
+    </div>
+
+    <div slot="api">
+
+    </div>
+  </demo-page>
+</template>
+
+<style lang="scss" scoped>
+  .md-card {
+    width: 100%;
+    max-width: 340px;
+    margin: 0 4px 16px;
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .card-example {
+    .md-subhead {
+      .md-icon {
+        $size: 16px;
+
+        width: $size;
+        min-width: $size;
+        height: $size;
+        min-height: $size;
+        font-size: $size;
+        line-height: $size;
+      }
+
+      span {
+        vertical-align: middle;
+      }
+    }
+
+    .card-reservation {
+      margin-top: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+
+      .md-icon {
+        color: rgba(#000, .54) !important;
+      }
+
+      .md-button {
+        border-radius: 2px !important;
+      }
+    }
+  }
+</style>
diff --git a/docs/src/routes.js b/docs/src/routes.js
index 86e95fa..1064ba0 100644
--- a/docs/src/routes.js
+++ b/docs/src/routes.js
@@ -10,6 +10,7 @@ import Avatar from './pages/components/Avatar';
 import BottomBar from './pages/components/BottomBar';
 import Buttons from './pages/components/Buttons';
 import ButtonToggle from './pages/components/ButtonToggle';
+import Card from './pages/components/Card';
 import Checkbox from './pages/components/Checkbox';
 import Icon from './pages/components/Icon';
 import Input from './pages/components/Input';
@@ -82,6 +83,11 @@ const components = [
     name: 'components:button-toggle',
     component: ButtonToggle
   },
+  {
+    path: '/components/card',
+    name: 'components:card',
+    component: Card
+  },
   {
     path: '/components/checkbox',
     name: 'components:checkbox',
diff --git a/package.json b/package.json
index ef507b5..d2381a4 100644
--- a/package.json
+++ b/package.json
@@ -3,20 +3,27 @@
   "description": "Material Design for Vue.js",
   "version": "0.1.2",
   "author": "Marcos Moura <marcosvmmoura@gmail.com>",
+  "homepage": "https://marcosmoura.github.io/vue-material",
   "license": "MIT",
+  "registry": "github",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/marcosmoura/vue-material.git"
+  },
+  "bugs": {
+    "url": "https://github.com/marcosmoura/vue-material/issues"
+  },
   "keywords": [
+    "browser",
     "vue",
     "vue 2",
+    "vue2",
     "vuejs",
     "material design",
     "material",
     "angular-material",
     "components"
   ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/marcosmoura/vue-material.git"
-  },
   "main": "dist/vue-material.js",
   "files": [
     "dist",
@@ -31,8 +38,7 @@
     "build:lib": "babel-node build/server/build-lib.js --presets es2015,stage-0",
     "build": "rm -rf dist && npm run build:docs && npm run build:lib",
     "lint": "eslint --ext .js,.vue --fix src",
-    "deploy-docs": "git push origin `git subtree split --prefix dist/docs master`:gh-pages --force",
-    "publish": "npm run deploy-docs && npm publish"
+    "deploy-docs": "git push origin `git subtree split --prefix dist/docs master`:gh-pages --force"
   },
   "dependencies": {
     "autosize": "^3.0.17",
diff --git a/src/components/mdCard/index.js b/src/components/mdCard/index.js
new file mode 100644
index 0000000..f4393f5
--- /dev/null
+++ b/src/components/mdCard/index.js
@@ -0,0 +1,26 @@
+import mdCard from './mdCard.vue';
+import mdCardMedia from './mdCardMedia.vue';
+import mdCardMediaCover from './mdCardMediaCover.vue';
+import mdCardMediaActions from './mdCardMediaActions.vue';
+import mdCardHeader from './mdCardHeader.vue';
+import mdCardHeaderText from './mdCardHeaderText.vue';
+import mdCardContent from './mdCardContent.vue';
+import mdCardActions from './mdCardActions.vue';
+import mdCardArea from './mdCardArea.vue';
+import mdCardExpand from './mdCardExpand.vue';
+import mdCardTheme from './mdCard.theme';
+
+export default function install(Vue) {
+  Vue.component('md-card', Vue.extend(mdCard));
+  Vue.component('md-card-media', Vue.extend(mdCardMedia));
+  Vue.component('md-card-media-cover', Vue.extend(mdCardMediaCover));
+  Vue.component('md-card-media-actions', Vue.extend(mdCardMediaActions));
+  Vue.component('md-card-header', Vue.extend(mdCardHeader));
+  Vue.component('md-card-header-text', Vue.extend(mdCardHeaderText));
+  Vue.component('md-card-content', Vue.extend(mdCardContent));
+  Vue.component('md-card-actions', Vue.extend(mdCardActions));
+  Vue.component('md-card-area', Vue.extend(mdCardArea));
+  Vue.component('md-card-expand', Vue.extend(mdCardExpand));
+
+  Vue.material.styles.push(mdCardTheme);
+}
diff --git a/src/components/mdCard/mdCard.scss b/src/components/mdCard/mdCard.scss
new file mode 100644
index 0000000..cab9d53
--- /dev/null
+++ b/src/components/mdCard/mdCard.scss
@@ -0,0 +1,297 @@
+@import '../../core/stylesheets/variables.scss';
+@import '../../core/stylesheets/mixins.scss';
+
+$card-radius: 2px;
+
+.md-card {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 1;
+  border-radius: $card-radius;
+  box-shadow: $material-shadow-2dp;
+
+  &.md-with-hover {
+    cursor: pointer;
+    transition: $swift-ease-out;
+    transition-property: box-shadow;
+
+    &:hover {
+      z-index: 2;
+      box-shadow: $material-shadow-8dp;
+    }
+  }
+
+  .md-card-media {
+    position: relative;
+
+    &.md-16-9 {
+      @include image-aspect-ratio(16, 9);
+    }
+
+    &.md-4-3 {
+      @include image-aspect-ratio(4, 3);
+    }
+
+    &.md-1-1 {
+      @include image-aspect-ratio(1, 1);
+    }
+
+    + .md-card-header {
+      padding-top: 24px;
+    }
+
+    + .md-card-content:last-child {
+      padding-bottom: 16px;
+    }
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .md-card-header {
+    padding: 16px;
+
+    &.md-card-header-flex {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    + .md-card-content {
+      padding-top: 0;
+    }
+
+    + .md-card-actions:not(:last-child) {
+      padding: 0 8px;
+    }
+
+    .md-avatar {
+      margin-right: 16px;
+      float: left;
+
+      ~ .md-title {
+        font-size: 14px;
+      }
+
+      ~ .md-title,
+      ~ .md-subhead {
+        font-weight: 500;
+        line-height: 20px;
+      }
+    }
+
+    .md-button {
+      margin: 0;
+
+      &:last-child {
+        margin-right: -4px;
+      }
+
+      + .md-button {
+        margin-left: 8px;
+      }
+    }
+
+    .md-card-header-text {
+      flex: 1;
+    }
+
+    .md-card-media {
+      $size: 80px;
+
+      width: $size;
+      flex: 0 0 $size;
+      height: $size;
+      margin-left: 16px;
+
+      &.md-medium {
+        $size: 120px;
+
+        width: $size;
+        flex: 0 0 $size;
+        height: $size;
+      }
+
+      &.md-big {
+        $size: 160px;
+
+        width: $size;
+        flex: 0 0 $size;
+        height: $size;
+      }
+    }
+  }
+
+  .md-subhead,
+  .md-title,
+  .md-subheading {
+    margin: 0;
+    font-weight: 400;
+  }
+
+  .md-subhead {
+    opacity: .54;
+    font-size: 14px;
+    letter-spacing: .01em;
+    line-height: 20px;
+
+    + .md-title {
+      margin-top: 4px;
+    }
+  }
+
+  .md-title {
+    font-size: 24px;
+    letter-spacing: 0;
+    line-height: 32px;
+  }
+
+  .md-card-media-actions {
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+
+    .md-card-media {
+      $size: 240px;
+
+      width: $size;
+      flex: 0 0 $size;
+      height: $size;
+    }
+
+    .md-card-actions {
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+
+      .md-button + .md-button {
+        margin: 8px 0 0;
+      }
+    }
+  }
+
+  .md-card-content {
+    padding: 16px;
+    font-size: 14px;
+    line-height: 22px;
+
+    &:last-child {
+      padding-bottom: 24px;
+    }
+  }
+
+  .md-card-actions {
+    padding: 8px;
+    display: flex;
+    justify-content: flex-end;
+
+    .md-button {
+      margin: 0;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      + .md-button {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .md-card-area {
+    position: relative;
+  }
+
+  > .md-card-area:not(:last-child) {
+    position: relative;
+
+    &:after {
+      height: 1px;
+      position: absolute;
+      bottom: 0;
+      content: " ";
+    }
+
+    &:not(.md-inset):after {
+      right: 0;
+      left: 0;
+    }
+
+    &.md-inset:after {
+      right: 16px;
+      left: 16px;
+    }
+  }
+
+  .md-card-media-cover {
+    position: relative;
+    color: #fff;
+
+    &.md-text-scrim {
+      .md-backdrop {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1;
+      }
+    }
+
+    .md-card-area {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 2;
+    }
+
+    .md-card-header + .md-card-actions {
+      padding-top: 0;
+    }
+
+    .md-subhead {
+      opacity: 1;
+    }
+  }
+
+  .md-card-expand {
+    overflow: hidden;
+
+    &.md-active {
+      [md-expand-trigger] {
+        transform: rotateZ(180deg) translate3D(0, 0, 0);
+      }
+
+      .md-card-content {
+        margin-top: 0 !important;
+        opacity: 1;
+      }
+    }
+
+    .md-card-actions {
+      padding-top: 0;
+      position: relative;
+      z-index: 2;
+    }
+
+    [md-expand-trigger] {
+      transition: $swift-ease-out;
+    }
+
+    .md-card-content {
+      padding-top: 4px;
+      position: relative;
+      z-index: 1;
+      opacity: 0;
+      transform: translate3D(0, 0, 0);
+      transition: $swift-ease-out;
+    }
+  }
+}
diff --git a/src/components/mdCard/mdCard.theme b/src/components/mdCard/mdCard.theme
new file mode 100644
index 0000000..7e3d48a
--- /dev/null
+++ b/src/components/mdCard/mdCard.theme
@@ -0,0 +1,38 @@
+.THEME_NAME {
+  .md-card,
+  &.md-card {
+    background-color: #{'BACKGROUND-COLOR-A100'};
+
+    .md-icon-button {
+      .md-icon {
+        color: #{'BACKGROUND-CONTRAST-0.54'};
+      }
+    }
+
+    > .md-card-area {
+      &:after {
+        background-color: #{'BACKGROUND-CONTRAST-0.12'};
+      }
+    }
+
+    .md-card-media-cover {
+      &.md-text-scrim {
+        .md-backdrop {
+          background: linear-gradient(to bottom, #{'BACKGROUND-CONTRAST-0.0'} 20%, #{'BACKGROUND-CONTRAST-0.275'} 66%, #{'BACKGROUND-CONTRAST-0.55'} 100%);
+        }
+      }
+
+      &.md-solid {
+        .md-card-area {
+          background-color: #{'BACKGROUND-CONTRAST-0.4'};
+        }
+      }
+    }
+
+    .md-card-expand {
+      .md-card-actions {
+        background-color: #{'BACKGROUND-COLOR-A100'};
+      }
+    }
+  }
+}
diff --git a/src/components/mdCard/mdCard.vue b/src/components/mdCard/mdCard.vue
new file mode 100644
index 0000000..145a50a
--- /dev/null
+++ b/src/components/mdCard/mdCard.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="md-card" :class="classes">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" src="./mdCard.scss"></style>
+
+<script>
+  export default {
+    props: {
+      mdWithHover: Boolean
+    },
+    computed: {
+      classes() {
+        return {
+          'md-with-hover': this.mdWithHover
+        };
+      }
+    }
+  };
+</script>
diff --git a/src/components/mdCard/mdCardActions.vue b/src/components/mdCard/mdCardActions.vue
new file mode 100644
index 0000000..934e7b5
--- /dev/null
+++ b/src/components/mdCard/mdCardActions.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="md-card-actions">
+    <slot></slot>
+  </div>
+</template>
diff --git a/src/components/mdCard/mdCardArea.vue b/src/components/mdCard/mdCardArea.vue
new file mode 100644
index 0000000..e04fc2e
--- /dev/null
+++ b/src/components/mdCard/mdCardArea.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="md-card-area" :class="classes">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      mdInset: Boolean
+    },
+    computed: {
+      classes() {
+        return {
+          'md-inset': this.mdInset
+        };
+      }
+    }
+  };
+</script>
diff --git a/src/components/mdCard/mdCardContent.vue b/src/components/mdCard/mdCardContent.vue
new file mode 100644
index 0000000..c67ba70
--- /dev/null
+++ b/src/components/mdCard/mdCardContent.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="md-card-content">
+    <slot></slot>
+  </div>
+</template>
diff --git a/src/components/mdCard/mdCardExpand.vue b/src/components/mdCard/mdCardExpand.vue
new file mode 100644
index 0000000..54e5d04
--- /dev/null
+++ b/src/components/mdCard/mdCardExpand.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="md-card-expand" ref="expand">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    methods: {
+      setContentMargin() {
+        this.content.style.marginTop = -this.content.offsetHeight + 'px';
+      },
+      toggle() {
+        this.$refs.expand.classList.toggle('md-active');
+      },
+      onWindowResize() {
+        window.requestAnimationFrame(this.setContentMargin);
+      }
+    },
+    mounted() {
+      this.trigger = this.$el.querySelector('[md-expand-trigger]');
+      this.content = this.$el.querySelector('.md-card-content');
+
+      if (this.content) {
+        this.setContentMargin();
+
+        this.trigger.addEventListener('click', this.toggle);
+        window.addEventListener('resize', this.onWindowResize);
+      }
+    },
+    destroyed() {
+      if (this.content) {
+        this.trigger.removeEventListener('click', this.toggle);
+        window.removeEventListener('resize', this.onWindowResize);
+      }
+    }
+  };
+</script>
diff --git a/src/components/mdCard/mdCardHeader.vue b/src/components/mdCard/mdCardHeader.vue
new file mode 100644
index 0000000..ea44ecd
--- /dev/null
+++ b/src/components/mdCard/mdCardHeader.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="md-card-header">
+    <slot></slot>
+  </div>
+</template>
diff --git a/src/components/mdCard/mdCardHeaderText.vue b/src/components/mdCard/mdCardHeaderText.vue
new file mode 100644
index 0000000..e4c96a7
--- /dev/null
+++ b/src/components/mdCard/mdCardHeaderText.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="md-card-header-text">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    mounted() {
+      this.parentClasses = this.$parent.$el.classList;
+
+      if (this.parentClasses.contains('md-card-header')) {
+        this.insideParent = true;
+        this.parentClasses.add('md-card-header-flex');
+      }
+    },
+    destroyed() {
+      this.parentClasses.remove('md-card-header-flex');
+    }
+  };
+</script>
diff --git a/src/components/mdCard/mdCardMedia.vue b/src/components/mdCard/mdCardMedia.vue
new file mode 100644
index 0000000..aaf00a2
--- /dev/null
+++ b/src/components/mdCard/mdCardMedia.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="md-card-media" :class="classes">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      mdRatio: String,
+      mdMedium: Boolean,
+      mdBig: Boolean
+    },
+    computed: {
+      classes() {
+        let classes = {
+          'md-16-9': this.mdRatio === '16:9' || this.mdRatio === '16/9',
+          'md-4-3': this.mdRatio === '4:3' || this.mdRatio === '4/3',
+          'md-1-1': this.mdRatio === '1:1' || this.mdRatio === '1/1'
+        };
+
+        if (this.mdMedium || this.mdBig) {
+          classes = {
+            'md-medium': this.mdMedium,
+            'md-big': this.mdBig
+          };
+        }
+
+        return classes;
+      }
+    }
+  };
+</script>
diff --git a/src/components/mdCard/mdCardMediaActions.vue b/src/components/mdCard/mdCardMediaActions.vue
new file mode 100644
index 0000000..8aa25b7
--- /dev/null
+++ b/src/components/mdCard/mdCardMediaActions.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="md-card-media-actions">
+    <slot></slot>
+  </div>
+</template>
diff --git a/src/components/mdCard/mdCardMediaCover.vue b/src/components/mdCard/mdCardMediaCover.vue
new file mode 100644
index 0000000..ce37510
--- /dev/null
+++ b/src/components/mdCard/mdCardMediaCover.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="md-card-media-cover" :class="classes">
+    <slot></slot>
+    <div class="md-backdrop" :style="styles" v-if="mdTextScrim" ref="backdrop"></div>
+  </div>
+</template>
+
+<script>
+  const getImageAlpha = (image, onLoad) => {
+    let canvas = document.createElement('canvas');
+
+    image.onload = function() {
+      let colorSum = 0;
+      let ctx;
+      let imageData;
+      let imageMetadata;
+      let r;
+      let g;
+      let b;
+      let average;
+
+      canvas.width = this.width;
+      canvas.height = this.height;
+      ctx = canvas.getContext('2d');
+
+      ctx.drawImage(this, 0, 0);
+
+      imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      imageMetadata = imageData.data;
+
+      for (let x = 0, len = imageMetadata.length; x < len; x += 4) {
+        r = imageMetadata[x];
+        g = imageMetadata[x + 1];
+        b = imageMetadata[x + 2];
+
+        average = Math.floor((r + g + b) / 3);
+        colorSum += average;
+      }
+
+      onLoad(Math.floor(colorSum / (this.width * this.height)));
+    };
+  };
+
+  export default {
+    props: {
+      mdTextScrim: Boolean,
+      mdSolid: Boolean
+    },
+    data() {
+      return {
+        backdropBg: {}
+      };
+    },
+    computed: {
+      classes() {
+        return {
+          'md-text-scrim': this.mdTextScrim,
+          'md-solid': this.mdSolid
+        };
+      },
+      styles() {
+        return {
+          background: this.backdropBg
+        };
+      }
+    },
+    methods: {
+      applyScrimColor(darkness) {
+        if (this.$refs.backdrop) {
+          this.backdropBg = `linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, ${darkness / 2}) 66%, rgba(0, 0, 0, ${darkness}) 100%)`;
+        }
+      },
+      applySolidColor(darkness) {
+        let area = this.$el.querySelector('.md-card-area');
+
+        if (area) {
+          area.style.background = `rgba(0, 0, 0, ${darkness})`;
+        }
+      }
+    },
+    mounted() {
+      let image = this.$el.querySelector('img');
+
+      if (image && (this.mdTextScrim || this.mdSolid)) {
+        getImageAlpha(image, (lightness) => {
+          let limit = 256;
+          let darkness = Math.abs(limit - lightness) * 100 / limit;
+
+          if (darkness > 30) {
+            darkness = 30;
+          }
+
+          if (this.mdTextScrim) {
+            this.applyScrimColor((darkness + 35) / 100);
+          } else if (this.mdSolid) {
+            this.applySolidColor((darkness + 30) / 100);
+          }
+        });
+      }
+    }
+  };
+</script>
diff --git a/src/core/stylesheets/mixins.scss b/src/core/stylesheets/mixins.scss
new file mode 100644
index 0000000..f4c4bf8
--- /dev/null
+++ b/src/core/stylesheets/mixins.scss
@@ -0,0 +1,18 @@
+@mixin image-aspect-ratio($width, $height) {
+  overflow: hidden;
+
+  &:before{
+    width: 100%;
+    padding-top: ($height / $width) * 100%;
+    display: block;
+    content: " ";
+  }
+
+  img {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    transform: translateY(-50%);
+  }
+}
diff --git a/src/core/stylesheets/variables.scss b/src/core/stylesheets/variables.scss
index e69906d..8939e00 100644
--- a/src/core/stylesheets/variables.scss
+++ b/src/core/stylesheets/variables.scss
@@ -5,7 +5,7 @@ $font-roboto: Roboto, Lato, sans-serif;
 
 
 
-/*  Transitions
+/*  Transitions - Based on Angular Material
    ========================================================================== */
 
 $swift-ease-out-duration: .4s !default;
@@ -34,7 +34,7 @@ $material-leave: all $material-leave-duration $material-leave-timing-function;
 
 
 
-/*  Elevation
+/*  Elevation - Based on Angular Material
    ========================================================================== */
 
 $shadow-key-umbra-opacity: .2 !default;
diff --git a/src/index.js b/src/index.js
index 8295b86..37251c6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,6 +4,7 @@ import mdBottomBar from './components/mdBottomBar';
 import mdButton from './components/mdButton';
 import mdButtonToggle from './components/mdButtonToggle';
 import mdCheckbox from './components/mdCheckbox';
+import mdCard from './components/mdCard';
 import mdDivider from './components/mdDivider';
 import mdIcon from './components/mdIcon';
 import mdInputContainer from './components/mdInputContainer';
@@ -25,6 +26,7 @@ let options = {
   mdButton,
   mdButtonToggle,
   mdCheckbox,
+  mdCard,
   mdDivider,
   mdIcon,
   mdInputContainer,