diff --git a/src/components-examples/material/card/BUILD.bazel b/src/components-examples/material/card/BUILD.bazel
index e557aad32046..d5a81324ed05 100644
--- a/src/components-examples/material/card/BUILD.bazel
+++ b/src/components-examples/material/card/BUILD.bazel
@@ -19,6 +19,8 @@ ng_module(
"//src/material/button/testing",
"//src/material/card",
"//src/material/card/testing",
+ "//src/material/divider",
+ "//src/material/progress-bar",
"@npm//@angular/platform-browser",
"@npm//@angular/platform-browser-dynamic",
"@npm//@types/jasmine",
diff --git a/src/components-examples/material/card/card-actions/card-actions-example.html b/src/components-examples/material/card/card-actions/card-actions-example.html
new file mode 100644
index 000000000000..5bd959e1782c
--- /dev/null
+++ b/src/components-examples/material/card/card-actions/card-actions-example.html
@@ -0,0 +1,17 @@
+
+ Actions Buttons
+ Start
+
+
+
+
+
+
+
+ Actions Buttons
+ End
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components-examples/material/card/card-actions/card-actions-example.ts b/src/components-examples/material/card/card-actions/card-actions-example.ts
new file mode 100644
index 000000000000..6d3eb3f144b1
--- /dev/null
+++ b/src/components-examples/material/card/card-actions/card-actions-example.ts
@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Card with actions alignment option
+ */
+@Component({
+ selector: 'card-actions-example',
+ templateUrl: 'card-actions-example.html'
+})
+export class CardActionsExample {}
diff --git a/src/components-examples/material/card/card-footer/card-footer-example.css b/src/components-examples/material/card/card-footer/card-footer-example.css
new file mode 100644
index 000000000000..81749a89098e
--- /dev/null
+++ b/src/components-examples/material/card/card-footer/card-footer-example.css
@@ -0,0 +1,4 @@
+.example-card {
+ max-width: 400px;
+}
+
diff --git a/src/components-examples/material/card/card-footer/card-footer-example.html b/src/components-examples/material/card/card-footer/card-footer-example.html
new file mode 100644
index 000000000000..0d2e4937ef2c
--- /dev/null
+++ b/src/components-examples/material/card/card-footer/card-footer-example.html
@@ -0,0 +1,16 @@
+
+ Dog Breed
+ Shiba Inu
+
+
This card has divider and indeterminate progress as footer
+
{{ longText }}
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components-examples/material/card/card-footer/card-footer-example.ts b/src/components-examples/material/card/card-footer/card-footer-example.ts
new file mode 100644
index 000000000000..21d9c221f632
--- /dev/null
+++ b/src/components-examples/material/card/card-footer/card-footer-example.ts
@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Card with footer
+ */
+@Component({
+ selector: 'card-footer-example',
+ templateUrl: 'card-footer-example.html',
+ styleUrls: ['card-footer-example.css']
+})
+export class CardFooterExample {
+ longText = `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/components-examples/material/card/card-media-size/card-media-size-example.css b/src/components-examples/material/card/card-media-size/card-media-size-example.css
new file mode 100644
index 000000000000..d360784967fb
--- /dev/null
+++ b/src/components-examples/material/card/card-media-size/card-media-size-example.css
@@ -0,0 +1,4 @@
+.example-card {
+ max-width: 400px;
+ margin-bottom: 8px;
+}
diff --git a/src/components-examples/material/card/card-media-size/card-media-size-example.html b/src/components-examples/material/card/card-media-size/card-media-size-example.html
new file mode 100644
index 000000000000..1cb2f9981d02
--- /dev/null
+++ b/src/components-examples/material/card/card-media-size/card-media-size-example.html
@@ -0,0 +1,44 @@
+
+
+
+ Shiba Inu
+ Small
+
+
+
+ {{longText}}
+
+
+
+
+
+ Shiba Inu
+ Medium
+
+
+
+ {{longText}}
+
+
+
+
+
+ Shiba Inu
+ Large
+
+
+
+ {{longText}}
+
+
+
+
+
+ Shiba Inu
+ Extra large
+
+
+
+ {{longText}}
+
+
\ No newline at end of file
diff --git a/src/components-examples/material/card/card-media-size/card-media-size-example.ts b/src/components-examples/material/card/card-media-size/card-media-size-example.ts
new file mode 100644
index 000000000000..d4e88014d956
--- /dev/null
+++ b/src/components-examples/material/card/card-media-size/card-media-size-example.ts
@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Card with media size
+ */
+@Component({
+ selector: 'card-media-size-example',
+ templateUrl: 'card-media-size-example.html',
+ styleUrls: ['card-media-size-example.css']
+})
+export class CardMediaSizeExample {
+ longText = `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/components-examples/material/card/card-subtitle/card-subtitle-example.css b/src/components-examples/material/card/card-subtitle/card-subtitle-example.css
new file mode 100644
index 000000000000..82c7afd666f7
--- /dev/null
+++ b/src/components-examples/material/card/card-subtitle/card-subtitle-example.css
@@ -0,0 +1,3 @@
+.example-card {
+ max-width: 400px;
+}
diff --git a/src/components-examples/material/card/card-subtitle/card-subtitle-example.html b/src/components-examples/material/card/card-subtitle/card-subtitle-example.html
new file mode 100644
index 000000000000..43e068d6002f
--- /dev/null
+++ b/src/components-examples/material/card/card-subtitle/card-subtitle-example.html
@@ -0,0 +1,12 @@
+
+ Shiba Inu
+ Dog Breed
+
+
This card indeterminates progress bar.
+
{{longText}}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components-examples/material/card/card-subtitle/card-subtitle-example.ts b/src/components-examples/material/card/card-subtitle/card-subtitle-example.ts
new file mode 100644
index 000000000000..56b02a342372
--- /dev/null
+++ b/src/components-examples/material/card/card-subtitle/card-subtitle-example.ts
@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Card with sub-title
+ */
+@Component({
+ selector: 'card-subtitle-example',
+ templateUrl: 'card-subtitle-example.html',
+ styleUrls: ['card-subtitle-example.css']
+})
+export class CardSubtitleExample {
+ longText = `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/components-examples/material/card/index.ts b/src/components-examples/material/card/index.ts
index 20532e992d9e..659f47cb2cb8 100644
--- a/src/components-examples/material/card/index.ts
+++ b/src/components-examples/material/card/index.ts
@@ -1,26 +1,42 @@
import {NgModule} from '@angular/core';
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
import {CardFancyExample} from './card-fancy/card-fancy-example';
import {CardOverviewExample} from './card-overview/card-overview-example';
import {CardHarnessExample} from './card-harness/card-harness-example';
+import {CardActionsExample} from './card-actions/card-actions-example';
+import {CardMediaSizeExample} from './card-media-size/card-media-size-example';
+import {CardSubtitleExample} from './card-subtitle/card-subtitle-example';
+import {CardFooterExample} from './card-footer/card-footer-example';
export {
CardFancyExample,
CardOverviewExample,
CardHarnessExample,
+ CardActionsExample,
+ CardMediaSizeExample,
+ CardSubtitleExample,
+ CardFooterExample
};
const EXAMPLES = [
CardFancyExample,
CardOverviewExample,
CardHarnessExample,
+ CardActionsExample,
+ CardMediaSizeExample,
+ CardSubtitleExample,
+ CardFooterExample
];
@NgModule({
imports: [
MatButtonModule,
MatCardModule,
+ MatDividerModule,
+ MatProgressBarModule
],
declarations: EXAMPLES,
exports: EXAMPLES,