npm - spoko-design-system - Versions diffs - 0.9.5 → 1.0.0 - Mend

spoko-design-system 0.9.5 → 1.0.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 (179) hide show

package/.astro/content.d.ts +1 -1
package/.astro/settings.json +4 -4
package/.astro/types.d.ts +2 -1
package/.github/dependabot.yml +11 -11
package/.github/todo.yml +3 -3
package/.github/workflows/deploy.yml +39 -39
package/.github/workflows/release.yml +64 -0
package/.releaserc.json +93 -0
package/.stackblitzrc +5 -5
package/.vscode/extensions.json +5 -5
package/.vscode/launch.json +11 -11
package/.vscode/settings.json +5 -5
package/CHANGELOG.md +12 -0
package/CONTRIBUTING.md +183 -0
package/LICENSE +21 -21
package/README.md +116 -116
package/astro-i18next.config.mjs +17 -17
package/astro-i18next.config.ts +10 -10
package/astro.config.mjs +86 -86
package/dev-dist/sw.js +91 -91
package/dev-dist/workbox-c676b6d3.js +3391 -3391
package/icon.config.ts +310 -310
package/index.ts +70 -70
package/package.json +22 -12
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/locales/en/translation.json +12 -12
package/public/locales/pl/translation.json +12 -12
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 +94 -94
package/src/components/Button.vue +101 -101
package/src/components/ButtonCopy.astro +183 -183
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/CategoryDetails.astro +169 -169
package/src/components/Category/CategoryLink.vue +28 -28
package/src/components/Category/CategorySidebarToggler.vue +9 -9
package/src/components/Category/CategoryTile.astro +37 -37
package/src/components/Category/CategoryViewToggler.astro +89 -89
package/src/components/Category/SubCategoryLink.vue +19 -19
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 +80 -80
package/src/components/FeaturesList.vue +37 -37
package/src/components/FuckRussia.vue +62 -62
package/src/components/HandDrive.astro +55 -29
package/src/components/Header/Header.astro +210 -210
package/src/components/Header/SkipToContent.astro +1 -1
package/src/components/Headline.vue +87 -87
package/src/components/Image.astro +30 -30
package/src/components/LeftSidebar.astro +53 -53
package/src/components/MainColors.vue +22 -22
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/Post/PostCategories.astro +41 -41
package/src/components/Post/PostCategories.vue +30 -30
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/ProductColors.vue +1 -1
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/ProductModels.vue +4 -2
package/src/components/Product/ProductNumber.astro +60 -60
package/src/components/Product/ProductPositions.vue +1 -1
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 +216 -216
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 → layout}/CallToAction.astro +52 -52
package/src/components/{Layout → layout}/Container.astro +7 -7
package/src/components/{Layout → layout}/Header.astro +80 -80
package/src/config.ts +56 -56
package/src/design.config.ts +98 -98
package/src/env.d.ts +6 -6
package/src/layouts/Layout.astro +61 -61
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 +360 -360
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 +105 -38
package/src/pages/components/headline.mdx +137 -137
package/src/pages/components/icons.astro +135 -135
package/src/pages/components/image.mdx +513 -513
package/src/pages/components/input.mdx +367 -367
package/src/pages/components/jumbotron.mdx +359 -359
package/src/pages/components/modal.mdx +64 -64
package/src/pages/components/post-header.mdx +64 -64
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 +49 -49
package/src/pages/index.astro +133 -133
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 +19 -19
package/tailwind.config.cjs +8 -8
package/tsconfig.json +28 -28
package/uno-config/index.ts +268 -268
package/uno-config/theme/breakpoints.ts +9 -9
package/uno-config/theme/colors.ts +64 -64
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 +28 -28
package/uno-config/theme/shortcuts/buttons.ts +53 -53
package/uno-config/theme/shortcuts/components.ts +123 -123
package/uno-config/theme/shortcuts/index.ts +20 -20
package/uno-config/theme/shortcuts/layout.ts +74 -74
package/uno-config/theme/typography.ts +29 -29
package/uno.config.ts +2 -2

package/src/layouts/MainLayout.astro CHANGED Viewed

