From 56404bc89b590ee48313634b0bf2be8591fae233 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 25 Jul 2013 21:16:43 -0700
Subject: Add `.panel-title` to panel component to mirror modals

/cc @leeaston
---
 components.html | 35 +++++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

(limited to 'components.html')

diff --git a/components.html b/components.html
index 6eb849ea7..3f177a840 100644
--- a/components.html
+++ b/components.html
@@ -1965,18 +1965,31 @@ body { padding-bottom: 70px; }
 {% endhighlight %}
 
     <h3 id="panels-heading">Panel with heading</h3>
-    <p>Easily add a heading to your panel with <code>.panel-heading</code>. Use it on a <code>&lt;div&gt;</code> or any heading element (e.g., <code>&lt;h3&gt;</code>).</p>
+    <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
     <div class="bs-example">
       <div class="panel">
         <div class="panel-heading">Panel heading</div>
         Panel content
       </div>
+      <div class="panel">
+        <div class="panel-heading">
+          <h3 class="panel-title">Panel title</h3>
+        </div>
+        Panel content
+      </div>
     </div>
 {% highlight html %}
 <div class="panel">
   <div class="panel-heading">Panel heading</div>
   Panel content
 </div>
+
+<div class="panel">
+  <div class="panel-heading">
+    <h3 class="panel-title">Panel title</h3>
+  </div>
+  Panel content
+</div>
 {% endhighlight %}
 
     <h3 id="panels-footer">Panel with footer</h3>
@@ -1998,23 +2011,33 @@ body { padding-bottom: 70px; }
     <p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
     <div class="bs-example">
       <div class="panel panel-primary">
-        <div class="panel-heading">Panel heading</div>
+        <div class="panel-heading">
+          <h3 class="panel-title">Panel title</h3>
+        </div>
         Panel content
       </div>
       <div class="panel panel-success">
-        <div class="panel-heading">Panel heading</div>
+        <div class="panel-heading">
+          <h3 class="panel-title">Panel title</h3>
+        </div>
         Panel content
       </div>
       <div class="panel panel-warning">
-        <div class="panel-heading">Panel heading</div>
+        <div class="panel-heading">
+          <h3 class="panel-title">Panel title</h3>
+        </div>
         Panel content
       </div>
       <div class="panel panel-danger">
-        <div class="panel-heading">Panel heading</div>
+        <div class="panel-heading">
+          <h3 class="panel-title">Panel title</h3>
+        </div>
         Panel content
       </div>
       <div class="panel panel-info">
-        <div class="panel-heading">Panel heading</div>
+        <div class="panel-heading">
+          <h3 class="panel-title">Panel title</h3>
+        </div>
         Panel content
       </div>
     </div>
-- 
cgit v1.2.3