feat: add badge component

matifandy8 · Oct 20, 2023 · 6f6d511 · 6f6d511
1 parent 4bc509d
commit 6f6d511
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 3 deletions.
diff --git a/dist/index.css b/dist/index.css
@@ -680,3 +680,23 @@ input.nb-checkbox {
       top: 0px;
       font-size: 18px;
       text-align: center; }
+
+.badge {
+  width: fit-content;
+  padding: 5px;
+  border: 2px solid #000;
+  border-radius: 50px;
+  background-color: #40d39c;
+  box-shadow: 3px 3px 0 0 #000; }
+  .badge .badge-inner {
+    display: flex;
+    height: 100%;
+    margin: 0;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid #000;
+    border-radius: 50px; }
+    .badge .badge-inner .badge-text {
+      color: #031926;
+      padding: 10px;
+      margin: 0; }
diff --git a/dist/index.min.css b/dist/index.min.css
diff --git a/docs/index.html b/docs/index.html
@@ -29,7 +29,7 @@
     <link rel="icon" sizes="32x32" href="assets/logo.png" type="image/x-icon">
     <link rel="icon" sizes="16x16" href="assets/logo.png" type="image/x-icon">
     <link rel="icon" href="assets/logo.png" type="image/x-icon">
-    <link rel="stylesheet" href="https://unpkg.com/neobrutalismcss@latest">
+    <!-- <link rel="stylesheet" href="https://unpkg.com/neobrutalismcss@latest"> -->
     <!-- for dev -->
     <link rel="stylesheet" href="/dist/index.css" />
     <!--  -->
@@ -251,6 +251,32 @@ <h3>Card</h3>
                   </code>
                 </pre>
             </figure>
+        </section>
+        <section class="sections">
+            <h3>Badge</h3>
+            <p class="component-description">
+                Section presents a badge with text. It illustrates a user interface component
+                provided by NeoBrutalismCSS for badges.
+            </p>
+            <div class="badge">
+                <div class="badge-inner">
+                    <p class="badge-text">Excellence</p>
+                </div>
+            </div>
+            <figure class="highlight">
+                <pre>
+                  <button class="copy tooltip copy-button"><img src="assets/copy.svg" alt="copy"> <span class="tooltiptext">Copy to clipboard</span></button>
+                  <code class="language-html" data-lang="html"> 
+<span class="tag">&lt;div</span> <span class="class">class=</span><span class="name">"badge"</span><span class="tag">&gt;</span>
+    <span class="tag">&lt;div</span> <span class="class">class=</span><span class="name">"badge-inner"</span><span class="tag">&gt;</span>
+        <span class="tag">&lt;p</span> <span class="class">class=</span><span class="name">"badge-text"</span><span class="tag">&gt;</span>Excellence<span class="tag">&lt;/p&gt;</span>
+    <span class="tag">&lt;/div&gt;</span>
+<span class="tag">&lt;/div&gt;</span>
+                  </code>
+                </pre>
+            </figure>
+
+
         </section>
         <section class="sections">
             <h3>Dialog</h3>

diff --git a/docs/styles.css b/docs/styles.css
@@ -207,6 +207,7 @@ h2 {
   font-family: "Lexend Mega", sans-serif;
   line-height: 2rem;
 }
+
 h3 {
   font-family: "Lexend Mega", sans-serif;
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "neobrutalismcss",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "NeoBrutalismCSS design framework that embraces the aesthetics of neo-brutalism in web",
   "main": "dist/index.min.css",
   "repository": {

diff --git a/src/scss/components/_badge.scss b/src/scss/components/_badge.scss
@@ -0,0 +1,23 @@
+.badge {
+  width: fit-content;
+  padding: 5px;
+  border: 2px solid #000;
+  border-radius: 50px;
+  background-color: #40d39c;
+  box-shadow: 3px 3px 0 0 #000;
+
+  .badge-inner {
+    display: flex;
+    height: 100%;
+    margin: 0;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid #000;
+    border-radius: 50px;
+    .badge-text {
+      color: #031926;
+      padding: 10px;
+      margin: 0;
+    }
+  }
+}
diff --git a/src/scss/index.scss b/src/scss/index.scss
@@ -11,3 +11,4 @@
 @import "components/cards";
 @import "components/avatar";
 @import "components/checkbox";
+@import "components/badge";