Badge

This is a form design template.

Basic

Badge1Badge2Badge3

HTML

<p><span class="badge">Badge1</span><span class="badge">Badge2</span><span class="badge">Badge3</span></p>

Link

Badge Link

HTML

<p><a class="badge-link" href="">Badge Link</a></p>

With icon

Badge with icon Badge Link with icon

HTML

<p>
  <span class="badge">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><use xlink:href="/img/icon/icons.svg#tag"></use></svg>
    <span>Badge with icon</span>
  </span>
  <a class="badge-link" href="">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><use xlink:href="/img/icon/icons.svg#person"></use></svg>
    <span>Badge Link with icon</span>
  </a>
</p>

Install

npm

Console

> npm i @noknow/web-design-badge

Import

CSS

@import '/YOUR_PROJECT/node_modules/@noknow/web-design-badge/style.css';