Add anchor links to Docs

1 files changed, 6 insertions, 6 deletions

diff --git a/docs/utilities.html b/docs/utilities.html
index 9e11ab2..e70372a 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -75,7 +75,7 @@
 
       <div class="docs-content column col-9 col-sm-12">
         <section id="position" class="container">
-          <header class="text-center"><h3>Position utilities</h3></header>
+          <header class="text-center"><h3><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3></header>
           <section class="notes">
             <p><strong>Position utilities</strong> are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p>
           </section>
@@ -103,7 +103,7 @@
         </section>
 
         <section id="display" class="container">
-          <header class="text-center"><h3>Display utilities</h3></header>
+          <header class="text-center"><h3><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3></header>
           <section class="notes">
             <p><strong>Display utilities</strong> are used for display and hidden things.</p>
           </section>
@@ -134,7 +134,7 @@
         </section>
 
         <section id="text" class="container">
-          <header class="text-center"><h3>Text utilities</h3></header>
+          <header class="text-center"><h3><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3></header>
           <section class="notes">
             <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p>
           </section>
@@ -176,7 +176,7 @@
         </section>
 
         <section id="shapes" class="container">
-          <header class="text-center"><h3>Shape utilities</h3></header>
+          <header class="text-center"><h3><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3></header>
           <section class="notes">
             <p><strong>Shape utilities</strong> are used for change element shapes.</p>
           </section>
@@ -191,7 +191,7 @@
         </section>
 
         <section id="divider" class="container">
-          <header class="text-center"><h3>Divider</h3></header>
+          <header class="text-center"><h3><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3></header>
           <section class="notes">
             <p>A <strong>Divider</strong> is used for separating elements.</p>
           </section>
@@ -216,7 +216,7 @@
         </section>
 
         <section id="loading" class="container">
-          <header class="text-center"><h3>Loading</h3></header>
+          <header class="text-center"><h3><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3></header>
           <section class="notes">
             <p><strong>Loading indicator</strong> is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status.</p>
           </section>