@kickstartds/ds-agency-premium 1.7.0--canary.46.1927.0 → 1.7.0--canary.43.2352.0

package/dist/components/presets.json

@@ -3,14 +3,14 @@
     "id": "blog-blog-aside--default",
     "group": "Blog/ Blog Aside",
     "name": "Default",
-    "code": "<BlogAside\n  author={{\n    byline: 'CEO at Company',\n    image: {\n      alt: 'Picture of Jane Smith',\n      aspectRatio: 'square',\n      fullWidth: false,\n      src: 'img/people/author-emily.png'\n    },\n    links: [\n      {\n        href: 'tel:+4922868896620',\n        icon: 'twitter',\n        label: 'jane_smith',\n        newTab: false\n      },\n      {\n        href: 'mailto:mail@example.com',\n        icon: 'email',\n        label: 'jane.smith@example.com',\n        newTab: false\n      }\n    ],\n    name: 'Jane Smith'\n  }}\n  date=\"12/30/2022\"\n  readingTime=\"5 min read\"\n  socialSharing={[\n    {\n      href: 'https://twitter.com/share?text=The%20Future%20of%20AI&url=https://example.com/blog/the-future-of-ai',\n      icon: 'twitter',\n      title: 'Share on Twitter'\n    },\n    {\n      href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog/the-future-of-ai&title=The%20Future%20of%20AI&summary=The%20Future%20of%20AI&source=LinkedIn',\n      icon: 'linkedin',\n      title: 'Share on LinkedIn'\n    }\n  ]}\n/>",
+    "code": "<BlogAside\n  author={{\n    byline: 'CEO at Company',\n    image: {\n      alt: 'Picture of Isabella Doe',\n      aspectRatio: 'square',\n      fullWidth: false,\n      src: 'img/people/author-emily.png'\n    },\n    links: [\n      {\n        ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n        icon: 'twitter',\n        label: 'jane_smith',\n        newTab: false,\n        url: 'tel:+4922868896620'\n      },\n      {\n        ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n        icon: 'email',\n        label: 'jane.smith@example.com',\n        newTab: false,\n        url: 'mailto:mail@example.com'\n      }\n    ],\n    name: 'Jane Smith'\n  }}\n  date=\"12/30/2022\"\n  readingTime=\"5 min read\"\n  socialSharing={[\n    {\n      href: 'https://twitter.com/share?text=The%20Future%20of%20AI&url=https://example.com/blog/the-future-of-ai',\n      icon: 'twitter',\n      title: 'Share on Twitter',\n      url: 'https://twitter.com/share?text=Check%20this%20out!&url=https://example.com'\n    },\n    {\n      href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog/the-future-of-ai&title=The%20Future%20of%20AI&summary=The%20Future%20of%20AI&source=LinkedIn',\n      icon: 'linkedin',\n      title: 'Share on LinkedIn',\n      url: 'https://twitter.com/share?text=Check%20this%20out!&url=https://example.com'\n    }\n  ]}\n/>",
     "args": {
       "author": {
         "name": "Jane Smith",
         "byline": "CEO at Company",
         "image": {
           "src": "img/people/author-emily.png",
-          "alt": "Picture of Jane Smith",
+          "alt": "Picture of Isabella Doe",
           "fullWidth": false,
           "aspectRatio": "square"
         },
@@ -18,27 +18,31 @@
           {
             "icon": "twitter",
             "label": "jane_smith",
-            "href": "tel:+4922868896620",
-            "newTab": false
+            "url": "tel:+4922868896620",
+            "newTab": false,
+            "ariaLabel": "Link to Isabella Doe's social media profile"
           },
           {
             "icon": "email",
             "label": "jane.smith@example.com",
-            "href": "mailto:mail@example.com",
-            "newTab": false
+            "url": "mailto:mail@example.com",
+            "newTab": false,
+            "ariaLabel": "Link to Isabella Doe's social media profile"
           }
         ]
       },
       "socialSharing": [
         {
           "icon": "twitter",
-          "href": "https://twitter.com/share?text=The%20Future%20of%20AI&url=https://example.com/blog/the-future-of-ai",
-          "title": "Share on Twitter"
+          "url": "https://twitter.com/share?text=Check%20this%20out!&url=https://example.com",
+          "title": "Share on Twitter",
+          "href": "https://twitter.com/share?text=The%20Future%20of%20AI&url=https://example.com/blog/the-future-of-ai"
         },
         {
           "icon": "linkedin",
-          "href": "https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog/the-future-of-ai&title=The%20Future%20of%20AI&summary=The%20Future%20of%20AI&source=LinkedIn",
-          "title": "Share on LinkedIn"
+          "url": "https://twitter.com/share?text=Check%20this%20out!&url=https://example.com",
+          "title": "Share on LinkedIn",
+          "href": "https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog/the-future-of-ai&title=The%20Future%20of%20AI&summary=The%20Future%20of%20AI&source=LinkedIn"
         }
       ],
       "readingTime": "5 min read",
@@ -50,13 +54,13 @@
     "id": "blog-blog-author--default",
     "group": "Blog/ Blog Author",
     "name": "Default",
-    "code": "<BlogAuthor\n  byline=\"CEO at Company\"\n  image={{\n    alt: 'Picture of Jane Smith',\n    aspectRatio: 'square',\n    fullWidth: false,\n    src: 'img/people/author-emily.png'\n  }}\n  links={[\n    {\n      href: 'tel:+4922868896620',\n      icon: 'twitter',\n      label: 'jane_smith',\n      newTab: false\n    },\n    {\n      href: 'mailto:mail@example.com',\n      icon: 'email',\n      label: 'jane.smith@example.com',\n      newTab: false\n    }\n  ]}\n  name=\"Jane Smith\"\n/>",
+    "code": "<BlogAuthor\n  byline=\"CEO at Company\"\n  image={{\n    alt: 'Picture of Isabella Doe',\n    aspectRatio: 'square',\n    fullWidth: false,\n    src: 'img/people/author-emily.png'\n  }}\n  links={[\n    {\n      ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n      icon: 'twitter',\n      label: 'jane_smith',\n      newTab: false,\n      url: 'tel:+4922868896620'\n    },\n    {\n      ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n      icon: 'email',\n      label: 'jane.smith@example.com',\n      newTab: false,\n      url: 'mailto:mail@example.com'\n    }\n  ]}\n  name=\"Jane Smith\"\n/>",
     "args": {
       "name": "Jane Smith",
       "byline": "CEO at Company",
       "image": {
         "src": "img/people/author-emily.png",
-        "alt": "Picture of Jane Smith",
+        "alt": "Picture of Isabella Doe",
         "fullWidth": false,
         "aspectRatio": "square"
       },
@@ -64,14 +68,16 @@
         {
           "icon": "twitter",
           "label": "jane_smith",
-          "href": "tel:+4922868896620",
-          "newTab": false
+          "url": "tel:+4922868896620",
+          "newTab": false,
+          "ariaLabel": "Link to Isabella Doe's social media profile"
         },
         {
           "icon": "email",
           "label": "jane.smith@example.com",
-          "href": "mailto:mail@example.com",
-          "newTab": false
+          "url": "mailto:mail@example.com",
+          "newTab": false,
+          "ariaLabel": "Link to Isabella Doe's social media profile"
         }
       ]
     },
@@ -130,6 +136,169 @@
     },
     "screenshot": "img/screenshots/blog-blog-teaser--default.png"
   },
