@levo-so/blocks 0.1.75 → 0.1.76

package/src/blocks/cards/cards-18.schema.ts

@@ -0,0 +1,1040 @@
+import type { IBlock } from "@levo-so/studio";
+
+const MEDIA = {
+  id: "7141014160938075687",
+  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+  kind: "image",
+  mimetype: "image/png",
+  srcset: {
+    "1080w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+    "1200w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+    "1920w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+    "320w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+    "640w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+    "750w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+    "828w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+    path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  "header-wrapper": null,
+  header: "Popular this month",
+  description: "Popular this month Popular this month Popular this month",
+  blogs_levoGroup: null,
+  "pagination-wrapper": null,
+  "pagination-left": "Previous",
+  "pagination-text": "",
+  "pagination-right": "Next",
+  cards: Array(8)
+    .fill(0)
+    .map((v) => ({
+      card: null,
+      media: MEDIA,
+      "card-content-wrapper": null,
+      "card-header": null,
+      "header-icon": {
+        kind: "icon",
+        data: {
+          id: "calendar-1",
+          label: "Calendar 1",
+          tags: ["calendar", "custom", "time"],
+          svgCode:
+            '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M8 5.75C7.59 5.75 7.25 5.41 7.25 5V2C7.25 1.59 7.59 1.25 8 1.25C8.41 1.25 8.75 1.59 8.75 2V5C8.75 5.41 8.41 5.75 8 5.75Z" fill="var(--color-icon-primary)"/>\n<path d="M16 5.75C15.59 5.75 15.25 5.41 15.25 5V2C15.25 1.59 15.59 1.25 16 1.25C16.41 1.25 16.75 1.59 16.75 2V5C16.75 5.41 16.41 5.75 16 5.75Z" fill="var(--color-icon-primary)"/>\n<path d="M8.5 14.5001C8.37 14.5001 8.24 14.4701 8.12 14.4201C7.99 14.3701 7.89 14.3001 7.79 14.2101C7.61 14.0201 7.5 13.7701 7.5 13.5001C7.5 13.3701 7.53 13.2401 7.58 13.1201C7.63 13.0001 7.7 12.8901 7.79 12.7901C7.89 12.7001 7.99 12.6301 8.12 12.5801C8.48 12.4301 8.93 12.5101 9.21 12.7901C9.39 12.9801 9.5 13.2401 9.5 13.5001C9.5 13.5601 9.49 13.6301 9.48 13.7001C9.47 13.7601 9.45 13.8201 9.42 13.8801C9.4 13.9401 9.37 14.0001 9.33 14.0601C9.3 14.1101 9.25 14.1601 9.21 14.2101C9.02 14.3901 8.76 14.5001 8.5 14.5001Z" fill="var(--color-icon-primary)"/>\n<path d="M12 14.5C11.87 14.5 11.74 14.47 11.62 14.42C11.49 14.37 11.39 14.3 11.29 14.21C11.11 14.02 11 13.77 11 13.5C11 13.37 11.03 13.24 11.08 13.12C11.13 13 11.2 12.89 11.29 12.79C11.39 12.7 11.49 12.63 11.62 12.58C11.98 12.42 12.43 12.51 12.71 12.79C12.89 12.98 13 13.24 13 13.5C13 13.56 12.99 13.63 12.98 13.7C12.97 13.76 12.95 13.82 12.92 13.88C12.9 13.94 12.87 14 12.83 14.06C12.8 14.11 12.75 14.16 12.71 14.21C12.52 14.39 12.26 14.5 12 14.5Z" fill="var(--color-icon-primary)"/>\n<path d="M15.5 14.5C15.37 14.5 15.24 14.47 15.12 14.42C14.99 14.37 14.89 14.3 14.79 14.21C14.75 14.16 14.71 14.11 14.67 14.06C14.63 14 14.6 13.94 14.58 13.88C14.55 13.82 14.53 13.76 14.52 13.7C14.51 13.63 14.5 13.56 14.5 13.5C14.5 13.24 14.61 12.98 14.79 12.79C14.89 12.7 14.99 12.63 15.12 12.58C15.49 12.42 15.93 12.51 16.21 12.79C16.39 12.98 16.5 13.24 16.5 13.5C16.5 13.56 16.49 13.63 16.48 13.7C16.47 13.76 16.45 13.82 16.42 13.88C16.4 13.94 16.37 14 16.33 14.06C16.3 14.11 16.25 14.16 16.21 14.21C16.02 14.39 15.76 14.5 15.5 14.5Z" fill="var(--color-icon-primary)"/>\n<path d="M8.5 17.9999C8.37 17.9999 8.24 17.97 8.12 17.92C8 17.87 7.89 17.7999 7.79 17.7099C7.61 17.5199 7.5 17.2599 7.5 16.9999C7.5 16.8699 7.53 16.7399 7.58 16.6199C7.63 16.4899 7.7 16.38 7.79 16.29C8.16 15.92 8.84 15.92 9.21 16.29C9.39 16.48 9.5 16.7399 9.5 16.9999C9.5 17.2599 9.39 17.5199 9.21 17.7099C9.02 17.8899 8.76 17.9999 8.5 17.9999Z" fill="var(--color-icon-primary)"/>\n<path d="M12 17.9999C11.74 17.9999 11.48 17.8899 11.29 17.7099C11.11 17.5199 11 17.2599 11 16.9999C11 16.8699 11.03 16.7399 11.08 16.6199C11.13 16.4899 11.2 16.38 11.29 16.29C11.66 15.92 12.34 15.92 12.71 16.29C12.8 16.38 12.87 16.4899 12.92 16.6199C12.97 16.7399 13 16.8699 13 16.9999C13 17.2599 12.89 17.5199 12.71 17.7099C12.52 17.8899 12.26 17.9999 12 17.9999Z" fill="var(--color-icon-primary)"/>\n<path d="M15.5 18C15.24 18 14.98 17.89 14.79 17.71C14.7 17.62 14.63 17.51 14.58 17.38C14.53 17.26 14.5 17.13 14.5 17C14.5 16.87 14.53 16.74 14.58 16.62C14.63 16.49 14.7 16.38 14.79 16.29C15.02 16.06 15.37 15.95 15.69 16.02C15.76 16.03 15.82 16.05 15.88 16.08C15.94 16.1 16 16.13 16.06 16.17C16.11 16.2 16.16 16.25 16.21 16.29C16.39 16.48 16.5 16.74 16.5 17C16.5 17.26 16.39 17.52 16.21 17.71C16.02 17.89 15.76 18 15.5 18Z" fill="var(--color-icon-primary)"/>\n<path d="M20.5 9.83997H3.5C3.09 9.83997 2.75 9.49997 2.75 9.08997C2.75 8.67997 3.09 8.33997 3.5 8.33997H20.5C20.91 8.33997 21.25 8.67997 21.25 9.08997C21.25 9.49997 20.91 9.83997 20.5 9.83997Z" fill="var(--color-icon-primary)"/>\n<path d="M16 22.75H8C4.35 22.75 2.25 20.65 2.25 17V8.5C2.25 4.85 4.35 2.75 8 2.75H16C19.65 2.75 21.75 4.85 21.75 8.5V17C21.75 20.65 19.65 22.75 16 22.75ZM8 4.25C5.14 4.25 3.75 5.64 3.75 8.5V17C3.75 19.86 5.14 21.25 8 21.25H16C18.86 21.25 20.25 19.86 20.25 17V8.5C20.25 5.64 18.86 4.25 16 4.25H8Z" fill="var(--color-icon-primary)"/>\n</svg>',
+        },
+      },
+      "publish-date": "<p>Nov 5, 2025</p>",
+      "card-content": null,
+      title: "A glimpse of the world's heart",
+      description:
+        "I wanted to visit Colombia’s sacred mountains. But there are some places we cannot go – and some things we cannot know.",
+      "card-footer": null,
+      "author-image": {
+        kind: "custom",
+        data: MEDIA,
+      },
+      category: "Popular",
+      "author-name": "Floyd miles",
+      "author-description": "Lead Editor",
+      "card-reading-time-wrapper": null,
+      "reading-time-icon": {
+        kind: "icon",
+        data: {
+          id: "clock",
+          label: "Clock",
+          tags: ["clock", "custom", "directional", "time"],
+          svgCode:
+            '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z" fill="var(--color-icon-primary)"/>\n<path d="M15.7096 15.93C15.5796 15.93 15.4496 15.9 15.3296 15.82L12.2296 13.97C11.4596 13.51 10.8896 12.5 10.8896 11.61V7.51001C10.8896 7.10001 11.2296 6.76001 11.6396 6.76001C12.0496 6.76001 12.3896 7.10001 12.3896 7.51001V11.61C12.3896 11.97 12.6896 12.5 12.9996 12.68L16.0996 14.53C16.4596 14.74 16.5696 15.2 16.3596 15.56C16.2096 15.8 15.9596 15.93 15.7096 15.93Z" fill="var(--color-icon-primary)"/>\n</svg>',
+        },
+      },
+      "reading-time": "6 Minutes",
+      cta: "Read More",
+    })),
+  "header-ctas_levoGroup": null,
+  "header-ctas": [
+    {
+      "header-cta": "Learn More",
+    },
+    {
+      "header-cta": "View All",
+    },
+  ],
+};
+
+export type ICards18Content = typeof DEFAULT_CONTENT;
+
+export const Cards18: IBlock = {
+  category_id: "cards",
+  title: "Cards 18",
+  key: "cards-18",
+  version: "v1",
+  prompt_description:
+    "Three-column grid of news or blog cards, each with a large image, headline, summary text, and info row; section headline and a top-right “View all” button, plus pagination controls below.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      // Layout only – no hint needed
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      // Layout only – no hint needed
+    },
+    {
+      key: "header-wrapper",
+      label: "Header Wrapper",
+      field_interface: "BoxWidget",
+      // Visual grouping – no hint needed
+    },
+    {
+      key: "title-wrapper",
+      label: "Title Wrapper",
+      field_interface: "BoxWidget",
+      // Visual grouping – no hint needed
+    },
+    {
+      key: "header-icon",
+      label: "Header Icon",
+      field_interface: "IconWidget",
+      // Visual grouping – no hint needed
+    },
+    {
+      key: "header-text-wrapper",
+      label: "Header Text Wrapper",
+      field_interface: "BoxWidget",
+      // Visual grouping – no hint needed
+    },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Section heading introducing featured or trending blog articles for this month. Make it concise, bold, and inviting. Use a confident and energetic tone.",
+        usecase: "main_title",
+        min_characters: 16,
+        max_characters: 30,
+      },
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Section description introducing featured or trending blog articles for this month. Make it concise, bold, and inviting. Use a confident and energetic tone.",
+        min_characters: 16,
+        max_characters: 30,
+      },
+    },
+    {
+      key: "header-ctas",
+      label: "Header CTAs",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "header-cta",
+          label: "Header CTA",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Call-to-action button for manual user interaction. Can be configured to navigate to blog listing or other actions.",
+            usecase: "button",
+            min_characters: 6,
+            max_characters: 16,
+          },
+        },
+      ],
+      // No hint needed: layout grouping only
+    },
+    {
+      key: "cards",
+      label: "Cards",
+      kind: "group",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Auto-populated grid of blog article cards. Each card displays real blog data with automatic click handling. Styling remains configurable.",
+        min_items: 6, // 6 visible in grid at a time
+        max_items: 9, // allows for paginated dataset
+      },
+      fields: [
+        {
+          key: "card",
+          label: "Card",
+          field_interface: "BoxWidget",
+          // Card container – no hint needed
+        },
+        {
+          key: "media",
+          label: "Media",
+          field_interface: "MediaWidget",
+          hint: {
+            prompt_description:
+              "Automatically populated from blog cover_image. Styling remains configurable.",
+            orientation: "landscape",
+            size: "large",
+            usecase: "hero",
+          },
+        },
+        {
+          key: "card-info-wrapper",
+          label: "Card Info Wrapper",
+          field_interface: "BoxWidget",
+          // Layout grouping – no hint needed
+        },
+        {
+          key: "card-content",
+          label: "Card Content",
+          field_interface: "BoxWidget",
+          // Layout grouping – no hint needed
+        },
+        {
+          key: "card-header-wrapper",
+          label: "Card Header Wrapper",
+          field_interface: "BoxWidget",
+          // Layout grouping – no hint needed
+        },
+        {
+          key: "card-header",
+          label: "Card Header",
+          field_interface: "BoxWidget",
+          // Layout grouping – no hint needed
+        },
+        {
+          key: "card-reading-time-wrapper",
+          label: "Card Reading Time Wrapper",
+          field_interface: "BoxWidget",
+          // Layout only – no hint needed
+        },
+        {
+          key: "reading-time-icon",
+          label: "Reading Time Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Small icon placed next to the blog reading time, visually indicating time (e.g., clock or stopwatch). Minimalistic style preferred.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "reading-time",
+          label: "Reading Time",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Automatically populated from blog data. Styling remains configurable.",
+            usecase: "reading_time",
+            min_characters: 6,
+            max_characters: 15,
+          },
+        },
+        {
+          key: "header-icon",
+          label: "Header Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Small icon visually indicating the blog type or category next to the blog type text, such as a newspaper or tag. Should be stylish, clear, and monochrome if possible.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "publish-date",
+          label: "Publish Date",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Automatically populated from blog published_at date. Styling remains configurable.",
+            usecase: "date",
+            min_characters: 10,
+            max_characters: 27,
+          },
+        },
+        {
+          key: "card-content-wrapper",
+          label: "Card Content Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Automatically populated from blog title. Styling remains configurable.",
+            usecase: "title",
+            min_characters: 28,
+            max_characters: 60,
+          },
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Automatically populated from blog excerpt. Styling remains configurable.",
+            usecase: "description",
+            min_characters: 60,
+            max_characters: 130,
+          },
+        },
+        {
+          key: "card-footer",
+          label: "Card Footer",
+          field_interface: "BoxWidget",
+          // Layout only – no hint needed
+        },
+        {
+          key: "card-author",
+          label: "Card Author",
+          field_interface: "BoxWidget",
+          // Layout only – no hint needed
+        },
+        {
+          key: "author-image",
+          label: "Author Image",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Circular avatar image of the blog post author. Shows a headshot with a neutral background that is easily identifiable at a small size.",
+            orientation: "square",
+            size: "icon",
+            usecase: "avatar",
+          },
+        },
+        {
+          key: "author-info-wrapper",
+          label: "Author Info Wrapper",
+          field_interface: "BoxWidget",
+          // Layout only – no hint needed
+        },
+        {
+          key: "author-name",
+          label: "Author Name",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Automatically populated from blog author data. Styling remains configurable.",
+            usecase: "author",
+            min_characters: 5,
+            max_characters: 25,
+          },
+        },
+        {
+          key: "author-description",
+          label: "Author Description",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "category_wrapper",
+          label: "Category Wrapper",
+          field_interface: "BoxWidget",
+          // No hint needed: layout only
+        },
+        {
+          key: "category_icon",
+          label: "Category Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Small icon representing time or date, displayed next to the category. Should be simple, clear, and easily recognizable at small sizes.",
+            size: "icon",
+            orientation: "square",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "category",
+          label: "Category",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "cta",
+          label: "CTA",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Call-to-action button for manual user interaction. Can be configured to link to blog details or other actions.",
+            usecase: "button",
+            min_characters: 6,
+            max_characters: 16,
+          },
+        },
+      ],
+    },
+    {
+      key: "pagination-wrapper",
+      label: "Pagination Wrapper",
+      field_interface: "BoxWidget",
+      // Layout grouping only – no hint needed
+    },
+    {
+      key: "pagination-left",
+      label: "Pagination Left",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Pagination control button to navigate to the previous page of blog cards. Keep the label brief, such as 'Previous' or a left arrow. Tone should be neutral and functional.",
+        usecase: "button",
+        min_characters: 5,
+        max_characters: 12,
+      },
+    },
+    {
+      key: "pagination-text",
+      label: "Pagination text",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Displays current and total page number in the paginator, e.g. '1/3' or 'Page 2 of 4'. Should be minimal, clear, and unambiguous.",
+        min_characters: 3,
+        max_characters: 12,
+      },
+    },
+    {
+      key: "pagination-right",
+      label: "Pagination Right",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Pagination control button to navigate to the next page of blog cards. Should be concise, such as 'Next' or a right arrow. Neutral tone.",
+        usecase: "button",
+        min_characters: 4,
+        max_characters: 8,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {},
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "7xl",
+          tablet: {
+            "row-gap": "3xl",
+          },
+          mobile: {
+            "row-gap": "4xl",
+          },
+        },
+        "header-wrapper": {
+          display: "flex",
+          width: "full",
+          "align-items": "center",
+          "justify-content": "space-between",
+          tablet: {},
+          mobile: {
+            "row-gap": "2xs",
+            "flex-direction": "column",
+            "align-items": "center",
+            "justify-content": "flex-start",
+          },
+        },
+        header: {
+          flex: "1",
+          mobile: {
+            "text-align": "center",
+          },
+        },
+        "header-ctas_levoGroup": {
+          display: "flex",
+          "column-gap": "md",
+          "align-items": "center",
+        },
+        "header-ctas": [
+          {
+            "header-cta": {
+              "white-space": "nowrap",
+            },
+          },
+          {
+            "header-cta": {
+              "white-space": "nowrap",
+            },
+          },
+        ],
+        cards_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          "row-gap": "2xl",
+          "column-gap": "2xl",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+            "row-gap": "xl",
+            "column-gap": "xl",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+            "row-gap": "2xl",
+          },
+        },
+        cards_levoGroupItem: {
+          card: {
+            display: "flex",
+            "flex-direction": "row",
+            "row-gap": "xl",
+            tablet: {
+              "row-gap": "md",
+              "flex-direction": "column",
+            },
+            "border-style": "solid",
+            "border-width": "1.5px",
+            "border-radius": "xl",
+            "padding-top": "base",
+            "padding-left": "base",
+            "padding-right": "base",
+            "padding-bottom": "base",
+            "column-gap": "base",
+            mobile: {
+              "flex-direction": "column",
+            },
+            "align-items": "stretch",
+            "justify-content": "start",
+          },
+          media: {
+            height: "100%",
+            width: "40%",
+            "object-fit": "cover",
+            tablet: {
+              width: "100%",
+              height: "128px",
+            },
+            "border-radius": "lg",
+            "border-style": "solid",
+            "border-width": "1px",
+            "border-color": "border",
+          },
+          "card-info-wrapper": {
+            display: "flex",
+            width: "full",
+            "flex-direction": "column",
+            "row-gap": "base",
+            tablet: {
+              "row-gap": "xs",
+            },
+          },
+          "card-content": {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "xs",
+            tablet: {
+              "row-gap": "2xs",
+            },
+          },
+          "card-header": {
+            display: "flex",
+            width: "full",
+            "align-items": "center",
+            "column-gap": "4xs",
+            tablet: {
+              "column-gap": "2xs",
+            },
+          },
+          "header-icon": {
+            "object-fit": "contain",
+            tablet: {
+              height: "18px",
+              width: "18px",
+            },
+            height: "18px",
+            width: "18px",
+            "font-size": "18px",
+          },
+          title: {
+            "font-weight": 600,
+            "font-size": "lg",
+            display: "-webkit-box",
+            "-webkit-line-clamp": "2",
+            "-webkit-box-orient": "vertical",
+            overflow: "hidden",
+            "margin-top": "4xs",
+          },
+          description: {
+            display: "-webkit-box",
+            "-webkit-line-clamp": "3",
+            "-webkit-box-orient": "vertical",
+            overflow: "hidden",
+            "font-size": "xs",
+            "margin-top": "2xs",
+          },
+          "card-footer": {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "md",
+            "justify-content": "space-between",
+            "padding-left": "none",
+            "margin-top": "xs",
+          },
+          "card-author": {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "2xs",
+          },
+          "author-image": {
+            height: "24px",
+            width: "24px",
+            "border-radius": "100%",
+          },
+          "author-name": {
+            "font-size": "xs",
+          },
+          "card-reading-time-wrapper": {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "3xs",
+            "margin-left": "none",
+          },
+          "reading-time-icon": {
+            height: "16px",
+            width: "16px",
+            "object-fit": "contain",
+          },
+          "reading-time": {
+            "font-size": "xs",
+          },
+          cta: {
+            display: "none",
+          },
+          "card-header-wrapper": {
+            display: "flex",
+            "justify-content": "space-between",
+          },
+          "publish-date": {
+            "font-size": "xs",
+          },
+          category_wrapper: {
+            display: "block",
+            "background-color": "brandSecondary",
+            "padding-left": "sm",
+            "padding-right": "sm",
+            "padding-top": "3xs",
+            "padding-bottom": "3xs",
+            "border-radius": "2xl",
+          },
+          category: {
+            "font-size": "xs",
+            color: "brandSecondaryForeground",
+            "font-weight": 600,
+          },
+          "author-description": {
+            "font-size": "xs",
+          },
+        },
+        "pagination-wrapper": {
+          display: "flex",
+          width: "full",
+          "justify-content": "center",
+          "align-items": "center",
+          "column-gap": "md",
+        },
+        "pagination-left": {},
+        "pagination-text": {},
+        "pagination-right": {},
+        description: {
+          mobile: {
+            "text-align": "center",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        header: {
+          selectedVariants: {
+            Heading_Level: "H3",
+          },
+        },
+        "header-ctas": [
+          {
+            "header-cta": {
+              selectedVariants: {},
+            },
+          },
+          {
+            "header-cta": {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
+        cards: Array(8)
+          .fill(0)
+          .map(() => ({
+            "publish-date": {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            title: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+            description: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            "author-name": {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            "reading-time": {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            category: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            "author-description": {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+          })),
+      },
+    },
+    {
+      key: "default-no-border",
+      title: "Default No Border",
+      styles: {
+        layout: {},
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "7xl",
+          tablet: {
+            "row-gap": "3xl",
+          },
+          mobile: {
+            "row-gap": "4xl",
+          },
+        },
+        "header-wrapper": {
+          display: "flex",
+          width: "full",
+          "align-items": "center",
+          "justify-content": "space-between",
+          tablet: {},
+          mobile: {
+            "row-gap": "2xs",
+            "flex-direction": "column",
+            "align-items": "center",
+            "justify-content": "flex-start",
+          },
+        },
+        header: {
+          flex: "1",
+          mobile: {
+            "text-align": "center",
+          },
+        },
+        "header-ctas_levoGroup": {
+          display: "flex",
+          "column-gap": "md",
+          "align-items": "center",
+        },
+        "header-ctas": [
+          {
+            "header-cta": {
+              "white-space": "nowrap",
+            },
+          },
+          {
+            "header-cta": {
+              "white-space": "nowrap",
+            },
+          },
+        ],
+        cards_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          "row-gap": "6xl",
+          "column-gap": "4xl",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+            "row-gap": "xl",
+            "column-gap": "xl",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+            "row-gap": "2xl",
+          },
+        },
+        cards_levoGroupItem: {
+          card: {
+            display: "flex",
+            "flex-direction": "row",
+            "row-gap": "xl",
+            tablet: {
+              "row-gap": "md",
+              "flex-direction": "column",
+            },
+            "border-style": "none",
+            "border-width": "0px",
+            "border-radius": "xl",
+            "padding-top": "none",
+            "padding-left": "none",
+            "padding-right": "none",
+            "padding-bottom": "none",
+            "column-gap": "lg",
+            mobile: {
+              "flex-direction": "column",
+            },
+            "align-items": "stretch",
+            "justify-content": "start",
+          },
+          media: {
+            height: "100%",
+            width: "40%",
+            "object-fit": "cover",
+            tablet: {
+              width: "100%",
+              height: "128px",
+            },
+            "border-radius": "lg",
+            "border-style": "solid",
+            "border-width": "1.5px",
+            "border-color": "border",
+          },
+          "card-info-wrapper": {
+            display: "flex",
+            width: "full",
+            "flex-direction": "column",
+            "row-gap": "base",
+            tablet: {
+              "row-gap": "xs",
+            },
+          },
+          "card-content": {
+            display: "flex",
+            "flex-direction": "column-reverse",
+            "row-gap": "xs",
+            tablet: {
+              "row-gap": "2xs",
+            },
+          },
+          "card-header": {
+            display: "flex",
+            width: "full",
+            "align-items": "center",
+            "column-gap": "4xs",
+            tablet: {
+              "column-gap": "2xs",
+            },
+          },
+          "header-icon": {
+            "object-fit": "contain",
+            tablet: {
+              height: "18px",
+              width: "18px",
+            },
+            height: "18px",
+            width: "18px",
+            "font-size": "18px",
+          },
+          title: {
+            "font-weight": 600,
+            "font-size": "lg",
+            display: "-webkit-box",
+            "-webkit-line-clamp": "2",
+            "-webkit-box-orient": "vertical",
+            overflow: "hidden",
+            "margin-top": "4xs",
+          },
+          description: {
+            display: "-webkit-box",
+            "-webkit-line-clamp": "3",
+            "-webkit-box-orient": "vertical",
+            overflow: "hidden",
+            "font-size": "xs",
+            "margin-top": "2xs",
+          },
+          "card-footer": {
+            display: "none",
+            "align-items": "center",
+            "column-gap": "md",
+            "justify-content": "space-between",
+            "padding-left": "none",
+            "margin-top": "xs",
+          },
+          "card-author": {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "2xs",
+          },
+          "author-image": {
+            height: "24px",
+            width: "24px",
+            "border-radius": "100%",
+          },
+          "author-name": {
+            "font-size": "xs",
+          },
+          "card-reading-time-wrapper": {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "3xs",
+            "margin-left": "none",
+          },
+          "reading-time-icon": {
+            height: "16px",
+            width: "16px",
+            "object-fit": "contain",
+          },
+          "reading-time": {
+            "font-size": "xs",
+          },
+          cta: {
+            display: "none",
+          },
+          "card-header-wrapper": {
+            display: "flex",
+            "justify-content": "space-between",
+          },
+          "publish-date": {
+            "font-size": "xs",
+          },
+          category_wrapper: {
+            display: "block",
+            "background-color": "brandSecondary",
+            "padding-left": "sm",
+            "padding-right": "sm",
+            "padding-top": "3xs",
+            "padding-bottom": "3xs",
+            "border-radius": "xl",
+          },
+          category: {
+            "font-size": "xs",
+            color: "brandSecondaryForeground",
+          },
+          "author-description": {
+            "font-size": "xs",
+          },
+        },
+        "pagination-wrapper": {
+          display: "flex",
+          width: "full",
+          "justify-content": "center",
+          "align-items": "center",
+          "column-gap": "md",
+        },
+        "pagination-left": {},
+        "pagination-text": {},
+        "pagination-right": {},
+        description: {
+          mobile: {
+            "text-align": "center",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        header: {
+          selectedVariants: {
+            Heading_Level: "H3",
+          },
+        },
+        "header-ctas": [
+          {
+            "header-cta": {
+              selectedVariants: {},
+            },
+          },
+          {
+            "header-cta": {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
+        cards: Array(8)
+          .fill(0)
+          .map(() => ({
+            "publish-date": {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            title: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+            description: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            "author-name": {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            "reading-time": {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            category: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            "author-description": {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+          })),
+      },
+    },
+  ],
+};