diff --git a/src/app/components/components/steps/steps.component.html b/src/app/components/components/steps/steps.component.html
index f1ba04d30a..fbc260f867 100644
--- a/src/app/components/components/steps/steps.component.html
+++ b/src/app/components/components/steps/steps.component.html
@@ -15,23 +15,18 @@
     <h3>{{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}</h3>
     <td-steps (stepChange)="stepChange($event)" [mode]="horizontal ? 'horizontal' : 'vertical'">
       <td-step #step1 label="Basic Usage" sublabel="Toggle between active and inactive and emit events." [active]="true" [disabled]="disabled" (activated)="activeStep1Event()" (deactivated)="deactiveStep1Event()">
-        <template td-step-content>
-          Include any content you like for an active stepper 
-        </template>
+        <template td-step-label><span>Basic Usage (template)</span></template>
+        Include any content you like for an active stepper 
       </td-step>
       <td-step #step2 label="Required State" sublabel="Toggle between active and inactive while in required state." [state]="stateStep2" [disabled]="disabled">
-        <template td-step-content>
-          This step is required!
-        </template>
+        This step is required!
         <template td-step-actions>
           <button md-raised-button color="primary" (click)="toggleRequiredStep2()">Toggle Require</button>
           <button md-button (click)="step2.active = false">Cancel</button>
         </template>
       </td-step>
       <td-step #step3 label="Complete State" sublabel="Toggle between active and inactive while in complete state." [state]="stateStep3" [disabled]="disabled">
-        <template td-step-content>
-          Mark this step complete and get a summary
-        </template>
+        Mark this step complete and get a summary
         <template td-step-summary>
           Use an optional step summary to summarize the info in this step
         </template>
@@ -135,9 +130,10 @@ <h3>Example:</h3>
     <td-highlight lang="html">
       <![CDATA[
         <td-step #step label="Label" sublabel="Sublabel" [active]="active" [disabled]="disabled" [state]="state" (activated)="activeEvent()" (deactivated)="deactiveEvent()">
-          <template td-step-content>
-            ... add content that will be shown when the step is "active"
+          <template td-step-label>
+            ... add label content (if not used, falls back to [label] input)
           </template>
+          ... add content that will be shown when the step is "active"
           <template td-step-actions>
             <button (click)="step.close()">Close</button>
             ... add button elements for the step content (optional)
diff --git a/src/app/components/layouts/card-over/card-over.component.html b/src/app/components/layouts/card-over/card-over.component.html
index 378d215862..6e510d1856 100644
--- a/src/app/components/layouts/card-over/card-over.component.html
+++ b/src/app/components/layouts/card-over/card-over.component.html
@@ -8,103 +8,95 @@
         <div flex-gt-md="45">
           <td-steps>
             <td-step [active]="true" label="Step 1: td-layout" sublabel="td-layout is the wrapper component">
-              <template td-step-content>
-                <md-list>
-                  <md-list-item>
-                    <h3 md-line><code><![CDATA[<td-layout>]]></code></h3>
-                    <p md-line>The wrapper of your entire layout</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code>#layout</code></h3>
-                    <p md-line>The ID and local reference of your sidenav</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code>sidenavTitle?: string</code></h3>
-                    <p md-line>The title of your sidenav</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code>logo?: string</code></h3>
-                    <p md-line>The path to your sidenav logo</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                </md-list>
-              </template>
+              <md-list>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<td-layout>]]></code></h3>
+                  <p md-line>The wrapper of your entire layout</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code>#layout</code></h3>
+                  <p md-line>The ID and local reference of your sidenav</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code>sidenavTitle?: string</code></h3>
+                  <p md-line>The title of your sidenav</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code>logo?: string</code></h3>
+                  <p md-line>The path to your sidenav logo</p>
+                </md-list-item>
+                <md-divider></md-divider>
+              </md-list>
             </td-step>
             <td-step label="Step 2: menu-items" sublabel="the sidenav menu items">
-              <template td-step-content>
-                <md-list>
-                  <md-list-item>
-                    <h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
-                    <p md-line>The menu items wrapper</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code><![CDATA[<a md-list-item>]]></code></h3>
-                    <p md-line>Loops over the routes from your Class</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code><![CDATA[<md-icon>]]></code></h3>
-                    <p md-line>The SVG or font icon</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                </md-list>
-              </template>
+              <md-list>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
+                  <p md-line>The menu items wrapper</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<a md-list-item>]]></code></h3>
+                  <p md-line>Loops over the routes from your Class</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<md-icon>]]></code></h3>
+                  <p md-line>The SVG or font icon</p>
+                </md-list-item>
+                <md-divider></md-divider>
+              </md-list>
             </td-step>
             <td-step label="Step 3: td-layout-nav" sublabel="the content wrapper of the layout">
