Fix docs content and add more examples

1 files changed, 8 insertions, 8 deletions

diff --git a/docs/utilities.html b/docs/utilities.html
index 28766b0..a2d5e3f 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -133,7 +133,7 @@
             <h3 class="s-title">Color utilities<a class="anchor" href="#colors" 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>
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                 <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
                 <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
               </div>
@@ -206,8 +206,8 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-warning"</span>&gt;</span>warning bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-error"</span>&gt;</span>error bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
           </div>
-          <div class="container" id="cursor">
-            <h3 class="s-title">Cursor utilities<a class="anchor" href="#cursor" aria-hidden="true">#</a></h3>
+          <div class="container" id="cursors">
+            <h3 class="s-title">Cursor utilities<a class="anchor" href="#cursors" aria-hidden="true">#</a></h3>
             <p>Cursor utilities specify which mouse cursor to display when mouseover.</p>
             <div class="docs-demo columns">
               <div class="column col-4">
@@ -245,7 +245,7 @@
           <div class="container" id="display">
             <h3 class="s-title">Display utilities<a class="anchor" href="#display" 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>
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
             </div>
             <p>Display utilities are used for display and hidden things.</p>
             <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- display: block; --&gt;</span>
@@ -398,16 +398,16 @@
             <p>Shape utilities are used for change element shapes.</p>
             <div class="docs-demo columns">
               <div class="column col-6 text-center">
-                <div class="bg-primary text-light docs-shape rounded centered">rounded</div>
+                <div class="bg-primary text-light docs-shape s-rounded centered">s-rounded</div>
               </div>
               <div class="column col-6 text-center">
-                <div class="bg-primary text-light docs-shape circle centered">circle</div>
+                <div class="bg-primary text-light docs-shape s-circle centered">s-circle</div>
               </div>
             </div>
             <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- rounded element --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rounded"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"s-rounded"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-comment">&lt;!-- circle element --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"circle"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"s-circle"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="text">
             <h3 class="s-title">Text utilities<a class="anchor" href="#text" aria-hidden="true">#</a></h3>