@@ -1,81 +1,81 @@
----
-import HeadCommon from "./partials/HeadCommon.astro";
-import HeadSEO from "../layouts/partials/HeadSEO.astro";
-import Header from "../components/Header/Header.astro";
-import PageContent from "../components/PageContent.astro";
-import LeftSidebar from "../components/LeftSidebar.astro";
-import * as CONFIG from "../config";
-import { t, changeLanguage } from "i18next";
-import "../styles/main.css";
-import Copyright from "../components/Copyright.astro";
-const locale = "en";
-changeLanguage(locale);
-const { content = {} } = Astro.props;
-const currentPage = Astro.url.pathname;
-const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
----
-<script>
-  // Swiper Element
-  import { register } from "swiper/element/bundle";
-  document.addEventListener("astro:page-load", () => {
-    register();
-  });
-</script>
-<html dir={content.dir ?? "ltr"} lang={content.lang ?? "en-us"} class="initial">
-  <head>
-    <HeadCommon />
-    <HeadSEO content={content} canonicalURL={canonicalURL} />
-    <title>
-      {
-        content.title
-          ? `${content.title} 🚀 ${CONFIG.SITE.title}`
-          : CONFIG.SITE.title
-      }
-    </title>
-  </head>
-  <body class="bg-blue-50">
-    <div class="sticky top-0 z-20 w-full bg-white/70">
-      <Header currentPage={currentPage} />
-    </div>
-    <div class="flex bg-white z-10 mb-11 relative">
-      <div class="sticky top-0 flex lg:(h-screen w-64) z-50">
-        <div class="mr-auto" transition:name="sidebar">
-          <LeftSidebar currentPage={currentPage} />
-        </div>
-      </div>
-      <main class="pb-4 px-4 sm:px-8 col-auto sm:(pb-32) overflow-auto w-full">
-        <PageContent content={content} transition:name="content">
-          <slot />
-        </PageContent>
-      </main>
-    </div>
-    <footer>
-      <Copyright class="fixed bottom-0 z-0 w-full">
-        <a
-          slot="middle-item"
-          href="https://spoko.space"
-          target="_blank"
-          rel="follow noopener"
-          class="flex my-auto items-center mx-auto"
-          title={`Proudly made in Poland by spoko.space`}
-        >
-          <div class="text-xxs md:text-xs mr-1 mt-0.5 whitespace-nowrap">
-            createdy by
-          </div>
-          <img
-            class="h-4 md:h-5 w-min"
-            src="/spoko.space.svg"
-            alt="Modern Websites"
-            width="126"
-            height="23"
-            loading="lazy"
-          />
-        </a>
-      </Copyright>
-    </footer>
-  </body>
-</html>
+---
+import HeadCommon from "./partials/HeadCommon.astro";
+import HeadSEO from "../layouts/partials/HeadSEO.astro";
+import Header from "../components/Header/Header.astro";
+import PageContent from "../components/PageContent.astro";
+import LeftSidebar from "../components/LeftSidebar.astro";
+import * as CONFIG from "../config";
+import { t, changeLanguage } from "i18next";
+import "../styles/main.css";
+import Copyright from "../components/Copyright.astro";
+const locale = "en";
+changeLanguage(locale);
+const { content = {} } = Astro.props;
+const currentPage = Astro.url.pathname;
+const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
+---
+<script>
+  // Swiper Element
+  import { register } from "swiper/element/bundle";
+  document.addEventListener("astro:page-load", () => {
+    register();
+  });
+</script>
+<html dir={content.dir ?? "ltr"} lang={content.lang ?? "en-us"} class="initial">
+  <head>
+    <HeadCommon />
+    <HeadSEO content={content} canonicalURL={canonicalURL} />
+    <title>
+      {
+        content.title
+          ? `${content.title} 🚀 ${CONFIG.SITE.title}`
+          : CONFIG.SITE.title
+      }
+    </title>
+  </head>
+  <body class="bg-blue-50">
+    <div class="sticky top-0 z-20 w-full bg-white/70">
+      <Header currentPage={currentPage} />
+    </div>
+    <div class="flex bg-white z-10 mb-11 relative">
+      <div class="sticky top-0 flex lg:(h-screen w-64) z-50">
+        <div class="mr-auto" transition:name="sidebar">
+          <LeftSidebar currentPage={currentPage} />
+        </div>
+      </div>
+      <main class="pb-4 px-4 sm:px-8 col-auto sm:(pb-32) overflow-auto w-full">
+        <PageContent content={content} transition:name="content">
+          <slot />
+        </PageContent>
+      </main>
+    </div>
+    <footer>
+      <Copyright class="fixed bottom-0 z-0 w-full">
+        <a
+          slot="middle-item"
+          href="https://spoko.space"
+          target="_blank"
+          rel="follow noopener"
+          class="flex my-auto items-center mx-auto"
+          title={`Proudly made in Poland by spoko.space`}
+        >
+          <div class="text-xxs md:text-xs mr-1 mt-0.5 whitespace-nowrap">
+            createdy by
+          </div>
+          <img
+            class="h-4 md:h-5 w-min"
+            src="/spoko.space.svg"
+            alt="Modern Websites"
+            width="126"
+            height="23"
+            loading="lazy"
+          />
+        </a>
+      </Copyright>
+    </footer>
+  </body>
+</html>

