docs: add badge samples

docs/index.html

@@ -71,7 +71,7 @@
         <!-- Installation -->
         <section class="topic">
           <h2 id="installation"><a href="#installation">#</a>Installation</h2>
-          <p>NES.css is available via either npm (preferred) or Yarn, or a CDN.</p>
+          <p>NES.css is available via either npm or Yarn, or a CDN.</p>
           <p>Please read <a href="https://github.com/nostalgic-css/NES.css">README.md</a>.</p>
         </section>
 

docs/script.js

@@ -323,6 +323,49 @@ const sampleCollection = [
   </div>
   <i class="nes-bcrikko"></i>
 </section>`,
+  },
+  {
+    title: 'badges',
+    showCode: false,
+    code: `<a href="#" class="nes-badge">
+  <span class="is-dark">NES.css</span>
+</a>
+
+<a href="#" class="nes-badge">
+  <span class="is-primary">is</span>
+</a>
+
+<a href="#" class="nes-badge">
+  <span class="is-success">a</span>
+</a>
+
+<a href="#" class="nes-badge">
+  <span class="is-warning">great</span>
+</a>
+
+<a href="#" class="nes-badge">
+  <span class="is-error">framework!</span>
+</a>
+
+<a href="#" class="nes-badge is-splited">
+  <span class="is-dark">npm</span>
+  <span class="is-primary">1.1.0</span>
+</a>
+
+<a href="#" class="nes-badge is-splited">
+  <span class="is-dark">test</span>
+  <span class="is-success">100%</span>
+</a>
+
+<a href="#" class="nes-badge is-icon">
+  <span class="is-warning"><i class="nes-icon star is-small"></i></span>
+  <span class="is-primary">Icons</span>
+</a>
+
+<a href="#" class="nes-badge is-icon">
+  <span class="is-dark">hi</span>
+  <span class="is-warning">Text</span>
+</a>`,
   },
   {
     title: 'reaction-icons',
@@ -394,14 +437,14 @@ const sampleCollection = [
     description:
       'If you wanto to change icon size, please use "is-small", "is-medium" and "is-large".',
     code: `<section class="icon-list">
-<!-- close -->
+  <!-- close -->
-<i class="nes-icon close is-large"></i>
+  <i class="nes-icon close is-large"></i>
 
-<!-- trophy -->
+  <!-- trophy -->
-<i class="nes-icon trophy is-large"></i>
+  <i class="nes-icon trophy is-large"></i>
 
-<!-- coin -->
+  <!-- coin -->
-<i class="nes-icon coin is-large"></i>
+  <i class="nes-icon coin is-large"></i>
 </section>`,
   },
   {