-              <template td-step-content>
-                <md-list>
-                  <md-list-item>
-                    <h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
-                    <p md-line>Builds the top toolbar and content area</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code>toolbarTitle?: string</code></h3>
-                    <p md-line>The title of your toolbar</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code>logo?: string</code></h3>
-                    <p md-line>The path to your toolbar logo</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                </md-list>
-              </template>
+              <md-list>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
+                  <p md-line>Builds the top toolbar and content area</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code>toolbarTitle?: string</code></h3>
+                  <p md-line>The title of your toolbar</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code>logo?: string</code></h3>
+                  <p md-line>The path to your toolbar logo</p>
+                </md-list-item>
+                <md-divider></md-divider>
+              </md-list>
             </td-step>
             <td-step label="Step 4: td-layout-card-over" sublabel="the main card content area">
-              <template td-step-content>
-                <md-list>
-                  <md-list-item>
-                    <h3 md-line><code><![CDATA[<td-layout-card-over>]]></code></h3>
-                    <p md-line>Builds the card and content area</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code>cardTitle?: string</code></h3>
-                    <p md-line>The card title</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code>cardSubtitle?: string</code></h3>
-                    <p md-line>The card subtitle</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code>cardWidth?: number</code></h3>
-                    <p md-line>The card width percentage (default 70)</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
-                    <p md-line>Loads html for each route (view)</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                </md-list>
-              </template>
+              <md-list>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<td-layout-card-over>]]></code></h3>
+                  <p md-line>Builds the card and content area</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code>cardTitle?: string</code></h3>
+                  <p md-line>The card title</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code>cardSubtitle?: string</code></h3>
+                  <p md-line>The card subtitle</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code>cardWidth?: number</code></h3>
+                  <p md-line>The card width percentage (default 70)</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
+                  <p md-line>Loads html for each route (view)</p>
+                </md-list-item>
+                <md-divider></md-divider>
+              </md-list>
             </td-step>
           </td-steps>
         </div>
diff --git a/src/app/components/layouts/manage-list/manage-list.component.html b/src/app/components/layouts/manage-list/manage-list.component.html
index 8a6f162af8..7ed0841ebf 100644
--- a/src/app/components/layouts/manage-list/manage-list.component.html
+++ b/src/app/components/layouts/manage-list/manage-list.component.html
@@ -34,119 +34,109 @@
           <div flex-gt-md="50">
             <td-steps>
               <td-step [active]="true" label="Step 1: td-layout" sublabel="td-layout is the wrapper component">
-                <template td-step-content>
-                  <md-list>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<td-layout>]]></code></h3>
-                      <p md-line>The wrapper of your entire layout</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code>#layout</code></h3>
-                      <p md-line>The ID and local reference of your sidenav</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code>sidenavTitle?: string</code></h3>
-                      <p md-line>The title of your sidenav</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code>logo?: string</code></h3>
-                      <p md-line>The path to your sidenav logo</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                  </md-list>
-                </template>
+                <md-list>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<td-layout>]]></code></h3>
+                    <p md-line>The wrapper of your entire layout</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>#layout</code></h3>
+                    <p md-line>The ID and local reference of your sidenav</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>sidenavTitle?: string</code></h3>
+                    <p md-line>The title of your sidenav</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>logo?: string</code></h3>
+                    <p md-line>The path to your sidenav logo</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                </md-list>
               </td-step>
               <td-step label="Step 2: menu-items" sublabel="the sidenav menu items">
