Add anchor links to Docs

1 files changed, 10 insertions, 10 deletions

diff --git a/docs/experimentals.html b/docs/experimentals.html
index fa1ced1..d88d8da 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -85,14 +85,14 @@
 
       <div class="docs-content column col-9 col-sm-12">
         <section id="experimentals" class="container">
-          <header class="text-center"><h3>Experimentals</h3></header>
+          <header class="text-center"><h3><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3></header>
           <section class="notes">
             <p>The Experimentals include experimental elements and features, mostly are not yet ready for wide use. These elements and components are limited inside <code>spectre-exp.less</code> before browsers fully support them. Sometimes, there are some specific browsers targeted components.</p>
           </section>
         </section>
 
         <section id="calendars" class="container">
-          <header class="text-center"><h3>Calendars</h3></header>
+          <header class="text-center"><h3><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3></header>
           <section class="notes">
             <p><strong>Calendars</strong> are designed for date or date range picker and events display. It is made with flex layout.</p>
           </section>
@@ -255,7 +255,7 @@
         </section>
 
         <section id="carousels" class="container">
-          <header class="text-center"><h3>Carousels</h3></header>
+          <header class="text-center"><h3><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3></header>
           <section class="notes">
             <p><strong>Carousels</strong> are slideshows for cycling images. It is built in pure CSS.</p>
           </section>
@@ -320,7 +320,7 @@
         </section>
 
         <section id="comparison" class="container">
-          <header class="text-center"><h3>Comparison Sliders</h3></header>
+          <header class="text-center"><h3><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3></header>
           <section class="notes">
             <p><strong>Comparison Sliders</strong> are sliders for comparing two images. It is built in pure CSS.</p>
           </section>
@@ -358,7 +358,7 @@
         </section>
 
         <section id="filters" class="container">
-          <header class="text-center"><h3>Filters</h3></header>
+          <header class="text-center"><h3><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3></header>
           <section class="notes">
             <p><strong>Filters</strong> are CSS only content filters.</p>
           </section>
@@ -483,7 +483,7 @@
         </section>
 
         <section id="meters" class="container">
-          <header class="text-center"><h3>Meters</h3></header>
+          <header class="text-center"><h3><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3></header>
           <section class="notes">
             <p><strong>Meters</strong> represent the value within the known range.</p>
           </section>
@@ -518,7 +518,7 @@
         </section>
 
         <section id="parallax" class="container">
-          <header class="text-center"><h3>Parallax</h3></header>
+          <header class="text-center"><h3><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3></header>
           <section class="notes">
             <p>The <strong>Parallax</strong> acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p>
           </section>
@@ -561,7 +561,7 @@
         </section>
 
         <section id="progress" class="container">
-          <header class="text-center"><h3>Progress</h3></header>
+          <header class="text-center"><h3><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3></header>
           <section class="notes">
             <p>The <strong>Progress</strong> indicates the progress completion of a task.</p>
           </section>
@@ -588,7 +588,7 @@
         </section>
 
         <section id="sliders" class="container">
-          <header class="text-center"><h3>Sliders</h3></header>
+          <header class="text-center"><h3><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3></header>
           <section class="notes">
             <p><strong>Sliders</strong> are for selecting values from ranges.</p>
           </section>
@@ -608,7 +608,7 @@
         </section>
 
         <section id="timelines" class="container">
-          <header class="text-center"><h3>Timelines</h3></header>
+          <header class="text-center"><h3><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3></header>
           <section class="notes">
             <p><strong>Timelines</strong> are ordered sequences of activities.</p>
           </section>