Product Card

A visually appealing and responsive product card component for showcasing products effectively.

EMBERTON III

Emberton III Lunar New Year Edition 2025 features more bass than its predecessor. Dynamic Loudness adjusts the tonal balance as you change the volume. Discover a rich, full sound that'll never let you down.

Installation

Follow these steps to install and set up the Product Card component in your project.

Dependencies

Ensure you have Next.js and Tailwind CSS installed to use this component seamlessly.

npm install tailwindcss @tailwindcss/postcss postcss

Component Code

Here is the complete implementation of the Product Card component. Copy and paste it into your project.

import { ProductCard } from "/path-to-your-components-folder"

Add the component to your page

Finally, add the Product Card component to your page or application. Customize the props as needed.

export default function Page() {
  return (
    <div>
      <ProductCard 
        slug='/components/productscard'
        title="EMBERTON III"
        description="Product Description"
        image="/placeholders/product.png"
        price="$Price"
      />
    </div>
  )
}

Props

Name	Type	Default	Description
title	string	-	The title of the product.
description	string	-	A brief description of the product.
image	string	-	The URL of the product image.
price	string	-	The price of the product.
slug	string	-	The URL path for the product link.

Design Credits

Sourav

Design & Development