add header types examples

Author: kyleturco

docs/app/Examples/elements/Header/Types/HeaderIconHeadersExamples.js

@@ -3,10 +3,14 @@ import {Header} from 'stardust';
 
 export default class HeaderContentHeadersExample extends Component {
   render() {
+    const settings = <i className='settings icon' />;
     return (
-      <Header className='h2' icon='settings'>
-        Testing
-      </Header>
+      <Header.H2 className='icon' icon={settings} >
+        Account Settings
+        <div className='sub header'>
+          Manage your account settings and set e-mail preferences.
+        </div>
+      </Header.H2>
     );
   }
 }

docs/app/Examples/elements/Header/Types/HeaderSubHeadersExample.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+import {Header} from 'stardust';
+
+export default class HeaderSubHeadersExample extends Component {
+  render() {
+    return (
+      <div>
+        <Header.H2 className='sub'>
+          Price
+        </Header.H2>
+        <span>$10.99</span>
+      </div>
+    );
+  }
+}

docs/app/Examples/elements/Header/Types/HeaderTypesExamples.js

@@ -30,6 +30,11 @@ export default class HeaderTypesExamples extends Component {
           description='A header can be formatted to emphasize an icon'
           examplePath='elements/Header/Types/HeaderIconHeadersExamples'
         />
+        <ComponentExample
+          title='Sub Headers'
+          description='Headers may be formatted to label smaller or de-emphasized content'
+          examplePath='elements/Header/Types/HeaderSubHeadersExample'
+        />
       </ExampleSection>
     );
   }