From 1c439a3201df5b559b124940c8fcc2702c345631 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Sun, 10 Jun 2018 10:38:45 +0800
Subject: Update Docs anchor

---
 docs/components.html | 46 +++++++++++++++++++++++-----------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 12d07bd..654c097 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -130,7 +130,7 @@
       <div class="off-canvas-content">
         <div class="docs-content" id="content">
           <div class="container" id="accordions">
-            <h3 class="s-title"><a class="anchor" href="#accordions" aria-hidden="true">#</a>Accordions</h3>
+            <h3 class="s-title">Accordions<a class="anchor" href="#accordions" aria-hidden="true">#</a></h3>
             <div class="docs-ad">
               <div class="hide-md text-center">
                 <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
@@ -248,7 +248,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">details</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="avatars">
-            <h3 class="s-title"><a class="anchor" href="#avatars" aria-hidden="true">#</a>Avatars</h3>
+            <h3 class="s-title">Avatars<a class="anchor" href="#avatars" aria-hidden="true">#</a></h3>
             <p>Avatars are user profile pictures. </p>
             <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
@@ -321,7 +321,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="badges">
-            <h3 class="s-title"><a class="anchor" href="#badges" aria-hidden="true">#</a>Badges</h3>
+            <h3 class="s-title">Badges<a class="anchor" href="#badges" aria-hidden="true">#</a></h3>
             <p>Badges are often used as unread number indicators.</p>
             <div class="docs-demo columns">
               <div class="column col-3 col-xs-6"><span class="badge" data-badge="">Notifications</span></div>
@@ -367,7 +367,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="bars">
-            <h3 class="s-title"><a class="anchor" href="#bars" aria-hidden="true">#</a>Bars</h3>
+            <h3 class="s-title">Bars<a class="anchor" href="#bars" aria-hidden="true">#</a></h3>
             <p>
               Bars represent the progress of a task or the value within the known range.
               Bars are custom components for displaying HTML5 &lt;progress&gt;, &lt;meter&gt; and input range elements.
@@ -410,7 +410,7 @@
   <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:15%;background:#818bd5;"</span>&gt;</span>15%<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <h4 class="s-subtitle" id="bars-slider"><a class="anchor" href="#bars-slider" aria-hidden="true">#</a>Slider bars</h4>
+            <h4 class="s-subtitle" id="bars-slider">Slider bars<a class="anchor" href="#bars-slider" aria-hidden="true">#</a></h4>
             <div class="docs-demo columns">
               <div class="column col-8 col-xs-12">
                 <div class="bar bar-slider">
@@ -453,7 +453,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="breadcrumbs">
-            <h3 class="s-title"><a class="anchor" href="#breadcrumbs" aria-hidden="true">#</a>Breadcrumbs</h3>
+            <h3 class="s-title">Breadcrumbs<a class="anchor" href="#breadcrumbs" aria-hidden="true">#</a></h3>
             <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p>
             <div class="docs-demo columns">
               <div class="column col-12">
@@ -493,7 +493,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="cards">
-            <h3 class="s-title"><a class="anchor" href="#cards" aria-hidden="true">#</a>Cards</h3>
+            <h3 class="s-title">Cards<a class="anchor" href="#cards" aria-hidden="true">#</a></h3>
             <div class="docs-ad docs-ad-sidebar text-center">
               <script id="_carbonads_js" async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
             </div>
@@ -588,7 +588,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="chips">
-            <h3 class="s-title"><a class="anchor" href="#chips" aria-hidden="true">#</a>Chips</h3>
+            <h3 class="s-title">Chips<a class="anchor" href="#chips" aria-hidden="true">#</a></h3>
             <p>Chips are complex entities in small blocks. </p>
             <div class="docs-demo columns">
               <div class="column col-12"><span class="chip">Crime</span><span class="chip">Drama</span><span class="chip">Biography<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span><span class="chip">Mystery<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span></div>
@@ -617,7 +617,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="empty">
-            <h3 class="s-title"><a class="anchor" href="#empty" aria-hidden="true">#</a>Empty states</h3>
+            <h3 class="s-title">Empty states<a class="anchor" href="#empty" aria-hidden="true">#</a></h3>
             <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p>
             <div class="docs-demo columns">
               <div class="column col-12">
@@ -672,7 +672,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="menu">
-            <h3 class="s-title"><a class="anchor" href="#menu" aria-hidden="true">#</a>Menu</h3>
+            <h3 class="s-title">Menu<a class="anchor" href="#menu" aria-hidden="true">#</a></h3>
             <p>Menus are vertical list of links or buttons for actions and navigation.</p>
             <div class="docs-demo columns">
               <div class="column col-4 col-xs-12">
@@ -757,7 +757,7 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
   </code></pre>
-            <h4 class="s-subtitle" id="menu-dropdown"><a class="anchor" href="#menu-dropdown" aria-hidden="true">#</a>Dropdown menu</h4>
+            <h4 class="s-subtitle" id="menu-dropdown">Dropdown menu<a class="anchor" href="#menu-dropdown" aria-hidden="true">#</a></h4>
             <p>The dropdown is a combination of buttons and menus.</p>
             <div class="docs-demo columns">
               <div class="column col-xs-12">
