Add anchor links to Docs

1 files changed, 5 insertions, 5 deletions

diff --git a/docs/layout.html b/docs/layout.html
index 565fd9c..9c5c3e0 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -72,7 +72,7 @@
 
       <div class="docs-content column col-9 col-sm-12">
         <section id="grid" class="container">
-          <header class="text-center"><h3>Flexbox grid</h3></header>
+          <header class="text-center"><h3><a href="#grid" class="anchor" aria-hidden="true">#</a>Flexbox grid</h3></header>
           <section class="notes">
             <p><strong>Layout</strong> includes flexbox based responsive grid system with 12 columns. </p>
           </section>
@@ -182,7 +182,7 @@
         </section>
 
         <section id="responsive" class="container">
-          <header class="text-center"><h3>Responsive grid</h3></header>
+          <header class="text-center"><h3><a href="#responsive" class="anchor" aria-hidden="true">#</a>Responsive grid</h3></header>
           <div class="notes">
             <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities. </p>
           </div>
@@ -368,7 +368,7 @@
         </section>
 
         <section id="navbar" class="container">
-          <header class="text-center"><h3>Navbar</h3></header>
+          <header class="text-center"><h3><a href="#navbar" class="anchor" aria-hidden="true">#</a>Navbar</h3></header>
           <section class="notes">
             <p><strong>Navbar</strong> is a layout container that appears in the header of apps and websites. </p>
           </section>
@@ -449,7 +449,7 @@
         </section>
 
         <section id="panels" class="container">
-          <header class="text-center"><h3>Panels</h3></header>
+          <header class="text-center"><h3><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3></header>
           <section class="notes">
             <p><strong>Panels</strong> are flexible view container layout with auto-expand content section.</p>
           </section>
@@ -610,7 +610,7 @@
         </section>
 
         <section id="empty" class="container">
-          <header class="text-center"><h3>Empty states / blank slates</h3></header>
+          <header class="text-center"><h3><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states / blank slates</h3></header>
           <section class="notes">
             <p><strong>Empty states/blank slates</strong> are commonly used as placeholders for first time use, empty data and error screens.</p>
           </section>