Card

Cards in WeedorUI are versatile components designed to group related content and provide a structured way to display information. They can be used for a variety of purposes, such as showcasing products, displaying user profiles, or organizing key details. Each card is fully customizable in terms of layout, style, and content, ensuring seamless integration into your application’s design.

Card

Preview

Toys!

Make your child happy with this beautiful and fun toy set.

Buy Now

HTML

<div class="w-[360px] h-fit bg-grn-400 overflow-hidden rounded-md shadow-2xl">
  <img
    src="https://i.pinimg.com/236x/97/52/48/975248ae71a82109eae2387d8ab3dc7c.jpg"
    alt="kid toy image"
    class="w-full h-[200px] object-cover"
  />
  <div class="py-6 px-4">
    <h1 class="text-2xl font-bold pb-3">Toys!</h1>
    <p class="text-base pb-4">
      Make your child happy with this beautiful and fun toy set.
    </p>
    <button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:shadow-xl">
      Buy Now
    </button>
  </div>
</div>

JSX

<div className="w-[360px] h-fit bg-grn-400 overflow-hidden rounded-md shadow-2xl">
  <img
    src="https://i.pinimg.com/236x/97/52/48/975248ae71a82109eae2387d8ab3dc7c.jpg"
    alt="Kid toy image"
    className="w-full h-[200px] object-cover"
  />
  <div className="py-6 px-4">
    <h1 className="text-2xl font-bold pb-3">Toys!</h1>
    <p className="text-base pb-4">
      Make your child happy with this beautiful and fun toy set.
    </p>
    <button className="bg-blue-500 text-white px-4 py-2 rounded-md hover:shadow-xl">
      Buy Now
    </button>
  </div>
</div>

Card with button on the right

Preview

Toys!

Make your child happy with this beautiful and fun toy set.

Buy Now

HTML

<div class="w-[360px] h-fit bg-grn-400 overflow-hidden rounded-md shadow-2xl">
  <img
    src="https://i.pinimg.com/236x/97/52/48/975248ae71a82109eae2387d8ab3dc7c.jpg"
    alt="kid toy image"
    class="w-full h-[200px] object-cover"
  />
  <div class="py-6 px-4">
    <h1 class="text-2xl font-bold pb-3">Toys!</h1>
    <p class="text-base pb-4">
      Make your child happy with this beautiful and fun toy set.
    </p>
    <div class="flex justify-end">
      <button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:shadow-xl">
        Buy Now
      </button>
    </div>
  </div>
</div>

JSX

<div className="w-[360px] h-fit bg-grn-400 overflow-hidden rounded-md shadow-2xl">
  <img
    src="https://i.pinimg.com/236x/97/52/48/975248ae71a82109eae2387d8ab3dc7c.jpg"
    alt="Kid toy image"
    className="w-full h-[200px] object-cover"
  />
  <div className="py-6 px-4">
    <h1 className="text-2xl font-bold pb-3">Toys!</h1>
    <p className="text-base pb-4">
      Make your child happy with this beautiful and fun toy set.
    </p>
    <div className="flex justify-end">
      <button className="bg-blue-500 text-white px-4 py-2 rounded-md hover:shadow-xl">
        Buy Now
      </button>
    </div>
  </div>
</div>

Card with image, post time and external link

Preview

PhotographyView All

10 min ago

Lorem ipsum dolor sit amet consectetur adipisicing.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque fugit ipsa culpa aliquam a ullam?

HTML

<div
    class="w-[450px] h-fit bg-grn-400 overflow-hidden rounded-md shadow-2xl px-5 py-6 bg-slate-50 dark:bg-[#1c232b]"
  >
    <p class="flex justify-between items-center pb-4">
      <span>Photography</span>
      <a href="#">View All</a>
    </p>

    <div class="w-full h-[200px] bg-slate-400 rounded-md mb-3">
        <img src="/" alt="" />
    </div>
    <span class="text-sm inline-block pb-5">10 min ago</span>
    <h1 class="text-2xl font-bold pb-5">
      Lorem ipsum dolor sit amet consectetur adipisicing.
    </h1>
    <span
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque
      fugit ipsa culpa aliquam a ullam?</span
    >
  </div>

JSX

 <div
    className="w-[450px] h-fit bg-grn-400 overflow-hidden rounded-md shadow-2xl px-5 py-6 bg-slate-50 dark:bg-[#1c232b]"
  >
    <p className="flex justify-between items-center pb-4">
      <span>Photography</span>
      <a href="#">View All</a>
    </p>

    <div className="w-full h-[200px] bg-slate-400 rounded-md mb-3">
        <img src="/" alt="" />
    </div>
    <span className="text-sm inline-block pb-5">10 min ago</span>
    <h1 className="text-2xl font-bold pb-5">
      Lorem ipsum dolor sit amet consectetur adipisicing.
    </h1>
    <span
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque
      fugit ipsa culpa aliquam a ullam?</span
    >
  </div>

Card with image on the bottom

Preview

Toys!

Make your child happy with this beautiful and fun toy set.

Buy Now

HTML

<div class="w-[360px] h-fit bg-grn-400 overflow-hidden rounded-md shadow-2xl">
  <div class="py-6 px-4">
    <h1 class="text-2xl font-bold pb-3">Toys!</h1>
    <p class="text-base pb-4">
      Make your child happy with this beautiful and fun toy set.
    </p>
    <div class="flex justify-end">
      <button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:shadow-xl">
        Buy Now
      </button>
    </div>
  </div>
  <img
    src="https://i.pinimg.com/236x/97/52/48/975248ae71a82109eae2387d8ab3dc7c.jpg"
    alt="kid toy image"
    class="w-full h-[200px] object-cover"
  />
</div>

JSX

<div className="w-[360px] h-fit bg-grn-400 overflow-hidden rounded-md shadow-2xl">
  <div className="py-6 px-4">
    <h1 className="text-2xl font-bold pb-3">Toys!</h1>
    <p className="text-base pb-4">
      Make your child happy with this beautiful and fun toy set.
    </p>
    <div className="flex justify-end">
      <button className="bg-blue-500 text-white px-4 py-2 rounded-md hover:shadow-xl">
        Buy Now
      </button>
    </div>
  </div>
  <img
    src="https://i.pinimg.com/236x/97/52/48/975248ae71a82109eae2387d8ab3dc7c.jpg"
    alt="Kid toy image"
    className="w-full h-[200px] object-cover"
  />
</div>