npm - spoko-design-system - Versions diffs - 0.2.80 → 0.2.81 - Mend

spoko-design-system 0.2.80 → 0.2.81

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 (155) hide show

package/.github/dependabot.yml +11 -11
package/.github/todo.yml +3 -3
package/.github/workflows/deploy.yml +39 -39
package/.stackblitzrc +5 -5
package/.vscode/extensions.json +5 -5
package/.vscode/launch.json +11 -11
package/.vscode/settings.json +5 -5
package/LICENSE +21 -21
package/README.md +113 -113
package/astro-i18next.config.mjs +17 -17
package/astro-i18next.config.ts +10 -10
package/astro.config.mjs +147 -147
package/dev-dist/sw.js +91 -91
package/dev-dist/workbox-c676b6d3.js +3391 -3391
package/index.ts +65 -65
package/package.json +3 -3
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/locales/en/translation.json +8 -8
package/public/locales/pl/translation.json +8 -8
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/src/MyComponent.astro +8 -8
package/src/components/Badge.vue +19 -19
package/src/components/Badges.vue +21 -21
package/src/components/Breadcrumbs.vue +107 -107
package/src/components/Button.vue +55 -55
package/src/components/ButtonCopy.vue +36 -36
package/src/components/Card.astro +27 -27
package/src/components/Carousel.astro +26 -26
package/src/components/Category/CategoriesCarousel.astro +101 -101
package/src/components/Category/CategoriesSidebar.astro +186 -186
package/src/components/Category/CategoryDetails.astro +82 -82
package/src/components/Category/CategoryLink.vue +23 -23
package/src/components/Category/CategorySection.astro +69 -69
package/src/components/Category/CategorySidebarToggler.vue +9 -9
package/src/components/Category/CategoryTile.astro +49 -49
package/src/components/Category/SubCategoryLink.vue +29 -29
package/src/components/CategoryLink.astro +18 -18
package/src/components/Copyright.astro +12 -12
package/src/components/Date.astro +7 -7
package/src/components/Faq.astro +33 -33
package/src/components/FaqItem.astro +96 -96
package/src/components/FeaturesList.vue +41 -41
package/src/components/FuckRussia.vue +62 -62
package/src/components/HandDrive.astro +29 -29
package/src/components/Header/Header.astro +210 -210
package/src/components/Header/SkipToContent.astro +1 -1
package/src/components/Headline.vue +48 -48
package/src/components/Image.astro +30 -30
package/src/components/Jumbatron.vue +40 -40
package/src/components/LeftSidebar.astro +53 -53
package/src/components/MainColors.vue +23 -23
package/src/components/MainInput.vue +15 -15
package/src/components/Modal.astro +27 -27
package/src/components/PageContent.astro +5 -5
package/src/components/PartNumber.vue +27 -27
package/src/components/PostHeader.astro +103 -103
package/src/components/PrCode.vue +141 -141
package/src/components/Product/ProductButton.vue +18 -18
package/src/components/Product/ProductCarousel.astro +35 -35
package/src/components/Product/ProductCodes.vue +174 -174
package/src/components/Product/ProductEngineType.vue +42 -42
package/src/components/Product/ProductImage.astro +40 -40
package/src/components/Product/ProductLink.astro +101 -101
package/src/components/Product/ProductLink.vue +59 -59
package/src/components/Product/ProductLinkInfo.astro +37 -37
package/src/components/Product/ProductNumber.astro +61 -61
package/src/components/ProductCarousel.astro +38 -38
package/src/components/ProductCodes.vue +39 -39
package/src/components/ProductDetailName.vue +52 -52
package/src/components/ProductDetailsList.vue +65 -65
package/src/components/ProductTile.astro +48 -48
package/src/components/Quote.vue +23 -23
package/src/components/ReloadPrompt.astro +50 -50
package/src/components/SlimBanner.vue +72 -72
package/src/components/Table.vue +32 -32
package/src/components/TableOfContents.astro +15 -15
package/src/components/Translations.vue +23 -23
package/src/components/flags/FlagPL.vue +3 -3
package/src/components/flags/FlagUA.vue +2 -2
package/src/components/layout/Container.astro +7 -7
package/src/components/layout/Header.astro +80 -80
package/src/config.ts +56 -56
package/src/design.config.ts +81 -81
package/src/env.d.ts +1 -1
package/src/layouts/Layout.astro +60 -60
package/src/layouts/MainLayout.astro +81 -81
package/src/layouts/partials/FooterCommon.astro +4 -4
package/src/layouts/partials/HeadCommon.astro +44 -44
package/src/layouts/partials/HeadSEO.astro +41 -41
package/src/pages/components/badges.mdx +57 -57
package/src/pages/components/breadcrumbs.mdx +139 -139
package/src/pages/components/buttons.mdx +236 -236
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 +115 -115
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 +38 -38
package/src/pages/components/headline.mdx +152 -152
package/src/pages/components/icons.astro +48 -48
package/src/pages/components/image.mdx +513 -513
package/src/pages/components/input.mdx +45 -45
package/src/pages/components/jumbatron.mdx +95 -95
package/src/pages/components/modal.mdx +64 -64
package/src/pages/components/post-header.mdx +60 -60
package/src/pages/components/pr-code.mdx +65 -65
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 +35 -35
package/src/pages/components/table.mdx +108 -108
package/src/pages/core/colors.mdx +10 -10
package/src/pages/core/grid.mdx +89 -89
package/src/pages/core/introduction.mdx +77 -77
package/src/pages/core/shadows.astro +20 -20
package/src/pages/core/typography.astro +47 -47
package/src/pages/index.astro +126 -126
package/src/pages/patterns/introduction.mdx +60 -60
package/src/pwa.ts +12 -12
package/src/styles/_variables.scss +70 -70
package/src/styles/base/base.css +184 -184
package/src/styles/base/grid.css +92 -92
package/src/styles/base/typography.css +70 -70
package/src/styles/content.css +73 -73
package/src/styles/main.css +7 -7
package/src/types/Product.ts +31 -31
package/src/types/astro.d.ts +3 -3
package/src/utils/product/getPriceFormatted.ts +15 -15
package/src/utils/product/getProductChecklist.ts +17 -17
package/src/utils/product/useFormatProductNumber.ts +41 -41
package/src/utils/seo/getShorterDescription.ts +14 -14
package/src/utils/text/formatDate.ts +5 -5
package/src/utils/text/formatLocaleNumber.ts +6 -6
package/src/utils/text/formatPad.ts +12 -12
package/src/utils/text/getNumberFormatted.ts +33 -33
package/src/utils/text/getTranslatedLink.ts +5 -5
package/src/utils/text.ts +28 -28
package/tailwind.config.cjs +8 -8
package/tsconfig.json +28 -28
package/uno.config.ts +256 -256

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