diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts
index 11b41b405b1f..53eb9824f83d 100644
--- a/src/demo-app/a11y/a11y-module.ts
+++ b/src/demo-app/a11y/a11y-module.ts
@@ -8,6 +8,7 @@ import {AccessibilityDemo, AccessibilityHome} from './a11y';
import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y';
import {ButtonAccessibilityDemo} from './button/button-a11y';
import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
+import {CardAccessibilityDemo} from './card/card-a11y';
import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
import {ChipsAccessibilityDemo} from './chips/chips-a11y';
import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
@@ -44,6 +45,7 @@ export class AccessibilityRoutingModule {}
AutocompleteAccessibilityDemo,
ButtonAccessibilityDemo,
ButtonToggleAccessibilityDemo,
+ CardAccessibilityDemo,
CheckboxAccessibilityDemo,
ChipsAccessibilityDemo,
DatepickerAccessibilityDemo,
diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts
index ecbb35968117..2874c7c59f2c 100644
--- a/src/demo-app/a11y/a11y.ts
+++ b/src/demo-app/a11y/a11y.ts
@@ -20,6 +20,7 @@ export class AccessibilityDemo {
{name: 'Autocomplete', route: 'autocomplete'},
{name: 'Button', route: 'button'},
{name: 'Button toggle', route: 'button-toggle'},
+ {name: 'Card', route: 'card'},
{name: 'Checkbox', route: 'checkbox'},
{name: 'Chips', route: 'chips'},
{name: 'Datepicker', route: 'datepicker'},
diff --git a/src/demo-app/a11y/card/assets/dachshund-avatar.jpg b/src/demo-app/a11y/card/assets/dachshund-avatar.jpg
new file mode 100644
index 000000000000..91460a7a7041
Binary files /dev/null and b/src/demo-app/a11y/card/assets/dachshund-avatar.jpg differ
diff --git a/src/demo-app/a11y/card/assets/dachshund.jpg b/src/demo-app/a11y/card/assets/dachshund.jpg
new file mode 100644
index 000000000000..a6d561ba790d
Binary files /dev/null and b/src/demo-app/a11y/card/assets/dachshund.jpg differ
diff --git a/src/demo-app/a11y/card/assets/shiba-inu-avatar.jpg b/src/demo-app/a11y/card/assets/shiba-inu-avatar.jpg
new file mode 100644
index 000000000000..d2054d434c35
Binary files /dev/null and b/src/demo-app/a11y/card/assets/shiba-inu-avatar.jpg differ
diff --git a/src/demo-app/a11y/card/assets/shiba-inu.jpg b/src/demo-app/a11y/card/assets/shiba-inu.jpg
new file mode 100644
index 000000000000..1687c4ff8290
Binary files /dev/null and b/src/demo-app/a11y/card/assets/shiba-inu.jpg differ
diff --git a/src/demo-app/a11y/card/card-a11y.html b/src/demo-app/a11y/card/card-a11y.html
new file mode 100644
index 000000000000..6a1961f088ce
--- /dev/null
+++ b/src/demo-app/a11y/card/card-a11y.html
@@ -0,0 +1,93 @@
+
+
Dogs group
+
Showing a card with a group of content
+
+
+
Herding Group
+
Hound Group
+
Non-Sporting Group
+
Sporting Group
+
Terrier Group
+
Toy Group
+
Working Group
+
Foundation Stock Service
+
Miscellaneous Class
+
+
+
+
+
+
Husky
+
Showing a card with title only
+
+ Siberian Husky
+
+
+
+
+
Malamute
+
Showing a Card with title and subtitle.
+
+ Alaskan Malamute
+ Dog breed
+
+
+
+
+
+
German Shepherd
+
+ Showing a card with title, subtitle, and a footer.
+
+
+ Dog breed
+ German Shepherd
+
+ The German Shepherd is a breed of medium to large-sized working dog that originated in
+ Germany. The breed's officially recognized name is German Shepherd Dog in the English
+ language. The breed is also known as the Alsatian in Britain and Ireland.
+
+
+ People also search for Rottweiler, Siberian Husky, Labrador Retriever, Doberman Pinscher
+
+
+
+
+
+
Dachshund
+
Showing a card with title, subtitle, and avatar as header and a card image.
+
+
+
+ Dachshund
+ Dog breed
+
+
+
+ The dachshund is a short-legged, long-bodied, hound-type dog breed.
+
+
+
+
+
+
Shiba Inu
+
Showing a card with header, content, image, and two action buttons: "share" and "like".
+
+
+
+ Shiba Inu
+ Dog Breed
+
+
+
+ The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
+ A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
+ bred for hunting.
+
+
+
+
+
+
+
diff --git a/src/demo-app/a11y/card/card-a11y.scss b/src/demo-app/a11y/card/card-a11y.scss
new file mode 100644
index 000000000000..142cadb36ca0
--- /dev/null
+++ b/src/demo-app/a11y/card/card-a11y.scss
@@ -0,0 +1,7 @@
+.example-card button {
+ text-transform: uppercase;
+}
+
+.example-card {
+ max-width: 450px;
+}
diff --git a/src/demo-app/a11y/card/card-a11y.ts b/src/demo-app/a11y/card/card-a11y.ts
new file mode 100644
index 000000000000..613d72d3af4f
--- /dev/null
+++ b/src/demo-app/a11y/card/card-a11y.ts
@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {MdSnackBar} from '@angular/material';
+
+@Component({
+ moduleId: module.id,
+ selector: 'card-a11y',
+ templateUrl: 'card-a11y.html',
+ styleUrls: ['card-a11y.css'],
+})
+export class CardAccessibilityDemo {
+ showProgress: boolean = false;
+
+ constructor(private snackBar: MdSnackBar) {}
+
+ openSnackbar(message: string) {
+ this.snackBar.open(message, '', {duration: 2000});
+ }
+}
diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts
index a43ea23f6244..c3090152b910 100644
--- a/src/demo-app/a11y/routes.ts
+++ b/src/demo-app/a11y/routes.ts
@@ -2,6 +2,7 @@ import {Routes} from '@angular/router';
import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y';
import {ButtonAccessibilityDemo} from './button/button-a11y';
import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
+import {CardAccessibilityDemo} from './card/card-a11y';
import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
import {ChipsAccessibilityDemo} from './chips/chips-a11y';
import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
@@ -19,6 +20,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
{path: 'autocomplete', component: AutocompleteAccessibilityDemo},
{path: 'button', component: ButtonAccessibilityDemo},
{path: 'button-toggle', component: ButtonToggleAccessibilityDemo},
+ {path: 'card', component: CardAccessibilityDemo},
{path: 'checkbox', component: CheckboxAccessibilityDemo},
{path: 'chips', component: ChipsAccessibilityDemo},
{path: 'datepicker', component: DatepickerAccessibilityDemo},