From 1c596556c5e0ce0986328c981cc2dc19149e429b Mon Sep 17 00:00:00 2001
From: mhartington <mikehartington@gmail.com>
Date: Fri, 29 Jul 2016 10:37:05 -0500
Subject: [PATCH] docs(footer, header): add docs

---
 src/components/toolbar/toolbar.ts | 47 +++++++++++++++++++++++++++++--
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/components/toolbar/toolbar.ts b/src/components/toolbar/toolbar.ts
index cdf365221a..57af427b38 100644
--- a/src/components/toolbar/toolbar.ts
+++ b/src/components/toolbar/toolbar.ts
@@ -6,7 +6,31 @@ import { ViewController } from '../nav/view-controller';
 
 
 /**
- * @private
+ * @name Header
+ * @description
+ * Header is a parent compnent that holds the navbar and toolbar component.
+ * It's important to note that `ion-header` needs to be the one of the three root elements of a page
+ *
+ * @usage
+ *
+ * ```ts
+ * @Component({
+ *   template: `
+ *      <ion-header>
+ *        <ion-navbar>
+ *          <ion-title>Page1</ion-title>
+ *        </ion-navbar>
+ *
+ *        <ion-toolbar>
+ *          <ion-title>Subheader</ion-title>
+ *        </ion-toolbar>
+ *      </ion-header>
+ *
+ *      <ion-content></ion-content>
+ *   `
+ * })
+ * ```
+ *
  */
 @Directive({
   selector: 'ion-header'
@@ -21,7 +45,26 @@ export class Header {
 
 
 /**
- * @private
+ * @name Footer
+ * @description
+ * Footer is a root component of a page that sits at the bottom of the page.
+ * Footer can be a wrapper for `ion-toolbar` to make sure the content area is sized correctly.
+ *
+ * @usage
+ *
+ * ```ts
+ * @Component({
+ *   template: `
+ *      <ion-content></ion-content>
+ *      <ion-footer>
+ *        <ion-toolbar>
+ *          <ion-title>Footer</ion-title>
+ *        </ion-toolbar>
+ *      </ion-footer>
+ *   `
+ * })
+ * ```
+ *
  */
 @Directive({
   selector: 'ion-footer'