add typography pattern .page-header to components per #1701

1 files changed, 19 insertions, 6 deletions

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index ec7ba2636..0b55e60f0 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -22,7 +22,7 @@
         </ul>
       </li>
       <li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
-      <li><a href="#hero">{{_i}}Hero{{/i}}</a></li>
+      <li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
       <li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
       <li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
       <li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
@@ -1066,15 +1066,15 @@
 
 
 
-<!-- Hero unit
+<!-- Typographic components
 ================================================== -->
-<section id="hero">
+<section id="typography">
   <div class="page-header">
-    <h1>{{_i}}Hero unit{{/i}} <small>{{_i}}Jumbotron for your site's tagline{{/i}}</small></h1>
+    <h1>{{_i}}Typographic components{{/i}} <small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
   </div>
+  <h2>{{_i}}Hero unit{{/i}}</h2>
   <div class="row">
     <div class="span4">
-      <h2>{{_i}}About{{/i}}</h2>
       <p>{{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
       <h3>{{_i}}Markup{{/i}}</h3>
       <p>{{_i}}Wrap your content in a <code>div</code> like so:{{/i}}</p>
@@ -1097,7 +1097,20 @@
         <p><a class="btn btn-primary btn-large">{{_i}}Learn more{{/i}}</a></p>
       </div>
     </div>
-  </div>
+  </div><!-- /row -->
+  <h2>{{_i}}Page header{{/i}}</h2>
+  <div class="row">
+    <div class="span4">
+      <p>{{_i}}A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).{{/i}}</p>
+    </div>
+    <div class="span8">
+<pre class="prettyprint linenums">
+&lt;div class="page-haeder"&gt;
+  &lt;h1&gt;{{_i}}Example page header{{/i}}&lt;/h1&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div><!-- /row -->
 </section>