
# 📒 Developer style guide for Widgets

They allow for defining your own visualization charts (html/javascript), add options to them and save them so it can be reused in other reports

![image](https://i.postimg.cc/6qMdvVCB/Screenshot-2022-12-31-at-2-13-53-PM.png)

---

## General must known design system guideline :

### Color 🎨

|  | Background | Border | Active | Inactive |
| --- | --- | --- | --- | --- |
| Color Code in Tailwind | bg-gray-200 | border-l-blue-500 | bg-white | border-gray-400 | bg-blue-600 |
 

Color of `text` will depend on the `bg` color
| Background | Dark | Light |
| --- | --- | --- |
| Text | Light | Dark |
| Code in Tailwind | text-white | text-blue-500 |

`Note` : Color of the text `[color]` will depend on the color of the background

### Font

For all Widgets font is : **`font-medium`**

## Icon guidelines:

Mostly all the icons are taken from → [Hero Icons](https://heroicons.com/)

`Icon-text-gap` :  We follow a convention of equal margin between the text and the icon as padding in y  axis `py`. and always the margin is given from the side of icon.

|  | Width | Type |
| --- | --- | --- |
| Small | w-4 & h-4 | Hero Icons mini |
| Medium | w-5 & h-5 | Hero Icons mini |
| Large | w-6 & h-6 | Hero Icons filled |

---

## Example of Widget component 👇

Want to see this Avatar in action? Try copy pasting this code in [Tailwind Playground](https://play.tailwindcss.com/). 💥

```html

<!--For widget-1 -->
<div class="w-screen">
  <ul class="rounded-2xl bg-white">
    <li class="flex cursor-pointer items-center gap-4 border-2 py-5 px-5 hover:border-l-blue-500 hover:text-blue-500">
      <p>Raw denim you probably haven't heard</p>
    </li>
    <li class="flex cursor-pointer items-center gap-4 border-x-2 py-5 px-5 hover:border-l-blue-500 hover:text-blue-500">
      <p>Williamsburg carles vegan helvetica.</p>
    </li>
    <li class="flex cursor-pointer items-center gap-4 border-2 py-5 px-5 hover:border-l-blue-500 hover:text-blue-500">
      <p>Raw denim you probably haven't heard</p>
    </li>
    <li class="flex cursor-pointer items-center gap-4 border-x-2 py-5 px-5 hover:border-l-blue-500 hover:text-blue-500">
      <p>Reprehenderit butcher retro</p>
    </li>
    <li class="flex cursor-pointer items-center gap-4 border-2 py-5 px-5 hover:border-l-blue-500 hover:text-blue-500">
      <p>Cosby sweater eu banh mi</p>
    </li>
  </ul>
</div>
<!--For widget-2 -->
<div class="w-screen">
  <ul class="rounded-2xl bg-white">
    <li class="flex cursor-pointer items-center gap-4 border-2 py-5 px-5 hover:border-l-blue-500 hover:text-blue-500">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="h-6 w-6">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
      </svg>
      <p>Raw denim you probably haven't heard</p>
    </li>
    <li class="flex cursor-pointer items-center gap-4 border-x-2 py-5 px-5 hover:border-l-blue-500 hover:text-blue-500">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="h-6 w-6">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
      </svg>
      <p>Williamsburg carles vegan helvetica.</p>
    </li>
    <li class="flex cursor-pointer items-center gap-4 border-2 py-5 px-5 hover:border-l-blue-500 hover:text-blue-500">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="h-6 w-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <p>Raw denim you probably haven't heard</p>
    </li>
    <li class="flex cursor-pointer items-center gap-4 border-x-2 py-5 px-5 hover:border-l-blue-500 hover:text-blue-500">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="h-6 w-6">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
      </svg>
      <p>Reprehenderit butcher retro</p>
    </li>
    <li class="flex cursor-pointer items-center gap-4 border-2 py-5 px-5 hover:border-l-blue-500 hover:text-blue-500">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="h-6 w-6">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
      </svg>
      <p>Cosby sweater eu banh mi</p>
    </li>
  </ul>
</div>
<!--For widget-3 -->
<div class="flex h-screen items-center justify-center bg-gray-200">
  <ul class="w-[360px] overflow-hidden rounded-[20px] bg-white sm:w-[461px]">
    <li class="group flex cursor-pointer items-center justify-between gap-4 border-b-2 border-[#EBEBEB] py-5 px-5 hover:border-l-2 hover:border-l-blue-600 hover:text-blue-600">
      <p class="text-[14px] sm:text-[16px]">Raw denim you probably haven't heard</p>
      <button class="rounded-lg border border-gray-400 bg-gray-200 px-2 py-1 text-sm group-hover:border-blue-600 group-hover:bg-blue-600 group-hover:text-white sm:text-base">23</button>
    </li>
    <li class="group flex cursor-pointer items-center justify-between gap-4 border-b-2 border-[#EBEBEB] py-5 px-5 hover:border-l-2 hover:border-l-blue-600 hover:text-blue-600">
      <p class="text-[14px] sm:text-[16px]">Williamsburg carles vegan helvetica.</p>
      <button class="rounded-lg border border-gray-400 bg-gray-200 px-2 py-1 text-sm group-hover:border-blue-600 group-hover:bg-blue-600 group-hover:text-white sm:text-base">5</button>
    </li>
    <li class="group flex cursor-pointer items-center justify-between gap-4 border-b-2 border-[#EBEBEB] py-5 px-5 hover:border-l-2 hover:border-l-blue-600 hover:text-blue-600">
      <p class="text-[14px] sm:text-[16px]">Raw denim you probably haven't heard</p>
      <button class="rounded-lg border border-gray-400 bg-gray-200 px-2 py-1 text-sm group-hover:border-blue-600 group-hover:bg-blue-600 group-hover:text-white sm:text-base">12</button>
    </li>
    <li class="group flex cursor-pointer items-center justify-between gap-4 border-b-2 border-[#EBEBEB] py-5 px-5 hover:border-l-2 hover:border-l-blue-600 hover:text-blue-600">
      <p class="text-[14px] sm:text-[16px]">Reprehenderit butcher retro</p>
      <button class="rounded-lg border border-gray-400 bg-gray-200 px-2 py-1 text-sm group-hover:border-blue-600 group-hover:bg-blue-600 group-hover:text-white sm:text-base">11</button>
    </li>
    <li class="group flex cursor-pointer items-center justify-between gap-4 border-[#EBEBEB] py-5 px-5 hover:border-l-2 hover:border-l-blue-600 hover:text-blue-600">
      <p class="text-[14px] sm:text-[16px]">Cosby sweater eu banh mi</p>
      <button class="rounded-lg border border-gray-400 bg-gray-200 px-2 py-1 text-sm group-hover:border-blue-600 group-hover:bg-blue-600 group-hover:text-white sm:text-base">7</button>
    </li>
  </ul>
</div>

<!--For widget-4 -->
<div class="flex flex-col items-center justify-center rounded-lg bg-white">
  <div
    class="group flex flex-col items-center border-2 border-l-4 hover:border-l-blue-500 justify-center space-y-5 p-5">
    <div class="flex w-full items-center justify-between">
      <h1 class="text-lg font-medium">List group item heading</h1>
      <h1
        class="rounded-lg border border-gray-500 bg-gray-200 group-hover:bg-blue-600 p-2 group-hover:text-white group-hover:border-blue-600">
        3 days ago</h1>
    </div>
    <div class="flex items-center justify-center">
      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
        master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
        keffiyeh dreamcat cher synth. Cosby sweater eu banh mi</p>
    </div>
  </div>
  <div
    class="group flex flex-col items-center border-x-2 border-l-4 hover:border-l-blue-500 justify-center space-y-5 p-5">
    <div class="flex w-full items-center justify-between">
      <h1 class="text-lg font-medium">List group item heading</h1>
      <h1
        class="rounded-lg border border-gray-500 bg-gray-200 group-hover:bg-blue-600 p-2 group-hover:text-white group-hover:border-blue-600">
        3 days ago</h1>
    </div>
    <div class="flex items-center justify-center">
      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
        master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
        keffiyeh dreamcat cher synth. Cosby sweater eu banh mi</p>
    </div>
  </div>
  <div
    class="group flex flex-col items-center border-2 border-l-4 hover:border-l-blue-500 justify-center space-y-5 p-5">
    <div class="flex w-full items-center justify-between">
      <h1 class="text-lg font-medium">List group item heading</h1>
      <h1
        class="rounded-lg border border-gray-500 bg-gray-200 group-hover:bg-blue-600 p-2 group-hover:text-white group-hover:border-blue-600">
        3 days ago</h1>
    </div>
    <div class="flex items-center justify-center">
      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
        master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
        keffiyeh dreamcat cher synth. Cosby sweater eu banh mi</p>
    </div>
  </div>
</div>
<!--For widget-5 -->
<div class="bg-slate-200 p-5">
  <div class="relative my-0.5">
    <input type="checkbox" class="peer absolute left-0 top-0 h-16 w-full cursor-pointer bg-red-300 p-5 opacity-0" />
    <div class="cursor-pointer rounded-md bg-white p-5">Accordion Item #1</div>
    <div class="absolute right-3 top-3 rounded-full border p-2 shadow-md duration-500 peer-checked:-rotate-90 peer-checked:rounded-full peer-checked:bg-blue-500 peer-checked:text-white peer-checked:transition-all peer-checked:duration-500">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
      </svg>
    </div>
    <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
      <div class="border-l-4 border-blue-500 p-4 text-blue-500">According Item #1</div>
      <p class="p-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sequi unde obcaecati odit alias temporibus sed consequatur omnis, tempore perspiciatis quibusdam, id amet necessitatibus architecto molestias quas optio soluta quaerat!</p>
    </div>
  </div>

   <div class="relative my-0.5">
    <input type="checkbox" class="peer absolute left-0 top-0 h-16 w-full cursor-pointer bg-red-300 p-5 opacity-0" />
    <div class="cursor-pointer rounded-md bg-white p-5">Accordion Item #1</div>
    <div class="absolute right-3 top-3 rounded-full border p-2 shadow-md duration-500 peer-checked:-rotate-90 peer-checked:rounded-full peer-checked:bg-blue-500 peer-checked:text-white peer-checked:transition-all peer-checked:duration-500">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
      </svg>
    </div>
    <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
      <div class="border-l-4 border-blue-500 p-4 text-blue-500">According Item #1</div>
      <p class="p-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sequi unde obcaecati odit alias temporibus sed consequatur omnis, tempore perspiciatis quibusdam, id amet necessitatibus architecto molestias quas optio soluta quaerat!</p>
    </div>
  </div>

   <div class="relative my-0.5">
    <input type="checkbox" class="peer absolute left-0 top-0 h-16 w-full cursor-pointer bg-red-300 p-5 opacity-0" />
    <div class="cursor-pointer rounded-md bg-white p-5">Accordion Item #1</div>
    <div class="absolute right-3 top-3 rounded-full border p-2 shadow-md duration-500 peer-checked:-rotate-90 peer-checked:rounded-full peer-checked:bg-blue-500 peer-checked:text-white peer-checked:transition-all peer-checked:duration-500">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
      </svg>
    </div>
    <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
      <div class="border-l-4 border-blue-500 p-4 text-blue-500">According Item #1</div>
      <p class="p-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sequi unde obcaecati odit alias temporibus sed consequatur omnis, tempore perspiciatis quibusdam, id amet necessitatibus architecto molestias quas optio soluta quaerat!</p>
    </div>
  </div>

  <div class="relative my-0.5">
    <input type="checkbox" class="peer absolute left-0 top-0 h-16 w-full cursor-pointer bg-red-300 p-5 opacity-0" />
    <div class="cursor-pointer rounded-md bg-white p-5">Accordion Item #1</div>
    <div class="absolute right-3 top-3 rounded-full border p-2 shadow-md duration-500 peer-checked:-rotate-90 peer-checked:rounded-full peer-checked:bg-blue-500 peer-checked:text-white peer-checked:transition-all peer-checked:duration-500">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
      </svg>
    </div>
    <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
      <div class="border-l-4 border-blue-500 p-4 text-blue-500">According Item #1</div>
      <p class="p-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sequi unde obcaecati odit alias temporibus sed consequatur omnis, tempore perspiciatis quibusdam, id amet necessitatibus architecto molestias quas optio soluta quaerat!</p>
    </div>
  </div>
</div>

<!--For widget-6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
    integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="grid w-screen place-items-center pt-10">
    <ul class="w-80 rounded-2xl border bg-white py-3 shadow-2xl">
        <li
            class="group flex cursor-pointer items-center justify-between gap-4 border-b-2 border-l-2 py-5 px-5 pt-2 hover:border-l-blue-600 hover:text-blue-600">
            <div class="flex items-center justify-center gap-4">
                <i class="fa-solid fa-house text-xl"></i>
                <p>Home</p>
            </div>
            <button class="rounded-lg border border-gray-400 bg-gray-200 px-2 py-1 text-black">2</button>
        </li>
        <li
            class="group flex cursor-pointer items-center justify-between gap-4 border-b-2 border-l-2 py-5 px-5 hover:border-l-blue-600 hover:text-blue-600">
            <div class="flex items-center justify-center gap-4">
                <i class="fa-solid fa-user text-xl"></i>
                <p>Profile</p>
            </div>
            <button class="rounded-lg bg-[#E77C40] px-2 py-1 text-white">23</button>
        </li>
        <li
            class="group flex cursor-pointer items-center justify-between gap-4 border-b-2 border-l-2 py-5 px-5 hover:border-l-blue-600 hover:text-blue-600">
            <div class="flex items-center justify-center gap-4">
                <i class="fa-sharp fa-solid fa-comment-dots text-xl"></i>
                <p>Messages</p>
            </div>
            <button class="rounded-lg bg-[#3DBB77] px-2 py-1 text-white">2</button>
        </li>
        <li
            class="group flex cursor-pointer items-center justify-between gap-4 border-l-2 py-5 px-5 pb-2 hover:border-l-blue-600 hover:text-blue-600">
            <div class="flex items-center justify-center gap-4">
                <i class="fa-sharp fa-solid fa-gear text-xl"></i>
                <p>Settings</p>
            </div>
            <button class="rounded-lg bg-blue-600 px-2 py-1 text-white">13</button>
        </li>
    </ul>
</div>

```

---

## Having some problem ? 😕

If you still have a problem understanding this please join our [discord server](https://discord.gg/zrVMjGW8sB) to get help.