-                <template td-step-content>
-                  <md-list>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
-                      <p md-line>The menu items wrapper</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<a md-list-item>]]></code></h3>
-                      <p md-line>Loops over the routes from your Class</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<md-icon>]]></code></h3>
-                      <p md-line>The SVG or font icon, depending on what you're using</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                  </md-list>
-                </template>
+                <md-list>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
+                    <p md-line>The menu items wrapper</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<a md-list-item>]]></code></h3>
+                    <p md-line>Loops over the routes from your Class</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<md-icon>]]></code></h3>
+                    <p md-line>The SVG or font icon, depending on what you're using</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                </md-list>
               </td-step>
               <td-step label="Step 3: td-layout-nav" sublabel="the main content wrapper">
-                <template td-step-content>
-                  <md-list>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
-                      <p md-line>Builds the top toolbar</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code>toolbarTitle?: string</code></h3>
-                      <p md-line>The title of your toolbar</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code>logo?: string</code></h3>
-                      <p md-line>The path to your toolbar logo</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                  </md-list>
-                </template>
+                <md-list>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
+                    <p md-line>Builds the top toolbar</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>toolbarTitle?: string</code></h3>
+                    <p md-line>The title of your toolbar</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>logo?: string</code></h3>
+                    <p md-line>The path to your toolbar logo</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                </md-list>
               </td-step>
               <td-step label="Step 4: td-layout-manage-list" sublabel="the inner content area">
-                <template td-step-content>
-                  <md-list>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<td-layout-manage-list>]]></code></h3>
-                      <p md-line>Builds the left nav and content area</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<md-nav-list list-items>]]></code></h3>
-                      <p md-line>The list items wrapper with optional <code>dense</code> attribute </p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
-                      <p md-line>Loads html for each route (view)</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                  </md-list>
-                </template>
+                <md-list>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<td-layout-manage-list>]]></code></h3>
+                    <p md-line>Builds the left nav and content area</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<md-nav-list list-items>]]></code></h3>
+                    <p md-line>The list items wrapper with optional <code>dense</code> attribute </p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
+                    <p md-line>Loads html for each route (view)</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                </md-list>
               </td-step>
               <td-step label="Step 5: div[toolbar-buttons]" sublabel="the management toolbar above content">
-                <template td-step-content>
-                  <md-list>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<div toolbar-buttons>]]></code></h3>
-                      <p md-line>The toolbar wrapper</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<span>Title</span>]]></code></h3>
-                      <p md-line>Optional toolbar title</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<span flex>]]></code></h3>
-                      <p md-line>Used as a spacer between buttons</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code class="text-sm"><![CDATA[<button md-button class="md-icon-button">]]></code></h3>
-                      <p md-line>Toolbar icon buttons</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                  </md-list>
-                </template>
+                <md-list>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<div toolbar-buttons>]]></code></h3>
+                    <p md-line>The toolbar wrapper</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<span>Title</span>]]></code></h3>
+                    <p md-line>Optional toolbar title</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<span flex>]]></code></h3>
+                    <p md-line>Used as a spacer between buttons</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code class="text-sm"><![CDATA[<button md-button class="md-icon-button">]]></code></h3>
+                    <p md-line>Toolbar icon buttons</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                </md-list>
               </td-step>
             </td-steps>
           </div>
