Add anchor links to Docs

1 files changed, 8 insertions, 8 deletions

diff --git a/docs/elements.html b/docs/elements.html
index 0f9ee4e..488a120 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -81,7 +81,7 @@
 
       <div class="docs-content column col-9 col-sm-12">
         <section id="typography" class="container">
-          <header class="text-center"><h3>Typography</h3></header>
+          <header class="text-center"><h3><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3></header>
           <section class="notes">
             <p><strong>Typography</strong> sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p>
           </section>
@@ -287,7 +287,7 @@
         </section>
 
         <section id="tables" class="container">
-          <header class="text-center"><h3>Tables</h3></header>
+          <header class="text-center"><h3><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3></header>
           <section class="notes">
             <p><strong>Tables</strong> include default styles for tables and data sets.</p>
           </section>
@@ -349,7 +349,7 @@
         </section>
 
         <section id="buttons" class="container">
-          <header class="text-center"><h3>Buttons</h3></header>
+          <header class="text-center"><h3><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3></header>
           <section class="notes">
             <p><strong>Buttons</strong> include simple button styles for actions in different types and sizes. </p>
           </section>
@@ -501,7 +501,7 @@
         </section>
 
         <section id="forms" class="container">
-          <header class="text-center"><h3>Forms</h3></header>
+          <header class="text-center"><h3><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3></header>
           <section class="notes">
             <p><strong>Forms</strong> provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.  </p>
           </section>
@@ -1009,7 +1009,7 @@
         </section>
 
         <section id="icons" class="container">
-          <header class="text-center"><h3>Icons <small class="label">experimental</small></h3></header>
+          <header class="text-center"><h3><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3></header>
           <section class="notes">
             <p><strong>Icons</strong> are single-element, responsive and pure CSS icons. You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web &lt;head&gt; to have these CSS icons.</p>
           </section>
@@ -1258,7 +1258,7 @@
         </section>
 
         <section id="labels" class="container">
-          <header class="text-center"><h3>Labels</h3></header>
+          <header class="text-center"><h3><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3></header>
           <section class="notes">
             <p><strong>Labels</strong> are formatted text tags for highlighted, informative information.</p>
           </section>
@@ -1283,7 +1283,7 @@
         </section>
 
         <section id="codes" class="container">
-          <header class="text-center"><h3>Codes</h3></header>
+          <header class="text-center"><h3><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3></header>
           <section class="notes">
             <p><strong>Codes</strong> are inline and multiline code snippets.</p>
             <p>For inline code, you can use the element <code>&lt;code&gt;</code>. For multiline code snippet blocks, you can use &lt;pre&gt; with the <code>code</code> class as a container, and add &lt;code&gt; inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right.</p>
@@ -1306,7 +1306,7 @@
         </section>
 
         <section id="media" class="container">
-          <header class="text-center"><h3>Media</h3></header>
+          <header class="text-center"><h3><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3></header>
           <section class="notes">
             <p><strong>Media</strong> includes responsive images, figures and video classes. </p>
             <p>Add the <code>img-responsive</code> class to &lt;img&gt; elements. The images will scale with the parent sizes.</p>