+  {
+    "id": "corporate-breadcrumb--default",
+    "group": "Corporate/Breadcrumb",
+    "name": "Default",
+    "code": "<Breadcrumb\n  pages={[\n    {\n      label: 'Page 1',\n      url: 'https://example.com/page1'\n    },\n    {\n      label: 'Page 2',\n      url: 'https://example.com/page2'\n    },\n    {\n      label: 'Page 3',\n      url: 'https://example.com/page3'\n    }\n  ]}\n />",
+    "args": {
+      "pages": [
+        {
+          "url": "https://example.com/page1",
+          "label": "Page 1"
+        },
+        {
+          "url": "https://example.com/page2",
+          "label": "Page 2"
+        },
+        {
+          "url": "https://example.com/page3",
+          "label": "Page 3"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/corporate-breadcrumb--default.png"
+  },
+  {
+    "id": "corporate-business-card--default",
+    "group": "Corporate / Business Card",
+    "name": "Default",
+    "code": "<BusinessCard\n  address=\"1234 Business Lane<br />Suite 567 <br />Business City, BC 12345\"\n  avatar={{\n    alt: 'Emily Johnson',\n    src: 'img/people/contact-person.png'\n  }}\n  buttons={[\n    {\n      label: 'Market Insights',\n      url: '#'\n    }\n  ]}\n  contact={[\n    {\n      icon: 'phone',\n      label: '+1 234 567 890',\n      url: 'tel:+1234567890'\n    },\n    {\n      icon: 'email',\n      label: 'emily@example.com',\n      url: 'mailto:emily@example.com'\n    },\n    {\n      icon: 'linkedin',\n      label: 'Emily Johnson',\n      url: '#'\n    }\n  ]}\n  image={{\n    alt: 'A group of people collaborating in an office setting',\n    src: 'img/full-shot-different-people-working-together.png'\n  }}\n  logo={{\n    alt: 'Business Logo',\n    src: 'logo.svg',\n    url: '#'\n  }}\n  topic=\"Industry Intelligence\"\n/>",
+    "args": {
+      "centered": false,
+      "image": {
+        "src": "img/full-shot-different-people-working-together.png",
+        "alt": "A group of people collaborating in an office setting"
+      },
+      "logo": {
+        "src": "logo.svg",
+        "alt": "Business Logo",
+        "url": "#"
+      },
+      "topic": "Industry Intelligence",
+      "address": "1234 Business Lane<br />Suite 567 <br />Business City, BC 12345",
+      "avatar": {
+        "src": "img/people/contact-person.png",
+        "alt": "Emily Johnson"
+      },
+      "contact": [
+        {
+          "icon": "phone",
+          "label": "+1 234 567 890",
+          "url": "tel:+1234567890"
+        },
+        {
+          "icon": "email",
+          "label": "emily@example.com",
+          "url": "mailto:emily@example.com"
+        },
+        {
+          "icon": "linkedin",
+          "label": "Emily Johnson",
+          "url": "#"
+        }
+      ],
+      "buttons": [
+        {
+          "label": "Market Insights",
+          "url": "#"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/corporate-business-card--default.png"
+  },
+  {
+    "id": "corporate-business-card--centered",
+    "group": "Corporate / Business Card",
+    "name": "Centered",
+    "code": "<BusinessCard\n  address=\"1234 Business Lane<br />Suite 567 <br />Business City, BC 12345\"\n  avatar={{\n    alt: 'Emily Johnson',\n    src: 'img/people/contact-person.png'\n  }}\n  buttons={[\n    {\n      label: 'Market Insights',\n      url: '#'\n    }\n  ]}\n  centered\n  contact={[\n    {\n      icon: 'phone',\n      label: '+1 234 567 890',\n      url: 'tel:+1234567890'\n    },\n    {\n      icon: 'email',\n      label: 'emily@example.com',\n      url: 'mailto:emily@example.com'\n    },\n    {\n      icon: 'linkedin',\n      label: 'Emily Johnson',\n      url: '#'\n    }\n  ]}\n  image={{\n    alt: 'A group of people collaborating in an office setting',\n    src: 'img/full-shot-different-people-working-together.png'\n  }}\n  logo={{\n    alt: 'Business Logo',\n    src: 'logo.svg',\n    url: '#'\n  }}\n  topic=\"Industry Intelligence\"\n/>",
+    "args": {
+      "centered": true,
+      "image": {
+        "src": "img/full-shot-different-people-working-together.png",
+        "alt": "A group of people collaborating in an office setting"
+      },
+      "logo": {
+        "src": "logo.svg",
+        "alt": "Business Logo",
+        "url": "#"
+      },
+      "topic": "Industry Intelligence",
+      "address": "1234 Business Lane<br />Suite 567 <br />Business City, BC 12345",
+      "avatar": {
+        "src": "img/people/contact-person.png",
+        "alt": "Emily Johnson"
+      },
+      "contact": [
+        {
+          "icon": "phone",
+          "label": "+1 234 567 890",
+          "url": "tel:+1234567890"
+        },
+        {
+          "icon": "email",
+          "label": "emily@example.com",
+          "url": "mailto:emily@example.com"
+        },
+        {
+          "icon": "linkedin",
+          "label": "Emily Johnson",
+          "url": "#"
+        }
+      ],
+      "buttons": [
+        {
+          "label": "Market Insights",
+          "url": "#"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/corporate-business-card--centered.png"
+  },
+  {
+    "id": "corporate-business-card--without-image",
+    "group": "Corporate / Business Card",
+    "name": "WithoutImage",
+    "code": "<BusinessCard\n  address=\"1234 Business Lane<br />Suite 567 <br />Business City, BC 12345\"\n  avatar={{\n    alt: 'Emily Johnson',\n    src: 'img/people/contact-person.png'\n  }}\n  buttons={[\n    {\n      label: 'Market Insights',\n      url: '#'\n    }\n  ]}\n  contact={[\n    {\n      icon: 'phone',\n      label: '+1 234 567 890',\n      url: 'tel:+1234567890'\n    },\n    {\n      icon: 'email',\n      label: 'emily@example.com',\n      url: 'mailto:emily@example.com'\n    },\n    {\n      icon: 'linkedin',\n      label: 'Emily Johnson',\n      url: '#'\n    }\n  ]}\n  logo={{\n    alt: 'Business Logo',\n    src: 'logo.svg',\n    url: '#'\n  }}\n  topic=\"Industry Intelligence\"\n/>",
+    "args": {
+      "centered": false,
+      "logo": {
+        "src": "logo.svg",
+        "alt": "Business Logo",
+        "url": "#"
+      },
+      "topic": "Industry Intelligence",
+      "address": "1234 Business Lane<br />Suite 567 <br />Business City, BC 12345",
+      "avatar": {
+        "src": "img/people/contact-person.png",
+        "alt": "Emily Johnson"
+      },
+      "contact": [
+        {
+          "icon": "phone",
+          "label": "+1 234 567 890",
+          "url": "tel:+1234567890"
+        },
+        {
+          "icon": "email",
+          "label": "emily@example.com",
+          "url": "mailto:emily@example.com"
+        },
+        {
+          "icon": "linkedin",
+          "label": "Emily Johnson",
+          "url": "#"
+        }
+      ],
+      "buttons": [
+        {
+          "label": "Market Insights",
+          "url": "#"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/corporate-business-card--without-image.png"
+  },
   {
     "id": "components-button--primary-button",
     "group": "Components/Button",
@@ -186,12 +355,14 @@
     "id": "page-archetypes-blog-overview--blog-overview",
     "group": "Page Archetypes/Blog Overview",
     "name": "BlogOverview",
-    "code": "<BlogOverview\n  cta={{\n    buttons: [\n      {\n        icon: 'person',\n        label: 'Contact us',\n        target: '#'\n      },\n      {\n        icon: 'date',\n        label: 'Book a meeting',\n        target: '#'\n      }\n    ],\n    colorNeutral: false,\n    contentAlign: 'center',\n    fullWidth: true,\n    headline: 'Get in touch',\n    highlightText: false,\n    image: {\n      padding: false,\n      src: 'img/contact-person.png'\n    },\n    order: {\n      desktopImageLast: false,\n      mobileImageLast: false\n    },\n    sub: 'Chat with us about getting your product or platform to market faster',\n    text: 'Our modular design approach allows for flexibility and scalability in your application\\'s architecture.',\n    textAlign: 'left',\n    width: 'wide'\n  }}\n  latest={{\n    alt: 'Image of a business team working',\n    author: {\n      image: 'img/people/author-alex.png',\n      name: 'John Doe',\n      title: 'CEO'\n    },\n    date: '12/30/2022',\n    headline: 'Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality',\n    image: 'img/close-up-young-business-team-working.png',\n    link: {\n      label: 'Read more',\n      text: 'Read article',\n      url: 'https://example.com/article1'\n    },\n    readingTime: '5 min read',\n    tags: [\n      {\n        entry: 'Design Systems'\n      },\n      {\n        entry: 'Headless Websites'\n      },\n      {\n        entry: 'Training'\n      }\n    ],\n    teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences.'\n  }}\n  latestTitle=\"Latest Post\"\n  list={[\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Mastering the Art of Design Systems with Systemics',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article1'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Design Systems'\n        }\n      ],\n      teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'Jane Doe',\n        title: 'CTO'\n      },\n      date: '12/30/2022',\n      headline: 'Unleashing Innovation with Headless Websites',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article2'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Headless Websites'\n        }\n      ],\n      teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Investing in Digital Excellence: Systemics\\' Design System Trainings',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article3'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Training'\n        }\n      ],\n      teaserText: 'Investing in your digital team\\'s growth is crucial for sustainable success. In this article, we highlight Systemics\\' Design System Trainings, designed to equip your team with the skills they need to harness your design system effectively.'\n    }\n  ]}\n  listTitle=\"Recent Posts\"\n  more={[\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Mastering the Art of Design Systems with Systemics',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article1'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Design Systems'\n        }\n      ],\n      teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'Jane Doe',\n        title: 'CTO'\n      },\n      date: '12/30/2022',\n      headline: 'Unleashing Innovation with Headless Websites',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article2'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Headless Websites'\n        }\n      ],\n      teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n    }\n  ]}\n  moreTitle=\"Featured Posts\"\n  section={[\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      width: 'default'\n    }\n  ]}\n/>",
+    "code": "<BlogOverview\n  cta={{\n    align: 'center',\n    buttons: [\n      {\n        icon: 'person',\n        label: 'Contact us',\n        url: '#'\n      },\n      {\n        icon: 'date',\n        label: 'Book a meeting',\n        url: '#'\n      }\n    ],\n    colorNeutral: false,\n    contentAlign: 'center',\n    fullWidth: true,\n    headline: 'Get in touch',\n    highlightText: false,\n    image: {\n      align: 'center',\n      padding: false,\n      src: 'img/people/contact-person.png'\n    },\n    order: {\n      desktopImageLast: false,\n      mobileImageLast: false\n    },\n    padding: false,\n    sub: 'Chat with us about getting your product or platform to market faster',\n    text: 'Our modular design approach allows for flexibility and scalability in your application\\'s architecture.',\n    textAlign: 'left',\n    width: 'wide'\n  }}\n  latest={{\n    alt: 'Image of a business team working',\n    author: {\n      image: 'img/people/author-alex.png',\n      name: 'John Doe',\n      title: 'CEO'\n    },\n    date: '12/30/2022',\n    headline: 'Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality',\n    image: 'img/close-up-young-business-team-working.png',\n    link: {\n      label: 'Read more',\n      text: 'Read article',\n      url: 'https://example.com/article1'\n    },\n    readingTime: '5 min read',\n    tags: [\n      {\n        entry: 'Design Systems'\n      },\n      {\n        entry: 'Headless Websites'\n      },\n      {\n        entry: 'Training'\n      }\n    ],\n    teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences.'\n  }}\n  latestTitle=\"Latest Post\"\n  list={[\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Mastering the Art of Design Systems with Systemics',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article1'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Design Systems'\n        }\n      ],\n      teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'Jane Doe',\n        title: 'CTO'\n      },\n      date: '12/30/2022',\n      headline: 'Unleashing Innovation with Headless Websites',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article2'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Headless Websites'\n        }\n      ],\n      teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Investing in Digital Excellence: Systemics\\' Design System Trainings',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article3'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Training'\n        }\n      ],\n      teaserText: 'Investing in your digital team\\'s growth is crucial for sustainable success. In this article, we highlight Systemics\\' Design System Trainings, designed to equip your team with the skills they need to harness your design system effectively.'\n    }\n  ]}\n  listTitle=\"Recent Posts\"\n  more={[\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Mastering the Art of Design Systems with Systemics',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article1'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Design Systems'\n        }\n      ],\n      teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n    },\n    {\n      alt: 'Image of a business team working',\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'Jane Doe',\n        title: 'CTO'\n      },\n      date: '12/30/2022',\n      headline: 'Unleashing Innovation with Headless Websites',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        text: 'Read article',\n        url: 'https://example.com/article2'\n      },\n      readingTime: '5 min read',\n      tags: [\n        {\n          entry: 'Headless Websites'\n        }\n      ],\n      teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n    }\n  ]}\n  moreTitle=\"Featured Posts\"\n  section={[\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'default',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      transition: 'none',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'default',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      transition: 'none',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'default',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      transition: 'none',\n      width: 'default'\n    }\n  ]}\n/>",
     "args": {
       "section": [
         {
           "width": "default",
+          "style": "default",
           "backgroundColor": "default",
+          "transition": "none",
           "spotlight": false,
           "spaceBefore": "default",
           "spaceAfter": "default",
@@ -206,7 +377,7 @@
             "width": "unset",
             "align": "center",
             "gutter": "default",
-            "mode": "list",
+            "mode": "default",
             "tileWidth": "default"
           },
           "buttons": [
@@ -232,7 +403,9 @@
         },
         {
           "width": "default",
+          "style": "default",
           "backgroundColor": "default",
+          "transition": "none",
           "spotlight": false,
           "spaceBefore": "default",
           "spaceAfter": "default",
@@ -247,7 +420,7 @@
             "width": "unset",
             "align": "center",
             "gutter": "default",
-            "mode": "list",
+            "mode": "default",
             "tileWidth": "default"
           },
           "buttons": [
@@ -273,7 +446,9 @@
         },
         {
           "width": "default",
+          "style": "default",
           "backgroundColor": "default",
+          "transition": "none",
           "spotlight": false,
           "spaceBefore": "default",
           "spaceAfter": "default",
@@ -288,7 +463,7 @@
             "width": "unset",
             "align": "center",
             "gutter": "default",
-            "mode": "list",
+            "mode": "default",
             "tileWidth": "default"
           },
           "buttons": [
@@ -469,28 +644,31 @@
         "sub": "Chat with us about getting your product or platform to market faster",
         "highlightText": false,
         "colorNeutral": false,
-        "fullWidth": true,
         "buttons": [
           {
             "label": "Contact us",
             "icon": "person",
-            "target": "#"
+            "url": "#"
           },
           {
             "label": "Book a meeting",
             "icon": "date",
-            "target": "#"
+            "url": "#"
           }
         ],
         "image": {
           "padding": false,
-          "src": "img/contact-person.png"
+          "align": "center",
+          "src": "img/people/contact-person.png"
         },
         "order": {
           "mobileImageLast": false,
           "desktopImageLast": false
         },
         "textAlign": "left",
+        "align": "center",
+        "padding": false,
+        "fullWidth": true,
         "contentAlign": "center",
         "text": "Our modular design approach allows for flexibility and scalability in your application's architecture.",
         "width": "wide"
@@ -502,7 +680,7 @@
     "id": "page-archetypes-blog-post--blog-post",
     "group": "Page Archetypes/Blog Post",
     "name": "BlogPost",
-    "code": "<BlogPost\n  aside={{\n    author: {\n      byline: 'Senior Developer',\n      email: 'Jane.doe@example.com',\n      image: {\n        alt: 'Picture of Jane Smith',\n        aspectRatio: 'square',\n        fullWidth: false,\n        src: 'img/people/author-emily.png'\n      },\n      links: [\n        {\n          href: 'tel:+4922868896620',\n          icon: 'phone',\n          label: '0228 / 688 966 20',\n          newTab: false\n        },\n        {\n          href: 'mailto:mail@example.com',\n          icon: 'email',\n          label: 'mail@example.com',\n          newTab: false\n        }\n      ],\n      name: 'Jane Doe',\n      twitter: 'Janedoe'\n    },\n    date: '12/30/2022',\n    readingTime: '5 min read',\n    socialSharing: [\n      {\n        href: 'https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog',\n        icon: 'twitter',\n        title: 'Share on Twitter'\n      },\n      {\n        href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline',\n        icon: 'linkedin',\n        title: 'Share on LinkedIn'\n      }\n    ]\n  }}\n  contact={{\n    copy: 'Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences.',\n    image: {\n      alt: 'Picture of Jane Smith',\n      aspectRatio: 'vertical',\n      fullWidth: false,\n      src: 'img/people/contact-john.png'\n    },\n    links: [\n      {\n        href: 'mailto:mail@example.com',\n        icon: 'xing',\n        label: 'john.smith',\n        newTab: false\n      },\n      {\n        href: '#',\n        icon: 'twitter',\n        label: '@john_smith',\n        newTab: false\n      }\n    ],\n    subtitle: 'Sales Representative',\n    title: 'John Smith'\n  }}\n  content=\"\n## Introduction\nThe future of **Artificial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n          \"\n  cta={{\n    buttons: [\n      {\n        icon: 'person',\n        label: 'Contact Us',\n        target: '#'\n      },\n      {\n        icon: 'date',\n        label: 'Learn More',\n        target: '#'\n      }\n    ],\n    colorNeutral: false,\n    contentAlign: 'center',\n    fullWidth: false,\n    headline: 'Ready to Transform Your Development Process?',\n    highlightText: false,\n    image: {\n      padding: true\n    },\n    order: {\n      desktopImageLast: true,\n      mobileImageLast: false\n    },\n    sub: 'Start your journey today.',\n    text: 'Get started with our design system today and experience a new level of efficiency and consistency in your projects.',\n    textAlign: 'center'\n  }}\n  head={{\n    alt: 'Image of a business team working',\n    date: '12/30/2022',\n    headline: 'The Future of AI: A Glimpse into the Unseen',\n    image: 'img/close-up-young-business-team-working.png',\n    tags: [\n      {\n        entry: 'Technology'\n      },\n      {\n        entry: 'AI'\n      }\n    ]\n  }}\n  section={[\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'list',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      width: 'default'\n    }\n  ]}\n/>",
+    "code": "<BlogPost\n  aside={{\n    author: {\n      byline: 'Senior Developer',\n      email: 'Jane.doe@example.com',\n      image: {\n        alt: 'Picture of Jane Doe',\n        aspectRatio: 'square',\n        fullWidth: false,\n        src: 'img/people/contact-isabella.png'\n      },\n      links: [\n        {\n          ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n          icon: 'phone',\n          label: '0228 / 688 966 20',\n          newTab: false,\n          url: 'tel:+4922868896620'\n        },\n        {\n          ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n          icon: 'email',\n          label: 'mail@example.com',\n          newTab: false,\n          url: 'mailto:mail@example.com'\n        }\n      ],\n      name: 'Jane Doe',\n      twitter: 'Janedoe'\n    },\n    date: '12/30/2022',\n    readingTime: '5 min read',\n    socialSharing: [\n      {\n        icon: 'twitter',\n        title: 'Share on Twitter',\n        url: 'https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog'\n      },\n      {\n        icon: 'linkedin',\n        title: 'Share on LinkedIn',\n        url: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline'\n      }\n    ]\n  }}\n  contact={{\n    copy: 'Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences.',\n    image: {\n      alt: 'Picture of Jane Smith',\n      aspectRatio: 'vertical',\n      fullWidth: false,\n      src: 'img/people/contact-john.png'\n    },\n    links: [\n      {\n        icon: 'xing',\n        label: 'john.smith',\n        newTab: false,\n        url: 'mailto:mail@example.com'\n      },\n      {\n        icon: 'twitter',\n        label: '@john_smith',\n        newTab: false,\n        url: '#'\n      }\n    ],\n    subtitle: 'Sales Representative',\n    title: 'John Smith'\n  }}\n  content=\"\n## Introduction\nThe future of **Artificial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n          \"\n  cta={{\n    align: 'center',\n    buttons: [\n      {\n        icon: 'person',\n        label: 'Contact Us',\n        url: '#'\n      },\n      {\n        icon: 'date',\n        label: 'Learn More',\n        url: '#'\n      }\n    ],\n    colorNeutral: false,\n    headline: 'Ready to Transform Your Development Process?',\n    highlightText: false,\n    image: {\n      align: 'center',\n      padding: true\n    },\n    order: {\n      desktopImageLast: true,\n      mobileImageLast: false\n    },\n    padding: false,\n    sub: 'Start your journey today.',\n    text: 'Get started with our design system today and experience a new level of efficiency and consistency in your projects.',\n    textAlign: 'center'\n  }}\n  head={{\n    alt: 'Image of a business team working',\n    date: '12/30/2022',\n    headline: 'The Future of AI: A Glimpse into the Unseen',\n    image: 'img/close-up-young-business-team-working.png',\n    tags: [\n      {\n        entry: 'Technology'\n      },\n      {\n        entry: 'AI'\n      }\n    ]\n  }}\n  section={[\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'default',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      transition: 'none',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'default',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      transition: 'none',\n      width: 'default'\n    },\n    {\n      backgroundColor: 'default',\n      buttons: [\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        },\n        {\n          disabled: false,\n          label: 'Book a meeting',\n          size: 'medium',\n          variant: 'secondary'\n        }\n      ],\n      content: {\n        align: 'center',\n        gutter: 'default',\n        mode: 'default',\n        tileWidth: 'default',\n        width: 'unset'\n      },\n      headerSpacing: false,\n      headline: {\n        large: false,\n        text: 'Section headline',\n        width: 'unset'\n      },\n      inverted: false,\n      spaceAfter: 'default',\n      spaceBefore: 'default',\n      spotlight: false,\n      style: 'default',\n      transition: 'none',\n      width: 'default'\n    }\n  ]}\n/>",
     "args": {
       "head": {
         "date": "12/30/2022",
@@ -523,8 +701,8 @@
           "name": "Jane Doe",
           "byline": "Senior Developer",
           "image": {
-            "src": "img/people/author-emily.png",
-            "alt": "Picture of Jane Smith",
+            "src": "img/people/contact-isabella.png",
+            "alt": "Picture of Jane Doe",
             "fullWidth": false,
             "aspectRatio": "square"
           },
@@ -532,14 +710,16 @@
             {
               "icon": "phone",
               "label": "0228 / 688 966 20",
-              "href": "tel:+4922868896620",
-              "newTab": false
+              "url": "tel:+4922868896620",
+              "newTab": false,
+              "ariaLabel": "Link to Isabella Doe's social media profile"
             },
             {
               "icon": "email",
               "label": "mail@example.com",
-              "href": "mailto:mail@example.com",
-              "newTab": false
+              "url": "mailto:mail@example.com",
+              "newTab": false,
+              "ariaLabel": "Link to Isabella Doe's social media profile"
             }
           ],
           "twitter": "Janedoe",
@@ -548,12 +728,12 @@
         "socialSharing": [
           {
             "icon": "twitter",
-            "href": "https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog",
+            "url": "https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog",
             "title": "Share on Twitter"
           },
           {
             "icon": "linkedin",
-            "href": "https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline",
+            "url": "https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline",
             "title": "Share on LinkedIn"
           }
         ],
@@ -563,7 +743,9 @@
       "section": [
         {
           "width": "default",
+          "style": "default",
           "backgroundColor": "default",
+          "transition": "none",
           "spotlight": false,
           "spaceBefore": "default",
           "spaceAfter": "default",
@@ -578,7 +760,7 @@
             "width": "unset",
             "align": "center",
             "gutter": "default",
-            "mode": "list",
+            "mode": "default",
             "tileWidth": "default"
           },
           "buttons": [
@@ -604,7 +786,9 @@
         },
         {
           "width": "default",
+          "style": "default",
           "backgroundColor": "default",
+          "transition": "none",
           "spotlight": false,
           "spaceBefore": "default",
           "spaceAfter": "default",
@@ -619,7 +803,7 @@
             "width": "unset",
             "align": "center",
             "gutter": "default",
-            "mode": "list",
+            "mode": "default",
             "tileWidth": "default"
           },
           "buttons": [
@@ -645,7 +829,9 @@
         },
         {
           "width": "default",
+          "style": "default",
           "backgroundColor": "default",
+          "transition": "none",
           "spotlight": false,
           "spaceBefore": "default",
           "spaceAfter": "default",
@@ -660,7 +846,7 @@
             "width": "unset",
             "align": "center",
             "gutter": "default",
-            "mode": "list",
+            "mode": "default",
             "tileWidth": "default"
           },
           "buttons": [
@@ -690,28 +876,29 @@
         "sub": "Start your journey today.",
         "highlightText": false,
         "colorNeutral": false,
-        "fullWidth": false,
         "buttons": [
           {
             "label": "Contact Us",
-            "target": "#",
+            "url": "#",
             "icon": "person"
           },
           {
             "label": "Learn More",
-            "target": "#",
+            "url": "#",
             "icon": "date"
           }
         ],
         "image": {
-          "padding": true
+          "padding": true,
+          "align": "center"
         },
         "order": {
           "mobileImageLast": false,
           "desktopImageLast": true
         },
         "textAlign": "center",
-        "contentAlign": "center",
+        "align": "center",
+        "padding": false,
         "text": "Get started with our design system today and experience a new level of efficiency and consistency in your projects."
       },
       "content": "\n## Introduction\nThe future of **Artificial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n          ",
@@ -728,13 +915,13 @@
           {
             "icon": "xing",
             "label": "john.smith",
-            "href": "mailto:mail@example.com",
+            "url": "mailto:mail@example.com",
             "newTab": false
           },
           {
             "icon": "twitter",
             "label": "@john_smith",
-            "href": "#",
+            "url": "#",
             "newTab": false
           }
         ],
@@ -744,164 +931,891 @@
     "screenshot": "img/screenshots/page-archetypes-blog-post--blog-post.png"
   },
   {
-    "id": "components-contact--wide-image",
-    "group": "Components/Contact",
-    "name": "WideImage",
-    "code": "<Contact\n  image={{\n    alt: 'Picture of Jane Smith',\n    aspectRatio: 'wide',\n    fullWidth: false,\n    src: 'img/people/contact-isabella.png'\n  }}\n  links={[\n    {\n      href: '#',\n      icon: 'twitter',\n      label: '@Isabella_Doe',\n      newTab: false\n    },\n    {\n      href: 'mailto:mail@example.com',\n      icon: 'linkedin',\n      label: 'Isabella.Doe',\n      newTab: false\n    }\n  ]}\n  subtitle=\"Creative Director\"\n  title=\"Isabella Doe\"\n/>",
+    "id": "page-archetypes-event-detail--event-detail",
+    "group": "Page Archetypes/Event Detail",
+    "name": "EventDetail",
+    "code": "<EventDetail\n  button={{\n    label: 'See all Events',\n    url: '/#'\n  }}\n  categories={[\n    {\n      label: 'Conference'\n    },\n    {\n      label: 'Design Systems'\n    }\n  ]}\n  description=\"\nJoin us for a day of inspiring talks, hands-on workshops, and networking with design system experts from around the world.\n\n**Highlights:**\n- Keynotes from industry leaders\n- Practical sessions on design tokens, accessibility, and scaling systems\n- Evening networking event with food & drinks\n  \"\n  downloads={[\n    {\n      format: 'PDF',\n      name: 'Product Brochure',\n      previewImage: 'img/offset-image.png',\n      size: '2.5 MB',\n      url: 'img/offset-image.png'\n    },\n    {\n      format: 'PDF',\n      name: 'Company Brochure',\n      previewImage: 'img/kickstartDS/CMS-Starter producthunt-slide-01.svg',\n      size: '3.2 MB',\n      url: 'img/kickstartDS/CMS-Starter producthunt-slide-01.svg'\n    },\n    {\n      format: 'DOC',\n      name: 'User Guide',\n      size: '20 KB',\n      url: 'assets/user-guide.doc'\n    },\n    {\n      format: 'TXT',\n      name: 'Technical Specifications',\n      size: '12 KB',\n      url: 'assets/technical-specifications.txt'\n    }\n  ]}\n  images={[\n    {\n      alt: 'Alt text Image 1',\n      caption: 'Caption Image 1',\n      src: 'img/close-up-young-business-team-working.png'\n    },\n    {\n      alt: 'Alt text Image 2',\n      caption: 'Caption Image 2',\n      src: 'img/low-angle-tall-building-with-many-windows_23-2148230392.png'\n    },\n    {\n      alt: 'Alt text Image 3',\n      caption: 'Caption Image 3',\n      src: 'img/full-shot-different-people-working-together.png'\n    },\n    {\n      alt: 'Alt text Image 4',\n      caption: 'Caption Image 4',\n      src: 'img/top-view-desk-with-keyboard-drawing-pad.png'\n    }\n  ]}\n  intro=\"A full-day event for design system professionals and enthusiasts. Join us to learn, share, and connect with like-minded individuals.\"\n  locations={[\n    {\n      address: 'Messeplatz 1<br />\\n      50679 Köln',\n      dates: [\n        {\n          ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n          date: '2025-09-18',\n          label: 'Register',\n          newTab: true,\n          time: '09:00 – 17:00',\n          url: '#'\n        },\n        {\n          ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n          date: '2025-09-18',\n          label: 'Register',\n          newTab: true,\n          time: '09:00 – 17:00',\n          url: '#'\n        },\n        {\n          ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n          date: '2025-09-18',\n          label: 'Register',\n          newTab: true,\n          time: '09:00 – 17:00',\n          url: '#'\n        }\n      ],\n      displayMode: 'compact',\n      links: [\n        {\n          label: 'Open in Google Maps',\n          newTab: true,\n          url: 'https://maps.google.com/?q=Berlin+Congress+Center'\n        }\n      ],\n      locationName: 'Köln Messe'\n    },\n    {\n      address: 'Alexanderplatz 1<br />\\n      10178 Berlin',\n      dates: [\n        {\n          ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n          date: '2025-09-18',\n          label: 'Register',\n          newTab: true,\n          time: '09:00 – 17:00',\n          url: '#'\n        },\n        {\n          ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n          date: '2025-09-18',\n          label: 'Register',\n          newTab: true,\n          time: '09:00 – 17:00',\n          url: '#'\n        }\n      ],\n      displayMode: 'compact',\n      links: [\n        {\n          label: 'Open in Google Maps',\n          newTab: true,\n          url: 'https://maps.google.com/?q=Berlin+Congress+Center'\n        },\n        {\n          label: 'Location Website',\n          newTab: true,\n          url: 'https://www.berlincongresscenter.com'\n        }\n      ],\n      locationName: 'Berlin Congress Center (BCC) Redaktion & Event GmbH & Co. KG'\n    }\n  ]}\n  title=\"Systemics Design Conference 2025\"\n/>",
     "args": {
-      "image": {
-        "src": "img/people/contact-isabella.png",
-        "alt": "Picture of Jane Smith",
-        "fullWidth": false,
-        "aspectRatio": "wide"
-      },
-      "title": "Isabella Doe",
-      "subtitle": "Creative Director",
-      "links": [
+      "categories": [
         {
-          "icon": "twitter",
-          "label": "@Isabella_Doe",
-          "href": "#",
-          "newTab": false
+          "label": "Conference"
         },
         {
-          "icon": "linkedin",
-          "label": "Isabella.Doe",
-          "href": "mailto:mail@example.com",
-          "newTab": false
+          "label": "Design Systems"
         }
-      ]
-    },
-    "screenshot": "img/screenshots/components-contact--wide-image.png"
-  },
-  {
-    "id": "components-contact--circular-avatar",
-    "group": "Components/Contact",
-    "name": "CircularAvatar",
-    "code": "<Contact\n  copy=\"Leads with a vision for innovative, user-centric web designs\"\n  image={{\n    alt: 'Picture of Jane Smith',\n    aspectRatio: 'square',\n    fullWidth: false,\n    src: 'img/people/author-emily.png'\n  }}\n  links={[\n    {\n      href: '#',\n      icon: 'twitter',\n      label: '@jane_smith',\n      newTab: false\n    },\n    {\n      href: 'mailto:mail@example.com',\n      icon: 'linkedin',\n      label: 'jane.smith',\n      newTab: false\n    }\n  ]}\n  subtitle=\"CEO at DS Agency\"\n  title=\"Jane Smith\"\n/>",
-    "args": {
-      "image": {
-        "src": "img/people/author-emily.png",
-        "alt": "Picture of Jane Smith",
-        "fullWidth": false,
-        "aspectRatio": "square"
-      },
-      "title": "Jane Smith",
-      "subtitle": "CEO at DS Agency",
-      "links": [
+      ],
+      "locations": [
         {
-          "icon": "twitter",
-          "label": "@jane_smith",
-          "href": "#",
-          "newTab": false
+          "dates": [
+            {
+              "date": "2025-09-18",
+              "time": "09:00 – 17:00",
+              "label": "Register",
+              "url": "#",
+              "newTab": true,
+              "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
+            },
+            {
+              "date": "2025-09-18",
+              "time": "09:00 – 17:00",
+              "label": "Register",
+              "url": "#",
+              "newTab": true,
+              "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
+            },
+            {
+              "date": "2025-09-18",
+              "time": "09:00 – 17:00",
+              "label": "Register",
+              "url": "#",
+              "newTab": true,
+              "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
+            }
+          ],
+          "locationName": "Köln Messe",
+          "displayMode": "compact",
+          "address": "Messeplatz 1<br />\n      50679 Köln",
+          "links": [
+            {
+              "newTab": true,
+              "url": "https://maps.google.com/?q=Berlin+Congress+Center",
+              "label": "Open in Google Maps"
+            }
+          ]
         },
         {
-          "icon": "linkedin",
-          "label": "jane.smith",
-          "href": "mailto:mail@example.com",
-          "newTab": false
+          "dates": [
+            {
+              "date": "2025-09-18",
+              "time": "09:00 – 17:00",
+              "label": "Register",
+              "url": "#",
+              "newTab": true,
+              "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
+            },
+            {
+              "date": "2025-09-18",
+              "time": "09:00 – 17:00",
+              "label": "Register",
+              "url": "#",
+              "newTab": true,
+              "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
+            }
+          ],
+          "locationName": "Berlin Congress Center (BCC) Redaktion & Event GmbH & Co. KG",
+          "displayMode": "compact",
+          "address": "Alexanderplatz 1<br />\n      10178 Berlin",
+          "links": [
+            {
+              "newTab": true,
+              "url": "https://maps.google.com/?q=Berlin+Congress+Center",
+              "label": "Open in Google Maps"
+            },
+            {
+              "newTab": true,
+              "url": "https://www.berlincongresscenter.com",
+              "label": "Location Website"
+            }
+          ]
         }
       ],
-      "copy": "Leads with a vision for innovative, user-centric web designs"
-    },
-    "screenshot": "img/screenshots/components-contact--circular-avatar.png"
-  },
-  {
-    "id": "components-contact--vertical-image-with-paragraph",
-    "group": "Components/Contact",
-    "name": "VerticalImageWithParagraph",
-    "code": "<Contact\n  copy=\"Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences.\"\n  image={{\n    alt: 'Picture of Jane Smith',\n    aspectRatio: 'vertical',\n    fullWidth: false,\n    src: 'img/people/contact-john.png'\n  }}\n  links={[\n    {\n      href: 'mailto:mail@example.com',\n      icon: 'xing',\n      label: 'john.smith',\n      newTab: false\n    },\n    {\n      href: '#',\n      icon: 'twitter',\n      label: '@john_smith',\n      newTab: false\n    }\n  ]}\n  subtitle=\"Sales Representative\"\n  title=\"John Smith\"\n/>",
-    "args": {
-      "image": {
-        "src": "img/people/contact-john.png",
-        "alt": "Picture of Jane Smith",
-        "fullWidth": false,
-        "aspectRatio": "vertical"
-      },
-      "title": "John Smith",
-      "subtitle": "Sales Representative",
-      "links": [
+      "images": [
         {
-          "icon": "xing",
-          "label": "john.smith",
-          "href": "mailto:mail@example.com",
-          "newTab": false
+          "src": "img/close-up-young-business-team-working.png",
+          "alt": "Alt text Image 1",
+          "caption": "Caption Image 1"
         },
         {
-          "icon": "twitter",
-          "label": "@john_smith",
-          "href": "#",
-          "newTab": false
+          "src": "img/low-angle-tall-building-with-many-windows_23-2148230392.png",
+          "alt": "Alt text Image 2",
+          "caption": "Caption Image 2"
+        },
+        {
+          "src": "img/full-shot-different-people-working-together.png",
+          "alt": "Alt text Image 3",
+          "caption": "Caption Image 3"
+        },
+        {
+          "src": "img/top-view-desk-with-keyboard-drawing-pad.png",
+          "alt": "Alt text Image 4",
+          "caption": "Caption Image 4"
         }
       ],
-      "copy": "Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences."
+      "button": {
+        "label": "See all Events",
+        "url": "/#"
+      },
+      "title": "Systemics Design Conference 2025",
+      "intro": "A full-day event for design system professionals and enthusiasts. Join us to learn, share, and connect with like-minded individuals.",
+      "description": "\nJoin us for a day of inspiring talks, hands-on workshops, and networking with design system experts from around the world.\n\n**Highlights:**\n- Keynotes from industry leaders\n- Practical sessions on design tokens, accessibility, and scaling systems\n- Evening networking event with food & drinks\n  ",
+      "downloads": [
+        {
+          "name": "Product Brochure",
+          "format": "PDF",
+          "size": "2.5 MB",
+          "previewImage": "img/offset-image.png",
+          "url": "img/offset-image.png"
+        },
+        {
+          "name": "Company Brochure",
+          "previewImage": "img/kickstartDS/CMS-Starter producthunt-slide-01.svg",
+          "format": "PDF",
+          "size": "3.2 MB",
+          "url": "img/kickstartDS/CMS-Starter producthunt-slide-01.svg"
+        },
+        {
+          "name": "User Guide",
+          "format": "DOC",
+          "size": "20 KB",
+          "url": "assets/user-guide.doc"
+        },
+        {
+          "name": "Technical Specifications",
+          "format": "TXT",
+          "size": "12 KB",
+          "url": "assets/technical-specifications.txt"
+        }
+      ]
     },
-    "screenshot": "img/screenshots/components-contact--vertical-image-with-paragraph.png"
+    "screenshot": "img/screenshots/page-archetypes-event-detail--event-detail.png"
   },
   {
-    "id": "components-contact--full-image-width",
-    "group": "Components/Contact",
-    "name": "FullImageWidth",
-    "code": "<Contact\n  copy=\"Blends artistic flair with technical expertise, creating visually stunning and intuitive websites that captivate users and drive engagement.\"\n  image={{\n    alt: 'Picture of Jane Smith',\n    aspectRatio: 'wide',\n    fullWidth: true,\n    src: 'img/people/contact-jim.png'\n  }}\n  links={[\n    {\n      href: 'mailto:mail@example.com',\n      icon: 'email',\n      label: 'jim.johnsson@mail.com',\n      newTab: false\n    },\n    {\n      href: '#',\n      icon: 'facebook',\n      label: '@jim_johnsson',\n      newTab: false\n    }\n  ]}\n  subtitle=\"Lead Designer\"\n  title=\"Jim Johnsson\"\n/>",
+    "id": "page-archetypes-event-list--event-list",
+    "group": "Page Archetypes/Event List",
+    "name": "EventList",
+    "code": "<EventList\n  events={[\n    {\n      category: 'Real Estate',\n      cta: 'Show appointment',\n      ctaText: 'Show event',\n      date: 'FRI, JAN 16',\n      image: {\n        alt: 'A futuristic AI concept image',\n        src: 'img/close-up-young-business-team-working.png'\n      },\n      location: {\n        address: '123 Main St<br/>\\n10115  Berlin',\n        name: 'Berlin Convention Center'\n      },\n      tags: [\n        'Buyers',\n        'Sellers',\n        'Renters'\n      ],\n      text: 'Join us for the Real Estate Expo 2025, where industry leaders will discuss the future of real estate.',\n      time: '10:00 AM',\n      title: 'Real Estate Expo 2025',\n      url: 'https://example.com'\n    },\n    {\n      category: 'Technology',\n      cta: 'Show appointment',\n      ctaText: 'Show event',\n      date: '14.01.2025',\n      image: {\n        alt: 'A futuristic AI concept image',\n        src: 'img/close-up-young-business-team-working.png'\n      },\n      location: {\n        address: '123 Main St<br/>\\n50677  Cologne',\n        name: 'Cologne Exhibition Center'\n      },\n      tags: [\n        'AI'\n      ],\n      text: 'The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. AI is transforming industries and shaping the future. Don\\'t miss out on this opportunity to learn from experts and network with peers.',\n      time: '15:30 - 17:00',\n      title: 'The Future of AI',\n      url: 'https://example.com'\n    },\n    {\n      category: 'Sustainability',\n      cta: 'Show appointment',\n      ctaText: 'Show event',\n      date: '20/30/2025',\n      image: {\n        alt: 'A futuristic AI concept image',\n        src: 'img/close-up-young-business-team-working.png'\n      },\n      location: {\n        address: '123 Main St<br/>\\n50677  Cologne',\n        name: 'Cologne Exhibition Center'\n      },\n      tags: [\n        'Sustainability',\n        'Technology'\n      ],\n      text: 'Welcome to the Global Innovations Summit 2025, where we will explore the latest advancements in sustainable technologies. Join us for a day of insightful discussions and networking opportunities with industry leaders.',\n      time: 'from 17:00',\n      title: 'Global Innovations Summit 2025: Advancing Sustainable Technologies',\n      url: 'https://example.com'\n    }\n  ]}\n  filter={{\n    applyButton: {\n      label: 'Filter Appointments'\n    },\n    categories: {\n      categoryCheckboxes: [\n        'All',\n        'Buyers',\n        'Sellers',\n        'Renters',\n        'Landlords',\n        'Tenants'\n      ],\n      title: 'Categories',\n      toggle: true\n    },\n    datePicker: {\n      dateFromInput: {\n        label: 'From',\n        placeholder: 'Select a date'\n      },\n      dateToInput: {\n        label: 'To',\n        placeholder: 'Select a date'\n      },\n      title: 'Find Appointment',\n      toggle: true\n    },\n    resetButton: {\n      label: 'Reset Filters'\n    }\n  }}\n/>",
     "args": {
-      "image": {
-        "src": "img/people/contact-jim.png",
-        "alt": "Picture of Jane Smith",
-        "fullWidth": true,
-        "aspectRatio": "wide"
+      "filter": {
+        "datePicker": {
+          "title": "Find Appointment",
+          "dateFromInput": {
+            "label": "From",
+            "placeholder": "Select a date"
+          },
+          "dateToInput": {
+            "label": "To",
+            "placeholder": "Select a date"
+          },
+          "toggle": true
+        },
+        "categories": {
+          "title": "Categories",
+          "categoryCheckboxes": [
+            "All",
+            "Buyers",
+            "Sellers",
+            "Renters",
+            "Landlords",
+            "Tenants"
+          ],
+          "toggle": true
+        },
+        "applyButton": {
+          "label": "Filter Appointments"
+        },
+        "resetButton": {
+          "label": "Reset Filters"
+        }
       },
-      "title": "Jim Johnsson",
-      "subtitle": "Lead Designer",
-      "links": [
+      "events": [
+        {
+          "category": "Real Estate",
+          "title": "Real Estate Expo 2025",
+          "text": "Join us for the Real Estate Expo 2025, where industry leaders will discuss the future of real estate.",
+          "date": "FRI, JAN 16",
+          "time": "10:00 AM",
+          "location": {
+            "name": "Berlin Convention Center",
+            "address": "123 Main St<br/>\n10115  Berlin"
+          },
+          "tags": [
+            "Buyers",
+            "Sellers",
+            "Renters"
+          ],
+          "image": {
+            "src": "img/close-up-young-business-team-working.png",
+            "alt": "A futuristic AI concept image"
+          },
+          "url": "https://example.com",
+          "ctaText": "Show event",
+          "cta": "Show appointment"
+        },
         {
-          "icon": "email",
-          "label": "jim.johnsson@mail.com",
-          "href": "mailto:mail@example.com",
-          "newTab": false
+          "category": "Technology",
+          "title": "The Future of AI",
+          "text": "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. AI is transforming industries and shaping the future. Don't miss out on this opportunity to learn from experts and network with peers.",
+          "date": "14.01.2025",
+          "time": "15:30 - 17:00",
+          "location": {
+            "name": "Cologne Exhibition Center",
+            "address": "123 Main St<br/>\n50677  Cologne"
+          },
+          "tags": [
+            "AI"
+          ],
+          "image": {
+            "src": "img/close-up-young-business-team-working.png",
+            "alt": "A futuristic AI concept image"
+          },
+          "url": "https://example.com",
+          "ctaText": "Show event",
+          "cta": "Show appointment"
         },
         {
-          "icon": "facebook",
-          "label": "@jim_johnsson",
-          "href": "#",
-          "newTab": false
+          "category": "Sustainability",
+          "title": "Global Innovations Summit 2025: Advancing Sustainable Technologies",
+          "text": "Welcome to the Global Innovations Summit 2025, where we will explore the latest advancements in sustainable technologies. Join us for a day of insightful discussions and networking opportunities with industry leaders.",
+          "date": "20/30/2025",
+          "time": "from 17:00",
+          "location": {
+            "name": "Cologne Exhibition Center",
+            "address": "123 Main St<br/>\n50677  Cologne"
+          },
+          "tags": [
+            "Sustainability",
+            "Technology"
+          ],
+          "image": {
+            "src": "img/close-up-young-business-team-working.png",
+            "alt": "A futuristic AI concept image"
+          },
+          "url": "https://example.com",
+          "ctaText": "Show event",
+          "cta": "Show appointment"
         }
-      ],
-      "copy": "Blends artistic flair with technical expertise, creating visually stunning and intuitive websites that captivate users and drive engagement."
+      ]
     },
-    "screenshot": "img/screenshots/components-contact--full-image-width.png"
+    "screenshot": "img/screenshots/page-archetypes-event-list--event-list.png"
   },
   {
-    "id": "components-cta--banner",
-    "group": "Components/Cta",
-    "name": "Banner",
-    "code": "<Cta\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Contact Us',\n      target: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Learn More',\n      target: '#'\n    }\n  ]}\n  contentAlign=\"center\"\n  headline=\"Ready to Transform Your Development Process?\"\n  image={{\n    padding: true\n  }}\n  order={{\n    desktopImageLast: true,\n    mobileImageLast: false\n  }}\n  sub=\"Start your journey today.\"\n  text=\"Get started with our design system today and experience a new level of efficiency and consistency in your projects.\"\n  textAlign=\"center\"\n/>",
+    "id": "page-archetypes-search--search",
+    "group": "Page Archetypes/Search",
+    "name": "Search",
+    "code": "<Search\n  events={[\n    {\n      category: 'Buyers',\n      ctaText: 'Show event',\n      date: 'FRI, JAN 16',\n      image: {\n        alt: 'This is an image of a flower',\n        src: 'https://picsum.photos/seed/flower/800/600'\n      },\n      location: {\n        address: 'Köln',\n        name: 'Stadthalle'\n      },\n      tags: [\n        'AI'\n      ],\n      text: 'The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.',\n      time: '10:00',\n      title: 'This is a event teaser title',\n      url: 'https://example.com'\n    },\n    {\n      category: 'Buyers',\n      ctaText: 'Show event',\n      date: 'FRI, JAN 16',\n      image: {\n        alt: 'This is an image of a flower',\n        src: 'https://picsum.photos/seed/flower/800/600'\n      },\n      location: {\n        address: 'Köln',\n        name: 'Stadthalle'\n      },\n      tags: [\n        'AI'\n      ],\n      text: 'The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.',\n      time: '10:00',\n      title: 'This is a event teaser title',\n      url: 'https://example.com'\n    },\n    {\n      category: 'Buyers',\n      ctaText: 'Show event',\n      date: 'FRI, JAN 16',\n      image: {\n        alt: 'This is an image of a flower',\n        src: 'https://picsum.photos/seed/flower/800/600'\n      },\n      location: {\n        address: 'Köln',\n        name: 'Stadthalle'\n      },\n      tags: [\n        'AI'\n      ],\n      text: 'The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.',\n      time: '10:00',\n      title: 'This is a event teaser title',\n      url: 'https://example.com'\n    }\n  ]}\n  filter={{\n    applyButton: {\n      label: 'Filter Appointments'\n    },\n    categories: {\n      categoryCheckboxes: [\n        'Category Filter',\n        'Category Filter',\n        'Category Filter'\n      ],\n      title: 'Categories',\n      toggle: true\n    },\n    datePicker: {\n      dateFromInput: {\n        label: 'From',\n        placeholder: 'Select a date'\n      },\n      dateToInput: {\n        label: 'To',\n        placeholder: 'Select a date'\n      },\n      title: 'Find Appointment',\n      toggle: true\n    },\n    resetButton: {\n      label: 'Reset Filters'\n    }\n  }}\n  headline={{\n    level: 'h1',\n    style: 'h1',\n    text: 'Search'\n  }}\n  searchFilter={{\n    categories: [\n      {\n        amount: 10,\n        title: 'Pages',\n        url: '#'\n      },\n      {\n        amount: 5,\n        title: 'News',\n        url: '#'\n      },\n      {\n        amount: 2,\n        title: 'Blog Posts',\n        url: '#'\n      }\n    ],\n    title: 'Search Filters'\n  }}\n  searchResults={[\n    {\n      initialMatch: 'Embracing a **sustainable** lifestyle can significantly reduce your environmental impact. From using energy-efficient appliances to adopting renewable energy sources, every small step counts towards a greener future.',\n      matches: [\n        {\n          snippet: 'Simple changes can make your home more **sustainable** and energy-efficient.',\n          title: 'Home',\n          url: '#'\n        },\n        {\n          snippet: 'Adopting a **sustainable** lifestyle benefits both you and the planet.',\n          title: 'Lifestyle',\n          url: '#'\n        }\n      ],\n      previewImage: 'img/people-brainstorming-work-meeting.png',\n      title: 'Sustainable Living: Everyday Tips',\n      url: 'www.example.com/lifestyle/sustainable-living'\n    },\n    {\n      initialMatch: 'Discover how **sustainable** design is shaping the future of urban development, from green buildings to eco-friendly materials. Research shows that **sustainable** architecture not only benefits the environment but also enhances the well-being of its occupants.',\n      previewImage: 'img/full-shot-different-people-working-together.png',\n      title: 'Sustainable Architecture Trends',\n      url: 'www.example.com/architecture/sustainable-trends'\n    },\n    {\n      matches: [\n        {\n          snippet: 'A **sustainable** business model focuses on long-term growth and environmental responsibility.',\n          title: 'Getting Started',\n          url: '#'\n        },\n        {\n          snippet: 'Explore examples of companies that have adopted **sustainable** practices successfully.',\n          title: 'Case Studies',\n          url: '#'\n        },\n        {\n          snippet: 'Using **sustainable** materials can significantly reduce a building’s carbon footprint.',\n          title: 'Materials',\n          url: '#'\n        }\n      ],\n      title: 'How to Build a Sustainable Business',\n      url: 'www.example.com/business/sustainable-model'\n    },\n    {\n      initialMatch: 'Embracing a **sustainable** lifestyle can significantly reduce your environmental impact. From using energy-efficient appliances to adopting renewable energy sources, every small step counts towards a greener future.',\n      matches: [\n        {\n          snippet: 'A **sustainable** business model focuses on long-term growth and environmental responsibility.',\n          title: 'Getting Started',\n          url: '#'\n        },\n        {\n          snippet: 'Explore examples of companies that have adopted **sustainable** practices successfully.',\n          title: 'Case Studies',\n          url: '#'\n        },\n        {\n          snippet: 'Using **sustainable** materials can significantly reduce a building’s carbon footprint.',\n          title: 'Materials',\n          url: '#'\n        }\n      ],\n      previewImage: 'img/full-shot-different-people-working-together.png',\n      title: 'Sustainable Living: Everyday Tips',\n      url: 'www.example.com/business/sustainable-model'\n    }\n  ]}\n/>",
     "args": {
-      "headline": "Ready to Transform Your Development Process?",
-      "sub": "Start your journey today.",
-      "highlightText": false,
-      "colorNeutral": false,
-      "fullWidth": false,
-      "buttons": [
-        {
-          "label": "Contact Us",
-          "target": "#",
-          "icon": "person"
+      "filter": {
+        "datePicker": {
+          "title": "Find Appointment",
+          "dateFromInput": {
+            "label": "From",
+            "placeholder": "Select a date"
+          },
+          "dateToInput": {
+            "label": "To",
+            "placeholder": "Select a date"
+          },
+          "toggle": true
+        },
+        "categories": {
+          "title": "Categories",
+          "categoryCheckboxes": [
+            "Category Filter",
+            "Category Filter",
+            "Category Filter"
+          ],
+          "toggle": true
+        },
+        "applyButton": {
+          "label": "Filter Appointments"
+        },
+        "resetButton": {
+          "label": "Reset Filters"
+        }
+      },
+      "events": [
+        {
+          "category": "Buyers",
+          "title": "This is a event teaser title",
+          "text": "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.",
+          "date": "FRI, JAN 16",
+          "time": "10:00",
+          "location": {
+            "name": "Stadthalle",
+            "address": "Köln"
+          },
+          "tags": [
+            "AI"
+          ],
+          "image": {
+            "src": "https://picsum.photos/seed/flower/800/600",
+            "alt": "This is an image of a flower"
+          },
+          "url": "https://example.com",
+          "ctaText": "Show event"
+        },
+        {
+          "category": "Buyers",
+          "title": "This is a event teaser title",
+          "text": "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.",
+          "date": "FRI, JAN 16",
+          "time": "10:00",
+          "location": {
+            "name": "Stadthalle",
+            "address": "Köln"
+          },
+          "tags": [
+            "AI"
+          ],
+          "image": {
+            "src": "https://picsum.photos/seed/flower/800/600",
+            "alt": "This is an image of a flower"
+          },
+          "url": "https://example.com",
+          "ctaText": "Show event"
+        },
+        {
+          "category": "Buyers",
+          "title": "This is a event teaser title",
+          "text": "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.",
+          "date": "FRI, JAN 16",
+          "time": "10:00",
+          "location": {
+            "name": "Stadthalle",
+            "address": "Köln"
+          },
+          "tags": [
+            "AI"
+          ],
+          "image": {
+            "src": "https://picsum.photos/seed/flower/800/600",
+            "alt": "This is an image of a flower"
+          },
+          "url": "https://example.com",
+          "ctaText": "Show event"
+        }
+      ],
+      "headline": {
+        "text": "Search",
+        "level": "h1",
+        "style": "h1"
+      },
+      "searchFilter": {
+        "title": "Search Filters",
+        "categories": [
+          {
+            "title": "Pages",
+            "url": "#",
+            "amount": 10
+          },
+          {
+            "title": "News",
+            "url": "#",
+            "amount": 5
+          },
+          {
+            "title": "Blog Posts",
+            "url": "#",
+            "amount": 2
+          }
+        ]
+      },
+      "searchResults": [
+        {
+          "title": "Sustainable Living: Everyday Tips",
+          "previewImage": "img/people-brainstorming-work-meeting.png",
+          "initialMatch": "Embracing a **sustainable** lifestyle can significantly reduce your environmental impact. From using energy-efficient appliances to adopting renewable energy sources, every small step counts towards a greener future.",
+          "matches": [
+            {
+              "title": "Home",
+              "snippet": "Simple changes can make your home more **sustainable** and energy-efficient.",
+              "url": "#"
+            },
+            {
+              "title": "Lifestyle",
+              "snippet": "Adopting a **sustainable** lifestyle benefits both you and the planet.",
+              "url": "#"
+            }
+          ],
+          "url": "www.example.com/lifestyle/sustainable-living"
+        },
+        {
+          "title": "Sustainable Architecture Trends",
+          "previewImage": "img/full-shot-different-people-working-together.png",
+          "initialMatch": "Discover how **sustainable** design is shaping the future of urban development, from green buildings to eco-friendly materials. Research shows that **sustainable** architecture not only benefits the environment but also enhances the well-being of its occupants.",
+          "url": "www.example.com/architecture/sustainable-trends"
+        },
+        {
+          "title": "How to Build a Sustainable Business",
+          "matches": [
+            {
+              "title": "Getting Started",
+              "snippet": "A **sustainable** business model focuses on long-term growth and environmental responsibility.",
+              "url": "#"
+            },
+            {
+              "title": "Case Studies",
+              "snippet": "Explore examples of companies that have adopted **sustainable** practices successfully.",
+              "url": "#"
+            },
+            {
+              "title": "Materials",
+              "snippet": "Using **sustainable** materials can significantly reduce a building’s carbon footprint.",
+              "url": "#"
+            }
+          ],
+          "url": "www.example.com/business/sustainable-model"
+        },
+        {
+          "title": "Sustainable Living: Everyday Tips",
+          "previewImage": "img/full-shot-different-people-working-together.png",
+          "initialMatch": "Embracing a **sustainable** lifestyle can significantly reduce your environmental impact. From using energy-efficient appliances to adopting renewable energy sources, every small step counts towards a greener future.",
+          "matches": [
+            {
+              "title": "Getting Started",
+              "snippet": "A **sustainable** business model focuses on long-term growth and environmental responsibility.",
+              "url": "#"
+            },
+            {
+              "title": "Case Studies",
+              "snippet": "Explore examples of companies that have adopted **sustainable** practices successfully.",
+              "url": "#"
+            },
+            {
+              "title": "Materials",
+              "snippet": "Using **sustainable** materials can significantly reduce a building’s carbon footprint.",
+              "url": "#"
+            }
+          ],
+          "url": "www.example.com/business/sustainable-model"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/page-archetypes-search--search.png"
+  },
+  {
+    "id": "components-contact--wide-image",
+    "group": "Components/Contact",
+    "name": "WideImage",
+    "code": "<Contact\n  image={{\n    alt: 'Picture of Isabella Doe',\n    aspectRatio: 'wide',\n    fullWidth: false,\n    src: 'img/people/contact-isabella.png'\n  }}\n  links={[\n    {\n      ariaLabel: 'Isabella Doe on Twitter',\n      icon: 'twitter',\n      label: '@Isabella_Doe',\n      newTab: false,\n      url: '#'\n    },\n    {\n      ariaLabel: 'Isabella Doe on LinkedIn',\n      icon: 'linkedin',\n      label: 'Isabella.Doe',\n      newTab: false,\n      url: 'mailto:mail@example.com'\n    }\n  ]}\n  subtitle=\"Creative Director\"\n  title=\"Isabella Doe\"\n/>",
+    "args": {
+      "image": {
+        "src": "img/people/contact-isabella.png",
+        "alt": "Picture of Isabella Doe",
+        "fullWidth": false,
+        "aspectRatio": "wide"
+      },
+      "title": "Isabella Doe",
+      "subtitle": "Creative Director",
+      "links": [
+        {
+          "icon": "twitter",
+          "label": "@Isabella_Doe",
+          "url": "#",
+          "newTab": false,
+          "ariaLabel": "Isabella Doe on Twitter"
+        },
+        {
+          "icon": "linkedin",
+          "label": "Isabella.Doe",
+          "url": "mailto:mail@example.com",
+          "newTab": false,
+          "ariaLabel": "Isabella Doe on LinkedIn"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-contact--wide-image.png"
+  },
+  {
+    "id": "components-contact--circular-avatar",
+    "group": "Components/Contact",
+    "name": "CircularAvatar",
+    "code": "<Contact\n  copy=\"Leads with a vision for innovative, user-centric web designs\"\n  image={{\n    alt: 'Picture of Isabella Doe',\n    aspectRatio: 'square',\n    fullWidth: false,\n    src: 'img/people/author-emily.png'\n  }}\n  links={[\n    {\n      ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n      icon: 'twitter',\n      label: '@jane_smith',\n      newTab: false,\n      url: '#'\n    },\n    {\n      ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n      icon: 'linkedin',\n      label: 'jane.smith',\n      newTab: false,\n      url: 'mailto:mail@example.com'\n    }\n  ]}\n  subtitle=\"CEO at DS Agency\"\n  title=\"Jane Smith\"\n/>",
+    "args": {
+      "image": {
+        "src": "img/people/author-emily.png",
+        "alt": "Picture of Isabella Doe",
+        "fullWidth": false,
+        "aspectRatio": "square"
+      },
+      "title": "Jane Smith",
+      "subtitle": "CEO at DS Agency",
+      "links": [
+        {
+          "icon": "twitter",
+          "label": "@jane_smith",
+          "url": "#",
+          "newTab": false,
+          "ariaLabel": "Link to Isabella Doe's social media profile"
+        },
+        {
+          "icon": "linkedin",
+          "label": "jane.smith",
+          "url": "mailto:mail@example.com",
+          "newTab": false,
+          "ariaLabel": "Link to Isabella Doe's social media profile"
+        }
+      ],
+      "copy": "Leads with a vision for innovative, user-centric web designs"
+    },
+    "screenshot": "img/screenshots/components-contact--circular-avatar.png"
+  },
+  {
+    "id": "components-contact--vertical-image-with-paragraph",
+    "group": "Components/Contact",
+    "name": "VerticalImageWithParagraph",
+    "code": "<Contact\n  copy=\"Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences.\"\n  image={{\n    alt: 'Picture of Isabella Doe',\n    aspectRatio: 'vertical',\n    fullWidth: false,\n    src: 'img/people/contact-john.png'\n  }}\n  links={[\n    {\n      ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n      icon: 'xing',\n      label: 'john.smith',\n      newTab: false,\n      url: 'mailto:mail@example.com'\n    },\n    {\n      ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n      icon: 'twitter',\n      label: '@john_smith',\n      newTab: false,\n      url: '#'\n    }\n  ]}\n  subtitle=\"Sales Representative\"\n  title=\"John Smith\"\n/>",
+    "args": {
+      "image": {
+        "src": "img/people/contact-john.png",
+        "alt": "Picture of Isabella Doe",
+        "fullWidth": false,
+        "aspectRatio": "vertical"
+      },
+      "title": "John Smith",
+      "subtitle": "Sales Representative",
+      "links": [
+        {
+          "icon": "xing",
+          "label": "john.smith",
+          "url": "mailto:mail@example.com",
+          "newTab": false,
+          "ariaLabel": "Link to Isabella Doe's social media profile"
+        },
+        {
+          "icon": "twitter",
+          "label": "@john_smith",
+          "url": "#",
+          "newTab": false,
+          "ariaLabel": "Link to Isabella Doe's social media profile"
+        }
+      ],
+      "copy": "Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences."
+    },
+    "screenshot": "img/screenshots/components-contact--vertical-image-with-paragraph.png"
+  },
+  {
+    "id": "components-contact--full-image-width",
+    "group": "Components/Contact",
+    "name": "FullImageWidth",
+    "code": "<Contact\n  copy=\"Blends artistic flair with technical expertise, creating visually stunning and intuitive websites that captivate users and drive engagement.\"\n  image={{\n    alt: 'Picture of Isabella Doe',\n    aspectRatio: 'wide',\n    fullWidth: true,\n    src: 'img/people/contact-jim.png'\n  }}\n  links={[\n    {\n      ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n      icon: 'email',\n      label: 'jim.johnsson@mail.com',\n      newTab: false,\n      url: 'mailto:mail@example.com'\n    },\n    {\n      ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n      icon: 'facebook',\n      label: '@jim_johnsson',\n      newTab: false,\n      url: '#'\n    }\n  ]}\n  subtitle=\"Lead Designer\"\n  title=\"Jim Johnsson\"\n/>",
+    "args": {
+      "image": {
+        "src": "img/people/contact-jim.png",
+        "alt": "Picture of Isabella Doe",
+        "fullWidth": true,
+        "aspectRatio": "wide"
+      },
+      "title": "Jim Johnsson",
+      "subtitle": "Lead Designer",
+      "links": [
+        {
+          "icon": "email",
+          "label": "jim.johnsson@mail.com",
+          "url": "mailto:mail@example.com",
+          "newTab": false,
+          "ariaLabel": "Link to Isabella Doe's social media profile"
+        },
+        {
+          "icon": "facebook",
+          "label": "@jim_johnsson",
+          "url": "#",
+          "newTab": false,
+          "ariaLabel": "Link to Isabella Doe's social media profile"
+        }
+      ],
+      "copy": "Blends artistic flair with technical expertise, creating visually stunning and intuitive websites that captivate users and drive engagement."
+    },
+    "screenshot": "img/screenshots/components-contact--full-image-width.png"
+  },
+  {
+    "id": "corporate-content-nav--default",
+    "group": "Corporate / Content Nav",
+    "name": "Default",
+    "code": "<ContentNav\n  image={{\n    alt: 'A group of people collaborating in an office setting',\n    src: 'img/full-shot-different-people-working-together.png'\n  }}\n  initiallyShown={4}\n  links={[\n    {\n      label: 'Market Insights',\n      url: '#'\n    },\n    {\n      label: 'Industry Trends',\n      url: '#'\n    },\n    {\n      label: 'Competitor Analysis',\n      url: '#'\n    },\n    {\n      label: 'Customer Feedback',\n      url: '#'\n    },\n    {\n      label: 'Sales Data',\n      url: '#'\n    },\n    {\n      label: 'Product Development',\n      url: '#'\n    },\n    {\n      label: 'Supply Chain Management',\n      url: '#'\n    },\n    {\n      label: 'Financial Performance',\n      url: '#'\n    },\n    {\n      label: 'Regulatory Compliance',\n      url: '#'\n    }\n  ]}\n  topic=\"Industry Intelligence\"\n/>",
+    "args": {
+      "initiallyShown": 4,
+      "image": {
+        "src": "img/full-shot-different-people-working-together.png",
+        "alt": "A group of people collaborating in an office setting"
+      },
+      "topic": "Industry Intelligence",
+      "links": [
+        {
+          "label": "Market Insights",
+          "url": "#"
+        },
+        {
+          "label": "Industry Trends",
+          "url": "#"
+        },
+        {
+          "label": "Competitor Analysis",
+          "url": "#"
+        },
+        {
+          "label": "Customer Feedback",
+          "url": "#"
+        },
+        {
+          "label": "Sales Data",
+          "url": "#"
+        },
+        {
+          "label": "Product Development",
+          "url": "#"
+        },
+        {
+          "label": "Supply Chain Management",
+          "url": "#"
+        },
+        {
+          "label": "Financial Performance",
+          "url": "#"
+        },
+        {
+          "label": "Regulatory Compliance",
+          "url": "#"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/corporate-content-nav--default.png"
+  },
+  {
+    "id": "corporate-cookie-consent--card",
+    "group": "Corporate/Cookie Consent",
+    "name": "Card",
+    "code": "<PureCookieConsent\n  component=\"dsa.cookie-consent\"\n  dialogue={{\n    alwaysActiveLabel: 'Always Active',\n    buttons: {\n      acceptLabel: 'Accept All',\n      rejectLabel: 'Reject All',\n      savePreferencesLabel: 'Save Preferences'\n    },\n    description: 'Manage your cookie preferences below.',\n    options: [\n      {\n        description: 'These cookies help us understand how our visitors interact with the website.',\n        key: 'measurement',\n        name: 'Analytics Cookies'\n      },\n      {\n        description: 'These cookies are used to deliver advertisements that are relevant to you.',\n        key: 'marketing',\n        name: 'Marketing Cookies'\n      },\n      {\n        description: 'These cookies allow the website to remember choices you make and provide enhanced, more personal features.',\n        key: 'functionality',\n        name: 'Functional Cookies'\n      },\n      {\n        description: 'These cookies collect information about how visitors use the website, such as which pages are visited most often and if they get error messages from web pages.',\n        key: 'experience',\n        name: 'Performance Cookies'\n      }\n    ],\n    required: [\n      {\n        description: 'These cookies are necessary for the website to function.',\n        key: 'necessary',\n        name: 'Essential Cookies'\n      }\n    ],\n    title: 'Cookie Preferences',\n    toggleLabels: {\n      accept: 'Accept',\n      reject: 'Reject'\n    }\n  }}\n  notice={{\n    acceptButton: {\n      label: 'Accept All'\n    },\n    customizeButton: {\n      label: 'Customize',\n      variant: 'tertiary'\n    },\n    decisionButtonVariant: 'primary',\n    description: 'We use cookies to enhance your experience on our website. You can choose which cookies to accept.',\n    displayMode: 'card',\n    rejectButton: {\n      label: 'Reject All'\n    },\n    title: 'We use cookies'\n  }}\n  revisitButton={{\n    label: 'Manage Cookies'\n  }}\n/>",
+    "args": {
+      "notice": {
+        "displayMode": "card",
+        "title": "We use cookies",
+        "acceptButton": {
+          "label": "Accept All"
+        },
+        "rejectButton": {
+          "label": "Reject All"
+        },
+        "customizeButton": {
+          "label": "Customize",
+          "variant": "tertiary"
+        },
+        "decisionButtonVariant": "primary",
+        "description": "We use cookies to enhance your experience on our website. You can choose which cookies to accept."
+      },
+      "revisitButton": {
+        "label": "Manage Cookies"
+      },
+      "dialogue": {
+        "title": "Cookie Preferences",
+        "description": "Manage your cookie preferences below.",
+        "required": [
+          {
+            "key": "necessary",
+            "name": "Essential Cookies",
+            "description": "These cookies are necessary for the website to function."
+          }
+        ],
+        "buttons": {
+          "acceptLabel": "Accept All",
+          "rejectLabel": "Reject All",
+          "savePreferencesLabel": "Save Preferences"
+        },
+        "options": [
+          {
+            "key": "measurement",
+            "name": "Analytics Cookies",
+            "description": "These cookies help us understand how our visitors interact with the website."
+          },
+          {
+            "key": "marketing",
+            "name": "Marketing Cookies",
+            "description": "These cookies are used to deliver advertisements that are relevant to you."
+          },
+          {
+            "key": "functionality",
+            "name": "Functional Cookies",
+            "description": "These cookies allow the website to remember choices you make and provide enhanced, more personal features."
+          },
+          {
+            "key": "experience",
+            "name": "Performance Cookies",
+            "description": "These cookies collect information about how visitors use the website, such as which pages are visited most often and if they get error messages from web pages."
+          }
+        ],
+        "toggleLabels": {
+          "accept": "Accept",
+          "reject": "Reject"
+        },
+        "alwaysActiveLabel": "Always Active"
+      },
+      "component": "dsa.cookie-consent"
+    },
+    "screenshot": "img/screenshots/corporate-cookie-consent--card.png"
+  },
+  {
+    "id": "corporate-cookie-consent--banner",
+    "group": "Corporate/Cookie Consent",
+    "name": "Banner",
+    "code": "<PureCookieConsent\n  component=\"dsa.cookie-consent\"\n  dialogue={{\n    alwaysActiveLabel: 'Always Active',\n    buttons: {\n      acceptLabel: 'Accept All',\n      rejectLabel: 'Reject All',\n      savePreferencesLabel: 'Save Preferences'\n    },\n    decisionButtonVariant: 'tertiary',\n    description: 'Here you can enable or disable different types of cookies. Essential cookies are always active as they are necessary for the website to function properly. You can change your preferences at any time. Please note that disabling certain cookies may affect your experience on our website.',\n    options: [\n      {\n        description: 'These cookies help us to understand how visitors interact with our website by collecting and reporting information anonymously.',\n        key: 'functionality',\n        name: 'Statistics Cookies'\n      },\n      {\n        description: 'These cookies allow the website to remember choices you make, such as your language or region, to provide a more personalized experience.',\n        key: 'functionality',\n        name: 'Personalization Cookies'\n      },\n      {\n        description: 'Advertising cookies are used to deliver relevant ads and marketing campaigns to you. They track visitors across websites and collect information to provide customized ads.',\n        key: 'functionality',\n        name: 'Advertising Cookies'\n      }\n    ],\n    required: [\n      {\n        description: 'These cookies are required for basic website functionality, such as page navigation and access to secure areas of the website. The website cannot function properly without these cookies.',\n        key: 'necessary',\n        name: 'Essential Cookies'\n      }\n    ],\n    title: 'Manage Your Cookie Preferences',\n    toggleLabels: {\n      accept: 'Accept',\n      reject: 'Reject'\n    }\n  }}\n  notice={{\n    acceptButton: {\n      label: 'Accept All Cookies'\n    },\n    customizeButton: {\n      label: 'Customize Settings',\n      variant: 'secondary'\n    },\n    decisionButtonVariant: 'tertiary',\n    description: 'We use cookies and similar technologies to personalize content, provide social media features, and analyze our traffic. You can choose which categories you want to allow and change your preferences at any time. For more information, please see our privacy policy.',\n    displayMode: 'banner',\n    rejectButton: {\n      label: 'Reject Non-Essential'\n    },\n    title: 'Your Privacy Matters to Us'\n  }}\n  revisitButton={{\n    label: 'Manage Cookies'\n  }}\n/>",
+    "args": {
+      "notice": {
+        "displayMode": "banner",
+        "title": "Your Privacy Matters to Us",
+        "acceptButton": {
+          "label": "Accept All Cookies"
+        },
+        "rejectButton": {
+          "label": "Reject Non-Essential"
+        },
+        "customizeButton": {
+          "label": "Customize Settings",
+          "variant": "secondary"
+        },
+        "decisionButtonVariant": "tertiary",
+        "description": "We use cookies and similar technologies to personalize content, provide social media features, and analyze our traffic. You can choose which categories you want to allow and change your preferences at any time. For more information, please see our privacy policy."
+      },
+      "revisitButton": {
+        "label": "Manage Cookies"
+      },
+      "dialogue": {
+        "title": "Manage Your Cookie Preferences",
+        "description": "Here you can enable or disable different types of cookies. Essential cookies are always active as they are necessary for the website to function properly. You can change your preferences at any time. Please note that disabling certain cookies may affect your experience on our website.",
+        "required": [
+          {
+            "key": "necessary",
+            "name": "Essential Cookies",
+            "description": "These cookies are required for basic website functionality, such as page navigation and access to secure areas of the website. The website cannot function properly without these cookies."
+          }
+        ],
+        "buttons": {
+          "acceptLabel": "Accept All",
+          "rejectLabel": "Reject All",
+          "savePreferencesLabel": "Save Preferences"
+        },
+        "options": [
+          {
+            "key": "functionality",
+            "name": "Statistics Cookies",
+            "description": "These cookies help us to understand how visitors interact with our website by collecting and reporting information anonymously."
+          },
+          {
+            "key": "functionality",
+            "name": "Personalization Cookies",
+            "description": "These cookies allow the website to remember choices you make, such as your language or region, to provide a more personalized experience."
+          },
+          {
+            "key": "functionality",
+            "name": "Advertising Cookies",
+            "description": "Advertising cookies are used to deliver relevant ads and marketing campaigns to you. They track visitors across websites and collect information to provide customized ads."
+          }
+        ],
+        "toggleLabels": {
+          "accept": "Accept",
+          "reject": "Reject"
+        },
+        "alwaysActiveLabel": "Always Active",
+        "decisionButtonVariant": "tertiary"
+      },
+      "component": "dsa.cookie-consent"
+    },
+    "screenshot": "img/screenshots/corporate-cookie-consent--banner.png"
+  },
+  {
+    "id": "corporate-cookie-consent--c-15-t",
+    "group": "Corporate/Cookie Consent",
+    "name": "C15t",
+    "code": "<>\n  <Button\n    label=\"reset\"\n    onClick={function noRefCheck() {}}\n    size=\"small\"\n  />\n  <hr />\n  <CookieConsent\n    component=\"dsa.cookie-consent.c15t.offline\"\n    dialogue={{\n      alwaysActiveLabel: 'Always Active',\n      buttons: {\n        acceptLabel: 'Accept All',\n        rejectLabel: 'Reject All',\n        savePreferencesLabel: 'Save Preferences'\n      },\n      description: 'Customize your privacy settings here. You can choose which types of cookies and tracking technologies you allow.',\n      options: [\n        {\n          description: 'These cookies are necessary for the website to function.',\n          key: 'measurement',\n          name: 'Essential Cookies'\n        },\n        {\n          description: 'These cookies are necessary for the website to function.',\n          key: 'marketing',\n          name: 'Essential Cookies'\n        },\n        {\n          description: 'These cookies are necessary for the website to function.',\n          key: 'functionality',\n          name: 'Essential Cookies'\n        },\n        {\n          description: 'These cookies are necessary for the website to function.',\n          key: 'experience',\n          name: 'Essential Cookies'\n        }\n      ],\n      required: [\n        {\n          description: 'This cookie is essential for the website to function and cannot be disabled.',\n          key: 'necessary',\n          name: 'Session Cookie'\n        }\n      ],\n      title: 'Manage Cookie Preferences',\n      toggleLabels: {\n        accept: 'Accept',\n        reject: 'Reject'\n      }\n    }}\n    notice={{\n      acceptButton: {\n        label: 'Accept All Cookies'\n      },\n      customizeButton: {\n        label: 'Customize Cookies',\n        variant: 'tertiary'\n      },\n      decisionButtonVariant: 'primary',\n      description: 'This website uses cookies to ensure you get the best experience on our website.',\n      displayMode: 'card',\n      rejectButton: {\n        label: 'Reject All Cookies'\n      },\n      title: 'We value your privacy'\n    }}\n    revisitButton={{\n      label: 'Manage Cookies'\n    }}\n  />\n</>",
+    "args": {
+      "notice": {
+        "displayMode": "card",
+        "title": "We value your privacy",
+        "acceptButton": {
+          "label": "Accept All Cookies"
+        },
+        "rejectButton": {
+          "label": "Reject All Cookies"
+        },
+        "customizeButton": {
+          "label": "Customize Cookies",
+          "variant": "tertiary"
+        },
+        "decisionButtonVariant": "primary",
+        "description": "This website uses cookies to ensure you get the best experience on our website."
+      },
+      "revisitButton": {
+        "label": "Manage Cookies"
+      },
+      "dialogue": {
+        "title": "Manage Cookie Preferences",
+        "description": "Customize your privacy settings here. You can choose which types of cookies and tracking technologies you allow.",
+        "required": [
+          {
+            "key": "necessary",
+            "name": "Session Cookie",
+            "description": "This cookie is essential for the website to function and cannot be disabled."
+          }
+        ],
+        "buttons": {
+          "acceptLabel": "Accept All",
+          "rejectLabel": "Reject All",
+          "savePreferencesLabel": "Save Preferences"
+        },
+        "options": [
+          {
+            "key": "measurement",
+            "name": "Essential Cookies",
+            "description": "These cookies are necessary for the website to function."
+          },
+          {
+            "key": "marketing",
+            "name": "Essential Cookies",
+            "description": "These cookies are necessary for the website to function."
+          },
+          {
+            "key": "functionality",
+            "name": "Essential Cookies",
+            "description": "These cookies are necessary for the website to function."
+          },
+          {
+            "key": "experience",
+            "name": "Essential Cookies",
+            "description": "These cookies are necessary for the website to function."
+          }
+        ],
+        "toggleLabels": {
+          "accept": "Accept",
+          "reject": "Reject"
+        },
+        "alwaysActiveLabel": "Always Active"
+      },
+      "component": "dsa.cookie-consent.c15t.offline"
+    },
+    "screenshot": "img/screenshots/corporate-cookie-consent--c-15-t.png"
+  },
+  {
+    "id": "components-cta--banner",
+    "group": "Components/Cta",
+    "name": "Banner",
+    "code": "<Cta\n  align=\"center\"\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Contact Us',\n      url: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Learn More',\n      url: '#'\n    }\n  ]}\n  headline=\"Ready to Transform Your Development Process?\"\n  image={{\n    align: 'center',\n    padding: true\n  }}\n  order={{\n    desktopImageLast: true,\n    mobileImageLast: false\n  }}\n  sub=\"Start your journey today.\"\n  text=\"Get started with our design system today and experience a new level of efficiency and consistency in your projects.\"\n  textAlign=\"center\"\n/>",
+    "args": {
+      "headline": "Ready to Transform Your Development Process?",
+      "sub": "Start your journey today.",
+      "highlightText": false,
+      "colorNeutral": false,
+      "buttons": [
+        {
+          "label": "Contact Us",
+          "url": "#",
+          "icon": "person"
         },
         {
           "label": "Learn More",
-          "target": "#",
+          "url": "#",
           "icon": "date"
         }
       ],
       "image": {
-        "padding": true
+        "padding": true,
+        "align": "center"
       },
       "order": {
         "mobileImageLast": false,
         "desktopImageLast": true
       },
       "textAlign": "center",
-      "contentAlign": "center",
+      "align": "center",
+      "padding": false,
       "text": "Get started with our design system today and experience a new level of efficiency and consistency in your projects."
     },
     "screenshot": "img/screenshots/components-cta--banner.png"
@@ -910,29 +1824,30 @@
     "id": "components-cta--highlighted",
     "group": "Components/Cta",
     "name": "Highlighted",
-    "code": "<Cta\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Get Started',\n      target: '#'\n    }\n  ]}\n  contentAlign=\"center\"\n  headline=\"Why Choose Our Design System?\"\n  highlightText\n  image={{\n    padding: true\n  }}\n  order={{\n    desktopImageLast: true,\n    mobileImageLast: false\n  }}\n  sub=\"Built for consistency and speed.\"\n  text=\"Our design system is built with scalability and efficiency in mind. It allows for consistent UI across different platforms, making your development process smoother and faster.\"\n  textAlign=\"center\"\n/>",
+    "code": "<Cta\n  align=\"center\"\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Get Started',\n      url: '#'\n    }\n  ]}\n  headline=\"Why Choose Our Design System?\"\n  highlightText\n  image={{\n    align: 'center',\n    padding: true\n  }}\n  order={{\n    desktopImageLast: true,\n    mobileImageLast: false\n  }}\n  sub=\"Built for consistency and speed.\"\n  text=\"Our design system is built with scalability and efficiency in mind. It allows for consistent UI across different platforms, making your development process smoother and faster.\"\n  textAlign=\"center\"\n/>",
     "args": {
       "headline": "Why Choose Our Design System?",
       "sub": "Built for consistency and speed.",
       "highlightText": true,
       "colorNeutral": false,
-      "fullWidth": false,
       "buttons": [
         {
           "label": "Get Started",
-          "target": "#",
+          "url": "#",
           "icon": "person"
         }
       ],
       "image": {
-        "padding": true
+        "padding": true,
+        "align": "center"
       },
       "order": {
         "mobileImageLast": false,
         "desktopImageLast": true
       },
       "textAlign": "center",
-      "contentAlign": "center",
+      "align": "center",
+      "padding": false,
       "text": "Our design system is built with scalability and efficiency in mind. It allows for consistent UI across different platforms, making your development process smoother and faster."
     },
     "screenshot": "img/screenshots/components-cta--highlighted.png"
@@ -941,29 +1856,30 @@
     "id": "components-cta--left-aligned",
     "group": "Components/Cta",
     "name": "LeftAligned",
-    "code": "<Cta\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Learn More',\n      target: '#'\n    }\n  ]}\n  contentAlign=\"center\"\n  headline=\"Experience Our Design System\"\n  image={{\n    padding: true\n  }}\n  order={{\n    desktopImageLast: true,\n    mobileImageLast: false\n  }}\n  sub=\"Efficient, scalable, seamless.\"\n  text=\"Our design system offers a seamless and efficient way to build scalable applications. Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.\"\n  textAlign=\"left\"\n/>",
+    "code": "<Cta\n  align=\"center\"\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Learn More',\n      url: '#'\n    }\n  ]}\n  headline=\"Experience Our Design System\"\n  image={{\n    align: 'center',\n    padding: true\n  }}\n  order={{\n    desktopImageLast: true,\n    mobileImageLast: false\n  }}\n  sub=\"Efficient, scalable, seamless.\"\n  text=\"Our design system offers a seamless and efficient way to build scalable applications. Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.\"\n  textAlign=\"left\"\n/>",
     "args": {
       "headline": "Experience Our Design System",
       "sub": "Efficient, scalable, seamless.",
       "highlightText": false,
       "colorNeutral": false,
-      "fullWidth": false,
       "buttons": [
         {
           "label": "Learn More",
-          "target": "#",
+          "url": "#",
           "icon": "person"
         }
       ],
       "image": {
-        "padding": true
+        "padding": true,
+        "align": "center"
       },
       "order": {
         "mobileImageLast": false,
         "desktopImageLast": true
       },
       "textAlign": "left",
-      "contentAlign": "center",
+      "align": "center",
+      "padding": false,
       "text": "Our design system offers a seamless and efficient way to build scalable applications. Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture."
     },
     "screenshot": "img/screenshots/components-cta--left-aligned.png"
@@ -972,28 +1888,26 @@
     "id": "components-cta--product-advertisement",
     "group": "Components/Cta",
     "name": "ProductAdvertisement",
-    "code": "<Cta\n  backgroundImage=\"img/bg_dot-carpet-blue.svg\"\n  buttons={[\n    {\n      icon: 'chevron-right',\n      label: 'Shop Now',\n      target: '/shop',\n      variant: 'primary'\n    },\n    {\n      label: 'Learn More',\n      target: '/product-info',\n      variant: 'secondary'\n    }\n  ]}\n  contentAlign=\"center\"\n  headline=\"Experience Immersive Sound\"\n  highlightText\n  image={{\n    alt: 'Over-Ear Headphones',\n    padding: false,\n    src: 'img/showcases/comp_audio04.png'\n  }}\n  order={{\n    desktopImageLast: false,\n    mobileImageLast: false\n  }}\n  sub=\"With Our Premium Over-Ear Headphones\"\n  text=\"Our over-ear headphones provide an immersive audio experience. With noise-cancellation technology and high-quality sound.\"\n  textAlign=\"left\"\n  width=\"wide\"\n/>",
+    "code": "<Cta\n  align=\"center\"\n  backgroundImage=\"img/bg_dot-carpet-blue.svg\"\n  buttons={[\n    {\n      icon: 'chevron-right',\n      label: 'Shop Now',\n      url: '/shop'\n    },\n    {\n      label: 'Learn More',\n      url: '/product-info'\n    }\n  ]}\n  headline=\"Experience Immersive Sound\"\n  highlightText\n  image={{\n    align: 'center',\n    alt: 'Over-Ear Headphones',\n    padding: false,\n    src: 'img/showcases/comp_audio04.png'\n  }}\n  order={{\n    desktopImageLast: false,\n    mobileImageLast: false\n  }}\n  padding\n  sub=\"With Our Premium Over-Ear Headphones\"\n  text=\"Our over-ear headphones provide an immersive audio experience. With noise-cancellation technology and high-quality sound.\"\n  textAlign=\"left\"\n/>",
     "args": {
       "headline": "Experience Immersive Sound",
       "sub": "With Our Premium Over-Ear Headphones",
       "highlightText": true,
       "colorNeutral": false,
-      "fullWidth": false,
       "buttons": [
         {
           "label": "Shop Now",
-          "target": "/shop",
-          "variant": "primary",
+          "url": "/shop",
           "icon": "chevron-right"
         },
         {
           "label": "Learn More",
-          "target": "/product-info",
-          "variant": "secondary"
+          "url": "/product-info"
         }
       ],
       "image": {
         "padding": false,
+        "align": "center",
         "src": "img/showcases/comp_audio04.png",
         "alt": "Over-Ear Headphones"
       },
@@ -1002,10 +1916,10 @@
         "desktopImageLast": false
       },
       "textAlign": "left",
-      "contentAlign": "center",
+      "align": "center",
+      "padding": true,
       "text": "Our over-ear headphones provide an immersive audio experience. With noise-cancellation technology and high-quality sound.",
-      "backgroundImage": "img/bg_dot-carpet-blue.svg",
-      "width": "wide"
+      "backgroundImage": "img/bg_dot-carpet-blue.svg"
     },
     "screenshot": "img/screenshots/components-cta--product-advertisement.png"
   },
@@ -1013,37 +1927,37 @@
     "id": "components-cta--contact-banner",
     "group": "Components/Cta",
     "name": "ContactBanner",
-    "code": "<Cta\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Contact us',\n      target: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Book a meeting',\n      target: '#'\n    }\n  ]}\n  contentAlign=\"center\"\n  fullWidth\n  headline=\"Get in touch\"\n  image={{\n    padding: false,\n    src: 'img/contact-person.png'\n  }}\n  order={{\n    desktopImageLast: false,\n    mobileImageLast: false\n  }}\n  sub=\"Chat with us about getting your product or platform to market faster\"\n  text=\"Our modular design approach allows for flexibility and scalability in your application's architecture.\"\n  textAlign=\"left\"\n  width=\"wide\"\n/>",
+    "code": "<Cta\n  align=\"center\"\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Contact us',\n      url: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Book a meeting',\n      url: '#'\n    }\n  ]}\n  headline=\"Get in touch\"\n  image={{\n    align: 'center',\n    padding: false,\n    src: 'img/people/contact-person.png'\n  }}\n  order={{\n    desktopImageLast: false,\n    mobileImageLast: false\n  }}\n  padding\n  sub=\"Chat with us about getting your product or platform to market faster\"\n  text=\"Our modular design approach allows for flexibility and scalability in your application's architecture.\"\n  textAlign=\"left\"\n/>",
     "args": {
       "headline": "Get in touch",
       "sub": "Chat with us about getting your product or platform to market faster",
       "highlightText": false,
       "colorNeutral": false,
-      "fullWidth": true,
       "buttons": [
         {
           "label": "Contact us",
           "icon": "person",
-          "target": "#"
+          "url": "#"
         },
         {
           "label": "Book a meeting",
           "icon": "date",
-          "target": "#"
+          "url": "#"
         }
       ],
       "image": {
         "padding": false,
-        "src": "img/contact-person.png"
+        "align": "center",
+        "src": "img/people/contact-person.png"
       },
       "order": {
         "mobileImageLast": false,
         "desktopImageLast": false
       },
       "textAlign": "left",
-      "contentAlign": "center",
-      "text": "Our modular design approach allows for flexibility and scalability in your application's architecture.",
-      "width": "wide"
+      "align": "center",
+      "padding": true,
+      "text": "Our modular design approach allows for flexibility and scalability in your application's architecture."
     },
     "screenshot": "img/screenshots/components-cta--contact-banner.png"
   },
@@ -1051,22 +1965,22 @@
     "id": "components-cta--split-banner",
     "group": "Components/Cta",
     "name": "SplitBanner",
-    "code": "<Cta\n  backgroundColor=\"#001856\"\n  buttons={[\n    {\n      icon: 'person',\n      label: 'What can we do for you?',\n      target: '#'\n    }\n  ]}\n  colorNeutral\n  contentAlign=\"center\"\n  fullWidth\n  headline=\"Design System Services\"\n  image={{\n    padding: false,\n    src: 'img/colored-square.png'\n  }}\n  order={{\n    desktopImageLast: false,\n    mobileImageLast: false\n  }}\n  sub=\"Subheadline\"\n  text=\"Here at Systemics, we bring a range of design system services that can make a difference.\"\n  textAlign=\"left\"\n  width=\"wide\"\n/>",
+    "code": "<Cta\n  align=\"center\"\n  backgroundColor=\"#d9e4ff\"\n  buttons={[\n    {\n      icon: 'person',\n      label: 'What can we do for you?',\n      url: '#'\n    }\n  ]}\n  colorNeutral\n  headline=\"Design System Services\"\n  image={{\n    align: 'center',\n    padding: false,\n    src: 'img/colored-square.png'\n  }}\n  order={{\n    desktopImageLast: false,\n    mobileImageLast: false\n  }}\n  padding\n  sub=\"Subheadline\"\n  text=\"Here at Systemics, we bring a range of design system services that can make a difference.\"\n  textAlign=\"left\"\n/>",
     "args": {
       "headline": "Design System Services",
       "sub": "Subheadline",
       "highlightText": false,
       "colorNeutral": true,
-      "fullWidth": true,
       "buttons": [
         {
           "label": "What can we do for you?",
           "icon": "person",
-          "target": "#"
+          "url": "#"
         }
       ],
       "image": {
         "padding": false,
+        "align": "center",
         "src": "img/colored-square.png"
       },
       "order": {
@@ -1074,10 +1988,10 @@
         "desktopImageLast": false
       },
       "textAlign": "left",
-      "contentAlign": "center",
+      "align": "center",
+      "padding": true,
       "text": "Here at Systemics, we bring a range of design system services that can make a difference.",
-      "backgroundColor": "#001856",
-      "width": "wide"
+      "backgroundColor": "#d9e4ff"
     },
     "screenshot": "img/screenshots/components-cta--split-banner.png"
   },
@@ -1085,27 +1999,27 @@
     "id": "components-cta--angled-image",
     "group": "Components/Cta",
     "name": "AngledImage",
-    "code": "<Cta\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Contact us',\n      target: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Book a meeting',\n      target: '#'\n    }\n  ]}\n  contentAlign=\"center\"\n  fullWidth\n  headline=\"Our **Approach** to Design Systems\"\n  image={{\n    padding: false,\n    src: 'img/angled-image.png'\n  }}\n  order={{\n    desktopImageLast: true,\n    mobileImageLast: false\n  }}\n  sub=\"Subheadline\"\n  text=\"We value efficiency without compromising quality. Our secret weapon? kickstartDS, a revolutionary code-first and open source framework for creating design systems.\n\nThis tool accelerates our development, saving you valuable time and helping us deliver top-notch results faster.\"\n  textAlign=\"left\"\n  width=\"wide\"\n/>",
+    "code": "<Cta\n  align=\"center\"\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Contact us',\n      url: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Book a meeting',\n      url: '#'\n    }\n  ]}\n  headline=\"Our **Approach** to Design Systems\"\n  image={{\n    align: 'center',\n    padding: false,\n    src: 'img/angled-image.png'\n  }}\n  order={{\n    desktopImageLast: true,\n    mobileImageLast: false\n  }}\n  padding\n  sub=\"Subheadline\"\n  text=\"We value efficiency without compromising quality. Our secret weapon? kickstartDS, a revolutionary code-first and open source framework for creating design systems.\n\nThis tool accelerates our development, saving you valuable time and helping us deliver top-notch results faster.\"\n  textAlign=\"left\"\n/>",
     "args": {
       "headline": "Our **Approach** to Design Systems",
       "sub": "Subheadline",
       "highlightText": false,
       "colorNeutral": false,
-      "fullWidth": true,
       "buttons": [
         {
           "label": "Contact us",
           "icon": "person",
-          "target": "#"
+          "url": "#"
         },
         {
           "label": "Book a meeting",
           "icon": "date",
-          "target": "#"
+          "url": "#"
         }
       ],
       "image": {
         "padding": false,
+        "align": "center",
         "src": "img/angled-image.png"
       },
       "order": {
@@ -1113,9 +2027,9 @@
         "desktopImageLast": true
       },
       "textAlign": "left",
-      "contentAlign": "center",
-      "text": "We value efficiency without compromising quality. Our secret weapon? kickstartDS, a revolutionary code-first and open source framework for creating design systems.\n\nThis tool accelerates our development, saving you valuable time and helping us deliver top-notch results faster.",
-      "width": "wide"
+      "align": "center",
+      "padding": true,
+      "text": "We value efficiency without compromising quality. Our secret weapon? kickstartDS, a revolutionary code-first and open source framework for creating design systems.\n\nThis tool accelerates our development, saving you valuable time and helping us deliver top-notch results faster."
     },
     "screenshot": "img/screenshots/components-cta--angled-image.png"
   },
@@ -1123,34 +2037,35 @@
     "id": "components-cta--colored-banner",
     "group": "Components/Cta",
     "name": "ColoredBanner",
-    "code": "<Cta\n  backgroundColor=\"#a30051\"\n  buttons={[\n    {\n      label: 'Learn More',\n      target: '#'\n    },\n    {\n      label: 'Contact Us',\n      target: '#'\n    }\n  ]}\n  colorNeutral\n  contentAlign=\"center\"\n  headline=\"Expertise in Scalable Solutions\"\n  highlightText\n  image={{\n    padding: true\n  }}\n  order={{\n    desktopImageLast: true,\n    mobileImageLast: false\n  }}\n  sub=\"Subheadline\"\n  text=\"Leverage our expertise in creating scalable and robust applications using modern technologies.\"\n  textAlign=\"left\"\n/>",
+    "code": "<Cta\n  align=\"center\"\n  backgroundColor=\"#ffd4ea\"\n  buttons={[\n    {\n      label: 'Learn More',\n      url: '#'\n    },\n    {\n      label: 'Contact Us',\n      url: '#'\n    }\n  ]}\n  colorNeutral\n  headline=\"Expertise in Scalable Solutions\"\n  highlightText\n  image={{\n    align: 'center',\n    padding: true\n  }}\n  order={{\n    desktopImageLast: true,\n    mobileImageLast: false\n  }}\n  padding\n  sub=\"Subheadline\"\n  text=\"Leverage our expertise in creating scalable and robust applications using modern technologies.\"\n  textAlign=\"left\"\n/>",
     "args": {
       "headline": "Expertise in Scalable Solutions",
       "sub": "Subheadline",
       "highlightText": true,
       "colorNeutral": true,
-      "fullWidth": false,
       "buttons": [
         {
           "label": "Learn More",
-          "target": "#"
+          "url": "#"
         },
         {
           "label": "Contact Us",
-          "target": "#"
+          "url": "#"
         }
       ],
       "image": {
-        "padding": true
+        "padding": true,
+        "align": "center"
       },
       "order": {
         "mobileImageLast": false,
         "desktopImageLast": true
       },
       "textAlign": "left",
-      "contentAlign": "center",
+      "align": "center",
+      "padding": true,
       "text": "Leverage our expertise in creating scalable and robust applications using modern technologies.",
-      "backgroundColor": "#a30051"
+      "backgroundColor": "#ffd4ea"
     },
     "screenshot": "img/screenshots/components-cta--colored-banner.png"
   },
@@ -1158,27 +2073,27 @@
     "id": "components-cta--align-bottom",
     "group": "Components/Cta",
     "name": "AlignBottom",
-    "code": "<Cta\n  backgroundImage=\"img/grid-bg.svg\"\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Contact us',\n      target: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Book a meeting',\n      target: '#'\n    }\n  ]}\n  contentAlign=\"bottom\"\n  fullWidth\n  headline=\"Custom Solutions\"\n  image={{\n    padding: true,\n    src: 'img/offset-image.png'\n  }}\n  order={{\n    desktopImageLast: false,\n    mobileImageLast: false\n  }}\n  sub=\"Subheadline\"\n  text=\"At Systemics, we believe in the power of technology to transform businesses. Our team of experienced professionals is dedicated to providing innovative solutions that meet the unique needs of your business.\n\nWe understand that every business is different, and that's why we offer custom solutions tailored to your specific business needs and requirements.\"\n  textAlign=\"left\"\n  width=\"wide\"\n/>",
+    "code": "<Cta\n  align=\"bottom\"\n  backgroundImage=\"img/grid-bg.svg\"\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Contact us',\n      url: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Book a meeting',\n      url: '#'\n    }\n  ]}\n  headline=\"Custom Solutions\"\n  image={{\n    align: 'center',\n    padding: true,\n    src: 'img/offset-image.png'\n  }}\n  order={{\n    desktopImageLast: false,\n    mobileImageLast: false\n  }}\n  sub=\"Subheadline\"\n  text=\"At Systemics, we believe in the power of technology to transform businesses. Our team of experienced professionals is dedicated to providing innovative solutions that meet the unique needs of your business.\n\nWe understand that every business is different, and that's why we offer custom solutions tailored to your specific business needs and requirements.\"\n  textAlign=\"left\"\n/>",
     "args": {
       "headline": "Custom Solutions",
       "sub": "Subheadline",
       "highlightText": false,
       "colorNeutral": false,
-      "fullWidth": true,
       "buttons": [
         {
           "label": "Contact us",
           "icon": "person",
-          "target": "#"
+          "url": "#"
         },
         {
           "label": "Book a meeting",
           "icon": "date",
-          "target": "#"
+          "url": "#"
         }
       ],
       "image": {
         "padding": true,
+        "align": "center",
         "src": "img/offset-image.png"
       },
       "order": {
@@ -1186,10 +2101,10 @@
         "desktopImageLast": false
       },
       "textAlign": "left",
-      "contentAlign": "bottom",
+      "align": "bottom",
+      "padding": false,
       "text": "At Systemics, we believe in the power of technology to transform businesses. Our team of experienced professionals is dedicated to providing innovative solutions that meet the unique needs of your business.\n\nWe understand that every business is different, and that's why we offer custom solutions tailored to your specific business needs and requirements.",
-      "backgroundImage": "img/grid-bg.svg",
-      "width": "wide"
+      "backgroundImage": "img/grid-bg.svg"
     },
     "screenshot": "img/screenshots/components-cta--align-bottom.png"
   },
@@ -1213,6 +2128,416 @@
     },
     "screenshot": "img/screenshots/layout-divider--default.png"
   },
+  {
+    "id": "corporate-downloads--technical-details-only",
+    "group": "Corporate/Downloads",
+    "name": "TechnicalDetailsOnly",
+    "code": "<Downloads\n  downloads={[\n    {\n      format: 'PDF',\n      name: 'Product Brochure',\n      previewImage: 'img/offset-image.png',\n      size: '2.5 MB',\n      url: '#'\n    },\n    {\n      format: 'PDF',\n      name: 'Company Brochure',\n      previewImage: 'img/kickstartDS/CMS-Starter producthunt-slide-01.svg',\n      size: '3.2 MB',\n      url: '#'\n    },\n    {\n      format: 'DOC',\n      name: 'User Guide',\n      size: '20 KB',\n      url: '#'\n    },\n    {\n      format: 'TXT',\n      name: 'Technical Specifications',\n      size: '12 KB',\n      url: '#'\n    }\n  ]}\n />",
+    "args": {
+      "downloads": [
+        {
+          "name": "Product Brochure",
+          "format": "PDF",
+          "size": "2.5 MB",
+          "previewImage": "img/offset-image.png",
+          "url": "#"
+        },
+        {
+          "name": "Company Brochure",
+          "previewImage": "img/kickstartDS/CMS-Starter producthunt-slide-01.svg",
+          "format": "PDF",
+          "size": "3.2 MB",
+          "url": "#"
+        },
+        {
+          "name": "User Guide",
+          "format": "DOC",
+          "size": "20 KB",
+          "url": "#"
+        },
+        {
+          "name": "Technical Specifications",
+          "format": "TXT",
+          "size": "12 KB",
+          "url": "#"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/corporate-downloads--technical-details-only.png"
+  },
+  {
+    "id": "corporate-downloads--description-only",
+    "group": "Corporate/Downloads",
+    "name": "DescriptionOnly",
+    "code": "<Downloads\n  downloads={[\n    {\n      description: 'Detailed product information and specifications. Recommended for all users.',\n      name: 'Product Brochure',\n      previewImage: 'img/offset-image.png'\n    },\n    {\n      description: 'In-depth technical details and requirements. Recommended for technical users.',\n      name: 'Technical Specifications',\n      previewImage: 'img/kickstartDS/CMS-Starter producthunt-slide-01.svg'\n    },\n    {\n      description: 'Comprehensive guide to using our product.',\n      name: 'User Guide',\n      previewImage: 'img/about/cta.png'\n    },\n    {\n      description: 'Overview of our company and services.',\n      name: 'Company Brochure',\n      previewImage: 'img/view-modern-office.jpg'\n    }\n  ]}\n />",
+    "args": {
+      "downloads": [
+        {
+          "name": "Product Brochure",
+          "description": "Detailed product information and specifications. Recommended for all users.",
+          "previewImage": "img/offset-image.png"
+        },
+        {
+          "name": "Technical Specifications",
+          "description": "In-depth technical details and requirements. Recommended for technical users.",
+          "previewImage": "img/kickstartDS/CMS-Starter producthunt-slide-01.svg"
+        },
+        {
+          "name": "User Guide",
+          "description": "Comprehensive guide to using our product.",
+          "previewImage": "img/about/cta.png"
+        },
+        {
+          "name": "Company Brochure",
+          "description": "Overview of our company and services.",
+          "previewImage": "img/view-modern-office.jpg"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/corporate-downloads--description-only.png"
+  },
+  {
+    "id": "corporate-downloads--complete",
+    "group": "Corporate/Downloads",
+    "name": "Complete",
+    "code": "<Downloads\n  downloads={[\n    {\n      description: 'Detailed product information and specifications. Recommended for all users.',\n      format: 'PDF',\n      name: 'Product Brochure',\n      previewImage: 'img/offset-image.png',\n      size: '2.5 MB'\n    },\n    {\n      description: 'Overview of our company and services.',\n      format: 'PDF',\n      name: 'Company Brochure',\n      previewImage: 'img/kickstartDS/CMS-Starter producthunt-slide-01.svg',\n      size: '3.2 MB'\n    },\n    {\n      description: 'Comprehensive guide to using our product.',\n      format: 'DOC',\n      name: 'User Guide',\n      size: '20 KB'\n    },\n    {\n      description: 'In-depth technical details and requirements. Recommended for technical users.',\n      format: 'TXT',\n      name: 'Technical Specifications',\n      size: '12 KB'\n    }\n  ]}\n />",
+    "args": {
+      "downloads": [
+        {
+          "name": "Product Brochure",
+          "format": "PDF",
+          "size": "2.5 MB",
+          "description": "Detailed product information and specifications. Recommended for all users.",
+          "previewImage": "img/offset-image.png"
+        },
+        {
+          "name": "Company Brochure",
+          "description": "Overview of our company and services.",
+          "previewImage": "img/kickstartDS/CMS-Starter producthunt-slide-01.svg",
+          "format": "PDF",
+          "size": "3.2 MB"
+        },
+        {
+          "name": "User Guide",
+          "description": "Comprehensive guide to using our product.",
+          "format": "DOC",
+          "size": "20 KB"
+        },
+        {
+          "name": "Technical Specifications",
+          "description": "In-depth technical details and requirements. Recommended for technical users.",
+          "format": "TXT",
+          "size": "12 KB"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/corporate-downloads--complete.png"
+  },
+  {
+    "id": "corporate-downloads--mixed",
+    "group": "Corporate/Downloads",
+    "name": "Mixed",
+    "code": "<Downloads\n  downloads={[\n    {\n      description: 'Detailed product information and specifications. Recommended for all users.',\n      format: 'PDF',\n      name: 'Product Brochure',\n      previewImage: 'img/offset-image.png',\n      size: '2.5 MB'\n    },\n    {\n      format: 'PDF',\n      name: 'User Guide',\n      previewImage: 'img/about/cta.png',\n      size: '1.2 MB'\n    },\n    {\n      name: 'Company Brochure',\n      previewImage: 'img/kickstartDS/CMS-Starter producthunt-slide-01.svg'\n    },\n    {\n      description: 'In-depth technical details and requirements.',\n      name: 'Technical Specifications'\n    }\n  ]}\n />",
+    "args": {
+      "downloads": [
+        {
+          "name": "Product Brochure",
+          "format": "PDF",
+          "size": "2.5 MB",
+          "description": "Detailed product information and specifications. Recommended for all users.",
+          "previewImage": "img/offset-image.png"
+        },
+        {
+          "name": "User Guide",
+          "format": "PDF",
+          "size": "1.2 MB",
+          "previewImage": "img/about/cta.png"
+        },
+        {
+          "name": "Company Brochure",
+          "previewImage": "img/kickstartDS/CMS-Starter producthunt-slide-01.svg"
+        },
+        {
+          "name": "Technical Specifications",
+          "description": "In-depth technical details and requirements."
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/corporate-downloads--mixed.png"
+  },
+  {
+    "id": "event-event-filter--default",
+    "group": "Event/ Event Filter",
+    "name": "Default",
+    "code": "<EventFilter\n  applyButton={{\n    label: 'Filter Appointments'\n  }}\n  categories={{\n    categoryCheckboxes: [\n      'All',\n      'Buyers',\n      'Sellers',\n      'Renters',\n      'Landlords',\n      'Tenants'\n    ],\n    title: 'Categories',\n    toggle: true\n  }}\n  datePicker={{\n    dateFromInput: {\n      label: 'From',\n      placeholder: 'Select a date'\n    },\n    dateToInput: {\n      label: 'To',\n      placeholder: 'Select a date'\n    },\n    title: 'Find Appointment',\n    toggle: true\n  }}\n  resetButton={{\n    label: 'Reset Filters'\n  }}\n/>",
+    "args": {
+      "datePicker": {
+        "title": "Find Appointment",
+        "dateFromInput": {
+          "label": "From",
+          "placeholder": "Select a date"
+        },
+        "dateToInput": {
+          "label": "To",
+          "placeholder": "Select a date"
+        },
+        "toggle": true
+      },
+      "categories": {
+        "title": "Categories",
+        "categoryCheckboxes": [
+          "All",
+          "Buyers",
+          "Sellers",
+          "Renters",
+          "Landlords",
+          "Tenants"
+        ],
+        "toggle": true
+      },
+      "applyButton": {
+        "label": "Filter Appointments"
+      },
+      "resetButton": {
+        "label": "Reset Filters"
+      }
+    },
+    "screenshot": "img/screenshots/event-event-filter--default.png"
+  },
+  {
+    "id": "event-event-header--default",
+    "group": "Event/ Event Header",
+    "name": "Default",
+    "code": "<EventHeader\n  categories={[\n    {\n      label: 'Conference'\n    },\n    {\n      label: 'Design Systems'\n    }\n  ]}\n  intro=\"A full-day event for design system professionals and enthusiasts. Join us to learn, share, and connect with like-minded individuals.\"\n  title=\"Systemics Design Conference 2025\"\n/>",
+    "args": {
+      "title": "Systemics Design Conference 2025",
+      "categories": [
+        {
+          "label": "Conference"
+        },
+        {
+          "label": "Design Systems"
+        }
+      ],
+      "intro": "A full-day event for design system professionals and enthusiasts. Join us to learn, share, and connect with like-minded individuals."
+    },
+    "screenshot": "img/screenshots/event-event-header--default.png"
+  },
+  {
+    "id": "event-event-latest-teaser--default",
+    "group": "Event/ Event Latest Teaser",
+    "name": "Default",
+    "code": "<EventLatestTeaser\n  ariaLabel=\"Event teaser for \"\n  calendar={{\n    day: '30',\n    month: 'Dec'\n  }}\n  cta=\"Show event\"\n  date=\"12/30/2025\"\n  link={{\n    text: 'Show event',\n    url: '#'\n  }}\n  location=\"Berlin, Germany\"\n  title=\"The Future of AI\"\n  url=\"https://example.com\"\n/>",
+    "args": {
+      "date": "12/30/2025",
+      "calendar": {
+        "month": "Dec",
+        "day": "30"
+      },
+      "title": "The Future of AI",
+      "location": "Berlin, Germany",
+      "url": "https://example.com",
+      "cta": "Show event",
+      "ariaLabel": "Event teaser for ",
+      "link": {
+        "url": "#",
+        "text": "Show event"
+      }
+    },
+    "screenshot": "img/screenshots/event-event-latest-teaser--default.png"
+  },
+  {
+    "id": "event-event-latest--default",
+    "group": "Event/ Event Latest",
+    "name": "Default",
+    "code": "<EventLatest\n  events={[\n    {\n      ariaLabel: 'Systemics Design Conference on September 18, 2025 in Berlin',\n      calendar: {\n        day: '18',\n        month: 'Sep'\n      },\n      cta: 'View event',\n      date: '09/18/2025',\n      location: 'Berlin Congress Center, Berlin',\n      title: 'Systemics Design Conference',\n      url: 'https://systemics.events/conference-berlin'\n    },\n    {\n      ariaLabel: 'UX Leadership Summit on October 5, 2025 in Cologne',\n      calendar: {\n        day: '05',\n        month: 'Oct'\n      },\n      cta: 'View event',\n      date: '10/05/2025',\n      location: 'Köln Messe, Cologne',\n      title: 'UX Leadership Summit',\n      url: 'https://uxsummit.de/koeln-2025'\n    },\n    {\n      ariaLabel: 'Frontend Future Days on November 12, 2025 in Hamburg',\n      calendar: {\n        day: '12',\n        month: 'Nov'\n      },\n      cta: 'View event',\n      date: '11/12/2025',\n      location: 'Hamburg Digital Campus, Hamburg',\n      title: 'Frontend Future Days',\n      url: 'https://frontendfuture.de/hamburg'\n    },\n    {\n      ariaLabel: 'Accessibility in Practice Workshop on December 1, 2025 online',\n      calendar: {\n        day: '01',\n        month: 'Dec'\n      },\n      cta: 'View event',\n      date: '12/01/2025',\n      location: 'Online',\n      title: 'Accessibility in Practice Workshop',\n      url: 'https://a11yworkshop.com/dec-2025'\n    }\n  ]}\n />",
+    "args": {
+      "events": [
+        {
+          "date": "09/18/2025",
+          "calendar": {
+            "month": "Sep",
+            "day": "18"
+          },
+          "title": "Systemics Design Conference",
+          "location": "Berlin Congress Center, Berlin",
+          "url": "https://systemics.events/conference-berlin",
+          "cta": "View event",
+          "ariaLabel": "Systemics Design Conference on September 18, 2025 in Berlin"
+        },
+        {
+          "date": "10/05/2025",
+          "calendar": {
+            "month": "Oct",
+            "day": "05"
+          },
+          "title": "UX Leadership Summit",
+          "location": "Köln Messe, Cologne",
+          "url": "https://uxsummit.de/koeln-2025",
+          "cta": "View event",
+          "ariaLabel": "UX Leadership Summit on October 5, 2025 in Cologne"
+        },
+        {
+          "date": "11/12/2025",
+          "calendar": {
+            "month": "Nov",
+            "day": "12"
+          },
+          "title": "Frontend Future Days",
+          "location": "Hamburg Digital Campus, Hamburg",
+          "url": "https://frontendfuture.de/hamburg",
+          "cta": "View event",
+          "ariaLabel": "Frontend Future Days on November 12, 2025 in Hamburg"
+        },
+        {
+          "date": "12/01/2025",
+          "calendar": {
+            "month": "Dec",
+            "day": "01"
+          },
+          "title": "Accessibility in Practice Workshop",
+          "location": "Online",
+          "url": "https://a11yworkshop.com/dec-2025",
+          "cta": "View event",
+          "ariaLabel": "Accessibility in Practice Workshop on December 1, 2025 online"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/event-event-latest--default.png"
+  },
+  {
+    "id": "event-event-list-teaser--default",
+    "group": "Event/ Event List Teaser",
+    "name": "Default",
+    "code": "<EventListTeaser\n  category=\"Buyers\"\n  ctaText=\"Show event\"\n  date=\"30.12.2025\"\n  image={{\n    alt: 'A futuristic AI concept image',\n    src: 'img/close-up-young-business-team-working.png'\n  }}\n  location={{\n    address: 'Alexanderplatz 1<br />\\n10178 Berlin',\n    name: 'Tech Conference Center'\n  }}\n  tags={[\n    'AI'\n  ]}\n  text=\"The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.\"\n  time=\"10:00\"\n  title=\"The Future of AI\"\n  url=\"#\"\n/>",
+    "args": {
+      "category": "Buyers",
+      "title": "The Future of AI",
+      "text": "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.",
+      "date": "30.12.2025",
+      "time": "10:00",
+      "location": {
+        "name": "Tech Conference Center",
+        "address": "Alexanderplatz 1<br />\n10178 Berlin"
+      },
+      "tags": [
+        "AI"
+      ],
+      "image": {
+        "src": "img/close-up-young-business-team-working.png",
+        "alt": "A futuristic AI concept image"
+      },
+      "url": "#",
+      "ctaText": "Show event"
+    },
+    "screenshot": "img/screenshots/event-event-list-teaser--default.png"
+  },
+  {
+    "id": "event-event-location--default",
+    "group": "Event/ Event Location",
+    "name": "Default",
+    "code": "<EventLocation\n  address=\"Alexanderplatz 1<br />\n  10178 Berlin\"\n  dates={[\n    {\n      ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n      date: '18.09.2025',\n      label: 'Register',\n      newTab: true,\n      time: '09:00 – 17:00',\n      url: '#'\n    },\n    {\n      ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n      date: '18.09.2025',\n      label: 'Register',\n      newTab: true,\n      time: '09:00 – 17:00',\n      url: '#'\n    }\n  ]}\n  displayMode=\"spacious\"\n  links={[\n    {\n      label: 'Open in Google Maps',\n      newTab: true,\n      url: 'https://maps.google.com/?q=Berlin+Congress+Center'\n    },\n    {\n      label: 'Location Website',\n      newTab: true,\n      url: 'https://maps.google.com/?q=Berlin+Congress+Center'\n    }\n  ]}\n  locationName=\"Berlin Congress Center\"\n/>",
+    "args": {
+      "dates": [
+        {
+          "date": "18.09.2025",
+          "time": "09:00 – 17:00",
+          "label": "Register",
+          "url": "#",
+          "newTab": true,
+          "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
+        },
+        {
+          "date": "18.09.2025",
+          "time": "09:00 – 17:00",
+          "label": "Register",
+          "url": "#",
+          "newTab": true,
+          "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
+        }
+      ],
+      "locationName": "Berlin Congress Center",
+      "displayMode": "spacious",
+      "address": "Alexanderplatz 1<br />\n  10178 Berlin",
+      "links": [
+        {
+          "newTab": true,
+          "url": "https://maps.google.com/?q=Berlin+Congress+Center",
+          "label": "Open in Google Maps"
+        },
+        {
+          "newTab": true,
+          "url": "https://maps.google.com/?q=Berlin+Congress+Center",
+          "label": "Location Website"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/event-event-location--default.png"
+  },
+  {
+    "id": "event-event-login--default",
+    "group": "Event/ Event Login",
+    "name": "Default",
+    "code": "<EventLogin\n  cta={{\n    ariaLabel: 'Event Login',\n    label: 'Login',\n    url: '#'\n  }}\n  headline=\"Welcome back!\"\n  passwordInput={{\n    label: 'Password',\n    placeholder: 'Enter your password'\n  }}\n  resetPassword={{\n    label: 'Reset Password?',\n    url: '#'\n  }}\n  text=\"Please enter your details to login\"\n  usernameInput={{\n    label: 'Username',\n    placeholder: 'Enter your username'\n  }}\n/>",
+    "args": {
+      "headline": "Welcome back!",
+      "text": "Please enter your details to login",
+      "usernameInput": {
+        "label": "Username",
+        "placeholder": "Enter your username"
+      },
+      "passwordInput": {
+        "label": "Password",
+        "placeholder": "Enter your password"
+      },
+      "cta": {
+        "label": "Login",
+        "url": "#",
+        "ariaLabel": "Event Login"
+      },
+      "resetPassword": {
+        "label": "Reset Password?",
+        "url": "#"
+      }
+    },
+    "screenshot": "img/screenshots/event-event-login--default.png"
+  },
+  {
+    "id": "event-event-registration--default",
+    "group": "Event/ Event Registration",
+    "name": "Default",
+    "code": "<EventRegistration\n  confirmationCheckboxLabel=\"I read and agree to the terms and conditions*\"\n  cta={{\n    ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n    label: 'Send Request',\n    url: '#'\n  }}\n  date=\"18.09.2025\"\n  emailInput={{\n    label: 'Email*',\n    placeholder: 'Enter your email'\n  }}\n  label=\"Registration Request\"\n  link={{\n    text: 'More Information on the Event',\n    url: '#'\n  }}\n  location={{\n    address: 'Alexanderplatz 1<br/>10178 Berlin',\n    name: 'Tech Conference Center'\n  }}\n  mandatoryText=\"_* Mandatory_\"\n  nameInput={{\n    label: 'Name*',\n    placeholder: 'Enter your name'\n  }}\n  time=\"09:00 – 17:00\"\n  title=\"The Future of AI\"\n/>",
+    "args": {
+      "label": "Registration Request",
+      "title": "The Future of AI",
+      "link": {
+        "url": "#",
+        "text": "More Information on the Event"
+      },
+      "date": "18.09.2025",
+      "time": "09:00 – 17:00",
+      "location": {
+        "name": "Tech Conference Center",
+        "address": "Alexanderplatz 1<br/>10178 Berlin"
+      },
+      "nameInput": {
+        "label": "Name*",
+        "placeholder": "Enter your name"
+      },
+      "emailInput": {
+        "label": "Email*",
+        "placeholder": "Enter your email"
+      },
+      "confirmationCheckboxLabel": "I read and agree to the terms and conditions*",
+      "mandatoryText": "_* Mandatory_",
+      "cta": {
+        "label": "Send Request",
+        "url": "#",
+        "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
+      }
+    },
+    "screenshot": "img/screenshots/event-event-registration--default.png"
+  },
   {
     "id": "components-faq--dropdown-list",
     "group": "Components/Faq",
@@ -1255,7 +2580,7 @@
     "id": "components-features--icon-centered",
     "group": "Components/Features",
     "name": "IconCentered",
-    "code": "<Features\n  ctas={{\n    style: 'link',\n    toggle: true\n  }}\n  feature={[\n    {\n      cta: {\n        label: 'Learn more',\n        target: '/feature1'\n      },\n      icon: 'home',\n      text: 'Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.',\n      title: 'Scalable Architecture'\n    },\n    {\n      cta: {\n        label: 'Get started',\n        target: '/feature2'\n      },\n      icon: 'map',\n      text: 'Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.',\n      title: 'Efficient Development'\n    },\n    {\n      cta: {\n        label: 'Explore',\n        target: '/feature3'\n      },\n      icon: 'person',\n      text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n      title: 'Consistent UI'\n    },\n    {\n      cta: {\n        label: 'Customize',\n        target: '/feature4'\n      },\n      icon: 'star',\n      text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n      title: 'Customizable Design'\n    },\n    {\n      cta: {\n        label: 'Deploy',\n        target: '/feature5'\n      },\n      icon: 'upload',\n      text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n      title: 'Cloud Ready'\n    },\n    {\n      cta: {\n        label: 'Secure',\n        target: '/feature6'\n      },\n      icon: 'login',\n      text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n      title: 'Secure'\n    }\n  ]}\n  layout=\"largeTiles\"\n  style=\"centered\"\n/>",
+    "code": "<Features\n  ctas={{\n    style: 'link',\n    toggle: true\n  }}\n  feature={[\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Learn more',\n        url: '#'\n      },\n      icon: 'home',\n      text: 'Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.',\n      title: 'Scalable Architecture'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Get started',\n        url: '#'\n      },\n      icon: 'map',\n      text: 'Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.',\n      title: 'Efficient Development'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Explore',\n        url: '#'\n      },\n      icon: 'person',\n      text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n      title: 'Consistent UI'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Customize',\n        url: '#'\n      },\n      icon: 'star',\n      text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n      title: 'Customizable Design'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Deploy',\n        url: '#'\n      },\n      icon: 'upload',\n      text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n      title: 'Cloud Ready'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Secure',\n        url: '#'\n      },\n      icon: 'login',\n      text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n      title: 'Secure'\n    }\n  ]}\n  layout=\"largeTiles\"\n  style=\"centered\"\n/>",
     "args": {
       "layout": "largeTiles",
       "style": "centered",
@@ -1269,8 +2594,9 @@
           "title": "Scalable Architecture",
           "text": "Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.",
           "cta": {
-            "target": "/feature1",
-            "label": "Learn more"
+            "url": "#",
+            "label": "Learn more",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1278,8 +2604,9 @@
           "title": "Efficient Development",
           "text": "Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.",
           "cta": {
-            "target": "/feature2",
-            "label": "Get started"
+            "url": "#",
+            "label": "Get started",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1287,8 +2614,9 @@
           "title": "Consistent UI",
           "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
           "cta": {
-            "target": "/feature3",
-            "label": "Explore"
+            "url": "#",
+            "label": "Explore",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1296,8 +2624,9 @@
           "title": "Customizable Design",
           "text": "Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.",
           "cta": {
-            "target": "/feature4",
-            "label": "Customize"
+            "url": "#",
+            "label": "Customize",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1305,8 +2634,9 @@
           "title": "Cloud Ready",
           "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
           "cta": {
-            "target": "/feature5",
-            "label": "Deploy"
+            "url": "#",
+            "label": "Deploy",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1314,8 +2644,9 @@
           "title": "Secure",
           "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
           "cta": {
-            "target": "/feature6",
-            "label": "Secure"
+            "url": "#",
+            "label": "Secure",
+            "icon": "arrow-right"
           }
         }
       ]
@@ -1326,7 +2657,7 @@
     "id": "components-features--stack-with-button",
     "group": "Components/Features",
     "name": "StackWithButton",
-    "code": "<Features\n  ctas={{\n    style: 'button',\n    toggle: true\n  }}\n  feature={[\n    {\n      cta: {\n        label: 'Explore',\n        target: '/feature3'\n      },\n      icon: 'person',\n      text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n      title: 'Consistent UI'\n    },\n    {\n      cta: {\n        label: 'Customize',\n        target: '/feature4'\n      },\n      icon: 'star',\n      text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n      title: 'Customizable Design'\n    },\n    {\n      cta: {\n        label: 'Deploy',\n        target: '/feature5'\n      },\n      icon: 'upload',\n      text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n      title: 'Cloud Ready'\n    },\n    {\n      cta: {\n        label: 'Secure',\n        target: '/feature6'\n      },\n      icon: 'login',\n      text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n      title: 'Secure'\n    }\n  ]}\n  layout=\"smallTiles\"\n  style=\"stack\"\n/>",
+    "code": "<Features\n  ctas={{\n    style: 'button',\n    toggle: true\n  }}\n  feature={[\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Explore',\n        url: '#'\n      },\n      icon: 'person',\n      text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n      title: 'Consistent UI'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Customize',\n        url: '#'\n      },\n      icon: 'star',\n      text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n      title: 'Customizable Design'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Deploy',\n        url: '#'\n      },\n      icon: 'upload',\n      text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n      title: 'Cloud Ready'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Secure',\n        url: '#'\n      },\n      icon: 'login',\n      text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n      title: 'Secure'\n    }\n  ]}\n  layout=\"smallTiles\"\n  style=\"stack\"\n/>",
     "args": {
       "layout": "smallTiles",
       "style": "stack",
@@ -1340,8 +2671,9 @@
           "title": "Consistent UI",
           "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
           "cta": {
-            "target": "/feature3",
-            "label": "Explore"
+            "url": "#",
+            "label": "Explore",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1349,8 +2681,9 @@
           "title": "Customizable Design",
           "text": "Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.",
           "cta": {
-            "target": "/feature4",
-            "label": "Customize"
+            "url": "#",
+            "label": "Customize",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1358,8 +2691,9 @@
           "title": "Cloud Ready",
           "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
           "cta": {
-            "target": "/feature5",
-            "label": "Deploy"
+            "url": "#",
+            "label": "Deploy",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1367,8 +2701,9 @@
           "title": "Secure",
           "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
           "cta": {
-            "target": "/feature6",
-            "label": "Secure"
+            "url": "#",
+            "label": "Secure",
+            "icon": "arrow-right"
           }
         }
       ]
@@ -1379,7 +2714,7 @@
     "id": "components-features--list-view",
     "group": "Components/Features",
     "name": "ListView",
-    "code": "<Features\n  ctas={{\n    style: 'intext',\n    toggle: false\n  }}\n  feature={[\n    {\n      cta: {\n        label: 'Customize',\n        target: '/feature4'\n      },\n      icon: 'star',\n      text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n      title: 'Customizable Design'\n    },\n    {\n      cta: {\n        label: 'Get started',\n        target: '/feature2'\n      },\n      icon: 'map',\n      text: 'Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.',\n      title: 'Efficient Development'\n    },\n    {\n      cta: {\n        label: 'Explore',\n        target: '/feature3'\n      },\n      icon: 'person',\n      text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n      title: 'Consistent UI'\n    },\n    {\n      cta: {\n        label: 'Learn more',\n        target: '/feature1'\n      },\n      icon: 'home',\n      text: 'Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.',\n      title: 'Scalable Architecture'\n    },\n    {\n      cta: {\n        label: 'Deploy',\n        target: '/feature5'\n      },\n      icon: 'upload',\n      text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n      title: 'Cloud Ready'\n    },\n    {\n      cta: {\n        label: 'Secure',\n        target: '/feature6'\n      },\n      icon: 'login',\n      text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n      title: 'Secure'\n    }\n  ]}\n  layout=\"list\"\n  style=\"besideLarge\"\n/>",
+    "code": "<Features\n  ctas={{\n    style: 'intext',\n    toggle: false\n  }}\n  feature={[\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Customize',\n        url: '#'\n      },\n      icon: 'star',\n      text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n      title: 'Customizable Design'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Get started',\n        url: '#'\n      },\n      icon: 'map',\n      text: 'Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.',\n      title: 'Efficient Development'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Explore',\n        url: '#'\n      },\n      icon: 'person',\n      text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n      title: 'Consistent UI'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Learn more',\n        url: '#'\n      },\n      icon: 'home',\n      text: 'Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.',\n      title: 'Scalable Architecture'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Deploy',\n        url: '#'\n      },\n      icon: 'upload',\n      text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n      title: 'Cloud Ready'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Secure',\n        url: '#'\n      },\n      icon: 'login',\n      text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n      title: 'Secure'\n    }\n  ]}\n  layout=\"list\"\n  style=\"besideLarge\"\n/>",
     "args": {
       "layout": "list",
       "style": "besideLarge",
@@ -1393,8 +2728,9 @@
           "title": "Customizable Design",
           "text": "Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.",
           "cta": {
-            "target": "/feature4",
-            "label": "Customize"
+            "url": "#",
+            "label": "Customize",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1402,8 +2738,9 @@
           "title": "Efficient Development",
           "text": "Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.",
           "cta": {
-            "target": "/feature2",
-            "label": "Get started"
+            "url": "#",
+            "label": "Get started",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1411,8 +2748,9 @@
           "title": "Consistent UI",
           "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
           "cta": {
-            "target": "/feature3",
-            "label": "Explore"
+            "url": "#",
+            "label": "Explore",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1420,8 +2758,9 @@
           "title": "Scalable Architecture",
           "text": "Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.",
           "cta": {
-            "target": "/feature1",
-            "label": "Learn more"
+            "url": "#",
+            "label": "Learn more",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1429,8 +2768,9 @@
           "title": "Cloud Ready",
           "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
           "cta": {
-            "target": "/feature5",
-            "label": "Deploy"
+            "url": "#",
+            "label": "Deploy",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1438,8 +2778,9 @@
           "title": "Secure",
           "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
           "cta": {
-            "target": "/feature6",
-            "label": "Secure"
+            "url": "#",
+            "label": "Secure",
+            "icon": "arrow-right"
           }
         }
       ]
@@ -1450,7 +2791,7 @@
     "id": "components-features--icon-beside-with-link-in-text",
     "group": "Components/Features",
     "name": "IconBesideWithLinkInText",
-    "code": "<Features\n  ctas={{\n    style: 'intext',\n    toggle: true\n  }}\n  feature={[\n    {\n      cta: {\n        label: 'Learn more',\n        target: '/feature1'\n      },\n      icon: 'home',\n      text: 'Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.',\n      title: 'Scalable Architecture'\n    },\n    {\n      cta: {\n        label: 'Get started',\n        target: '/feature2'\n      },\n      icon: 'map',\n      text: 'Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.',\n      title: 'Efficient Development'\n    },\n    {\n      cta: {\n        label: 'Explore',\n        target: '/feature3'\n      },\n      icon: 'person',\n      text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n      title: 'Consistent UI'\n    },\n    {\n      cta: {\n        label: 'Customize',\n        target: '/feature4'\n      },\n      icon: 'star',\n      text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n      title: 'Customizable Design'\n    },\n    {\n      cta: {\n        label: 'Deploy',\n        target: '/feature5'\n      },\n      icon: 'upload',\n      text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n      title: 'Cloud Ready'\n    },\n    {\n      cta: {\n        label: 'Secure',\n        target: '/feature6'\n      },\n      icon: 'login',\n      text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n      title: 'Secure'\n    }\n  ]}\n  layout=\"smallTiles\"\n  style=\"intext\"\n/>",
+    "code": "<Features\n  ctas={{\n    style: 'intext',\n    toggle: true\n  }}\n  feature={[\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Learn more',\n        url: '#'\n      },\n      icon: 'home',\n      text: 'Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.',\n      title: 'Scalable Architecture'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Get started',\n        url: '#'\n      },\n      icon: 'map',\n      text: 'Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.',\n      title: 'Efficient Development'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Explore',\n        url: '#'\n      },\n      icon: 'person',\n      text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n      title: 'Consistent UI'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Customize',\n        url: '#'\n      },\n      icon: 'star',\n      text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n      title: 'Customizable Design'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Deploy',\n        url: '#'\n      },\n      icon: 'upload',\n      text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n      title: 'Cloud Ready'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Secure',\n        url: '#'\n      },\n      icon: 'login',\n      text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n      title: 'Secure'\n    }\n  ]}\n  layout=\"smallTiles\"\n  style=\"intext\"\n/>",
     "args": {
       "layout": "smallTiles",
       "style": "intext",
@@ -1464,8 +2805,9 @@
           "title": "Scalable Architecture",
           "text": "Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.",
           "cta": {
-            "target": "/feature1",
-            "label": "Learn more"
+            "url": "#",
+            "label": "Learn more",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1473,8 +2815,9 @@
           "title": "Efficient Development",
           "text": "Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.",
           "cta": {
-            "target": "/feature2",
-            "label": "Get started"
+            "url": "#",
+            "label": "Get started",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1482,8 +2825,9 @@
           "title": "Consistent UI",
           "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
           "cta": {
-            "target": "/feature3",
-            "label": "Explore"
+            "url": "#",
+            "label": "Explore",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1491,8 +2835,9 @@
           "title": "Customizable Design",
           "text": "Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.",
           "cta": {
-            "target": "/feature4",
-            "label": "Customize"
+            "url": "#",
+            "label": "Customize",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1500,8 +2845,9 @@
           "title": "Cloud Ready",
           "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
           "cta": {
-            "target": "/feature5",
-            "label": "Deploy"
+            "url": "#",
+            "label": "Deploy",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1509,8 +2855,9 @@
           "title": "Secure",
           "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
           "cta": {
-            "target": "/feature6",
-            "label": "Secure"
+            "url": "#",
+            "label": "Secure",
+            "icon": "arrow-right"
           }
         }
       ]
@@ -1521,7 +2868,7 @@
     "id": "components-features--icon-intext-with-link",
     "group": "Components/Features",
     "name": "IconIntextWithLink",
-    "code": "<Features\n  ctas={{\n    style: 'link',\n    toggle: true\n  }}\n  feature={[\n    {\n      cta: {\n        label: 'Customize',\n        target: '/feature4'\n      },\n      icon: 'star',\n      text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n      title: 'Customizable Design'\n    },\n    {\n      cta: {\n        label: 'Get started',\n        target: '/feature2'\n      },\n      icon: 'map',\n      text: 'Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.',\n      title: 'Efficient Development'\n    },\n    {\n      cta: {\n        label: 'Explore',\n        target: '/feature3'\n      },\n      icon: 'person',\n      text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n      title: 'Consistent UI'\n    },\n    {\n      cta: {\n        label: 'Deploy',\n        target: '/feature5'\n      },\n      icon: 'upload',\n      text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n      title: 'Cloud Ready'\n    },\n    {\n      cta: {\n        label: 'Secure',\n        target: '/feature6'\n      },\n      icon: 'login',\n      text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n      title: 'Secure'\n    }\n  ]}\n  layout=\"largeTiles\"\n  style=\"intext\"\n/>",
+    "code": "<Features\n  ctas={{\n    style: 'link',\n    toggle: true\n  }}\n  feature={[\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Customize',\n        url: '#'\n      },\n      icon: 'star',\n      text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n      title: 'Customizable Design'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Get started',\n        url: '#'\n      },\n      icon: 'map',\n      text: 'Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.',\n      title: 'Efficient Development'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Explore',\n        url: '#'\n      },\n      icon: 'person',\n      text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n      title: 'Consistent UI'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Deploy',\n        url: '#'\n      },\n      icon: 'upload',\n      text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n      title: 'Cloud Ready'\n    },\n    {\n      cta: {\n        icon: 'arrow-right',\n        label: 'Secure',\n        url: '#'\n      },\n      icon: 'login',\n      text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n      title: 'Secure'\n    }\n  ]}\n  layout=\"largeTiles\"\n  style=\"intext\"\n/>",
     "args": {
       "layout": "largeTiles",
       "style": "intext",
@@ -1535,8 +2882,9 @@
           "title": "Customizable Design",
           "text": "Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.",
           "cta": {
-            "target": "/feature4",
-            "label": "Customize"
+            "url": "#",
+            "label": "Customize",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1544,8 +2892,9 @@
           "title": "Efficient Development",
           "text": "Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.",
           "cta": {
-            "target": "/feature2",
-            "label": "Get started"
+            "url": "#",
+            "label": "Get started",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1553,8 +2902,9 @@
           "title": "Consistent UI",
           "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
           "cta": {
-            "target": "/feature3",
-            "label": "Explore"
+            "url": "#",
+            "label": "Explore",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1562,8 +2912,9 @@
           "title": "Cloud Ready",
           "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
           "cta": {
-            "target": "/feature5",
-            "label": "Deploy"
+            "url": "#",
+            "label": "Deploy",
+            "icon": "arrow-right"
           }
         },
         {
@@ -1571,8 +2922,9 @@
           "title": "Secure",
           "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
           "cta": {
-            "target": "/feature6",
-            "label": "Secure"
+            "url": "#",
+            "label": "Secure",
+            "icon": "arrow-right"
           }
         }
       ]
@@ -1583,7 +2935,7 @@
     "id": "layout-footer--footer",
     "group": "Layout/Footer",
     "name": "Footer",
-    "code": "<Footer\n  byline=\"© 2024 systemics Inc. All rights reserved.\"\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    inverted: false,\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      href: '#',\n      label: 'Active Item'\n    },\n    {\n      href: '#',\n      label: 'Navigation Item'\n    },\n    {\n      href: '#',\n      items: [\n        {\n          href: '#',\n          label: 'Level 2 Item'\n        },\n        {\n          active: true,\n          href: '#',\n          label: 'Active Item'\n        },\n        {\n          href: '#',\n          label: 'An Item with a longer Label'\n        },\n        {\n          href: '#',\n          label: 'And One last one'\n        }\n      ],\n      label: 'Dropdown'\n    },\n    {\n      href: '#',\n      label: 'One more Item'\n    },\n    {\n      href: '#',\n      label: 'Last Item'\n    }\n  ]}\n/>",
+    "code": "<Footer\n  byline=\"© 2024 systemics Inc. All rights reserved.\"\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    inverted: false,\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      label: 'Active Item',\n      url: '#'\n    },\n    {\n      label: 'Navigation Item',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Dropdown',\n      url: '#'\n    },\n    {\n      label: 'One more Item',\n      url: '#'\n    },\n    {\n      label: 'Last Item',\n      url: '#'\n    }\n  ]}\n/>",
     "args": {
       "logo": {
         "src": "/logo.svg",
@@ -1598,43 +2950,43 @@
       "inverted": false,
       "navItems": [
         {
-          "href": "#",
+          "url": "#",
           "label": "Active Item",
           "active": true
         },
         {
-          "href": "#",
+          "url": "#",
           "label": "Navigation Item"
         },
         {
-          "href": "#",
+          "url": "#",
           "label": "Dropdown",
           "items": [
             {
-              "href": "#",
+              "url": "#",
               "label": "Level 2 Item"
             },
             {
-              "href": "#",
+              "url": "#",
               "label": "Active Item",
               "active": true
             },
             {
-              "href": "#",
+              "url": "#",
               "label": "An Item with a longer Label"
             },
             {
-              "href": "#",
+              "url": "#",
               "label": "And One last one"
             }
           ]
         },
         {
-          "href": "#",
+          "url": "#",
           "label": "One more Item"
         },
         {
-          "href": "#",
+          "url": "#",
           "label": "Last Item"
         }
       ]
@@ -1684,9 +3036,9 @@
           "caption": "Caption Image 7"
         }
       ],
+      "layout": "smallTiles",
       "aspectRatio": "square",
-      "lightbox": true,
-      "layout": "smallTiles"
+      "lightbox": true
     },
     "screenshot": "img/screenshots/components-gallery--small-squares-with-lightbox.png"
   },
@@ -1728,9 +3080,9 @@
           "caption": "Caption Image 6"
         }
       ],
+      "layout": "largeTiles",
       "aspectRatio": "landscape",
-      "lightbox": false,
-      "layout": "largeTiles"
+      "lightbox": false
     },
     "screenshot": "img/screenshots/components-gallery--large-landscape-tiles.png"
   },
@@ -1777,9 +3129,9 @@
           "caption": "Caption Image 7"
         }
       ],
+      "layout": "smallTiles",
       "aspectRatio": "unset",
-      "lightbox": true,
-      "layout": "smallTiles"
+      "lightbox": true
     },
     "screenshot": "img/screenshots/components-gallery--free-aspect-ratio.png"
   },
@@ -1806,9 +3158,9 @@
           "caption": "Caption Image 3"
         }
       ],
+      "layout": "stack",
       "aspectRatio": "landscape",
-      "lightbox": false,
-      "layout": "stack"
+      "lightbox": false
     },
     "screenshot": "img/screenshots/components-gallery--stack-landscape.png"
   },
@@ -1816,7 +3168,7 @@
     "id": "layout-header--header",
     "group": "Layout/Header",
     "name": "Header",
-    "code": "<Header\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      href: '#',\n      label: 'Active Item'\n    },\n    {\n      href: '#',\n      label: 'Navigation Item'\n    },\n    {\n      href: '#',\n      items: [\n        {\n          href: '#',\n          label: 'Level 2 Item'\n        },\n        {\n          active: true,\n          href: '#',\n          label: 'Active Item'\n        },\n        {\n          href: '#',\n          label: 'An Item with a longer Label'\n        },\n        {\n          href: '#',\n          label: 'And One last one'\n        }\n      ],\n      label: 'Dropdown'\n    },\n    {\n      href: '#',\n      label: 'One more Item'\n    },\n    {\n      href: '#',\n      label: 'Last Item'\n    }\n  ]}\n/>",
+    "code": "<Header\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      label: 'Active Item',\n      url: '#'\n    },\n    {\n      label: 'Navigation Item',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Dropdown',\n      url: '#'\n    },\n    {\n      label: 'One more Item',\n      url: '#'\n    },\n    {\n      label: 'Last Item',\n      url: '#'\n    }\n  ]}\n/>",
     "args": {
       "logo": {
         "src": "/logo.svg",
@@ -1832,43 +3184,43 @@
       "inverted": false,
       "navItems": [
         {
-          "href": "#",
+          "url": "#",
           "label": "Active Item",
           "active": true
         },
         {
-          "href": "#",
+          "url": "#",
           "label": "Navigation Item"
         },
         {
-          "href": "#",
+          "url": "#",
           "label": "Dropdown",
           "items": [
             {
-              "href": "#",
+              "url": "#",
               "label": "Level 2 Item"
             },
             {
-              "href": "#",
+              "url": "#",
               "label": "Active Item",
               "active": true
             },
             {
-              "href": "#",
+              "url": "#",
               "label": "An Item with a longer Label"
             },
             {
-              "href": "#",
+              "url": "#",
               "label": "And One last one"
             }
           ]
         },
         {
-          "href": "#",
+          "url": "#",
           "label": "One more Item"
         },
         {
-          "href": "#",
+          "url": "#",
           "label": "Last Item"
         }
       ]
@@ -1980,19 +3332,21 @@
     "id": "components-hero--text-below-image",
     "group": "Components/Hero",
     "name": "TextBelowImage",
-    "code": "<Hero\n  buttons={[\n    {\n      icon: 'arrow-down',\n      label: 'Explore further',\n      target: '#'\n    }\n  ]}\n  headline=\"Welcome to Our Dynamic Workplace\"\n  height=\"default\"\n  highlightText\n  image={{\n    indent: 'none',\n    src: 'https://picsum.photos/seed/kdsvisual/640/270',\n    srcDesktop: 'img/colleagues-work-office-using-computers-looking-aside.png',\n    srcMobile: 'img/colleagues-work-office-using-computers-looking-aside.png',\n    srcTablet: 'img/colleagues-work-office-using-computers-looking-aside.png'\n  }}\n  overlay\n  sub=\"Where Creativity Meets Innovation\"\n  text=\"Experience the perfect blend of creativity, innovation, and productivity in our modern office environment.\"\n  textPosition=\"below\"\n/>",
+    "code": "<Hero\n  buttons={[\n    {\n      icon: 'arrow-down',\n      label: 'Explore further',\n      url: '#'\n    }\n  ]}\n  headline=\"Welcome to Our Dynamic Workplace\"\n  height=\"default\"\n  highlightText\n  image={{\n    indent: 'none',\n    src: 'https://picsum.photos/seed/kdsvisual/640/270',\n    srcDesktop: 'img/colleagues-work-office-using-computers-looking-aside.png',\n    srcMobile: 'img/colleagues-work-office-using-computers-looking-aside.png',\n    srcTablet: 'img/colleagues-work-office-using-computers-looking-aside.png'\n  }}\n  overlay\n  sub=\"Where Creativity Meets Innovation\"\n  text=\"Experience the perfect blend of creativity, innovation, and productivity in our modern office environment.\"\n  textPosition=\"below\"\n/>",
     "args": {
       "highlightText": true,
       "colorNeutral": false,
       "height": "default",
       "textbox": false,
+      "invertText": false,
       "buttons": [
         {
           "label": "Explore further",
           "icon": "arrow-down",
-          "target": "#"
+          "url": "#"
         }
       ],
+      "skipButton": false,
       "overlay": true,
       "image": {
         "srcMobile": "img/colleagues-work-office-using-computers-looking-aside.png",
@@ -2012,24 +3366,26 @@
     "id": "components-hero--text-on-image-with-overlay",
     "group": "Components/Hero",
     "name": "TextOnImageWithOverlay",
-    "code": "<Hero\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Meet Us',\n      target: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Schedule a Meeting',\n      target: '#'\n    }\n  ]}\n  colorNeutral\n  headline=\"Master Scalable Solutions\"\n  height=\"fullImage\"\n  image={{\n    indent: 'none',\n    src: 'https://picsum.photos/seed/kdsvisual/640/270',\n    srcDesktop: 'img/top-view-desk-with-keyboard-drawing-pad.png',\n    srcMobile: 'img/top-view-desk-with-keyboard-drawing-pad.png',\n    srcTablet: 'img/top-view-desk-with-keyboard-drawing-pad.png'\n  }}\n  overlay\n  text=\"Harness our expertise in crafting scalable and robust applications using cutting-edge technologies.\"\n  textPosition=\"center\"\n/>",
+    "code": "<Hero\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Meet Us',\n      url: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Schedule a Meeting',\n      url: '#'\n    }\n  ]}\n  colorNeutral\n  headline=\"Master Scalable Solutions\"\n  height=\"fullImage\"\n  image={{\n    indent: 'none',\n    src: 'https://picsum.photos/seed/kdsvisual/640/270',\n    srcDesktop: 'img/top-view-desk-with-keyboard-drawing-pad.png',\n    srcMobile: 'img/top-view-desk-with-keyboard-drawing-pad.png',\n    srcTablet: 'img/top-view-desk-with-keyboard-drawing-pad.png'\n  }}\n  overlay\n  text=\"Harness our expertise in crafting scalable and robust applications using cutting-edge technologies.\"\n  textPosition=\"center\"\n/>",
     "args": {
       "highlightText": false,
       "colorNeutral": true,
       "height": "fullImage",
       "textbox": false,
+      "invertText": false,
       "buttons": [
         {
           "label": "Meet Us",
           "icon": "person",
-          "target": "#"
+          "url": "#"
         },
         {
           "label": "Schedule a Meeting",
           "icon": "date",
-          "target": "#"
+          "url": "#"
         }
       ],
+      "skipButton": false,
       "overlay": true,
       "image": {
         "srcMobile": "img/top-view-desk-with-keyboard-drawing-pad.png",
@@ -2048,24 +3404,26 @@
     "id": "components-hero--text-box-on-full-screen",
     "group": "Components/Hero",
     "name": "TextBoxOnFullScreen",
-    "code": "<Hero\n  buttons={[\n    {\n      icon: 'arrow-right',\n      label: 'Discover More',\n      target: '#'\n    },\n    {\n      icon: 'phone',\n      label: 'Reach Out',\n      target: '#'\n    }\n  ]}\n  headline=\"Discover Our Design System\"\n  height=\"fullScreen\"\n  image={{\n    indent: 'none',\n    src: 'https://picsum.photos/seed/kdsvisual/640/270',\n    srcDesktop: 'img/people-brainstorming-work-meeting.png',\n    srcMobile: 'img/people-brainstorming-work-meeting.png',\n    srcTablet: 'img/people-brainstorming-work-meeting.png'\n  }}\n  sub=\"Scalable. Efficient. Seamless.\"\n  text=\"Our design system provides a seamless and efficient framework for building scalable applications. Experience unprecedented speed and scalability with our Headless CMS powered websites, web apps & composable architecture.\"\n  textPosition=\"left\"\n  textbox\n/>",
+    "code": "<Hero\n  buttons={[\n    {\n      icon: 'arrow-right',\n      label: 'Discover More',\n      url: '#'\n    },\n    {\n      icon: 'phone',\n      label: 'Reach Out',\n      url: '#'\n    }\n  ]}\n  headline=\"Discover Our Design System\"\n  height=\"fullScreen\"\n  image={{\n    indent: 'none',\n    src: 'https://picsum.photos/seed/kdsvisual/640/270',\n    srcDesktop: 'img/people-brainstorming-work-meeting.png',\n    srcMobile: 'img/people-brainstorming-work-meeting.png',\n    srcTablet: 'img/people-brainstorming-work-meeting.png'\n  }}\n  skipButton\n  sub=\"Scalable. Efficient. Seamless.\"\n  text=\"Our design system provides a seamless and efficient framework for building scalable applications. Experience unprecedented speed and scalability with our Headless CMS powered websites, web apps & composable architecture.\"\n  textPosition=\"left\"\n  textbox\n/>",
     "args": {
       "highlightText": false,
       "colorNeutral": false,
       "height": "fullScreen",
       "textbox": true,
+      "invertText": false,
       "buttons": [
         {
           "label": "Discover More",
           "icon": "arrow-right",
-          "target": "#"
+          "url": "#"
         },
         {
           "label": "Reach Out",
           "icon": "phone",
-          "target": "#"
+          "url": "#"
         }
       ],
+      "skipButton": true,
       "overlay": false,
       "image": {
         "srcMobile": "img/people-brainstorming-work-meeting.png",
@@ -2128,7 +3486,7 @@
     "id": "components-image-story--sticky-image-next-to-scrolling-text",
     "group": "Components/Image Story",
     "name": "StickyImageNextToScrollingText",
-    "code": "<ImageStory\n  buttons={[\n    {\n      disabled: false,\n      label: 'Learn More',\n      size: 'medium',\n      target: '#',\n      variant: 'secondary'\n    },\n    {\n      disabled: false,\n      label: 'Contact Us',\n      size: 'medium',\n      target: '#',\n      variant: 'secondary'\n    }\n  ]}\n  headline=\"The Sanity & Next.js Experts\"\n  image={{\n    aspectRatio: 'unset',\n    src: 'img/full-shot-different-people-working-together.png',\n    vAlign: 'top'\n  }}\n  largeHeadline\n  layout=\"imageLeft\"\n  sub=\"Subheadline\"\n  text=\"\nHere at Systemics, we bring a range of design system services that can make a difference:\n\n### 1. Design System Consulting\nLet's work side by side to shape a design system strategy that aligns perfectly with your goals. It's not just about tools; it's about guiding principles, stakeholder management und making the right decisions at the right time.\n\n### 2. Design System Creation & Development\nWe'll bring your design system from concept to production, giving you consistent and engaging user experiences across different platforms. We will work together with your digital teams to transfer all complex Figma ideas into code using kickstartDS.\n\n### 3. Headless CMS & Websites\nWe leverage the power of headless CMSs to provide scalable, flexible, and versatile websites that drive your online presence.\n\n### 4. Design System Training\nWe empower your digital teams with the knowledge and skills to manage and evolve your design system effectively.\n\nReady to make your digital journey exceptional?\n    \"\n  textAlign=\"left\"\n/>",
+    "code": "<ImageStory\n  buttons={[\n    {\n      disabled: false,\n      label: 'Learn More',\n      size: 'medium',\n      url: '#',\n      variant: 'secondary'\n    },\n    {\n      disabled: false,\n      label: 'Contact Us',\n      size: 'medium',\n      url: '#',\n      variant: 'secondary'\n    }\n  ]}\n  headline=\"The Sanity & Next.js Experts\"\n  image={{\n    aspectRatio: 'unset',\n    src: 'img/full-shot-different-people-working-together.png',\n    vAlign: 'top'\n  }}\n  largeHeadline\n  layout=\"imageLeft\"\n  sub=\"Subheadline\"\n  text=\"\nHere at Systemics, we bring a range of design system services that can make a difference:\n\n### 1. Design System Consulting\nLet's work side by side to shape a design system strategy that aligns perfectly with your goals. It's not just about tools; it's about guiding principles, stakeholder management und making the right decisions at the right time.\n\n### 2. Design System Creation & Development\nWe'll bring your design system from concept to production, giving you consistent and engaging user experiences across different platforms. We will work together with your digital teams to transfer all complex Figma ideas into code using kickstartDS.\n\n### 3. Headless CMS & Websites\nWe leverage the power of headless CMSs to provide scalable, flexible, and versatile websites that drive your online presence.\n\n### 4. Design System Training\nWe empower your digital teams with the knowledge and skills to manage and evolve your design system effectively.\n\nReady to make your digital journey exceptional?\n    \"\n  textAlign=\"left\"\n/>",
     "args": {
       "headline": "The Sanity & Next.js Experts",
       "largeHeadline": true,
@@ -2141,14 +3499,14 @@
           "variant": "secondary",
           "size": "medium",
           "disabled": false,
-          "target": "#"
+          "url": "#"
         },
         {
           "label": "Contact Us",
           "variant": "secondary",
           "size": "medium",
           "disabled": false,
-          "target": "#"
+          "url": "#"
         }
       ],
       "image": {
@@ -2197,32 +3555,32 @@
     "id": "components-logos--centered-with-button",
     "group": "Components/Logos",
     "name": "CenteredWithButton",
-    "code": "<Logos\n  align=\"center\"\n  cta={{\n    label: 'See all our partners',\n    link: '#',\n    style: 'button',\n    text: 'Explore the success stories of our valued customers and discover more about their journey.',\n    toggle: true\n  }}\n  logo={[\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    },\n    {\n      alt: 'Logo 2',\n      src: 'img/logos/logoipsum-217.svg'\n    },\n    {\n      alt: 'Logo 3',\n      src: 'img/logos/logoipsum-239.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-244.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-250.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-286.svg'\n    }\n  ]}\n  logosPerRow={5}\n  tagline=\"Your Success, Our Commitment\"\n/>",
+    "code": "<Logos\n  align=\"center\"\n  cta={{\n    label: 'See all our partners',\n    link: '#',\n    style: 'button',\n    text: 'Explore the success stories of our valued customers and discover more about their journey.',\n    toggle: true\n  }}\n  logo={[\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-344.svg'\n    },\n    {\n      alt: 'Logo 2',\n      src: 'img/logos/logoipsum-347.svg'\n    },\n    {\n      alt: 'Logo 3',\n      src: 'img/logos/logoipsum-352.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-356.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-358.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-369.svg'\n    }\n  ]}\n  logosPerRow={5}\n  tagline=\"Your Success, Our Commitment\"\n/>",
     "args": {
       "tagline": "Your Success, Our Commitment",
       "logo": [
         {
-          "src": "img/logos/logoipsum-212.svg",
+          "src": "img/logos/logoipsum-344.svg",
           "alt": "Logo 1"
         },
         {
-          "src": "img/logos/logoipsum-217.svg",
+          "src": "img/logos/logoipsum-347.svg",
           "alt": "Logo 2"
         },
         {
-          "src": "img/logos/logoipsum-239.svg",
+          "src": "img/logos/logoipsum-352.svg",
           "alt": "Logo 3"
         },
         {
-          "src": "img/logos/logoipsum-244.svg",
+          "src": "img/logos/logoipsum-356.svg",
           "alt": "Logo 4"
         },
         {
-          "src": "img/logos/logoipsum-250.svg",
+          "src": "img/logos/logoipsum-358.svg",
           "alt": "Logo 5"
         },
         {
-          "src": "img/logos/logoipsum-286.svg",
+          "src": "img/logos/logoipsum-369.svg",
           "alt": "Logo 6"
         }
       ],
@@ -2242,32 +3600,32 @@
     "id": "components-logos--left-aligned-with-text-link",
     "group": "Components/Logos",
     "name": "LeftAlignedWithTextLink",
-    "code": "<Logos\n  align=\"left\"\n  cta={{\n    label: 'See all our partners',\n    link: '#',\n    style: 'text',\n    text: 'Explore the success stories of our valued customers and discover more about their journey.',\n    toggle: true\n  }}\n  logo={[\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    },\n    {\n      alt: 'Logo 2',\n      src: 'img/logos/logoipsum-217.svg'\n    },\n    {\n      alt: 'Logo 3',\n      src: 'img/logos/logoipsum-239.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-244.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-250.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-286.svg'\n    }\n  ]}\n  logosPerRow={5}\n  tagline=\"Your Success, Our Commitment\"\n/>",
+    "code": "<Logos\n  align=\"left\"\n  cta={{\n    label: 'See all our partners',\n    link: '#',\n    style: 'text',\n    text: 'Explore the success stories of our valued customers and discover more about their journey.',\n    toggle: true\n  }}\n  logo={[\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-344.svg'\n    },\n    {\n      alt: 'Logo 2',\n      src: 'img/logos/logoipsum-347.svg'\n    },\n    {\n      alt: 'Logo 3',\n      src: 'img/logos/logoipsum-352.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-356.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-358.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-369.svg'\n    }\n  ]}\n  logosPerRow={5}\n  tagline=\"Your Success, Our Commitment\"\n/>",
     "args": {
       "tagline": "Your Success, Our Commitment",
       "logo": [
         {
-          "src": "img/logos/logoipsum-212.svg",
+          "src": "img/logos/logoipsum-344.svg",
           "alt": "Logo 1"
         },
         {
-          "src": "img/logos/logoipsum-217.svg",
+          "src": "img/logos/logoipsum-347.svg",
           "alt": "Logo 2"
         },
         {
-          "src": "img/logos/logoipsum-239.svg",
+          "src": "img/logos/logoipsum-352.svg",
           "alt": "Logo 3"
         },
         {
-          "src": "img/logos/logoipsum-244.svg",
+          "src": "img/logos/logoipsum-356.svg",
           "alt": "Logo 4"
         },
         {
-          "src": "img/logos/logoipsum-250.svg",
+          "src": "img/logos/logoipsum-358.svg",
           "alt": "Logo 5"
         },
         {
-          "src": "img/logos/logoipsum-286.svg",
+          "src": "img/logos/logoipsum-369.svg",
           "alt": "Logo 6"
         }
       ],
@@ -2287,56 +3645,56 @@
     "id": "components-logos--logo-wall",
     "group": "Components/Logos",
     "name": "LogoWall",
-    "code": "<Logos\n  align=\"center\"\n  cta={{\n    label: 'See all our partners',\n    link: '#',\n    style: 'text',\n    text: 'Explore the success stories of our valued customers and discover more about their journey.',\n    toggle: false\n  }}\n  logo={[\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    },\n    {\n      alt: 'Logo 2',\n      src: 'img/logos/logoipsum-217.svg'\n    },\n    {\n      alt: 'Logo 3',\n      src: 'img/logos/logoipsum-239.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-244.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-250.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-286.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-244.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-250.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-286.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-244.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-250.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-286.svg'\n    }\n  ]}\n  logosPerRow={4}\n  tagline=\"Your Success, Our Commitment\"\n/>",
+    "code": "<Logos\n  align=\"center\"\n  cta={{\n    label: 'See all our partners',\n    link: '#',\n    style: 'text',\n    text: 'Explore the success stories of our valued customers and discover more about their journey.',\n    toggle: false\n  }}\n  logo={[\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-344.svg'\n    },\n    {\n      alt: 'Logo 2',\n      src: 'img/logos/logoipsum-347.svg'\n    },\n    {\n      alt: 'Logo 3',\n      src: 'img/logos/logoipsum-352.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-356.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-358.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-369.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-356.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-358.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-369.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-356.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-358.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-369.svg'\n    }\n  ]}\n  logosPerRow={4}\n  tagline=\"Your Success, Our Commitment\"\n/>",
     "args": {
       "tagline": "Your Success, Our Commitment",
       "logo": [
         {
-          "src": "img/logos/logoipsum-212.svg",
+          "src": "img/logos/logoipsum-344.svg",
           "alt": "Logo 1"
         },
         {
-          "src": "img/logos/logoipsum-217.svg",
+          "src": "img/logos/logoipsum-347.svg",
           "alt": "Logo 2"
         },
         {
-          "src": "img/logos/logoipsum-239.svg",
+          "src": "img/logos/logoipsum-352.svg",
           "alt": "Logo 3"
         },
         {
-          "src": "img/logos/logoipsum-244.svg",
+          "src": "img/logos/logoipsum-356.svg",
           "alt": "Logo 4"
         },
         {
-          "src": "img/logos/logoipsum-250.svg",
+          "src": "img/logos/logoipsum-358.svg",
           "alt": "Logo 5"
         },
         {
-          "src": "img/logos/logoipsum-286.svg",
+          "src": "img/logos/logoipsum-369.svg",
           "alt": "Logo 6"
         },
         {
-          "src": "img/logos/logoipsum-244.svg",
+          "src": "img/logos/logoipsum-356.svg",
           "alt": "Logo 4"
         },
         {
-          "src": "img/logos/logoipsum-250.svg",
+          "src": "img/logos/logoipsum-358.svg",
           "alt": "Logo 5"
         },
         {
-          "src": "img/logos/logoipsum-286.svg",
+          "src": "img/logos/logoipsum-369.svg",
           "alt": "Logo 6"
         },
         {
-          "src": "img/logos/logoipsum-244.svg",
+          "src": "img/logos/logoipsum-356.svg",
           "alt": "Logo 4"
         },
         {
-          "src": "img/logos/logoipsum-250.svg",
+          "src": "img/logos/logoipsum-358.svg",
           "alt": "Logo 5"
         },
         {
-          "src": "img/logos/logoipsum-286.svg",
+          "src": "img/logos/logoipsum-369.svg",
           "alt": "Logo 6"
         }
       ],
@@ -2356,32 +3714,32 @@
     "id": "components-logos--logo-row",
     "group": "Components/Logos",
     "name": "LogoRow",
-    "code": "<Logos\n  align=\"center\"\n  cta={{\n    label: 'See all our partners',\n    link: '#',\n    style: 'text',\n    text: 'Explore the success stories of our valued customers and discover more about their journey.',\n    toggle: false\n  }}\n  logo={[\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    },\n    {\n      alt: 'Logo 2',\n      src: 'img/logos/logoipsum-217.svg'\n    },\n    {\n      alt: 'Logo 3',\n      src: 'img/logos/logoipsum-239.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-244.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-250.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-286.svg'\n    }\n  ]}\n  logosPerRow={6}\n  tagline=\"Your Success, Our Commitment\"\n/>",
+    "code": "<Logos\n  align=\"center\"\n  cta={{\n    label: 'See all our partners',\n    link: '#',\n    style: 'text',\n    text: 'Explore the success stories of our valued customers and discover more about their journey.',\n    toggle: false\n  }}\n  logo={[\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-344.svg'\n    },\n    {\n      alt: 'Logo 2',\n      src: 'img/logos/logoipsum-347.svg'\n    },\n    {\n      alt: 'Logo 3',\n      src: 'img/logos/logoipsum-352.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-356.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-358.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-369.svg'\n    }\n  ]}\n  logosPerRow={6}\n  tagline=\"Your Success, Our Commitment\"\n/>",
     "args": {
       "tagline": "Your Success, Our Commitment",
       "logo": [
         {
-          "src": "img/logos/logoipsum-212.svg",
+          "src": "img/logos/logoipsum-344.svg",
           "alt": "Logo 1"
         },
         {
-          "src": "img/logos/logoipsum-217.svg",
+          "src": "img/logos/logoipsum-347.svg",
           "alt": "Logo 2"
         },
         {
-          "src": "img/logos/logoipsum-239.svg",
+          "src": "img/logos/logoipsum-352.svg",
           "alt": "Logo 3"
         },
         {
-          "src": "img/logos/logoipsum-244.svg",
+          "src": "img/logos/logoipsum-356.svg",
           "alt": "Logo 4"
         },
         {
-          "src": "img/logos/logoipsum-250.svg",
+          "src": "img/logos/logoipsum-358.svg",
           "alt": "Logo 5"
         },
         {
-          "src": "img/logos/logoipsum-286.svg",
+          "src": "img/logos/logoipsum-369.svg",
           "alt": "Logo 6"
         }
       ],
@@ -2401,7 +3759,7 @@
     "id": "components-mosaic--colorful-tiles",
     "group": "Components/Mosaic",
     "name": "ColorfulTiles",
-    "code": "<Mosaic\n  layout=\"alternate\"\n  tile={[\n    {\n      backgroundColor: '#81005a',\n      button: {\n        label: 'Book a meeting',\n        toggle: true\n      },\n      headline: 'Collaborative Environment',\n      image: {\n        src: 'img/mosaic-1.png'\n      },\n      text: 'Our team thrives in a collaborative environment, fostering creativity and innovation.'\n    },\n    {\n      backgroundColor: '#003380',\n      button: {\n        label: 'Book a meeting',\n        toggle: true\n      },\n      headline: 'Modern Infrastructure',\n      image: {\n        src: 'img/mosaic-2.png'\n      },\n      text: 'Our state-of-the-art office facilities inspire productivity and efficiency.'\n    },\n    {\n      backgroundColor: '#004241',\n      button: {\n        label: 'Book a meeting',\n        toggle: true\n      },\n      headline: 'Teamwork',\n      image: {\n        src: 'img/mosaic-3.png'\n      },\n      text: 'We believe in the power of teamwork. Together, we can achieve great things.'\n    }\n  ]}\n/>",
+    "code": "<Mosaic\n  layout=\"alternate\"\n  tile={[\n    {\n      backgroundColor: '#ffd4f1',\n      button: {\n        label: 'Book a meeting',\n        toggle: true\n      },\n      headline: 'Collaborative Environment',\n      image: {\n        src: 'img/mosaic-1.png'\n      },\n      text: 'Our team thrives in a collaborative environment, fostering creativity and innovation.'\n    },\n    {\n      backgroundColor: '#d8e8f',\n      button: {\n        label: 'Book a meeting',\n        toggle: true\n      },\n      headline: 'Modern Infrastructure',\n      image: {\n        src: 'img/mosaic-2.png'\n      },\n      text: 'Our state-of-the-art office facilities inspire productivity and efficiency.'\n    },\n    {\n      backgroundColor: '#ddfffe',\n      button: {\n        label: 'Book a meeting',\n        toggle: true\n      },\n      headline: 'Teamwork',\n      image: {\n        src: 'img/mosaic-3.png'\n      },\n      text: 'We believe in the power of teamwork. Together, we can achieve great things.'\n    }\n  ]}\n/>",
     "args": {
       "layout": "alternate",
       "largeHeadlines": false,
@@ -2414,7 +3772,7 @@
             "toggle": true,
             "label": "Book a meeting"
           },
-          "backgroundColor": "#81005a",
+          "backgroundColor": "#ffd4f1",
           "headline": "Collaborative Environment",
           "text": "Our team thrives in a collaborative environment, fostering creativity and innovation."
         },
@@ -2426,7 +3784,7 @@
             "toggle": true,
             "label": "Book a meeting"
           },
-          "backgroundColor": "#003380",
+          "backgroundColor": "#d8e8f",
           "headline": "Modern Infrastructure",
           "text": "Our state-of-the-art office facilities inspire productivity and efficiency."
         },
@@ -2438,7 +3796,7 @@
             "toggle": true,
             "label": "Book a meeting"
           },
-          "backgroundColor": "#004241",
+          "backgroundColor": "#ddfffe",
           "headline": "Teamwork",
           "text": "We believe in the power of teamwork. Together, we can achieve great things."
         }
@@ -2491,18 +3849,195 @@
           "headline": "Innovative Design",
           "sub": "We are committed to creating innovative designs. Our team is always exploring new ways to improve user experience."
         }
-      ]
+      ]
+    },
+    "screenshot": "img/screenshots/components-mosaic--colorful-text-with-illustrations.png"
+  },
+  {
+    "id": "corporate-pagination--default",
+    "group": "Corporate/Pagination",
+    "name": "Default",
+    "code": "<Pagination\n  ariaLabels={{\n    goToPage: 'Go to page',\n    nextPage: 'Go to next page',\n    previousPage: 'Go to previous page',\n    skipToFirstPage: 'Skip to first page',\n    skipToLastPage: 'Skip to last page'\n  }}\n  pages={[\n    {\n      active: false,\n      url: 'https://example.com/page1'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page2'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page3'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page4'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page5'\n    },\n    {\n      active: true,\n      url: 'https://example.com/page6'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page7'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page8'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page9'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page10'\n    },\n    {\n      url: 'https://example.com/page11'\n    },\n    {\n      url: 'https://example.com/page12'\n    }\n  ]}\n/>",
+    "args": {
+      "ariaLabels": {
+        "previousPage": "Go to previous page",
+        "nextPage": "Go to next page",
+        "skipToFirstPage": "Skip to first page",
+        "skipToLastPage": "Skip to last page",
+        "goToPage": "Go to page"
+      },
+      "pages": [
+        {
+          "active": false,
+          "url": "https://example.com/page1"
+        },
+        {
+          "active": false,
+          "url": "https://example.com/page2"
+        },
+        {
+          "active": false,
+          "url": "https://example.com/page3"
+        },
+        {
+          "active": false,
+          "url": "https://example.com/page4"
+        },
+        {
+          "active": false,
+          "url": "https://example.com/page5"
+        },
+        {
+          "active": true,
+          "url": "https://example.com/page6"
+        },
+        {
+          "active": false,
+          "url": "https://example.com/page7"
+        },
+        {
+          "active": false,
+          "url": "https://example.com/page8"
+        },
+        {
+          "active": false,
+          "url": "https://example.com/page9"
+        },
+        {
+          "active": false,
+          "url": "https://example.com/page10"
+        },
+        {
+          "url": "https://example.com/page11"
+        },
+        {
+          "url": "https://example.com/page12"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/corporate-pagination--default.png"
+  },
+  {
+    "id": "corporate-search-bar--default",
+    "group": "Corporate / Search Bar",
+    "name": "Default",
+    "code": "<SearchBar\n  alternativeResult=\"AI Conference\"\n  alternativeText=\"Did you mean\"\n  buttonText=\"Search\"\n  hint=\"Press <kbd>Enter</kbd> to search\"\n  placeholder=\"Search...\"\n/>",
+    "args": {
+      "placeholder": "Search...",
+      "buttonText": "Search",
+      "hint": "Press <kbd>Enter</kbd> to search",
+      "alternativeText": "Did you mean",
+      "alternativeResult": "AI Conference"
+    },
+    "screenshot": "img/screenshots/corporate-search-bar--default.png"
+  },
+  {
+    "id": "corporate-search-filter--default",
+    "group": "Corporate / Search Filter",
+    "name": "Default",
+    "code": "<SearchFilter\n  categories={[\n    {\n      amount: '10',\n      title: 'Pages',\n      url: '#'\n    },\n    {\n      amount: '5',\n      title: 'News',\n      url: '#'\n    },\n    {\n      amount: '8',\n      title: 'Blog Posts',\n      url: '#'\n    }\n  ]}\n  title=\"Search by category\"\n/>",
+    "args": {
+      "title": "Search by category",
+      "categories": [
+        {
+          "title": "Pages",
+          "amount": "10",
+          "url": "#"
+        },
+        {
+          "title": "News",
+          "amount": "5",
+          "url": "#"
+        },
+        {
+          "title": "Blog Posts",
+          "amount": "8",
+          "url": "#"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/corporate-search-filter--default.png"
+  },
+  {
+    "id": "corporate-search-form--pagefind",
+    "group": "Corporate / Search Form",
+    "name": "Pagefind",
+    "code": "<SearchForm\n  component=\"dsa.search-form.pagefind\"\n  moreButtonLabel=\"View all results\"\n  result={{\n    imageColSize: 'small',\n    showLink: true\n  }}\n  resultPerPage={10}\n/>",
+    "args": {
+      "component": "dsa.search-form.pagefind",
+      "result": {
+        "showLink": true,
+        "imageColSize": "small"
+      },
+      "resultPerPage": 10,
+      "moreButtonLabel": "View all results"
+    },
+    "screenshot": "img/screenshots/corporate-search-form--pagefind.png"
+  },
+  {
+    "id": "corporate-search-modal--pagefind",
+    "group": "Corporate / Search Modal",
+    "name": "Pagefind",
+    "code": "<>\n  <Button\n    data-topic=\"dsa.search-modal.open\"\n    ks-component=\"dsa.radio-emit\"\n    label=\"Open\"\n    size=\"small\"\n  />\n  <hr />\n  <SearchModal\n    closeAriaLabel=\"close\"\n    form={{\n      action: 'iframe.html?id=corporate-search-form--pagefind&viewMode=story',\n      component: 'dsa.search-form.pagefind',\n      moreButtonLabel: 'View all results',\n      result: {\n        imageColSize: 'small',\n        showLink: true\n      },\n      resultPerPage: 10,\n      target: '_self'\n    }}\n    headline=\"Search\"\n  />\n</>",
+    "args": {
+      "headline": "Search",
+      "closeAriaLabel": "close",
+      "form": {
+        "component": "dsa.search-form.pagefind",
+        "result": {
+          "showLink": true,
+          "imageColSize": "small"
+        },
+        "resultPerPage": 10,
+        "moreButtonLabel": "View all results",
+        "action": "iframe.html?id=corporate-search-form--pagefind&viewMode=story",
+        "target": "_self"
+      }
+    },
+    "screenshot": "img/screenshots/corporate-search-modal--pagefind.png"
+  },
+  {
+    "id": "corporate-search-result--default",
+    "group": "Corporate / Search Result",
+    "name": "Default",
+    "code": "<SearchResult\n  imageColSize=\"small\"\n  initialMatch=\"Embracing a **sustainable** lifestyle can significantly reduce your environmental impact. From using energy-efficient appliances to adopting renewable energy sources, every small step counts towards a greener future.\"\n  matches={[\n    {\n      snippet: 'Learn how leading companies are integrating **sustainability** into their core strategies.',\n      title: 'Keynote: Embracing Sustainability',\n      url: '#'\n    },\n    {\n      snippet: 'Business models that prioritize **sustainability** are shared by industry experts in this session.',\n      title: 'Panel: Sustainability in Practice',\n      url: '#'\n    },\n    {\n      snippet: 'In your organization, **sustainability** can be assessed using new tools and techniques.',\n      title: 'Workshop: Measuring Sustainability',\n      url: '#'\n    }\n  ]}\n  previewImage=\"img/full-shot-different-people-working-together.png\"\n  showLink\n  title=\"GreenTech Summit 2023\"\n  url=\"https://www.example.com/greentech-summit-2023\"\n/>",
+    "args": {
+      "url": "https://www.example.com/greentech-summit-2023",
+      "title": "GreenTech Summit 2023",
+      "imageColSize": "small",
+      "matches": [
+        {
+          "title": "Keynote: Embracing Sustainability",
+          "snippet": "Learn how leading companies are integrating **sustainability** into their core strategies.",
+          "url": "#"
+        },
+        {
+          "title": "Panel: Sustainability in Practice",
+          "snippet": "Business models that prioritize **sustainability** are shared by industry experts in this session.",
+          "url": "#"
+        },
+        {
+          "title": "Workshop: Measuring Sustainability",
+          "snippet": "In your organization, **sustainability** can be assessed using new tools and techniques.",
+          "url": "#"
+        }
+      ],
+      "showLink": true,
+      "previewImage": "img/full-shot-different-people-working-together.png",
+      "initialMatch": "Embracing a **sustainable** lifestyle can significantly reduce your environmental impact. From using energy-efficient appliances to adopting renewable energy sources, every small step counts towards a greener future."
     },
-    "screenshot": "img/screenshots/components-mosaic--colorful-text-with-illustrations.png"
+    "screenshot": "img/screenshots/corporate-search-result--default.png"
   },
   {
-    "id": "layout-section--cards",
+    "id": "layout-section--dynamic-layout",
     "group": "Layout/Section",
-    "name": "Cards",
-    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'tile',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "name": "DynamicLayout",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'flex',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  transition=\"none\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n</Section>",
     "args": {
       "width": "default",
+      "style": "default",
       "backgroundColor": "default",
+      "transition": "none",
       "spotlight": false,
       "spaceBefore": "default",
       "spaceAfter": "default",
@@ -2512,66 +4047,74 @@
         "text": "Happy Customers Showcases",
         "large": false,
         "width": "unset",
-        "sub": "We can create something shining for you too!"
+        "sub": "We can create something shining for you too!",
+        "align": "center"
       },
       "content": {
         "width": "unset",
         "align": "center",
         "gutter": "default",
-        "mode": "tile",
+        "mode": "flex",
         "tileWidth": "default"
       },
       "buttons": []
     },
-    "screenshot": "img/screenshots/layout-section--cards.png"
+    "screenshot": "img/screenshots/layout-section--dynamic-layout.png"
   },
   {
-    "id": "layout-section--slider",
+    "id": "layout-section--tile-layout",
     "group": "Layout/Section",
-    "name": "Slider",
-    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'slider',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    text: 'Section headline',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "name": "TileLayout",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'tile',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  transition=\"none\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n</Section>",
     "args": {
       "width": "default",
+      "style": "default",
       "backgroundColor": "default",
+      "transition": "none",
       "spotlight": false,
       "spaceBefore": "default",
       "spaceAfter": "default",
       "inverted": false,
       "headerSpacing": false,
       "headline": {
-        "text": "Section headline",
+        "text": "Happy Customers Showcases",
         "large": false,
-        "width": "unset"
+        "width": "unset",
+        "sub": "We can create something shining for you too!",
+        "align": "center"
       },
       "content": {
         "width": "unset",
         "align": "center",
         "gutter": "default",
-        "mode": "slider",
+        "mode": "tile",
         "tileWidth": "default"
       },
       "buttons": []
     },
-    "screenshot": "img/screenshots/layout-section--slider.png"
+    "screenshot": "img/screenshots/layout-section--tile-layout.png"
   },
   {
-    "id": "layout-section--inverted",
+    "id": "layout-section--list-layout",
     "group": "Layout/Section",
-    "name": "Inverted",
-    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  inverted\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "name": "ListLayout",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  transition=\"none\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</Section>",
     "args": {
       "width": "default",
+      "style": "default",
       "backgroundColor": "default",
+      "transition": "none",
       "spotlight": false,
       "spaceBefore": "default",
       "spaceAfter": "default",
-      "inverted": true,
+      "inverted": false,
       "headerSpacing": false,
       "headline": {
         "text": "Happy Customers Showcases",
         "large": false,
         "width": "unset",
-        "sub": "We can create something shining for you too!"
+        "sub": "We can create something shining for you too!",
+        "align": "center"
       },
       "content": {
         "width": "unset",
@@ -2582,51 +4125,53 @@
       },
       "buttons": []
     },
-    "screenshot": "img/screenshots/layout-section--inverted.png"
+    "screenshot": "img/screenshots/layout-section--list-layout.png"
   },
   {
-    "id": "layout-section--background-image",
+    "id": "layout-section--slider",
     "group": "Layout/Section",
-    "name": "BackgroundImage",
-    "code": "<Section\n  backgroundColor=\"default\"\n  backgroundImage=\"/img/bg_dot-carpet-blue.svg\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'default',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "name": "Slider",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'slider',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    text: 'Section headline',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  transition=\"none\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</Section>",
     "args": {
       "width": "default",
+      "style": "default",
       "backgroundColor": "default",
+      "transition": "none",
       "spotlight": false,
       "spaceBefore": "default",
       "spaceAfter": "default",
       "inverted": false,
       "headerSpacing": false,
       "headline": {
-        "text": "Happy Customers Showcases",
+        "text": "Section headline",
         "large": false,
-        "width": "unset",
-        "sub": "We can create something shining for you too!"
+        "width": "unset"
       },
       "content": {
         "width": "unset",
         "align": "center",
         "gutter": "default",
-        "mode": "default",
+        "mode": "slider",
         "tileWidth": "default"
       },
-      "buttons": [],
-      "backgroundImage": "/img/bg_dot-carpet-blue.svg"
+      "buttons": []
     },
-    "screenshot": "img/screenshots/layout-section--background-image.png"
+    "screenshot": "img/screenshots/layout-section--slider.png"
   },
   {
-    "id": "layout-section--spotlight",
+    "id": "layout-section--inverted",
     "group": "Layout/Section",
-    "name": "Spotlight",
-    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  spotlight\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "name": "Inverted",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'default',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  inverted\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  transition=\"none\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</Section>",
     "args": {
       "width": "default",
+      "style": "default",
       "backgroundColor": "default",
-      "spotlight": true,
+      "transition": "none",
+      "spotlight": false,
       "spaceBefore": "default",
       "spaceAfter": "default",
-      "inverted": false,
+      "inverted": true,
       "headerSpacing": false,
       "headline": {
         "text": "Happy Customers Showcases",
@@ -2638,21 +4183,23 @@
         "width": "unset",
         "align": "center",
         "gutter": "default",
-        "mode": "list",
+        "mode": "default",
         "tileWidth": "default"
       },
       "buttons": []
     },
-    "screenshot": "img/screenshots/layout-section--spotlight.png"
+    "screenshot": "img/screenshots/layout-section--inverted.png"
   },
   {
-    "id": "layout-section--stagelights",
+    "id": "layout-section--accent-background",
     "group": "Layout/Section",
-    "name": "Stagelights",
-    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"stagelights\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "name": "AccentBackground",
+    "code": "<Section\n  backgroundColor=\"accent\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'default',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  transition=\"none\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</Section>",
     "args": {
       "width": "default",
-      "backgroundColor": "default",
+      "style": "default",
+      "backgroundColor": "accent",
+      "transition": "none",
       "spotlight": false,
       "spaceBefore": "default",
       "spaceAfter": "default",
@@ -2669,22 +4216,23 @@
         "width": "unset",
         "align": "center",
         "gutter": "default",
-        "mode": "list",
+        "mode": "default",
         "tileWidth": "default"
       },
-      "buttons": [],
-      "style": "stagelights"
+      "buttons": []
     },
-    "screenshot": "img/screenshots/layout-section--stagelights.png"
+    "screenshot": "img/screenshots/layout-section--accent-background.png"
   },
   {
-    "id": "layout-section--accent-background",
+    "id": "layout-section--bold-background",
     "group": "Layout/Section",
-    "name": "AccentBackground",
-    "code": "<Section\n  backgroundColor=\"accent\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "name": "BoldBackground",
+    "code": "<Section\n  backgroundColor=\"bold\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'default',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  transition=\"none\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</Section>",
     "args": {
       "width": "default",
-      "backgroundColor": "accent",
+      "style": "default",
+      "backgroundColor": "bold",
+      "transition": "none",
       "spotlight": false,
       "spaceBefore": "default",
       "spaceAfter": "default",
@@ -2701,21 +4249,23 @@
         "width": "unset",
         "align": "center",
         "gutter": "default",
-        "mode": "list",
+        "mode": "default",
         "tileWidth": "default"
       },
       "buttons": []
     },
-    "screenshot": "img/screenshots/layout-section--accent-background.png"
+    "screenshot": "img/screenshots/layout-section--bold-background.png"
   },
   {
-    "id": "layout-section--bold-background",
+    "id": "layout-section--framed",
     "group": "Layout/Section",
-    "name": "BoldBackground",
-    "code": "<Section\n  backgroundColor=\"bold\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "name": "Framed",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'default',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"framed\"\n  transition=\"none\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</Section>",
     "args": {
       "width": "default",
-      "backgroundColor": "bold",
+      "style": "framed",
+      "backgroundColor": "default",
+      "transition": "none",
       "spotlight": false,
       "spaceBefore": "default",
       "spaceAfter": "default",
@@ -2732,21 +4282,23 @@
         "width": "unset",
         "align": "center",
         "gutter": "default",
-        "mode": "list",
+        "mode": "default",
         "tileWidth": "default"
       },
       "buttons": []
     },
-    "screenshot": "img/screenshots/layout-section--bold-background.png"
+    "screenshot": "img/screenshots/layout-section--framed.png"
   },
   {
-    "id": "layout-section--colorful-gradient",
+    "id": "layout-section--background-image",
     "group": "Layout/Section",
-    "name": "ColorfulGradient",
-    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"horizontalGradient\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "name": "BackgroundImage",
+    "code": "<Section\n  backgroundColor=\"default\"\n  backgroundImage=\"/img/bg_dot-carpet-blue.svg\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'default',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  transition=\"none\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</Section>",
     "args": {
       "width": "default",
+      "style": "default",
       "backgroundColor": "default",
+      "transition": "none",
       "spotlight": false,
       "spaceBefore": "default",
       "spaceAfter": "default",
@@ -2756,29 +4308,30 @@
         "text": "Happy Customers Showcases",
         "large": false,
         "width": "unset",
-        "sub": "We can create something shining for you too!",
-        "align": "center"
+        "sub": "We can create something shining for you too!"
       },
       "content": {
         "width": "unset",
         "align": "center",
         "gutter": "default",
-        "mode": "list",
+        "mode": "default",
         "tileWidth": "default"
       },
       "buttons": [],
-      "style": "horizontalGradient"
+      "backgroundImage": "/img/bg_dot-carpet-blue.svg"
     },
-    "screenshot": "img/screenshots/layout-section--colorful-gradient.png"
+    "screenshot": "img/screenshots/layout-section--background-image.png"
   },
   {
     "id": "layout-section--with-buttons",
     "group": "Layout/Section",
     "name": "WithButtons",
-    "code": "<Section\n  backgroundColor=\"default\"\n  buttons={[\n    {\n      disabled: false,\n      icon: 'arrow-right',\n      label: 'All Showcases',\n      size: 'medium',\n      variant: 'secondary'\n    },\n    {\n      disabled: false,\n      icon: 'date',\n      label: 'Book a meeting',\n      size: 'medium',\n      variant: 'secondary'\n    }\n  ]}\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "code": "<Section\n  backgroundColor=\"default\"\n  buttons={[\n    {\n      disabled: false,\n      icon: 'arrow-right',\n      label: 'All Showcases',\n      size: 'medium',\n      variant: 'secondary'\n    },\n    {\n      disabled: false,\n      icon: 'date',\n      label: 'Book a meeting',\n      size: 'medium',\n      variant: 'secondary'\n    }\n  ]}\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'default',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  transition=\"none\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</Section>",
     "args": {
       "width": "default",
+      "style": "default",
       "backgroundColor": "default",
+      "transition": "none",
       "spotlight": false,
       "spaceBefore": "default",
       "spaceAfter": "default",
@@ -2795,7 +4348,7 @@
         "width": "unset",
         "align": "center",
         "gutter": "default",
-        "mode": "list",
+        "mode": "default",
         "tileWidth": "default"
       },
       "buttons": [
@@ -2817,104 +4370,11 @@
     },
     "screenshot": "img/screenshots/layout-section--with-buttons.png"
   },
-  {
-    "id": "layout-section--tile-layout",
-    "group": "Layout/Section",
-    "name": "TileLayout",
-    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'tile',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"max\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n</Section>",
-    "args": {
-      "width": "max",
-      "backgroundColor": "default",
-      "spotlight": false,
-      "spaceBefore": "default",
-      "spaceAfter": "default",
-      "inverted": false,
-      "headerSpacing": false,
-      "headline": {
-        "text": "Happy Customers Showcases",
-        "large": false,
-        "width": "unset",
-        "sub": "We can create something shining for you too!",
-        "align": "center"
-      },
-      "content": {
-        "width": "unset",
-        "align": "center",
-        "gutter": "default",
-        "mode": "tile",
-        "tileWidth": "default"
-      },
-      "buttons": []
-    },
-    "screenshot": "img/screenshots/layout-section--tile-layout.png"
-  },
-  {
-    "id": "layout-section--flex-layout",
-    "group": "Layout/Section",
-    "name": "FlexLayout",
-    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"max\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n</Section>",
-    "args": {
-      "width": "max",
-      "backgroundColor": "default",
-      "spotlight": false,
-      "spaceBefore": "default",
-      "spaceAfter": "default",
-      "inverted": false,
-      "headerSpacing": false,
-      "headline": {
-        "text": "Happy Customers Showcases",
-        "large": false,
-        "width": "unset",
-        "sub": "We can create something shining for you too!",
-        "align": "center"
-      },
-      "content": {
-        "width": "unset",
-        "align": "center",
-        "gutter": "default",
-        "mode": "list",
-        "tileWidth": "default"
-      },
-      "buttons": []
-    },
-    "screenshot": "img/screenshots/layout-section--flex-layout.png"
-  },
-  {
-    "id": "layout-section--list-layout",
-    "group": "Layout/Section",
-    "name": "ListLayout",
-    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  width=\"default\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'Go to Page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
-    "args": {
-      "width": "default",
-      "backgroundColor": "default",
-      "spotlight": false,
-      "spaceBefore": "default",
-      "spaceAfter": "default",
-      "inverted": false,
-      "headerSpacing": false,
-      "headline": {
-        "text": "Happy Customers Showcases",
-        "large": false,
-        "width": "unset",
-        "sub": "We can create something shining for you too!",
-        "align": "center"
-      },
-      "content": {
-        "width": "unset",
-        "align": "center",
-        "gutter": "default",
-        "mode": "list",
-        "tileWidth": "default"
-      },
-      "buttons": []
-    },
-    "screenshot": "img/screenshots/layout-section--list-layout.png"
-  },
   {
     "id": "layout-slider--with-arrows",
     "group": "Layout/Slider",
     "name": "WithArrows",
-    "code": "<No Display Name\n  arrows\n  equalHeight\n  gap={15}\n  nav\n  variant=\"carousel\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</No Display Name>",
+    "code": "<Slider\n  arrows\n  equalHeight\n  gap={15}\n  nav\n  variant=\"carousel\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</Slider>",
     "args": {
       "autoplay": false,
       "nav": true,
@@ -2930,7 +4390,7 @@
     "id": "layout-slider--with-teased-neighbours",
     "group": "Layout/Slider",
     "name": "WithTeasedNeighbours",
-    "code": "<No Display Name\n  arrows\n  equalHeight\n  gap={15}\n  nav\n  teaseNeighbours\n  variant=\"carousel\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</No Display Name>",
+    "code": "<Slider\n  arrows\n  equalHeight\n  gap={15}\n  nav\n  teaseNeighbours\n  variant=\"carousel\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</Slider>",
     "args": {
       "autoplay": false,
       "nav": true,
@@ -2946,7 +4406,7 @@
     "id": "layout-slider--with-nav",
     "group": "Layout/Slider",
     "name": "WithNav",
-    "code": "<No Display Name\n  arrows\n  equalHeight\n  gap={15}\n  nav\n  variant=\"carousel\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</No Display Name>",
+    "code": "<Slider\n  arrows\n  equalHeight\n  gap={15}\n  nav\n  variant=\"carousel\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</Slider>",
     "args": {
       "autoplay": false,
       "nav": true,
@@ -2962,7 +4422,7 @@
     "id": "layout-slider--with-autoplay",
     "group": "Layout/Slider",
     "name": "WithAutoplay",
-    "code": "<No Display Name\n  arrows\n  autoplay\n  equalHeight\n  gap={15}\n  nav\n  variant=\"carousel\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</No Display Name>",
+    "code": "<Slider\n  arrows\n  autoplay\n  equalHeight\n  gap={15}\n  nav\n  variant=\"carousel\"\n>\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n    url=\"#\"\n  />\n  <TeaserCard\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n    url=\"#\"\n  />\n</Slider>",
     "args": {
       "autoplay": true,
       "nav": true,
@@ -2974,6 +4434,336 @@
     },
     "screenshot": "img/screenshots/layout-slider--with-autoplay.png"
   },
+  {
+    "id": "layout-split-even--text-with-logos",
+    "group": "Layout/Split Even",
+    "name": "TextWithLogos",
+    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"wide\"\n  firstComponents={<><Cta buttons={[{label: 'Learn more'}]} headline=\"Discover our solutions for Industry 4.0\" highlightText text=\"We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.\"/></>}\n  horizontalGutter=\"default\"\n  secondComponents={<><Logos logo={[{alt: 'Logo 1', src: 'img/logos/logoipsum-344.svg'}, {alt: 'Logo 2', src: 'img/logos/logoipsum-347.svg'}, {alt: 'Logo 3', src: 'img/logos/logoipsum-352.svg'}, {alt: 'Logo 4', src: 'img/logos/logoipsum-356.svg'}, {alt: 'Logo 5', src: 'img/logos/logoipsum-358.svg'}, {alt: 'Logo 6', src: 'img/logos/logoipsum-369.svg'}]} logosPerRow={3}/></>}\n  verticalAlign=\"center\"\n  verticalGutter=\"default\"\n/>",
+    "args": {
+      "contentMinWidth": "wide",
+      "contentGutter": "small",
+      "mobileReverse": false,
+      "verticalAlign": "center",
+      "verticalGutter": "default",
+      "horizontalGutter": "default",
+      "firstComponents": {
+        "key": null,
+        "ref": null,
+        "props": {
+          "children": {
+            "type": {},
+            "key": null,
+            "ref": null,
+            "props": {
+              "highlightText": true,
+              "headline": "Discover our solutions for Industry 4.0",
+              "text": "We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.",
+              "buttons": [
+                {
+                  "label": "Learn more"
+                }
+              ]
+            },
+            "_owner": null
+          }
+        },
+        "_owner": null
+      },
+      "secondComponents": {
+        "key": null,
+        "ref": null,
+        "props": {
+          "children": {
+            "type": {},
+            "key": null,
+            "ref": null,
+            "props": {
+              "logosPerRow": 3,
+              "logo": [
+                {
+                  "src": "img/logos/logoipsum-344.svg",
+                  "alt": "Logo 1"
+                },
+                {
+                  "src": "img/logos/logoipsum-347.svg",
+                  "alt": "Logo 2"
+                },
+                {
+                  "src": "img/logos/logoipsum-352.svg",
+                  "alt": "Logo 3"
+                },
+                {
+                  "src": "img/logos/logoipsum-356.svg",
+                  "alt": "Logo 4"
+                },
+                {
+                  "src": "img/logos/logoipsum-358.svg",
+                  "alt": "Logo 5"
+                },
+                {
+                  "src": "img/logos/logoipsum-369.svg",
+                  "alt": "Logo 6"
+                }
+              ]
+            },
+            "_owner": null
+          }
+        },
+        "_owner": null
+      }
+    },
+    "screenshot": "img/screenshots/layout-split-even--text-with-logos.png"
+  },
+  {
+    "id": "layout-split-even--faq-with-form",
+    "group": "Layout/Split Even",
+    "name": "FAQWithForm",
+    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"medium\"\n  firstComponents={<><Headline level=\"h2\" text=\"Frequently Asked Questions\"/><Faq questions={[{answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What are the benefits of investing in a Design System?'}, {answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What is a Design System?'}, {answer: 'A Headless CMS plays a crucial role in a Design System by providing a content-first approach. It separates the back-end content from the front-end presentation layer, allowing for seamless integration with any design system. This results in a flexible, scalable, and platform-agnostic system that ensures content consistency across all platforms and devices.', question: 'What is the role of a Headless CMS in a Design System?'}]} /></>}\n  horizontalGutter=\"large\"\n  secondComponents={<><Headline level=\"h3\" spaceAfter=\"minimum\" style=\"h3\" text=\"Still have questions?\"/><No Display Name label=\"Ask us directly!\" /><Button label=\"Submit\" /></>}\n  sectionMinWidth=\"medium\"\n  verticalAlign=\"top\"\n  verticalGutter=\"large\"\n/>",
+    "args": {
+      "contentMinWidth": "medium",
+      "contentGutter": "small",
+      "mobileReverse": false,
+      "verticalAlign": "top",
+      "verticalGutter": "large",
+      "horizontalGutter": "large",
+      "sectionMinWidth": "medium",
+      "firstComponents": {
+        "key": null,
+        "ref": null,
+        "props": {
+          "children": [
+            {
+              "type": {},
+              "key": null,
+              "ref": null,
+              "props": {
+                "text": "Frequently Asked Questions",
+                "level": "h2"
+              },
+              "_owner": null
+            },
+            {
+              "type": {},
+              "key": null,
+              "ref": null,
+              "props": {
+                "questions": [
+                  {
+                    "answer": "Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.",
+                    "question": "What are the benefits of investing in a Design System?"
+                  },
+                  {
+                    "answer": "Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.",
+                    "question": "What is a Design System?"
+                  },
+                  {
+                    "answer": "A Headless CMS plays a crucial role in a Design System by providing a content-first approach. It separates the back-end content from the front-end presentation layer, allowing for seamless integration with any design system. This results in a flexible, scalable, and platform-agnostic system that ensures content consistency across all platforms and devices.",
+                    "question": "What is the role of a Headless CMS in a Design System?"
+                  }
+                ]
+              },
+              "_owner": null
+            }
+          ]
+        },
+        "_owner": null
+      },
+      "secondComponents": {
+        "key": null,
+        "ref": null,
+        "props": {
+          "children": [
+            {
+              "type": {},
+              "key": null,
+              "ref": null,
+              "props": {
+                "text": "Still have questions?",
+                "level": "h3",
+                "style": "h3",
+                "spaceAfter": "minimum"
+              },
+              "_owner": null
+            },
+            {
+              "type": {},
+              "key": null,
+              "ref": null,
+              "props": {
+                "label": "Ask us directly!"
+              },
+              "_owner": null
+            },
+            {
+              "type": {},
+              "key": null,
+              "ref": null,
+              "props": {
+                "label": "Submit"
+              },
+              "_owner": null
+            }
+          ]
+        },
+        "_owner": null
+      }
+    },
+    "screenshot": "img/screenshots/layout-split-even--faq-with-form.png"
+  },
+  {
+    "id": "layout-split-weighted--text-with-contact",
+    "group": "Layout/Split Weighted",
+    "name": "TextWithContact",
+    "code": "<SplitWeighted\n  aside={<><Contact image={{aspectRatio: 'wide', src: 'img/people/contact-isabella.png'}} links={[{ariaLabel: 'Isabella Doe on Twitter', icon: 'twitter', label: '@Isabella_Doe', url: '#'}, {ariaLabel: 'Isabella Doe on LinkedIn', icon: 'linkedin', label: 'Isabella.Doe', url: 'mailto:mail@example.com'}]} subtitle=\"Creative Director\" title=\"Isabella Doe\"/></>}\n  asideLayout={{\n    gutter: 'default',\n    minWidth: 'wide'\n  }}\n  horizontalGutter=\"default\"\n  main={<><Cta buttons={[{label: 'Learn more'}]} headline=\"Discover our solutions for Industry 4.0\" text=\"We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.\"/></>}\n  mainLayout={{\n    gutter: 'default',\n    minWidth: 'wide'\n  }}\n  order={{\n    desktop: 'mainFirst',\n    mobile: 'mainFirst'\n  }}\n  verticalAlign=\"top\"\n  verticalGutter=\"large\"\n/>",
+    "args": {
+      "verticalGutter": "large",
+      "horizontalGutter": "default",
+      "verticalAlign": "top",
+      "mainLayout": {
+        "gutter": "default",
+        "minWidth": "wide"
+      },
+      "asideLayout": {
+        "gutter": "default",
+        "minWidth": "wide"
+      },
+      "order": {
+        "mobile": "mainFirst",
+        "desktop": "mainFirst"
+      },
+      "main": {
+        "key": null,
+        "ref": null,
+        "props": {
+          "children": {
+            "type": {},
+            "key": null,
+            "ref": null,
+            "props": {
+              "headline": "Discover our solutions for Industry 4.0",
+              "text": "We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.",
+              "buttons": [
+                {
+                  "label": "Learn more"
+                }
+              ]
+            },
+            "_owner": null
+          }
+        },
+        "_owner": null
+      },
+      "aside": {
+        "key": null,
+        "ref": null,
+        "props": {
+          "children": {
+            "type": {},
+            "key": null,
+            "ref": null,
+            "props": {
+              "title": "Isabella Doe",
+              "subtitle": "Creative Director",
+              "image": {
+                "src": "img/people/contact-isabella.png",
+                "aspectRatio": "wide"
+              },
+              "links": [
+                {
+                  "icon": "twitter",
+                  "url": "#",
+                  "label": "@Isabella_Doe",
+                  "ariaLabel": "Isabella Doe on Twitter"
+                },
+                {
+                  "url": "mailto:mail@example.com",
+                  "icon": "linkedin",
+                  "label": "Isabella.Doe",
+                  "ariaLabel": "Isabella Doe on LinkedIn"
+                }
+              ]
+            },
+            "_owner": null
+          }
+        },
+        "_owner": null
+      }
+    },
+    "screenshot": "img/screenshots/layout-split-weighted--text-with-contact.png"
+  },
+  {
+    "id": "layout-split-weighted--text-with-teaser",
+    "group": "Layout/Split Weighted",
+    "name": "TextWithTeaser",
+    "code": "<SplitWeighted\n  aside={<TeaserCard button={{chevron: false, hidden: false, label: 'Read more'}} headline=\"Transforming Industry\" image=\"img/logos/castaway.svg\" imageRatio=\"landscape\" layout=\"row\" text=\"with Smart Solutions\" url=\"#\"/>}\n  asideLayout={{\n    gutter: 'default',\n    minWidth: 'wide'\n  }}\n  horizontalGutter=\"default\"\n  main={<><Headline level=\"h2\" spaceAfter=\"minimum\" text=\"Innovative solutions for Industry 4.0\"/><Text highlightText text=\"We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.\"/></>}\n  mainLayout={{\n    gutter: 'small',\n    minWidth: 'narrow'\n  }}\n  order={{\n    desktop: 'mainFirst',\n    mobile: 'mainFirst'\n  }}\n  verticalAlign=\"top\"\n  verticalGutter=\"default\"\n/>",
+    "args": {
+      "verticalGutter": "default",
+      "horizontalGutter": "default",
+      "verticalAlign": "top",
+      "mainLayout": {
+        "gutter": "small",
+        "minWidth": "narrow"
+      },
+      "asideLayout": {
+        "gutter": "default",
+        "minWidth": "wide"
+      },
+      "order": {
+        "mobile": "mainFirst",
+        "desktop": "mainFirst"
+      },
+      "main": {
+        "key": null,
+        "ref": null,
+        "props": {
+          "children": [
+            {
+              "type": {},
+              "key": null,
+              "ref": null,
+              "props": {
+                "text": "Innovative solutions for Industry 4.0",
+                "level": "h2",
+                "spaceAfter": "minimum"
+              },
+              "_owner": null
+            },
+            {
+              "type": {},
+              "key": null,
+              "ref": null,
+              "props": {
+                "highlightText": true,
+                "text": "We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry."
+              },
+              "_owner": null
+            }
+          ]
+        },
+        "_owner": null
+      },
+      "aside": {
+        "type": {},
+        "key": null,
+        "ref": null,
+        "props": {
+          "layout": "row",
+          "button": {
+            "chevron": false,
+            "hidden": false,
+            "label": "Read more"
+          },
+          "imageRatio": "landscape",
+          "headline": "Transforming Industry",
+          "text": "with Smart Solutions",
+          "image": "img/logos/castaway.svg",
+          "url": "#"
+        },
+        "_owner": null
+      }
+    },
+    "screenshot": "img/screenshots/layout-split-weighted--text-with-teaser.png"
+  },
   {
     "id": "components-stats--count-up-with-icons",
     "group": "Components/Stats",
@@ -3025,9 +4815,10 @@
     "id": "components-teaser-card--product-tiles",
     "group": "Components/Teaser Card",
     "name": "ProductTiles",
-    "code": "<TeaserCard\n  button={{\n    chevron: false,\n    hidden: true,\n    label: 'Go to page'\n  }}\n  headline=\"Castaway\"\n  image=\"img/logos/castaway.svg\"\n  imageRatio=\"wide\"\n  layout=\"stack\"\n  target=\"#\"\n  text=\"Transforming Ideas into Code\"\n/>",
+    "code": "<TeaserCard\n  button={{\n    chevron: false,\n    hidden: true,\n    label: 'Go to page'\n  }}\n  headline=\"Castaway\"\n  image=\"img/logos/castaway.svg\"\n  imageRatio=\"wide\"\n  layout=\"stack\"\n  text=\"Transforming Ideas into Code\"\n  url=\"#\"\n/>",
     "args": {
       "layout": "stack",
+      "centered": false,
       "button": {
         "chevron": false,
         "hidden": true,
@@ -3037,7 +4828,7 @@
       "headline": "Castaway",
       "text": "Transforming Ideas into Code",
       "image": "img/logos/castaway.svg",
-      "target": "#"
+      "url": "#"
     },
     "screenshot": "img/screenshots/components-teaser-card--product-tiles.png"
   },
@@ -3045,9 +4836,10 @@
     "id": "components-teaser-card--page-navigation",
     "group": "Components/Teaser Card",
     "name": "PageNavigation",
-    "code": "<TeaserCard\n  button={{\n    chevron: false,\n    hidden: false,\n    label: 'Read more'\n  }}\n  headline=\"Design System Services\"\n  image=\"img/02.jpg\"\n  imageRatio=\"landscape\"\n  layout=\"stack\"\n  target=\"#\"\n  text=\"Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.\"\n/>",
+    "code": "<TeaserCard\n  button={{\n    chevron: false,\n    hidden: false,\n    label: 'Read more'\n  }}\n  headline=\"Design System Services\"\n  image=\"img/02.jpg\"\n  imageRatio=\"landscape\"\n  layout=\"stack\"\n  text=\"Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.\"\n  url=\"#\"\n/>",
     "args": {
       "layout": "stack",
+      "centered": false,
       "button": {
         "chevron": false,
         "hidden": false,
@@ -3057,7 +4849,7 @@
       "headline": "Design System Services",
       "text": "Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.",
       "image": "img/02.jpg",
-      "target": "#"
+      "url": "#"
     },
     "screenshot": "img/screenshots/components-teaser-card--page-navigation.png"
   },
@@ -3065,9 +4857,10 @@
     "id": "components-teaser-card--showcase-preview",
     "group": "Components/Teaser Card",
     "name": "ShowcasePreview",
-    "code": "<TeaserCard\n  button={{\n    chevron: false,\n    hidden: false,\n    label: 'View showcase'\n  }}\n  headline=\"Transformation Love Story\"\n  image=\"img/showcases/comp_tfe01.jpg\"\n  imageRatio=\"wide\"\n  label=\"Tech\"\n  layout=\"row\"\n  target=\"#\"\n  text=\"See how we saved TechFusions a year's worth of development time\"\n/>",
+    "code": "<TeaserCard\n  button={{\n    chevron: false,\n    hidden: false,\n    label: 'View showcase'\n  }}\n  headline=\"Transformation Love Story\"\n  image=\"img/showcases/comp_tfe01.jpg\"\n  imageRatio=\"wide\"\n  label=\"Tech\"\n  layout=\"row\"\n  text=\"See how we saved TechFusions a year's worth of development time\"\n  url=\"#\"\n/>",
     "args": {
       "layout": "row",
+      "centered": false,
       "button": {
         "chevron": false,
         "hidden": false,
@@ -3078,7 +4871,7 @@
       "headline": "Transformation Love Story",
       "text": "See how we saved TechFusions a year's worth of development time",
       "image": "img/showcases/comp_tfe01.jpg",
-      "target": "#"
+      "url": "#"
     },
     "screenshot": "img/screenshots/components-teaser-card--showcase-preview.png"
   },