diff --git a/src/app/components/layouts/nav-list/nav-list.component.html b/src/app/components/layouts/nav-list/nav-list.component.html
index 718fcc06a5..723bf3db3a 100644
--- a/src/app/components/layouts/nav-list/nav-list.component.html
+++ b/src/app/components/layouts/nav-list/nav-list.component.html
@@ -22,92 +22,86 @@ <h3 md-line> {{item.title}} </h3>
         <div flex-gt-md="50">
           <td-steps>
             <td-step [active]="true" label="Step 1: td-layout" sublabel="td-layout is the wrapper component">
-              <template td-step-content>
-                <md-list>
-                  <md-list-item>
-                    <h3 md-line><code><![CDATA[<td-layout>]]></code></h3>
-                    <p md-line>The wrapper of your entire layout</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code>#layout</code></h3>
-                    <p md-line>The ID and local reference of your sidenav</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code>sidenavTitle?: string</code></h3>
-                    <p md-line>The title of your sidenav</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code>logo?: string</code></h3>
-                    <p md-line>The path to your sidenav logo</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                </md-list>
-              </template>
+              <md-list>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<td-layout>]]></code></h3>
+                  <p md-line>The wrapper of your entire layout</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code>#layout</code></h3>
+                  <p md-line>The ID and local reference of your sidenav</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code>sidenavTitle?: string</code></h3>
+                  <p md-line>The title of your sidenav</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code>logo?: string</code></h3>
+                  <p md-line>The path to your sidenav logo</p>
+                </md-list-item>
+                <md-divider></md-divider>
+              </md-list>
             </td-step>
             <td-step label="Step 2: menu-items" sublabel="the sidenav menu items">
-              <template td-step-content>
-                <md-list>
-                  <md-list-item>
-                    <h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
-                    <p md-line>The menu items wrapper</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code><![CDATA[<a md-list-item>]]></code></h3>
-                    <p md-line>Loops over the routes from your Class</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code><![CDATA[<md-icon>]]></code></h3>
-                    <p md-line>The menu item icon</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                </md-list>
-              </template>
+              <md-list>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
+                  <p md-line>The menu items wrapper</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<a md-list-item>]]></code></h3>
+                  <p md-line>Loops over the routes from your Class</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<md-icon>]]></code></h3>
+                  <p md-line>The menu item icon</p>
+                </md-list-item>
+                <md-divider></md-divider>
+              </md-list>
             </td-step>
             <td-step label="Step 3: td-layout-nav-list" sublabel="the main content area of the layout">
-              <template td-step-content>
-                <md-list>
-                  <md-list-item>
-                    <h3 md-line><code><![CDATA[<td-layout-nav-list>]]></code></h3>
-                    <p md-line>Builds the top toolbar, left nav and content area</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code>#list</code></h3>
-                    <p md-line>The ID and local reference of your list</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code>toolbarTitle?: string</code></h3>
-                    <p md-line>The title of your toolbar</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code>logo?: string</code></h3>
-                    <p md-line>The path to your toolbar logo</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code><![CDATA[<md-nav-list list-items>]]></code></h3>
-                    <p md-line>The list items wrapper</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code><![CDATA[<div nav-toolbar-content>]]></code></h3>
-                    <p md-line>Right column page title (optional)</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
-                    <p md-line>Loads html for each route (view)</p>
-                  </md-list-item>
-                  <md-divider></md-divider>
-                </md-list>
-              </template>
+              <md-list>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<td-layout-nav-list>]]></code></h3>
+                  <p md-line>Builds the top toolbar, left nav and content area</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code>#list</code></h3>
+                  <p md-line>The ID and local reference of your list</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code>toolbarTitle?: string</code></h3>
+                  <p md-line>The title of your toolbar</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code>logo?: string</code></h3>
+                  <p md-line>The path to your toolbar logo</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<md-nav-list list-items>]]></code></h3>
+                  <p md-line>The list items wrapper</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<div nav-toolbar-content>]]></code></h3>
+                  <p md-line>Right column page title (optional)</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
+                  <p md-line>Loads html for each route (view)</p>
+                </md-list-item>
+                <md-divider></md-divider>
+              </md-list>
             </td-step>
           </td-steps>
         </div>
