# 📒 Product Card Design System 
Product card component is one of the important key component for web-pages as you desging the you website or for any firm the only moto is to give services or product to the coustomer. How will give info regarding product as here product card component comes in picture.

Product card contains pics of product and descripiton of product (Name,Prize,Rating) in very attractive GUI manner. Very common example that we can refer is from all e-commerce site about their product description.

![image](https://user-images.githubusercontent.com/83635276/207330817-8ed0ede7-151f-462b-952b-585f9f790806.png) ![Screenshot (110)](https://user-images.githubusercontent.com/73521123/210830116-0cb81f08-b4c4-4491-aa70-4c2078b2871b.png)

According to the Product description of product also get changed.

## General convention to follow :

### **Border-radius** :

Border radius of each card is `rounded-2xl rounded-md rounded-xl`.

### **Margin :**

Generally for the margin we use. `m-4`

### Font :

For Product card font is : **`font-medium`**

For Buttons font is : **`font-bold`**

### Color 🎨

Color of `bg` is generally used as  **`bg-white bg-red-600`**

Color of `bg` is generally used as shade of 100 / 700 

Color of `text` will depend on the `bg` color
| Background | Text |
| --- | --- |
| Code in Tailwind | text-[#E77C40], text-[#737373] text-[#1855CB] |

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

### Width & heights :

The width of the component totally depends on the design.

The height of the components depends on the amount of content on it. We need to make it auto. **Giving a fixed height is not recommended at all.** 

---

### Buttons :

We need to use the already built buttons for this. **[Buttons](https://github.com/Clueless-Community/seamless-ui/tree/main/Buttons)** 🔗 . But if you want to coustomise it the feel free to go according to your convenience.

### Star Ratings :

We need to use the already built ratings for this. **[Ratings](https://github.com/Clueless-Community/seamless-ui/tree/main/Rating)** 🔗 . But if you want to coustomise it the feel free to go according to your convenience.

### Icons :

Icons must be used from **[Heroicons](https://heroicons.com/)** 

**Note :** You need to use a solid 24X24 SVG form heroicons.

### Add to Favourite

For this we will use button given below.

```html
<button class="absolute top-0 right-0 group border-[#fff] rounded-full p-[5px] m-1 bg-[#fff]">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#E74040" class="w-4 h-4 group-hover:fill-[#E74040]  group-focus:fill-[#E74040] ">
        <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
    </svg>
</button>
```

## Example Code :
This is the example code of the `Product Cards/src/product-card-1.html`

```html
<div class=" flex h-screen w-auto items-center justify-center bg-[#DEDEDE]">
    <!-- Component Starts from Here -->
    <div class="w h-auto w-52 cursor-default flex-col overflow-hidden rounded-xl shadow-lg bg-[#FFF]">
      <div class="m-4 mb-2 h-32 relative overflow-hidden ">
        <img class="h-36 object-cover" src="https://images.unsplash.com/photo-1647880087459-30f07c4faba5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2232&q=80" alt="" />
        <button class="absolute top-0 right-0 group border-[#fff] rounded-full p-[5px] m-1 bg-[#fff]">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#E74040" class="w-4 h-4 group-hover:fill-[#E74040]  group-focus:fill-[#E74040] ">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
          </svg>
        </button>
        <div class="absolute top-0 left-0 border border-[#E74040] m-2 text-[10px]  px-2 text-[white] font-semibold bg-[#E74040] rounded-sm">Sale</div>
      </div>
      <div class="mx-4 mb-4 mt-2 flex-col ">
        <div class="m-1 ml-2 mb-2 font-sans text-base tracking-wide font-normal">
          <h1>Floating Phone</h1>
        </div>
        <div class="text-[9px] m-1 ml-2 mb-2 text-[#737373] font-medium">
          <p>By <a href="#JaneCooper" class="text-[#1855CB]">Jane Cooper</a> in Tech , Products</p>
        </div>
        <div class="m-1 ml-2 mb-2 flex">
          <div class="flex flex-wrap">
            <svg xmlns="http://www.w3.org/2000/svg" fill="#E77C40" viewBox="0 0 24 24" stroke-width="2" stroke="#E77C40" class="w-4 h-4 mx-[0.1rem]">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" fill="#E77C40" viewBox="0 0 24 24" stroke-width="2" stroke="#E77C40" class="w-4 h-4 mx-[0.1rem]">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" fill="#E77C40" viewBox="0 0 24 24" stroke-width="2" stroke="#E77C40" class="w-4 h-4 mx-[0.1rem]">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" fill="#E77C40" viewBox="0 0 24 24" stroke-width="2" stroke="#E77C40" class="w-4 h-4 mx-[0.1rem]">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="#E77C40" class="w-4 h-4 mx-[0.1rem]">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
            </svg>
          </div>
          <div class="text-[11px]  font-medium text-[#737373]">
            <p>10 Reviews</p>
          </div>
          </div>
          <div class="m-1 ml-2 mb-2">
            <div class="border m-1 border-[#acacac] text-sm  font-bold w-fit px-2 py-1 rounded">
              <p>$13.33</p>
            </div>
          </div>
          <div class="m-1 ml-2 mb-2 flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="gray" class="w-4 h-4">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
            </svg>
            <div class="mx-1 text-[11px] text-[#737373]">
              <p>15 Sales</p>
            </div>
          </div>
          <div class="m-1 ml-2 mb-2 flex">
            <button class="hover:bg-[#bdbdbd] hover:text-[#fff] focus:bg-[#bdbdbd] focus:text-[#fff] border border-[#acacac] m-1 text-[11px] p-1 px-2 text-[#737373] font-bold">XL</button>
            <button class="hover:bg-[#bdbdbd] hover:text-[#fff] focus:bg-[#bdbdbd] focus:text-[#fff] border border-[#acacac] m-1 text-[11px] p-1 px-2 text-[#737373] font-bold">L</button>
            <button class="hover:bg-[#bdbdbd] hover:text-[#fff] focus:bg-[#bdbdbd] focus:text-[#fff] border border-[#acacac] m-1 text-[11px] p-1 px-2 text-[#737373] font-bold">M</button>
            <button class="hover:bg-[#bdbdbd] hover:text-[#fff] focus:bg-[#bdbdbd] focus:text-[#fff] border border-[#acacac] m-1 text-[11px] p-1 px-2  text-[#737373] font-bold">S</button>
          </div>
          <button class=" text-[10px] mb-2 text-white p-2 rounded bg-[#1855CB] hover:bg-[#1854cbea] flex w-full content-center justify-center">Select Option</button>
          <div class="flex text-[#737373] group hover:text-[#535353] font-medium font-serif text-[10px] m-1 mt-2 justify-center content-center items-center">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="gray" class="w-4 h-4 group-hover:fill-[#737373] group-hover:stroke-[#fff]">
            <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
           </svg>
           <p class="mx-1">Quick View</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  
```
---

## Having some problem ? 😕

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