package/src/layouts/partials/FooterCommon.astro CHANGED Viewed

@@ -1,5 +1,5 @@
----
-import ReloadPrompt from "../../components/ReloadPrompt.astro";
----
+---
+import ReloadPrompt from "../../components/ReloadPrompt.astro";
+---
 <ReloadPrompt />

package/src/layouts/partials/HeadCommon.astro CHANGED Viewed

@@ -1,44 +1,44 @@
----
-import { ViewTransitions } from "astro:transitions";
-import { pwaInfo } from 'virtual:pwa-info';
----
-<!-- Global Metadata -->
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width" />
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
-<link rel="sitemap" href="/sitemap-index.xml" />
-<!-- Preload Fonts -->
-<!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" /> -->
-<!-- Scrollable a11y code helper -->
-<script src="/make-scrollable-code-focusable.js" is:inline></script>
-<!-- This is intentionally inlined to avoid FOUC -->
-<script is:inline>
-	// const root = document.documentElement;
-	// const theme = localStorage.getItem('theme');
-	// if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-	// 	root.classList.add('dark');
-	// } else {
-	// 	root.classList.remove('dark');
-	// }
-</script>
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=" is:inline></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', '');
-</script> -->
-<ViewTransitions />
-{ pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} /> }
+---
+import { ViewTransitions } from "astro:transitions";
+import { pwaInfo } from 'virtual:pwa-info';
+---
+<!-- Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width" />
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+<link rel="sitemap" href="/sitemap-index.xml" />
+<!-- Preload Fonts -->
+<!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" /> -->
+<!-- Scrollable a11y code helper -->
+<script src="/make-scrollable-code-focusable.js" is:inline></script>
+<!-- This is intentionally inlined to avoid FOUC -->
+<script is:inline>
+	// const root = document.documentElement;
+	// const theme = localStorage.getItem('theme');
+	// if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+	// 	root.classList.add('dark');
+	// } else {
+	// 	root.classList.remove('dark');
+	// }
+</script>
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=" is:inline></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '');
+</script> -->
+<ViewTransitions />
+{ pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} /> }

package/src/layouts/partials/HeadSEO.astro CHANGED Viewed