diff --git a/src/app/components/layouts/nav-view/nav-view.component.html b/src/app/components/layouts/nav-view/nav-view.component.html
index cf823fb5e8..ced417846c 100644
--- a/src/app/components/layouts/nav-view/nav-view.component.html
+++ b/src/app/components/layouts/nav-view/nav-view.component.html
@@ -9,77 +9,71 @@
           <div flex-gt-md="50">
             <td-steps>
               <td-step [active]="true" label="Step 1: td-layout" sublabel="td-layout is the wrapper component">
-                <template td-step-content>
-                  <md-list>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<td-layout>]]></code></h3>
-                      <p md-line>The wrapper of your entire layout</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code>#layout</code></h3>
-                      <p md-line>The ID and local reference of your sidenav</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code>sidenavTitle?: string</code></h3>
-                      <p md-line>The title of your sidenav</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code>logo?: string</code></h3>
-                      <p md-line>The path to your sidenav logo</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                  </md-list>
-                </template>
+                <md-list>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<td-layout>]]></code></h3>
+                    <p md-line>The wrapper of your entire layout</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>#layout</code></h3>
+                    <p md-line>The ID and local reference of your sidenav</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>sidenavTitle?: string</code></h3>
+                    <p md-line>The title of your sidenav</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>logo?: string</code></h3>
+                    <p md-line>The path to your sidenav logo</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                </md-list>
               </td-step>
               <td-step label="Step 2: menu-items" sublabel="the sidenav menu items">
-                <template td-step-content>
-                  <md-list>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
-                      <p md-line>The menu items wrapper (will be moved to sidenav automatically)</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<a md-list-item>]]></code></h3>
-                      <p md-line>Loops over the routes from your Class</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<md-icon>]]></code></h3>
-                      <p md-line>The SVG or font icon, depending on what you're using</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                  </md-list>
-                </template>
+                <md-list>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
+                    <p md-line>The menu items wrapper (will be moved to sidenav automatically)</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<a md-list-item>]]></code></h3>
+                    <p md-line>Loops over the routes from your Class</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<md-icon>]]></code></h3>
+                    <p md-line>The SVG or font icon, depending on what you're using</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                </md-list>
               </td-step>
               <td-step label="Step 3: td-layout-nav" sublabel="the main content area of the layout">
-                <template td-step-content>
-                  <md-list>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
-                      <p md-line>Builds the top toolbar and content area</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code>toolbarTitle?: string</code></h3>
-                      <p md-line>The title of your toolbar</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code>logo?: string</code></h3>
-                      <p md-line>The path to your toolbar logo</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                    <md-list-item>
-                      <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
-                      <p md-line>Loads html for each route (view)</p>
-                    </md-list-item>
-                    <md-divider></md-divider>
-                  </md-list>
-                </template>
+                <md-list>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
+                    <p md-line>Builds the top toolbar and content area</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>toolbarTitle?: string</code></h3>
+                    <p md-line>The title of your toolbar</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>logo?: string</code></h3>
+                    <p md-line>The path to your toolbar logo</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
+                    <p md-line>Loads html for each route (view)</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
+                </md-list>
               </td-step>
             </td-steps>
           </div>
diff --git a/src/platform/core/index.ts b/src/platform/core/index.ts
index 298992d798..ed25f0dfd0 100644
--- a/src/platform/core/index.ts
+++ b/src/platform/core/index.ts
@@ -41,17 +41,17 @@ export { TdLayoutManageListComponent }  from './layout/layout-manage-list/layout
 import { TdStepsComponent } from './steps/steps.component';
 import { TdStepHeaderComponent } from './steps/step-header/step-header.component';
 import { TdStepBodyComponent } from './steps/step-body/step-body.component';