@@ -828,7 +828,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="modals">
-            <h3 class="s-title"><a class="anchor" href="#modals" aria-hidden="true">#</a>Modals</h3>
+            <h3 class="s-title">Modals<a class="anchor" href="#modals" aria-hidden="true">#</a></h3>
             <p>Modals are flexible dialog prompts.</p>
             <div class="docs-demo columns">
               <div class="column"><a class="btn btn-primary" href="#example-modal-1">Open Modal</a>
@@ -884,7 +884,7 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <h4 class="s-subtitle" id="modals-sizes"><a class="anchor" href="#modals-sizes" aria-hidden="true">#</a>Modal sizes</h4>
+            <h4 class="s-subtitle" id="modals-sizes">Modal sizes<a class="anchor" href="#modals-sizes" aria-hidden="true">#</a></h4>
             <div class="docs-demo columns">
               <div class="column col-6 col-xs-12"><a class="btn btn-primary" href="#example-modal-2">Open small size Modal</a>
                 <div class="modal modal-sm" id="example-modal-2"><a class="modal-overlay" href="#modals-sizes" aria-label="Close"></a>
@@ -960,7 +960,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="nav">
-            <h3 class="s-title"><a class="anchor" href="#nav" aria-hidden="true">#</a>Nav</h3>
+            <h3 class="s-title">Nav<a class="anchor" href="#nav" aria-hidden="true">#</a></h3>
             <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <ul class="nav">
@@ -1012,7 +1012,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="pagination">
-            <h3 class="s-title"><a class="anchor" href="#pagination" aria-hidden="true">#</a>Pagination</h3>
+            <h3 class="s-title">Pagination<a class="anchor" href="#pagination" aria-hidden="true">#</a></h3>
             <div class="docs-demo columns">
               <div class="column col-xs-12">
                 <ul class="pagination">
@@ -1097,7 +1097,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="panels">
-            <h3 class="s-title"><a class="anchor" href="#panels" aria-hidden="true">#</a>Panels</h3>
+            <h3 class="s-title">Panels<a class="anchor" href="#panels" aria-hidden="true">#</a></h3>
             <p>Panels are flexible view container with auto-expand content section.</p>
             <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
@@ -1229,7 +1229,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="popovers">
-            <h3 class="s-title"><a class="anchor" href="#popovers" aria-hidden="true">#</a>Popovers</h3>
+            <h3 class="s-title">Popovers<a class="anchor" href="#popovers" aria-hidden="true">#</a></h3>
             <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p>
             <div class="docs-demo columns">
               <div class="column col-3 col-sm-6">
@@ -1322,7 +1322,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="steps">
-            <h3 class="s-title"><a class="anchor" href="#steps" aria-hidden="true">#</a>Steps</h3>
+            <h3 class="s-title">Steps<a class="anchor" href="#steps" aria-hidden="true">#</a></h3>
             <p>Steps are progress indicators of a sequence of task steps.</p>
             <div class="docs-demo columns">
               <div class="column col-12">
@@ -1363,7 +1363,7 @@
   </code></pre>
           </div>
           <div class="container" id="tabs">
-            <h3 class="s-title"><a class="anchor" href="#tabs" aria-hidden="true">#</a>Tabs</h3>
+            <h3 class="s-title">Tabs<a class="anchor" href="#tabs" aria-hidden="true">#</a></h3>
             <p>Tabs enable quick switch between different views.</p>
             <div class="docs-demo columns">
               <div class="column col-6 col-sm-12">
@@ -1462,7 +1462,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="tiles">
-            <h3 class="s-title"><a class="anchor" href="#tiles" aria-hidden="true">#</a>Tiles</h3>
+            <h3 class="s-title">Tiles<a class="anchor" href="#tiles" aria-hidden="true">#</a></h3>
             <p>Tiles are repeatable or embeddable information blocks.</p>
             <div class="docs-demo columns">
               <div class="column col-9 col-sm-12">
@@ -1516,7 +1516,7 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <h4 class="s-subtitle" id="tiles-compact"><a class="anchor" href="#tiles-compact" aria-hidden="true">#</a>Compact tiles</h4>
+            <h4 class="s-subtitle" id="tiles-compact">Compact tiles<a class="anchor" href="#tiles-compact" aria-hidden="true">#</a></h4>
             <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p>
             <p>Add the <code>tile-centered</code> class to the container <code>tile</code>.
               The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.
@@ -1555,7 +1555,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="toasts">
-            <h3 class="s-title"><a class="anchor" href="#toasts" aria-hidden="true">#</a>Toasts</h3>
+            <h3 class="s-title">Toasts<a class="anchor" href="#toasts" aria-hidden="true">#</a></h3>
             <p>Toasts are used to show alert or information to users.</p>
             <div class="docs-demo columns">
               <div class="column col-9 col-sm-12">
@@ -1602,7 +1602,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="tooltips">
-            <h3 class="s-title"><a class="anchor" href="#tooltips" aria-hidden="true">#</a>Tooltips</h3>
+            <h3 class="s-title">Tooltips<a class="anchor" href="#tooltips" aria-hidden="true">#</a></h3>
             <p>Tooltips provide context information labels that appear on hover and focus.</p>
             <div class="docs-demo columns text-center">
               <div class="column col-xs-12">
-- 
cgit v1.3.1-23-gd82d