@levo-so/blocks 0.1.75 → 0.1.77

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

@@ -0,0 +1,947 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DUMMY_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>',
+  },
+};
+
+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 CARD_CONTENT = {
+  card: null,
+  cover_image: MEDIA,
+  card_content_wrapper: null,
+  text_content_wrapper: null,
+  timestamp_wrapper: null,
+  timestamp_icon: DUMMY_ICON,
+  timestamp: "Today, 12:00",
+  category: "Article",
+  title:
+    "Our comprehensive financial services help you achieve your goals through expert guidance and innovative solutions.",
+  description:
+    "Our comprehensive financial services help you achieve your goals through expert guidance and innovative solutions.",
+  author_wrapper: null,
+  author_image: MEDIA,
+  author_name: "John Doe",
+  author_description: "Marketing Coordinator",
+  cta: "Read more",
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  text_wrapper: null,
+  title: "Building Wealth Together",
+  description:
+    "Our comprehensive financial services help you achieve your goals through expert guidance and innovative solutions.",
+  ctas_LevoGroup: null,
+  ctas: [{ cta: "Learn More" }, { cta: "View All" }],
+  cards: Array(3)
+    ?.fill(0)
+    ?.map((_) => CARD_CONTENT),
+  "pagination-wrapper": null,
+  "pagination-left": "Back",
+  "pagination-text": "",
+  "pagination-right": "Next",
+};
+
+const DEFAULT_CONTENT_NO_BORDER = {
+  layout: null,
+  container: null,
+  text_wrapper: null,
+  title: "Building Wealth Together",
+  description:
+    "Our comprehensive financial services help you achieve your goals through expert guidance and innovative solutions.",
+  ctas_LevoGroup: null,
+  ctas: [
+    {
+      cta: "Learn More",
+    },
+    {
+      cta: "View All",
+    },
+  ],
+  cards: Array(3)
+    ?.fill(0)
+    ?.map((_) => CARD_CONTENT),
+  "pagination-wrapper": null,
+  "pagination-left": "Back",
+  "pagination-text": "",
+  "pagination-right": "Next",
+};
+
+export type ICards16Content = typeof DEFAULT_CONTENT;
+
+export const Cards16: IBlock = {
+  category_id: "cards",
+  title: "Cards 16",
+  key: "cards-16",
+  version: "v1",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      // No hint needed: acts as high-level layout wrapper
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      // No hint needed: visual/container only
+    },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "BoxWidget",
+      // No hint needed: layout grouping only
+    },
+    {
+      key: "text_wrapper",
+      label: "Text Wrapper",
+      field_interface: "BoxWidget",
+      // No hint needed: layout grouping only
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Primary headline for the blog/news section. Should be concise, attention-grabbing, and indicate trending or popular content for this month. Use a confident, informative, energetic tone.",
+        usecase: "main_title",
+        min_characters: 20,
+        max_characters: 35,
+      },
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Short supporting introduction for the section, summarizing the purpose or value of the featured content. Should be informative, aspirational, and encourage browsing. 1-2 lines.",
+        usecase: "description",
+        min_characters: 60,
+        max_characters: 140,
+      },
+    },
+    {
+      key: "ctas",
+      label: "CTAs",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA",
+          field_interface: "ButtonWidget",
+        },
+      ],
+      // 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 (cover image, title, excerpt, published date, author info) with automatic click handling. Styling remains configurable.",
+        min_items: 6,
+        max_items: 9,
+      },
+      fields: [
+        {
+          key: "card",
+          label: "Card",
+          field_interface: "BoxWidget",
+          // No hint needed: just a per-card container
+        },
+        {
+          key: "cover_image",
+          label: "Cover Image",
+          field_interface: "ImageWidget",
+          hint: {
+            prompt_description:
+              "Automatically populated from blog cover_image. Styling remains configurable.",
+            orientation: "landscape",
+            size: "large",
+            usecase: "hero",
+          },
+        },
+        {
+          key: "card_content_wrapper",
+          label: "Card Content Wrapper",
+          field_interface: "BoxWidget",
+          // No hint needed: layout only
+        },
+        {
+          key: "text_content_wrapper",
+          label: "Text Content Wrapper",
+          field_interface: "BoxWidget",
+          // No hint needed: layout only
+        },
+        {
+          key: "content_header",
+          label: "Content Header",
+          field_interface: "BoxWidget",
+          // No hint needed: layout only
+        },
+        {
+          key: "timestamp_wrapper",
+          label: "Timestamp Wrapper",
+          field_interface: "BoxWidget",
+          // No hint needed: layout only
+        },
+        {
+          key: "timestamp_icon",
+          label: "Timestamp Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Small icon representing time or date, displayed next to the timestamp. Should be simple, clear, and easily recognizable at small sizes.",
+            size: "icon",
+            orientation: "square",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "timestamp",
+          label: "Timestamp",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Automatically populated from blog published_at date in 'DD MMM, YYYY' format. Styling remains configurable.",
+            usecase: "date",
+            min_characters: 8,
+            max_characters: 20,
+          },
+        },
+        {
+          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: "Timestamp",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "card_info_wrapper",
+          label: "Card Info Wrapper",
+          field_interface: "BoxWidget",
+          // No hint needed: layout only
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Automatically populated from blog title. Styling remains configurable.",
+            usecase: "title",
+            min_characters: 35,
+            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: "author_wrapper",
+          label: "Author Wrapper",
+          field_interface: "BoxWidget",
+          // No hint needed: layout only
+        },
+        {
+          key: "author_image",
+          label: "Author Image",
+          field_interface: "MediaWidget",
+          hint: {
+            prompt_description:
+              "Circular avatar image of the article author. Use an easily recognizable headshot.",
+            orientation: "square",
+            size: "icon",
+            usecase: "avatar",
+          },
+        },
+        {
+          key: "author_info_wrapper",
+          label: "Author Info Wrapper",
+          field_interface: "BoxWidget",
+          // No hint needed: layout only
+        },
+        {
+          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",
+          hint: {
+            prompt_description:
+              "Short description or job title of the author, e.g., 'Content Strategist', 'Lifestyle Editor'. Keep it short and professional. Automatically populated from blog author data.",
+            usecase: "designation",
+            min_characters: 10,
+            max_characters: 30,
+          },
+        },
+        {
+          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: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "justify-content": "center",
+          gap: "xl",
+          "border-radius": "base",
+          "box-shadow": "lg",
+        },
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+        },
+        text_wrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "none",
+        },
+        ctas_levoGroup: {
+          display: "flex",
+          "column-gap": "md",
+          "align-items": "center",
+        },
+        ctas: [],
+        title: {
+          mobile: {
+            "text-align": "center",
+          },
+        },
+        description: {
+          mobile: {
+            "text-align": "center",
+          },
+        },
+        cards_levoGroup: {
+          display: "flex",
+          width: "100%",
+          "flex-direction": "column",
+          "row-gap": "9xl",
+        },
+        cards_levoGroupItem: {
+          card: {
+            display: "flex",
+            "column-gap": "4xl",
+            "border-radius": "base",
+            "align-items": "stretch",
+          },
+          cover_image: {
+            height: "auto",
+            "border-radius": "xl",
+            "object-fit": "cover",
+            tablet: {
+              width: "100%",
+            },
+            width: "100%",
+            "max-width": "256px",
+          },
+          card_content_wrapper: {
+            display: "flex",
+            width: "100%",
+            flex: "1 1 0",
+            "align-items": "start",
+            "column-gap": "lg",
+            tablet: {
+              "flex-direction": "column",
+              "align-items": "start",
+              "row-gap": "sm",
+            },
+          },
+          text_content_wrapper: {
+            display: "flex",
+            flex: "1",
+            "flex-direction": "column",
+            "row-gap": "none",
+            width: "auto",
+          },
+          timestamp_icon: {
+            display: "block",
+          },
+          timestamp_wrapper: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "2xs",
+          },
+          timestamp: {
+            "font-weight": 600,
+            color: "text-2",
+            "font-size": "xs",
+            "margin-top": "5xs",
+          },
+          category_wrapper: {
+            display: "flex",
+            width: "fit-content",
+            "align-items": "center",
+            "column-gap": "2px",
+            "border-radius": "36px",
+            "background-color": "brandSecondary",
+            color: "brandSecondaryForeground",
+            "padding-left": "12px",
+            "padding-right": "12px",
+            "padding-top": "6px",
+            "padding-bottom": "6px",
+          },
+          category_icon: {
+            display: "none",
+          },
+          card_info_wrapper: {
+            display: "flex",
+            width: "100%",
+            "flex-direction": "column",
+            "row-gap": "2xs",
+            "margin-top": "sm",
+          },
+          title: {
+            "font-weight": 600,
+            "font-size": "lg",
+          },
+          description: {},
+          author_wrapper: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "base",
+            "margin-top": "xl",
+            "padding-top": "md",
+            "border-right-width": "0px",
+            "border-bottom-width": "0px",
+            "border-left-width": "0px",
+            "border-top-width": "1.5px",
+          },
+          author_image: {
+            "border-radius": "100%",
+            "object-fit": "cover",
+            width: "40px",
+            height: "40px",
+          },
+          author_name: {
+            "font-size": "sm",
+            "font-weight": 600,
+          },
+          author_description: {},
+          cta: {
+            display: "none",
+          },
+          content_header: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "sm",
+          },
+          category: {
+            "font-size": "xs",
+            "font-weight": 600,
+            color: "brandSecondaryForeground",
+          },
+        },
+        "pagination-wrapper": {
+          display: "flex",
+          width: "full",
+          "justify-content": "center",
+          "align-items": "center",
+          "column-gap": "md",
+        },
+        header: {
+          display: "flex",
+          "column-gap": "base",
+          "justify-content": "space-between",
+          "align-items": "center",
+          tablet: {
+            "flex-direction": "column",
+            "align-items": "start",
+            "row-gap": "sm",
+          },
+          mobile: {
+            "align-items": "center",
+          },
+          "background-image": 'url("")',
+          "background-position": "50% 50%",
+          "background-size": "cover",
+          "margin-bottom": "4xl",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H4",
+          },
+        },
+        cards: [
+          {
+            title: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+            description: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            author_name: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+            author_description: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            cover_image: {
+              image: {
+                width: 256,
+              },
+            },
+            timestamp: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            category: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+          },
+          {
+            author_name: {
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+          },
+          {
+            author_name: {
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+          },
+        ],
+        ctas: [
+          {
+            cta: {
+              selectedVariants: {},
+            },
+          },
+          {
+            cta: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
+      },
+    },
+    {
+      key: "cards_with_border",
+      title: "Cards With Border",
+      styles: {
+        layout: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "justify-content": "center",
+          gap: "xl",
+          "border-radius": "base",
+          "box-shadow": "lg",
+        },
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+        },
+        text_wrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "none",
+        },
+        ctas_levoGroup: {
+          display: "flex",
+          "column-gap": "md",
+          "align-items": "center",
+        },
+        ctas: [],
+        title: {
+          mobile: {
+            "text-align": "center",
+          },
+        },
+        description: {
+          mobile: {
+            "text-align": "center",
+          },
+        },
+        cards_levoGroup: {
+          display: "flex",
+          width: "100%",
+          "flex-direction": "column",
+          "row-gap": "9xl",
+        },
+        cards_levoGroupItem: {
+          card: {
+            display: "flex",
+            "border-radius": "lg",
+            "align-items": "stretch",
+            "padding-left": "base",
+            "padding-right": "base",
+            "padding-top": "base",
+            "padding-bottom": "base",
+            "border-style": "solid",
+            "border-width": "1px",
+            "column-gap": "lg",
+          },
+          cover_image: {
+            height: "auto",
+            "border-radius": "xl",
+            "object-fit": "cover",
+            tablet: {
+              width: "100%",
+            },
+            width: "100%",
+            "max-width": "256px",
+          },
+          card_content_wrapper: {
+            display: "flex",
+            width: "100%",
+            flex: "1 1 0",
+            "align-items": "start",
+            "column-gap": "lg",
+            tablet: {
+              "flex-direction": "column",
+              "align-items": "start",
+              "row-gap": "sm",
+            },
+          },
+          text_content_wrapper: {
+            display: "flex",
+            flex: "1",
+            "flex-direction": "column",
+            "row-gap": "none",
+            width: "auto",
+          },
+          timestamp_icon: {
+            display: "block",
+          },
+          timestamp_wrapper: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "2xs",
+          },
+          timestamp: {
+            "font-weight": 600,
+            color: "text-2",
+            "font-size": "xs",
+            "margin-top": "5xs",
+          },
+          category_wrapper: {
+            display: "flex",
+            width: "fit-content",
+            "align-items": "center",
+            "column-gap": "2px",
+            "border-radius": "36px",
+            "background-color": "brandSecondary",
+            color: "brandSecondaryForeground",
+            "padding-left": "12px",
+            "padding-right": "12px",
+            "padding-top": "6px",
+            "padding-bottom": "6px",
+          },
+          category_icon: {
+            display: "none",
+          },
+          card_info_wrapper: {
+            display: "flex",
+            width: "100%",
+            "flex-direction": "column",
+            "row-gap": "2xs",
+            "margin-top": "sm",
+          },
+          title: {
+            "font-weight": 600,
+            "font-size": "lg",
+          },
+          description: {},
+          author_wrapper: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "base",
+            "margin-top": "xl",
+            "padding-top": "md",
+            "border-right-width": "0px",
+            "border-bottom-width": "0px",
+            "border-left-width": "0px",
+            "border-top-width": "1.5px",
+          },
+          author_image: {
+            "border-radius": "100%",
+            "object-fit": "cover",
+            width: "40px",
+            height: "40px",
+          },
+          author_name: {
+            "font-size": "sm",
+            "font-weight": 600,
+          },
+          author_description: {},
+          cta: {
+            display: "none",
+          },
+          content_header: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "sm",
+          },
+          category: {
+            "font-size": "xs",
+            "font-weight": 600,
+            color: "brandSecondaryForeground",
+          },
+        },
+        "pagination-wrapper": {
+          display: "flex",
+          width: "full",
+          "justify-content": "center",
+          "align-items": "center",
+          "column-gap": "md",
+        },
+        header: {
+          display: "flex",
+          "column-gap": "base",
+          "justify-content": "space-between",
+          "align-items": "center",
+          tablet: {
+            "flex-direction": "column",
+            "align-items": "start",
+            "row-gap": "sm",
+          },
+          mobile: {
+            "align-items": "center",
+          },
+          "background-image": 'url("")',
+          "background-position": "50% 50%",
+          "background-size": "cover",
+          "margin-bottom": "4xl",
+        },
+      },
+      content: DEFAULT_CONTENT_NO_BORDER,
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H4",
+          },
+        },
+        cards: [
+          {
+            title: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+            description: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            author_name: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+            author_description: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            cover_image: {
+              image: {
+                width: 256,
+              },
+            },
+            timestamp: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            category: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+          },
+          {
+            author_name: {
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+          },
+          {
+            author_name: {
+              selectedVariants: {
+                Heading_Level: "H6",
+              },
+            },
+          },
+        ],
+        ctas: [
+          {
+            cta: {
+              selectedVariants: {},
+            },
+          },
+          {
+            cta: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
+      },
+    },
+  ],
+};