-import { TdStepComponent, TdStepActionsDirective, TdStepSummaryDirective,
-         TdStepContentDirective } from './steps/step.component';
+import { TdStepComponent, TdStepLabelDirective, TdStepActionsDirective,
+         TdStepSummaryDirective } from './steps/step.component';
 
 export const TD_STEP_DIRECTIVES: Type<any>[] = [
   TdStepsComponent,
   TdStepComponent,
   TdStepHeaderComponent,
   TdStepBodyComponent,
+  TdStepLabelDirective,
   TdStepActionsDirective,
   TdStepSummaryDirective,
-  TdStepContentDirective,
 ];
 
 export { TdStepComponent, StepState  } from './steps/step.component';
diff --git a/src/platform/core/steps/step-header/step-header.component.html b/src/platform/core/steps/step-header/step-header.component.html
index 9d9400616f..84dcfc6961 100644
--- a/src/platform/core/steps/step-header/step-header.component.html
+++ b/src/platform/core/steps/step-header/step-header.component.html
@@ -26,8 +26,12 @@
         <div class="td-step-label"
               [class.md-disabled]="(!active && !isComplete()) || disabled"
               [class.md-warn]="isRequired() && !disabled">
-          <div class="md-body-2">{{label}}</div>
-          <div class="md-caption td-step-sublabel">{{sublabel}}</div>
+          <div class="md-body-2">
+            <ng-content select="[td-step-header-label]"></ng-content>
+          </div>
+          <div class="md-caption td-step-sublabel">
+            <ng-content select="[td-step-header-sublabel]"></ng-content>
+          </div>
         </div>
         <span flex></span>
         <md-icon class="td-edit-icon" *ngIf="isComplete() && !active && !disabled">mode_edit</md-icon>
