From 4ec6718768feb1ca4ae826fd93575c9a75e132b8 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Sat, 11 Mar 2017 00:50:08 +0800
Subject: Update Panels docs

---
 docs/components.html |  9 +++++----
 docs/layout.html     | 17 +++++++++++++++--
 2 files changed, 20 insertions(+), 6 deletions(-)

(limited to 'docs')

diff --git a/docs/components.html b/docs/components.html
index 514eabe..aaa17f6 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -251,9 +251,10 @@
             </div>
             <div class="column col-6 col-xs-12">
               <figure class="avatar avatar-xl" data-initial="YZ"></figure>
-              <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;"></figure>
-              <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;"></figure>
-              <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;"></figure>
+              <figure class="avatar avatar-lg" data-initial="YZ"></figure>
+              <figure class="avatar" data-initial="YZ"></figure>
+              <figure class="avatar avatar-sm" data-initial="YZ"></figure>
+              <figure class="avatar avatar-xs" data-initial="YZ"></figure>
             </div>
           </div>
           <section class="notes">
@@ -525,7 +526,7 @@
             </div>
           </div>
           <section class="notes">
-            <p>Add a container element with the class <code>card</code>. And add child elements with the class name <code>card-image</code>, <code>card-header</code>, <code>card-content</code> and/or <code>card-footer</code>. The <code>card-image</code> can be placed in any position. </p>
+            <p>Add a container element with the class <code>card</code>. And add child elements with the class name <code>card-image</code>, <code>card-header</code>, <code>card-body</code> and/or <code>card-footer</code>. The <code>card-image</code> can be placed in any position. </p>
           </section>
 
 <!-- cards example -->
diff --git a/docs/layout.html b/docs/layout.html
index 8b04b0a..630b248 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -551,11 +551,24 @@
           </div>
 
           <section class="notes">
-            <p></p>
+            <p>Add a container element with the class <code>panel</code>. And add child elements with the class name <code>panel-header</code>, <code>panel-nav</code>, <code>panel-body</code> and/or <code>panel-footer</code>. The <code>panel-body</code> can be auto expanded and vertically scrollable. </p>
           </section>
 
 <!-- panels example -->
-<pre class="code" data-lang="HTML"><code>
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel&quot;</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-header&quot;</span>&gt;
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-title&quot;</span>&gt;Comments&lt;<span class="tag">/div</span>&gt;
+  &lt;<span class="tag">/div</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-nav&quot;</span>&gt;
+    <span class="com">&lt;!-- navigation components: tabs, breadcrumbs or pagination --&gt;</span>
+  &lt;<span class="tag">/div</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-body&quot;</span>&gt;
+    <span class="com">&lt;!-- contents --&gt;</span>
+  &lt;<span class="tag">/div</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-footer&quot;</span>&gt;
+    <span class="com">&lt;!-- buttons or inputs --&gt;</span>
+  &lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
 </code></pre>
 
         </section>
-- 
cgit v1.3.1-26-gb76a