diff --git a/e2e/components/stepper-e2e.spec.ts b/e2e/components/stepper-e2e.spec.ts
index 07dd83242979..cd9b4b3d8211 100644
--- a/e2e/components/stepper-e2e.spec.ts
+++ b/e2e/components/stepper-e2e.spec.ts
@@ -19,12 +19,14 @@ describe('stepper', () => {
       const previousButton = element.all(by.buttonText('Back'));
       const nextButton = element.all(by.buttonText('Next'));
 
-      expect(element(by.css('md-step-header[aria-selected="true"]')).getText()).toBe('1\nStep one');
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('1\nFill out your name');
 
       screenshot('start');
       nextButton.get(0).click();
 
-      expect(element(by.css('md-step-header[aria-selected="true"]')).getText()).toBe('2\nStep two');
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('2\nFill out your address');
 
       await browser.wait(ExpectedConditions.not(
           ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
@@ -32,7 +34,8 @@ describe('stepper', () => {
 
       previousButton.get(0).click();
 
-      expect(element(by.css('md-step-header[aria-selected="true"]')).getText()).toBe('1\nStep one');
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('1\nFill out your name');
 
       await browser.wait(ExpectedConditions.not(
           ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
@@ -74,7 +77,8 @@ describe('stepper', () => {
       let nextButton = element.all(by.buttonText('Next'));
       nextButton.get(0).click();
 
-      expect(element(by.css('md-step-header[aria-selected="true"]')).getText()).toBe('1\nStep one');
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('1\nFill out your name');
     });
   });
 });
diff --git a/src/lib/stepper/stepper.md b/src/lib/stepper/stepper.md
index 54e273068cf5..cf3381330478 100644
--- a/src/lib/stepper/stepper.md
+++ b/src/lib/stepper/stepper.md
@@ -1,5 +1,7 @@
 Angular Material's stepper provides a wizard-like workflow by dividing content into logical steps.
 
+<!-- example(stepper-overview) -->
+
 Material stepper builds on the foundation of the CDK stepper that is responsible for the logic
 that drives a stepped workflow. Material stepper extends the CDK stepper and has Material Design
 styling.
diff --git a/src/material-examples/stepper-overview/stepper-overview-example.css b/src/material-examples/stepper-overview/stepper-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/material-examples/stepper-overview/stepper-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/material-examples/stepper-overview/stepper-overview-example.html b/src/material-examples/stepper-overview/stepper-overview-example.html
index 95a2c8a30b20..4e4408a1bec0 100644
--- a/src/material-examples/stepper-overview/stepper-overview-example.html
+++ b/src/material-examples/stepper-overview/stepper-overview-example.html
@@ -2,22 +2,32 @@
 <md-horizontal-stepper [linear]="isLinear">
   <md-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
-      <ng-template mdStepLabel>Step one</ng-template>
-      Content of step one
-      <button md-button mdStepperNext>Next</button>
+      <ng-template mdStepLabel>Fill out your name</ng-template>
+      <md-form-field>
+        <input mdInput placeholder="Last name, First name" formControlName="firstCtrl" required>
+      </md-form-field>
+      <div>
+        <button md-button mdStepperNext>Next</button>
+      </div>
     </form>
   </md-step>
   <md-step [stepControl]="secondFormGroup">
     <form [formGroup]="secondFormGroup">
-      <ng-template mdStepLabel>Step two</ng-template>
-      Content of step two
-      <button md-button mdStepperPrevious>Back</button>
-      <button md-button mdStepperNext>Next</button>
+      <ng-template mdStepLabel>Fill out your address</ng-template>
+      <md-form-field>
+        <input mdInput placeholder="Address" formControlName="secondCtrl" required>
+      </md-form-field>
+      <div>
+        <button md-button mdStepperPrevious>Back</button>
+        <button md-button mdStepperNext>Next</button>
+      </div>
     </form>
   </md-step>
   <md-step>
-    <ng-template mdStepLabel>Step three</ng-template>
-    Content of step three
-    <button md-button mdStepperPrevious>Back</button>
+    <ng-template mdStepLabel>Done</ng-template>
+    You are now done.
+    <div>
+      <button md-button mdStepperPrevious>Back</button>
+    </div>
   </md-step>
 </md-horizontal-stepper>
diff --git a/src/material-examples/stepper-overview/stepper-overview-example.ts b/src/material-examples/stepper-overview/stepper-overview-example.ts
index 5d3e46d92c0e..717dcb5d0a99 100644
--- a/src/material-examples/stepper-overview/stepper-overview-example.ts
+++ b/src/material-examples/stepper-overview/stepper-overview-example.ts
@@ -7,6 +7,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 @Component({
   selector: 'stepper-overview-example',
   templateUrl: 'stepper-overview-example.html',
+  styleUrls: ['stepper-overview-example.css']
 })
 export class StepperOverviewExample {
   isLinear = false;