npm - spoko-design-system - Versions diffs - 1.18.1 → 1.20.0 - Mend

spoko-design-system 1.18.1 → 1.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

package/.claude/settings.json +48 -48
package/.github/dependabot.yml +11 -11
package/.github/todo.yml +3 -3
package/.github/workflows/claude.yml +37 -37
package/.github/workflows/code-quality.yml +72 -72
package/.github/workflows/deploy.yml +43 -43
package/.husky/README.md +41 -41
package/.husky/commit-msg +1 -1
package/.husky/pre-commit +40 -40
package/.prettierignore +14 -14
package/.prettierrc +30 -30
package/.stackblitzrc +5 -5
package/.vscode/extensions.json +4 -4
package/.vscode/launch.json +11 -11
package/.vscode/settings.json +21 -21
package/CHANGELOG.md +462 -450
package/CLAUDE.md +268 -268
package/LICENSE +21 -21
package/README.md +303 -132
package/TOOLTIPS.md +236 -236
package/astro.config.mjs +84 -84
package/commitlint.config.js +3 -3
package/dev-dist/sw.js +91 -91
package/dev-dist/workbox-c676b6d3.js +3391 -3391
package/eslint.config.js +70 -70
package/icon.config.ts +348 -348
package/index.ts +78 -78
package/package.json +160 -160
package/public/arrow-bottom.svg +7 -7
package/public/fonts/lg.svg +53 -53
package/public/fonts/vwhead-bold-demo.html +549 -549
package/public/fonts/vwhead-regular-demo.html +549 -549
package/public/fonts/vwtext-bold-demo.html +549 -549
package/public/fonts/vwtext-regular-demo.html +549 -549
package/public/github.svg +3 -3
package/public/grid_dot.svg +4 -4
package/public/linkedin.svg +44 -44
package/public/make-scrollable-code-focusable.js +3 -3
package/public/pagefind.yml +3 -3
package/public/polo.blue.svg +29 -29
package/public/spoko.space.svg +71 -71
package/public/twitter.svg +46 -46
package/renovate.json +6 -6
package/sandbox.config.json +11 -11
package/sonar-project.properties +26 -26
package/src/components/Category/CategoryDetails.astro +46 -18
package/src/components/Jumbotron/variants/Hero.astro +9 -1
package/src/components/Jumbotron/variants/PostSplit.astro +8 -0
package/src/pages/components/badges.mdx +57 -57
package/src/pages/components/breadcrumbs.mdx +139 -139
package/src/pages/components/buttons.mdx +359 -359
package/src/pages/components/card.mdx +294 -294
package/src/pages/components/carousel.mdx +62 -62
package/src/pages/components/copyright.mdx +42 -42
package/src/pages/components/details-list.mdx +207 -207
package/src/pages/components/features-list.mdx +37 -37
package/src/pages/components/flags.mdx +49 -49
package/src/pages/components/fuck-russia.mdx +39 -39
package/src/pages/components/hand-drive.mdx +78 -78
package/src/pages/components/headline.mdx +337 -337
package/src/pages/components/image.mdx +513 -513
package/src/pages/components/input.mdx +367 -367
package/src/pages/components/jumbotron.mdx +530 -530
package/src/pages/components/modal.mdx +212 -212
package/src/pages/components/post-header.mdx +64 -64
package/src/pages/components/pr-code.mdx +213 -213
package/src/pages/components/product-engine.mdx +418 -418
package/src/pages/components/product-number.mdx +58 -58
package/src/pages/components/product-tile.mdx +51 -51
package/src/pages/components/quote.mdx +33 -33
package/src/pages/components/slimbanner.mdx +260 -260
package/src/pages/components/table.mdx +108 -108
package/src/pages/core/colors.mdx +21 -21
package/src/pages/core/grid.mdx +193 -193
package/src/pages/core/introduction.mdx +77 -77
package/src/pages/core/tooltips.mdx +491 -491
package/src/pages/patterns/introduction.mdx +60 -60
package/src/styles/_variables.scss +70 -70
package/tailwind.config.cjs +8 -8
package/tsconfig.json +28 -28
package/uno-config/index.ts +269 -269
package/uno-config/theme/breakpoints.ts +9 -9
package/uno-config/theme/colors.ts +65 -65
package/uno-config/theme/dimensions.ts +17 -17
package/uno-config/theme/effects.ts +14 -14
package/uno-config/theme/grid.ts +10 -10
package/uno-config/theme/index.ts +26 -26
package/uno-config/theme/shortcuts/buttons.ts +53 -53
package/uno-config/theme/shortcuts/components.ts +124 -124
package/uno-config/theme/shortcuts/index.ts +20 -20
package/uno-config/theme/shortcuts/jumbotron.ts +71 -71
package/uno-config/theme/shortcuts/layout.ts +75 -75
package/uno-config/theme/typography.ts +29 -29
package/uno.config.ts +2 -2

package/src/pages/components/card.mdx CHANGED Viewed

@@ -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>