spoko-design-system 0.8.9 → 0.9.1

package/src/pages/components/card.mdx

@@ -1,294 +1,294 @@
----
-title: "Card"
-layout: "../../layouts/MainLayout.astro"
----
-import Button from '../../components/Button.vue';
-import Card from '../../components/Card.astro'
-import { Icon } from 'astro-icon/components';
-import Image from '../../components/Image.astro'
-
-# Card
-
-Card - product link component which can be used for carousels, section with related products, recently added etc.
-
-<div class="component-preview">
-  <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>
-
-    <Card href="#" 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>
-
-    <Card href="#" 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>
-</div>
-
-```html
-<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
-
-<div class="component-preview">
-  <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 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 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 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 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 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>
-</div>
-```html
-<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.
-
-<div class="component-preview">
-
-<div class="columns-3 gap-8">
-
-<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
-    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
-    <blockquote class="relative p-8 mb-4 text-white/90">
-    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
-    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
-    <p class="text-md font-light mt-2 text-white">
-    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
-    </p>
-    </blockquote>
-</div>
-
-<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
-    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
-    <blockquote class="relative p-8 mb-4 text-white/90">
-    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
-    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
-    <p class="text-md font-light mt-2 text-white">
-    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
-    </p>
-    </blockquote>
-</div>
-
-<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
-    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
-    <blockquote class="relative p-8 mb-4 text-white/90">
-    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
-    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
-    <p class="text-md font-light mt-2 text-white">
-    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
-    </p>
-    </blockquote>
-</div>
-
-<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
-    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
-    <blockquote class="relative p-8 mb-4 text-white/90">
-    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
-    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
-    <p class="text-md font-light mt-2 text-white">
-    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
-    </p>
-    </blockquote>
-</div>
-
-<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
-    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
-    <blockquote class="relative p-8 mb-4 text-white/90">
-    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
-    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
-    <p class="text-md font-light mt-2 text-white">
-    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
-    </p>
-    </blockquote>
-</div>
-
-<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
-    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
-    <blockquote class="relative p-8 mb-4 text-white/90">
-    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
-    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
-    <p class="text-md font-light mt-2 text-white">
-    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
-    </p>
-    </blockquote>
-</div>
-
-</div>
-
-</div>
-
-
+---
+title: "Card"
+layout: "../../layouts/MainLayout.astro"
+---
+import Button from '../../components/Button.vue';
+import Card from '../../components/Card.astro'
+import { Icon } from 'astro-icon/components';
+import Image from '../../components/Image.astro'
+
+# Card
+
+Card - product link component which can be used for carousels, section with related products, recently added etc.
+
+<div class="component-preview">
+  <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>
+
+    <Card href="#" 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>
+
+    <Card href="#" 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>
+</div>
+
+```html
+<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
+
+<div class="component-preview">
+  <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 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 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 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 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 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>
+</div>
+```html
+<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.
+
+<div class="component-preview">
+
+<div class="columns-3 gap-8">
+
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
+    <blockquote class="relative p-8 mb-4 text-white/90">
+    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
+    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
+    <p class="text-md font-light mt-2 text-white">
+    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
+    </p>
+    </blockquote>
+</div>
+
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
+    <blockquote class="relative p-8 mb-4 text-white/90">
+    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
+    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
+    <p class="text-md font-light mt-2 text-white">
+    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
+    </p>
+    </blockquote>
+</div>
+
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
+    <blockquote class="relative p-8 mb-4 text-white/90">
+    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
+    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
+    <p class="text-md font-light mt-2 text-white">
+    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
+    </p>
+    </blockquote>
+</div>
+
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
+    <blockquote class="relative p-8 mb-4 text-white/90">
+    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
+    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
+    <p class="text-md font-light mt-2 text-white">
+    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
+    </p>
+    </blockquote>
+</div>
+
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
+    <blockquote class="relative p-8 mb-4 text-white/90">
+    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
+    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
+    <p class="text-md font-light mt-2 text-white">
+    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
+    </p>
+    </blockquote>
+</div>
+
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
+    <blockquote class="relative p-8 mb-4 text-white/90">
+    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
+    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
+    <p class="text-md font-light mt-2 text-white">
+    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
+    </p>
+    </blockquote>
+</div>
+
+</div>
+
+</div>
+
+