@@ -1,41 +1,41 @@
----
-import { SITE, OPEN_GRAPH } from '../../config';
-export interface Props {
-	content: any;
-	// site: any;
-	canonicalURL: URL | string;
-}
-const { content = {}, canonicalURL } = Astro.props;
-const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title;
-// const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src;
-// const canonicalImageSrc = new URL(imageSrc, Astro.site);
-const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
----
-<!-- Page Metadata -->
-<link rel="canonical" href={canonicalURL} />
-<!-- OpenGraph Tags -->
-<meta property="og:title" content={formattedContentTitle} />
-<meta property="og:type" content="article" />
-<meta property="og:url" content={canonicalURL} />
-<meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} />
-<!-- <meta property="og:image" content={canonicalImageSrc} /> -->
-<meta property="og:image:alt" content={imageAlt} />
-<meta name="description" property="og:description" content={content.description ? content.description : SITE.description} />
-<meta property="og:site_name" content={SITE.title} />
-<!-- Twitter Tags -->
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
-<meta name="twitter:title" content={formattedContentTitle} />
-<meta name="twitter:description" content={content.description ? content.description : SITE.description} />
-<!-- <meta name="twitter:image" content={canonicalImageSrc} /> -->
-<meta name="twitter:image:alt" content={imageAlt} />
-<!--
-  TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
-  Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
-  https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
-  Even better, there's a Vue component that integrates with `schema-dts`: https://github.com/vueuse/schema-org
--->
+---
+import { SITE, OPEN_GRAPH } from '../../config';
+export interface Props {
+	content: any;
+	// site: any;
+	canonicalURL: URL | string;
+}
+const { content = {}, canonicalURL } = Astro.props;
+const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title;
+// const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src;
+// const canonicalImageSrc = new URL(imageSrc, Astro.site);
+const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
+---
+<!-- Page Metadata -->
+<link rel="canonical" href={canonicalURL} />
+<!-- OpenGraph Tags -->
+<meta property="og:title" content={formattedContentTitle} />
+<meta property="og:type" content="article" />
+<meta property="og:url" content={canonicalURL} />
+<meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} />
+<!-- <meta property="og:image" content={canonicalImageSrc} /> -->
+<meta property="og:image:alt" content={imageAlt} />
+<meta name="description" property="og:description" content={content.description ? content.description : SITE.description} />
+<meta property="og:site_name" content={SITE.title} />
+<!-- Twitter Tags -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
+<meta name="twitter:title" content={formattedContentTitle} />
+<meta name="twitter:description" content={content.description ? content.description : SITE.description} />
+<!-- <meta name="twitter:image" content={canonicalImageSrc} /> -->
+<meta name="twitter:image:alt" content={imageAlt} />
+<!--
+  TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
+  Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
+  https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
+  Even better, there's a Vue component that integrates with `schema-dts`: https://github.com/vueuse/schema-org
+-->

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

@@ -1,57 +1,57 @@
----
-title: "Badges"
-layout: "../../layouts/MainLayout.astro"
----
-import Badges from '../../components/Badges.vue'
-# Product badges
-Extra product badges (labels).
-## Badges - GTI
-<div class="component-preview">
-    <div class="relative min-h-19">
-            <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
-    </div>
-</div>
-```js
-<div class="relative min-h-10">
-    <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
-</div>
-```
-## Badge on image
-<div class="component-preview">
-<div class="relative">
-    <img src="https://placehold.co/300x200" alt="image alt" />
-    <Badges badges={['Motorsport']} class="top-2" />
-</div>
-</div>
-```js
-<div class="relative">
-    <img src="https://placehold.co/300x200" alt="image alt" />
-    <Badges badges={['Motorsport']} class="top-2" />
-</div>
-```
-## Few badges on image
-<div class="component-preview">
-<div class="relative">
-    <img src="https://placehold.co/300x200" alt="image alt" />
-    <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
-</div>
-</div>
-```js
-<div class="relative">
-    <img src="https://placehold.co/300x200" alt="image alt" />
-    <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
-</div>
-```
+---
+title: "Badges"
+layout: "../../layouts/MainLayout.astro"
+---
+import Badges from '../../components/Badges.vue'
+# Product badges
+Extra product badges (labels).
+## Badges - GTI
+<div class="component-preview">
+    <div class="relative min-h-19">
+            <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
+    </div>
+</div>
+```js
+<div class="relative min-h-10">
+    <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
+</div>
+```
+## Badge on image
+<div class="component-preview">
+<div class="relative">
+    <img src="https://placehold.co/300x200" alt="image alt" />
+    <Badges badges={['Motorsport']} class="top-2" />
+</div>
+</div>
+```js
+<div class="relative">
+    <img src="https://placehold.co/300x200" alt="image alt" />
+    <Badges badges={['Motorsport']} class="top-2" />
+</div>
+```
+## Few badges on image
+<div class="component-preview">
+<div class="relative">
+    <img src="https://placehold.co/300x200" alt="image alt" />
+    <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
+</div>
+</div>
+```js
+<div class="relative">
+    <img src="https://placehold.co/300x200" alt="image alt" />
+    <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
+</div>
+```