diff --git a/src/platform/core/steps/step-header/step-header.component.ts b/src/platform/core/steps/step-header/step-header.component.ts
index 592667049b..91932562a4 100644
--- a/src/platform/core/steps/step-header/step-header.component.ts
+++ b/src/platform/core/steps/step-header/step-header.component.ts
@@ -14,16 +14,6 @@ export class TdStepHeaderComponent {
    */
   @Input('number') number: number;
 
-  /**
-   * Label of [TdStepHeaderComponent].
-   */
-  @Input('label') label: string;
-
-  /**
-   * Sublabel of [TdStepHeaderComponent].
-   */
-  @Input('sublabel') sublabel: string;
-
   /**
    * active?: boolean
    * Sets for active/inactive states on header.
diff --git a/src/platform/core/steps/step.component.html b/src/platform/core/steps/step.component.html
new file mode 100644
index 0000000000..1e7c8ee742
--- /dev/null
+++ b/src/platform/core/steps/step.component.html
@@ -0,0 +1,3 @@
+<template>
+  <ng-content></ng-content>
+</template>
\ No newline at end of file
diff --git a/src/platform/core/steps/step.component.ts b/src/platform/core/steps/step.component.ts
index bd517979b4..73a8df7252 100644
--- a/src/platform/core/steps/step.component.ts
+++ b/src/platform/core/steps/step.component.ts
@@ -1,7 +1,7 @@
-import { Component, Directive, Input, Output, TemplateRef,
-         ViewContainerRef, ContentChild, AfterViewInit } from '@angular/core';
+import { Component, Directive, Input, Output, TemplateRef, ViewChild,
+         ViewContainerRef, ContentChild, AfterViewInit, OnInit } from '@angular/core';
 import { EventEmitter } from '@angular/core';
-import { TemplatePortalDirective } from '@angular/material';
+import { TemplatePortalDirective, TemplatePortal } from '@angular/material';
 
 export enum StepState {
   None = <any>'none',
@@ -10,9 +10,9 @@ export enum StepState {
 }
 
 @Directive({
-  selector: '[td-step-content]template',
+  selector: '[td-step-label]template',
 })
-export class TdStepContentDirective extends TemplatePortalDirective {
+export class TdStepLabelDirective extends TemplatePortalDirective {
   constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
     super(templateRef, viewContainerRef);
   }
@@ -38,16 +38,22 @@ export class TdStepSummaryDirective extends TemplatePortalDirective {
 
 @Component({
   selector: 'td-step',
-  template: '<ng-content></ng-content>',
+  templateUrl: 'step.component.html',
 })
-export class TdStepComponent implements AfterViewInit {
+export class TdStepComponent implements OnInit, AfterViewInit {
 
   private _number: number;
   private _active: boolean = false;
   private _state: StepState = StepState.None;
   private _disabled: boolean = false;
 
-  @ContentChild(TdStepContentDirective) stepContent: TdStepContentDirective;
+  private _contentPortal: TemplatePortal;
+  get stepContent(): TemplatePortal {
+    return this._contentPortal;
+  }
+
+  @ViewChild(TemplateRef) private _content: TemplateRef<any>;
+  @ContentChild(TdStepLabelDirective) stepLabel: TdStepLabelDirective;
   @ContentChild(TdStepActionsDirective) stepActions: TdStepActionsDirective;
   @ContentChild(TdStepSummaryDirective) stepSummary: TdStepSummaryDirective;
 
@@ -140,6 +146,12 @@ export class TdStepComponent implements AfterViewInit {
    */
   @Output('deactivated') onDeactivated: EventEmitter<void> = new EventEmitter<void>();
 
+  constructor(private _viewContainerRef: ViewContainerRef) {}
+
+  ngOnInit(): void {
+    this._contentPortal = new TemplatePortal(this._content, this._viewContainerRef);
+  }
+
   ngAfterViewInit(): void {
     if (this.number === undefined) {
       throw 'The [td-step] component needs to have a [td-steps] parent component to work.';
diff --git a/src/platform/core/steps/steps.component.html b/src/platform/core/steps/steps.component.html
index 0f09c69f89..6d4576c928 100644
--- a/src/platform/core/steps/steps.component.html
+++ b/src/platform/core/steps/steps.component.html
@@ -2,12 +2,13 @@
   <template let-step let-last="last" ngFor [ngForOf]="steps">
     <td-step-header (keydown.enter)="step.toggle()"
                     [number]="step.number"
-                    [label]="step.label"
-                    [sublabel]="step.sublabel | truncate:30"
                     [active]="step.active" 
                     [disabled]="step.disabled" 
                     [state]="step.state"
                     (click)="step.toggle()">
+      <template td-step-header-label [portalHost]="step.stepLabel"></template>
+      <template td-step-header-label [ngIf]="!step.stepLabel">{{step.label}}</template>
+      <template td-step-header-sublabel [ngIf]="true">{{step.sublabel | truncate:30}}</template>
     </td-step-header>
     <span *ngIf="!last" class="td-horizontal-line" flex></span>
   </template>
@@ -15,13 +16,14 @@
 <div *ngFor="let step of steps; let last = last" class="td-step" layout="column">
   <td-step-header (keydown.enter)="step.toggle()"
                   [number]="step.number"
-                  [label]="step.label"
-                  [sublabel]="step.sublabel"
                   [active]="step.active" 
                   [disabled]="step.disabled" 
                   [state]="step.state"
                   (click)="step.toggle()"
                   *ngIf="isVertical()">
+    <template td-step-header-label [portalHost]="step.stepLabel"></template>
+    <template td-step-header-label [ngIf]="!step.stepLabel">{{step.label}}</template>
+    <template td-step-header-sublabel [ngIf]="true">{{step.sublabel}}</template>
   </td-step-header>
   <template [ngIf]="isVertical() || step.active || (!areStepsActive() && _prevStep === step.number)">
     <td-step-body [active]="step.active" [state]="step.state">