Card

Card - product link component which can be used for carousels, section with related products, recently added etc.

Lorem Ipsum

Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud. Irure officia occaecat adipisicing amet labore et incididunt exercitation. Consequat aliqua excepteur duis dolore cupidatat.

€599.00

Lorem Ipsum

€599.00

Lorem Ipsum

€599.00

<div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
    <Card href="https://google.com" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
        <a href="#">
            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900  leading-none">Lorem Ipsum</h5>
        </a>
        <p class="mb-3 font-normal text-gray-700 ">
          Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud. Irure officia occaecat adipisicing amet labore et incididunt exercitation. Consequat aliqua excepteur duis dolore cupidatat.
        </p>

        <div class="flex items-center justify-between my-4">
          <span class="text-2xl font-bold text-gray-900 ">€599.00</span>
        </div>

        <Button tertiary small href="#">
          Read more
          <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl leading-none" />
        </Button>
    </Card>
</div>

Grid example

Brand

Product Name

€149

~~€199~~

Brand

Product Name

€149

~~€199~~

Brand

Product Name

€149

~~€199~~

Brand

Product Name

€149

~~€199~~

Brand

Product Name

€149

~~€199~~

Brand

Product Name

€149

~~€199~~

<div class="w-fit mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-14 mt-10 mb-5 ">
  <div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
      <a href="#">
          <img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
          <div class="px-4 py-3 w-72">
              <span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
              <p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
              <div class="flex items-center">
                  <p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
                  <del>
                      <p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
                  </del>
                  <Icon name="octicon:info-24" class="ml-auto" />
              </div>
          </div>
      </a>
  </div>
</div>

Card with skewed background

Skewed background with CSS & SVG.

Officia deserunt commodo sit eiusmod
Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.