@kickstartds/ds-agency-premium 1.7.0--canary.18.1660.0 → 1.7.0--canary.46.1797.0

package/dist/components/presets.json

@@ -3,7 +3,7 @@
     "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  title=\"Blog Post\"\n/>",
+    "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/>",
     "args": {
       "author": {
         "name": "Jane Smith",
@@ -42,8 +42,7 @@
         }
       ],
       "readingTime": "5 min read",
-      "date": "12/30/2022",
-      "title": "Blog Post"
+      "date": "12/30/2022"
     },
     "screenshot": "img/screenshots/blog-blog-aside--default.png"
   },
@@ -82,11 +81,12 @@
     "id": "blog-blog-head--default",
     "group": "Blog/ Blog Head",
     "name": "Default",
-    "code": "<BlogHead\n  date=\"12/30/2022\"\n  headline=\"The Future of AI\"\n  image=\"img/close-up-young-business-team-working.png\"\n  tags={[\n    {\n      entry: 'Technology'\n    },\n    {\n      entry: 'AI'\n    }\n  ]}\n/>",
+    "code": "<BlogHead\n  alt=\"Image of a business team working\"\n  date=\"12/30/2022\"\n  headline=\"The Future of AI\"\n  image=\"img/close-up-young-business-team-working.png\"\n  tags={[\n    {\n      entry: 'Technology'\n    },\n    {\n      entry: 'AI'\n    }\n  ]}\n/>",
     "args": {
       "date": "12/30/2022",
       "headline": "The Future of AI",
       "image": "img/close-up-young-business-team-working.png",
+      "alt": "Image of a business team working",
       "tags": [
         {
           "entry": "Technology"
@@ -102,15 +102,16 @@
     "id": "blog-blog-teaser--default",
     "group": "Blog/ Blog Teaser",
     "name": "Default",
-    "code": "<BlogTeaser\n  author={{\n    image: 'img/people/author-emily.png',\n    name: 'Jane Smith',\n    title: 'Senior AI Researcher'\n  }}\n  date=\"12/30/2022\"\n  headline=\"The Future of AI\"\n  image=\"img/close-up-young-business-team-working.png\"\n  link={{\n    label: 'Read more',\n    url: 'https://example.com'\n  }}\n  readingTime=\"5 min read\"\n  tags={[\n    {\n      entry: 'Technology'\n    },\n    {\n      entry: 'AI'\n    }\n  ]}\n  teaserText=\"Dive into the future of AI in this detailed blog post. Discover how technology is rapidly evolving, the impact of AI on various industries, and what to expect in the coming years. Learn about the latest advancements, challenges, and the potential solutions that AI brings to the table.\"\n/>",
+    "code": "<BlogTeaser\n  alt=\"Image of a business team working\"\n  author={{\n    image: 'img/people/author-emily.png',\n    name: 'Jane Smith',\n    title: 'Senior AI Researcher'\n  }}\n  date=\"12/30/2022\"\n  headline=\"The Future of AI\"\n  image=\"img/close-up-young-business-team-working.png\"\n  link={{\n    text: 'Read article',\n    url: 'https://example.com'\n  }}\n  readingTime=\"5 min read\"\n  tags={[\n    {\n      entry: 'Technology'\n    },\n    {\n      entry: 'AI'\n    }\n  ]}\n  teaserText=\"Dive into the future of AI in this detailed blog post. Discover how technology is rapidly evolving, the impact of AI on various industries, and what to expect in the coming years. Learn about the latest advancements, challenges, and the potential solutions that AI brings to the table.\"\n/>",
     "args": {
       "date": "12/30/2022",
       "headline": "The Future of AI",
       "teaserText": "Dive into the future of AI in this detailed blog post. Discover how technology is rapidly evolving, the impact of AI on various industries, and what to expect in the coming years. Learn about the latest advancements, challenges, and the potential solutions that AI brings to the table.",
       "image": "img/close-up-young-business-team-working.png",
+      "alt": "Image of a business team working",
       "link": {
         "url": "https://example.com",
-        "label": "Read more"
+        "text": "Read article"
       },
       "readingTime": "5 min read",
       "author": {
@@ -182,15 +183,14 @@
     "screenshot": "img/screenshots/components-button--primary-disabled-button.png"
   },
   {
-    "id": "pages-archetypes--blog-overview",
-    "group": "Pages/Archetypes",
+    "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    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      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      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        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      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        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      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        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      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        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      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        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      style: 'default',\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      style: 'default',\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      style: 'default',\n      width: 'default'\n    }\n  ]}\n/>",
+    "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/>",
     "args": {
       "section": [
         {
           "width": "default",
-          "style": "default",
           "backgroundColor": "default",
           "spotlight": false,
           "spaceBefore": "default",
@@ -232,7 +232,6 @@
         },
         {
           "width": "default",
-          "style": "default",
           "backgroundColor": "default",
           "spotlight": false,
           "spaceBefore": "default",
@@ -274,7 +273,6 @@
         },
         {
           "width": "default",
-          "style": "default",
           "backgroundColor": "default",
           "spotlight": false,
           "spaceBefore": "default",
@@ -321,8 +319,10 @@
         "headline": "Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality",
         "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.",
         "image": "img/close-up-young-business-team-working.png",
+        "alt": "Image of a business team working",
         "link": {
           "url": "https://example.com/article1",
+          "text": "Read article",
           "label": "Read more"
         },
         "readingTime": "5 min read",
@@ -350,8 +350,10 @@
           "headline": "Mastering the Art of Design Systems with Systemics",
           "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..",
           "image": "img/close-up-young-business-team-working.png",
+          "alt": "Image of a business team working",
           "link": {
             "url": "https://example.com/article1",
+            "text": "Read article",
             "label": "Read more"
           },
           "readingTime": "5 min read",
@@ -371,8 +373,10 @@
           "headline": "Unleashing Innovation with Headless Websites",
           "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.",
           "image": "img/close-up-young-business-team-working.png",
+          "alt": "Image of a business team working",
           "link": {
             "url": "https://example.com/article2",
+            "text": "Read article",
             "label": "Read more"
           },
           "readingTime": "5 min read",
@@ -392,8 +396,10 @@
           "headline": "Investing in Digital Excellence: Systemics' Design System Trainings",
           "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.",
           "image": "img/close-up-young-business-team-working.png",
+          "alt": "Image of a business team working",
           "link": {
             "url": "https://example.com/article3",
+            "text": "Read article",
             "label": "Read more"
           },
           "readingTime": "5 min read",
@@ -416,8 +422,10 @@
           "headline": "Mastering the Art of Design Systems with Systemics",
           "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..",
           "image": "img/close-up-young-business-team-working.png",
+          "alt": "Image of a business team working",
           "link": {
             "url": "https://example.com/article1",
+            "text": "Read article",
             "label": "Read more"
           },
           "readingTime": "5 min read",
@@ -437,8 +445,10 @@
           "headline": "Unleashing Innovation with Headless Websites",
           "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.",
           "image": "img/close-up-young-business-team-working.png",
+          "alt": "Image of a business team working",
           "link": {
             "url": "https://example.com/article2",
+            "text": "Read article",
             "label": "Read more"
           },
           "readingTime": "5 min read",
@@ -486,18 +496,19 @@
         "width": "wide"
       }
     },
-    "screenshot": "img/screenshots/pages-archetypes--blog-overview.png"
+    "screenshot": "img/screenshots/page-archetypes-blog-overview--blog-overview.png"
   },
   {
-    "id": "pages-archetypes--blog-post",
-    "group": "Pages/Archetypes",
+    "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    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      style: 'default',\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      style: 'default',\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      style: 'default',\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 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/>",
     "args": {
       "head": {
         "date": "12/30/2022",
         "headline": "The Future of AI: A Glimpse into the Unseen",
         "image": "img/close-up-young-business-team-working.png",
+        "alt": "Image of a business team working",
         "tags": [
           {
             "entry": "Technology"
@@ -552,7 +563,6 @@
       "section": [
         {
           "width": "default",
-          "style": "default",
           "backgroundColor": "default",
           "spotlight": false,
           "spaceBefore": "default",
@@ -594,7 +604,6 @@
         },
         {
           "width": "default",
-          "style": "default",
           "backgroundColor": "default",
           "spotlight": false,
           "spaceBefore": "default",
@@ -636,7 +645,6 @@
         },
         {
           "width": "default",
-          "style": "default",
           "backgroundColor": "default",
           "spotlight": false,
           "spaceBefore": "default",
@@ -733,7 +741,7 @@
         "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/pages-archetypes--blog-post.png"
+    "screenshot": "img/screenshots/page-archetypes-blog-post--blog-post.png"
   },
   {
     "id": "components-contact--wide-image",
@@ -1186,24 +1194,24 @@
     "screenshot": "img/screenshots/components-cta--align-bottom.png"
   },
   {
-    "id": "components-divider--accent",
-    "group": "Components/Divider",
+    "id": "layout-divider--accent",
+    "group": "Layout/Divider",
     "name": "Accent",
     "code": "<No Display Name variant=\"accent\" />",
     "args": {
       "variant": "accent"
     },
-    "screenshot": "img/screenshots/components-divider--accent.png"
+    "screenshot": "img/screenshots/layout-divider--accent.png"
   },
   {
-    "id": "components-divider--default",
-    "group": "Components/Divider",
+    "id": "layout-divider--default",
+    "group": "Layout/Divider",
     "name": "Default",
     "code": "<No Display Name variant=\"default\" />",
     "args": {
       "variant": "default"
     },
-    "screenshot": "img/screenshots/components-divider--default.png"
+    "screenshot": "img/screenshots/layout-divider--default.png"
   },
   {
     "id": "components-faq--dropdown-list",
@@ -1247,7 +1255,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        style: 'link',\n        target: '/feature1',\n        toggle: true\n      },\n      icon: 'home',\n      style: 'stack',\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        style: 'link',\n        target: '/feature2',\n        toggle: true\n      },\n      icon: 'map',\n      style: 'stack',\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        style: 'link',\n        target: '/feature3',\n        toggle: true\n      },\n      icon: 'person',\n      style: 'stack',\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        style: 'link',\n        target: '/feature4',\n        toggle: true\n      },\n      icon: 'star',\n      style: 'stack',\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        style: 'link',\n        target: '/feature5',\n        toggle: true\n      },\n      icon: 'upload',\n      style: 'stack',\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        style: 'link',\n        target: '/feature6',\n        toggle: true\n      },\n      icon: 'login',\n      style: 'stack',\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        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/>",
     "args": {
       "layout": "largeTiles",
       "style": "centered",
@@ -1260,72 +1268,54 @@
           "icon": "home",
           "title": "Scalable Architecture",
           "text": "Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.",
-          "style": "stack",
           "cta": {
             "target": "/feature1",
-            "label": "Learn more",
-            "toggle": true,
-            "style": "link"
+            "label": "Learn more"
           }
         },
         {
           "icon": "map",
           "title": "Efficient Development",
           "text": "Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.",
-          "style": "stack",
           "cta": {
             "target": "/feature2",
-            "label": "Get started",
-            "toggle": true,
-            "style": "link"
+            "label": "Get started"
           }
         },
         {
           "icon": "person",
           "title": "Consistent UI",
           "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
-          "style": "stack",
           "cta": {
             "target": "/feature3",
-            "label": "Explore",
-            "toggle": true,
-            "style": "link"
+            "label": "Explore"
           }
         },
         {
           "icon": "star",
           "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.",
-          "style": "stack",
           "cta": {
             "target": "/feature4",
-            "label": "Customize",
-            "toggle": true,
-            "style": "link"
+            "label": "Customize"
           }
         },
         {
           "icon": "upload",
           "title": "Cloud Ready",
           "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
-          "style": "stack",
           "cta": {
             "target": "/feature5",
-            "label": "Deploy",
-            "toggle": true,
-            "style": "link"
+            "label": "Deploy"
           }
         },
         {
           "icon": "login",
           "title": "Secure",
           "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
-          "style": "stack",
           "cta": {
             "target": "/feature6",
-            "label": "Secure",
-            "toggle": true,
-            "style": "link"
+            "label": "Secure"
           }
         }
       ]
@@ -1336,7 +1326,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        style: 'link',\n        target: '/feature3',\n        toggle: true\n      },\n      icon: 'person',\n      style: 'stack',\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        style: 'link',\n        target: '/feature4',\n        toggle: true\n      },\n      icon: 'star',\n      style: 'stack',\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        style: 'link',\n        target: '/feature5',\n        toggle: true\n      },\n      icon: 'upload',\n      style: 'stack',\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        style: 'link',\n        target: '/feature6',\n        toggle: true\n      },\n      icon: 'login',\n      style: 'stack',\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        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/>",
     "args": {
       "layout": "smallTiles",
       "style": "stack",
@@ -1349,48 +1339,36 @@
           "icon": "person",
           "title": "Consistent UI",
           "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
-          "style": "stack",
           "cta": {
             "target": "/feature3",
-            "label": "Explore",
-            "toggle": true,
-            "style": "link"
+            "label": "Explore"
           }
         },
         {
           "icon": "star",
           "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.",
-          "style": "stack",
           "cta": {
             "target": "/feature4",
-            "label": "Customize",
-            "toggle": true,
-            "style": "link"
+            "label": "Customize"
           }
         },
         {
           "icon": "upload",
           "title": "Cloud Ready",
           "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
-          "style": "stack",
           "cta": {
             "target": "/feature5",
-            "label": "Deploy",
-            "toggle": true,
-            "style": "link"
+            "label": "Deploy"
           }
         },
         {
           "icon": "login",
           "title": "Secure",
           "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
-          "style": "stack",
           "cta": {
             "target": "/feature6",
-            "label": "Secure",
-            "toggle": true,
-            "style": "link"
+            "label": "Secure"
           }
         }
       ]
@@ -1401,7 +1379,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        style: 'link',\n        target: '/feature4',\n        toggle: true\n      },\n      icon: 'star',\n      style: 'stack',\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        style: 'link',\n        target: '/feature2',\n        toggle: true\n      },\n      icon: 'map',\n      style: 'stack',\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        style: 'link',\n        target: '/feature3',\n        toggle: true\n      },\n      icon: 'person',\n      style: 'stack',\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        style: 'link',\n        target: '/feature1',\n        toggle: true\n      },\n      icon: 'home',\n      style: 'stack',\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        style: 'link',\n        target: '/feature5',\n        toggle: true\n      },\n      icon: 'upload',\n      style: 'stack',\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        style: 'link',\n        target: '/feature6',\n        toggle: true\n      },\n      icon: 'login',\n      style: 'stack',\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        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/>",
     "args": {
       "layout": "list",
       "style": "besideLarge",
@@ -1414,72 +1392,54 @@
           "icon": "star",
           "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.",
-          "style": "stack",
           "cta": {
             "target": "/feature4",
-            "label": "Customize",
-            "toggle": true,
-            "style": "link"
+            "label": "Customize"
           }
         },
         {
           "icon": "map",
           "title": "Efficient Development",
           "text": "Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.",
-          "style": "stack",
           "cta": {
             "target": "/feature2",
-            "label": "Get started",
-            "toggle": true,
-            "style": "link"
+            "label": "Get started"
           }
         },
         {
           "icon": "person",
           "title": "Consistent UI",
           "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
-          "style": "stack",
           "cta": {
             "target": "/feature3",
-            "label": "Explore",
-            "toggle": true,
-            "style": "link"
+            "label": "Explore"
           }
         },
         {
           "icon": "home",
           "title": "Scalable Architecture",
           "text": "Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.",
-          "style": "stack",
           "cta": {
             "target": "/feature1",
-            "label": "Learn more",
-            "toggle": true,
-            "style": "link"
+            "label": "Learn more"
           }
         },
         {
           "icon": "upload",
           "title": "Cloud Ready",
           "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
-          "style": "stack",
           "cta": {
             "target": "/feature5",
-            "label": "Deploy",
-            "toggle": true,
-            "style": "link"
+            "label": "Deploy"
           }
         },
         {
           "icon": "login",
           "title": "Secure",
           "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
-          "style": "stack",
           "cta": {
             "target": "/feature6",
-            "label": "Secure",
-            "toggle": true,
-            "style": "link"
+            "label": "Secure"
           }
         }
       ]
@@ -1490,7 +1450,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        style: 'link',\n        target: '/feature1',\n        toggle: true\n      },\n      icon: 'home',\n      style: 'stack',\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        style: 'link',\n        target: '/feature2',\n        toggle: true\n      },\n      icon: 'map',\n      style: 'stack',\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        style: 'link',\n        target: '/feature3',\n        toggle: true\n      },\n      icon: 'person',\n      style: 'stack',\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        style: 'link',\n        target: '/feature4',\n        toggle: true\n      },\n      icon: 'star',\n      style: 'stack',\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        style: 'link',\n        target: '/feature5',\n        toggle: true\n      },\n      icon: 'upload',\n      style: 'stack',\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        style: 'link',\n        target: '/feature6',\n        toggle: true\n      },\n      icon: 'login',\n      style: 'stack',\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        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/>",
     "args": {
       "layout": "smallTiles",
       "style": "intext",
@@ -1503,72 +1463,54 @@
           "icon": "home",
           "title": "Scalable Architecture",
           "text": "Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.",
-          "style": "stack",
           "cta": {
             "target": "/feature1",
-            "label": "Learn more",
-            "toggle": true,
-            "style": "link"
+            "label": "Learn more"
           }
         },
         {
           "icon": "map",
           "title": "Efficient Development",
           "text": "Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.",
-          "style": "stack",
           "cta": {
             "target": "/feature2",
-            "label": "Get started",
-            "toggle": true,
-            "style": "link"
+            "label": "Get started"
           }
         },
         {
           "icon": "person",
           "title": "Consistent UI",
           "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
-          "style": "stack",
           "cta": {
             "target": "/feature3",
-            "label": "Explore",
-            "toggle": true,
-            "style": "link"
+            "label": "Explore"
           }
         },
         {
           "icon": "star",
           "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.",
-          "style": "stack",
           "cta": {
             "target": "/feature4",
-            "label": "Customize",
-            "toggle": true,
-            "style": "link"
+            "label": "Customize"
           }
         },
         {
           "icon": "upload",
           "title": "Cloud Ready",
           "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
-          "style": "stack",
           "cta": {
             "target": "/feature5",
-            "label": "Deploy",
-            "toggle": true,
-            "style": "link"
+            "label": "Deploy"
           }
         },
         {
           "icon": "login",
           "title": "Secure",
           "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
-          "style": "stack",
           "cta": {
             "target": "/feature6",
-            "label": "Secure",
-            "toggle": true,
-            "style": "link"
+            "label": "Secure"
           }
         }
       ]
@@ -1579,7 +1521,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        style: 'link',\n        target: '/feature4',\n        toggle: true\n      },\n      icon: 'star',\n      style: 'stack',\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        style: 'link',\n        target: '/feature2',\n        toggle: true\n      },\n      icon: 'map',\n      style: 'stack',\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        style: 'link',\n        target: '/feature3',\n        toggle: true\n      },\n      icon: 'person',\n      style: 'stack',\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        style: 'link',\n        target: '/feature5',\n        toggle: true\n      },\n      icon: 'upload',\n      style: 'stack',\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        style: 'link',\n        target: '/feature6',\n        toggle: true\n      },\n      icon: 'login',\n      style: 'stack',\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        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/>",
     "args": {
       "layout": "largeTiles",
       "style": "intext",
@@ -1592,60 +1534,45 @@
           "icon": "star",
           "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.",
-          "style": "stack",
           "cta": {
             "target": "/feature4",
-            "label": "Customize",
-            "toggle": true,
-            "style": "link"
+            "label": "Customize"
           }
         },
         {
           "icon": "map",
           "title": "Efficient Development",
           "text": "Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.",
-          "style": "stack",
           "cta": {
             "target": "/feature2",
-            "label": "Get started",
-            "toggle": true,
-            "style": "link"
+            "label": "Get started"
           }
         },
         {
           "icon": "person",
           "title": "Consistent UI",
           "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
-          "style": "stack",
           "cta": {
             "target": "/feature3",
-            "label": "Explore",
-            "toggle": true,
-            "style": "link"
+            "label": "Explore"
           }
         },
         {
           "icon": "upload",
           "title": "Cloud Ready",
           "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
-          "style": "stack",
           "cta": {
             "target": "/feature5",
-            "label": "Deploy",
-            "toggle": true,
-            "style": "link"
+            "label": "Deploy"
           }
         },
         {
           "icon": "login",
           "title": "Secure",
           "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
-          "style": "stack",
           "cta": {
             "target": "/feature6",
-            "label": "Secure",
-            "toggle": true,
-            "style": "link"
+            "label": "Secure"
           }
         }
       ]
@@ -2154,6 +2081,49 @@
     },
     "screenshot": "img/screenshots/components-hero--text-box-on-full-screen.png"
   },
+  {
+    "id": "components-html--html",
+    "group": "Components/HTML",
+    "name": "HTML",
+    "code": "<Html\n  consentAspectRatio=\"16:9\"\n  html=\"<p style=&quot;color: var(--ks-text-color-default);&quot;>Hello World</p>\"\n/>",
+    "args": {
+      "html": "<p style=\"color: var(--ks-text-color-default);\">Hello World</p>",
+      "consent": false,
+      "consentAspectRatio": "16:9",
+      "inverted": false
+    },
+    "screenshot": "img/screenshots/components-html--html.png"
+  },
+  {
+    "id": "components-html--with-consent",
+    "group": "Components/HTML",
+    "name": "WithConsent",
+    "code": "<Html\n  consent\n  consentAspectRatio=\"16:9\"\n  consentBackgroundImage=\"img/02.jpg\"\n  consentButtonLabel=\"yes!\"\n  consentText=\"would you like to watch the youtube video?\"\n  html=\"<iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube-nocookie.com/embed/oGGIkuGY-7U?si=Y5_JHflGsNwRCLu_&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; allowfullscreen></iframe>\"\n/>",
+    "args": {
+      "html": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube-nocookie.com/embed/oGGIkuGY-7U?si=Y5_JHflGsNwRCLu_\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>",
+      "consent": true,
+      "consentAspectRatio": "16:9",
+      "inverted": false,
+      "consentText": "would you like to watch the youtube video?",
+      "consentButtonLabel": "yes!",
+      "consentBackgroundImage": "img/02.jpg"
+    },
+    "screenshot": "img/screenshots/components-html--with-consent.png"
+  },
+  {
+    "id": "components-html--with-script",
+    "group": "Components/HTML",
+    "name": "WithScript",
+    "code": "<Html\n  consent\n  consentAspectRatio=\"16:9\"\n  consentButtonLabel=\"Say hello\"\n  html=\"<script>alert(&quot;Hello :)&quot;)</script><p style=&quot;color: var(--ks-text-color-default);&quot;>Nice to meet you!</p>\"\n/>",
+    "args": {
+      "html": "<script>alert(\"Hello :)\")</script><p style=\"color: var(--ks-text-color-default);\">Nice to meet you!</p>",
+      "consent": true,
+      "consentAspectRatio": "16:9",
+      "inverted": false,
+      "consentButtonLabel": "Say hello"
+    },
+    "screenshot": "img/screenshots/components-html--with-script.png"
+  },
   {
     "id": "components-image-story--sticky-image-next-to-scrolling-text",
     "group": "Components/Image Story",
@@ -2223,58 +2193,6 @@
     },
     "screenshot": "img/screenshots/components-image-text--above-layout.png"
   },
-  {
-    "id": "components-image--responsive-image",
-    "group": "Components/Image",
-    "name": "ResponsiveImage",
-    "code": "<Image\n  alt=\"Agency\"\n  aspectRatio=\"unset\"\n  lazy\n  sources={[\n    {\n      srcSet: 'img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png'\n    },\n    {\n      srcSet: 'img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png'\n    },\n    {\n      srcSet: 'img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png'\n    }\n  ]}\n  src=\"img/close-up-young-business-team-working.png\"\n/>",
-    "args": {
-      "src": "img/close-up-young-business-team-working.png",
-      "aspectRatio": "unset",
-      "lazy": true,
-      "alt": "Agency",
-      "sources": [
-        {
-          "srcSet": "img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png"
-        },
-        {
-          "srcSet": "img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png"
-        },
-        {
-          "srcSet": "img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png"
-        }
-      ]
-    },
-    "screenshot": "img/screenshots/components-image--responsive-image.png"
-  },
-  {
-    "id": "components-image--preset-size",
-    "group": "Components/Image",
-    "name": "PresetSize",
-    "code": "<Image\n  alt=\"Agency\"\n  aspectRatio=\"unset\"\n  height=\"300px\"\n  lazy\n  src=\"img/close-up-young-business-team-working.png\"\n  width=\"400px\"\n/>",
-    "args": {
-      "src": "img/close-up-young-business-team-working.png",
-      "aspectRatio": "unset",
-      "lazy": true,
-      "alt": "Agency",
-      "width": "400px",
-      "height": "300px"
-    },
-    "screenshot": "img/screenshots/components-image--preset-size.png"
-  },
-  {
-    "id": "components-image--custom-aspect-ratio",
-    "group": "Components/Image",
-    "name": "CustomAspectRatio",
-    "code": "<Image\n  alt=\"Agency\"\n  aspectRatio=\"square\"\n  lazy\n  src=\"img/close-up-young-business-team-working.png\"\n/>",
-    "args": {
-      "src": "img/close-up-young-business-team-working.png",
-      "aspectRatio": "square",
-      "lazy": true,
-      "alt": "Agency"
-    },
-    "screenshot": "img/screenshots/components-image--custom-aspect-ratio.png"
-  },
   {
     "id": "components-logos--centered-with-button",
     "group": "Components/Logos",
@@ -2581,10 +2499,9 @@
     "id": "layout-section--cards",
     "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  style=\"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  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>",
     "args": {
       "width": "default",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2612,10 +2529,9 @@
     "id": "layout-section--slider",
     "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  style=\"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>",
+    "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>",
     "args": {
       "width": "default",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2642,10 +2558,9 @@
     "id": "layout-section--inverted",
     "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  style=\"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  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>",
     "args": {
       "width": "default",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2669,14 +2584,44 @@
     },
     "screenshot": "img/screenshots/layout-section--inverted.png"
   },
+  {
+    "id": "layout-section--background-image",
+    "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>",
+    "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!"
+      },
+      "content": {
+        "width": "unset",
+        "align": "center",
+        "gutter": "default",
+        "mode": "default",
+        "tileWidth": "default"
+      },
+      "buttons": [],
+      "backgroundImage": "/img/bg_dot-carpet-blue.svg"
+    },
+    "screenshot": "img/screenshots/layout-section--background-image.png"
+  },
   {
     "id": "layout-section--spotlight",
     "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  style=\"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  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>",
     "args": {
       "width": "default",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": true,
       "spaceBefore": "default",
@@ -2707,7 +2652,6 @@
     "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>",
     "args": {
       "width": "default",
-      "style": "stagelights",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2728,7 +2672,8 @@
         "mode": "list",
         "tileWidth": "default"
       },
-      "buttons": []
+      "buttons": [],
+      "style": "stagelights"
     },
     "screenshot": "img/screenshots/layout-section--stagelights.png"
   },
@@ -2736,10 +2681,9 @@
     "id": "layout-section--accent-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  style=\"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=\"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>",
     "args": {
       "width": "default",
-      "style": "default",
       "backgroundColor": "accent",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2768,10 +2712,9 @@
     "id": "layout-section--bold-background",
     "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  style=\"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=\"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>",
     "args": {
       "width": "default",
-      "style": "default",
       "backgroundColor": "bold",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2803,7 +2746,6 @@
     "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>",
     "args": {
       "width": "default",
-      "style": "horizontalGradient",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2824,7 +2766,8 @@
         "mode": "list",
         "tileWidth": "default"
       },
-      "buttons": []
+      "buttons": [],
+      "style": "horizontalGradient"
     },
     "screenshot": "img/screenshots/layout-section--colorful-gradient.png"
   },
@@ -2832,10 +2775,9 @@
     "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  style=\"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: '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",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2879,10 +2821,9 @@
     "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  style=\"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>",
+    "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",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2911,10 +2852,9 @@
     "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  style=\"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>",
+    "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",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2943,10 +2883,9 @@
     "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  style=\"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  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",
-      "style": "default",
       "backgroundColor": "default",
       "spotlight": false,
       "spaceBefore": "default",
@@ -2975,7 +2914,7 @@
     "id": "layout-slider--with-arrows",
     "group": "Layout/Slider",
     "name": "WithArrows",
-    "code": "<No Display Name\n  arrows\n  equalHeight\n  gap={15}\n  nav\n  typeProp=\"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": "<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>",
     "args": {
       "autoplay": false,
       "nav": true,
@@ -2983,7 +2922,7 @@
       "equalHeight": true,
       "gap": 15,
       "arrows": true,
-      "typeProp": "carousel"
+      "variant": "carousel"
     },
     "screenshot": "img/screenshots/layout-slider--with-arrows.png"
   },
@@ -2991,7 +2930,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  typeProp=\"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": "<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>",
     "args": {
       "autoplay": false,
       "nav": true,
@@ -2999,7 +2938,7 @@
       "equalHeight": true,
       "gap": 15,
       "arrows": true,
-      "typeProp": "carousel"
+      "variant": "carousel"
     },
     "screenshot": "img/screenshots/layout-slider--with-teased-neighbours.png"
   },
@@ -3007,7 +2946,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  typeProp=\"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": "<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>",
     "args": {
       "autoplay": false,
       "nav": true,
@@ -3015,7 +2954,7 @@
       "equalHeight": true,
       "gap": 15,
       "arrows": true,
-      "typeProp": "carousel"
+      "variant": "carousel"
     },
     "screenshot": "img/screenshots/layout-slider--with-nav.png"
   },
@@ -3023,7 +2962,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  typeProp=\"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": "<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>",
     "args": {
       "autoplay": true,
       "nav": true,
@@ -3031,7 +2970,7 @@
       "equalHeight": true,
       "gap": 15,
       "arrows": true,
-      "typeProp": "carousel"
+      "variant": "carousel"
     },
     "screenshot": "img/screenshots/layout-slider--with-autoplay.png"
   },
@@ -3039,22 +2978,22 @@
     "id": "components-stats--count-up-with-icons",
     "group": "Components/Stats",
     "name": "CountUpWithIcons",
-    "code": "<Stats\n  stat={[\n    {\n      icon: 'person',\n      number: 1500,\n      title: 'Users'\n    },\n    {\n      icon: 'star',\n      number: 350,\n      title: 'Subscribers'\n    },\n    {\n      icon: 'map',\n      number: 125,\n      title: 'Locations'\n    }\n  ]}\n />",
+    "code": "<Stats\n  stat={[\n    {\n      icon: 'person',\n      number: 'mind. 1500 davon',\n      title: 'Users'\n    },\n    {\n      icon: 'star',\n      number: 'bis zu 350',\n      title: 'Subscribers'\n    },\n    {\n      icon: 'map',\n      number: '125%',\n      title: 'Growth'\n    }\n  ]}\n />",
     "args": {
       "stat": [
         {
-          "number": 1500,
+          "number": "mind. 1500 davon",
           "title": "Users",
           "icon": "person"
         },
         {
-          "number": 350,
+          "number": "bis zu 350",
           "title": "Subscribers",
           "icon": "star"
         },
         {
-          "number": 125,
-          "title": "Locations",
+          "number": "125%",
+          "title": "Growth",
           "icon": "map"
         }
       ]
@@ -3065,16 +3004,16 @@
     "id": "components-stats--count-up-with-description",
     "group": "Components/Stats",
     "name": "CountUpWithDescription",
-    "code": "<Stats\n  stat={[\n    {\n      description: 'Experience the power of our platform, embraced by a vast community of users. Our user base is diverse and dynamic, including both active and inactive members. Join us and become part of this ever-growing community.',\n      number: 1500,\n      title: 'Users'\n    },\n    {\n      description: 'Stay ahead with our regular updates and newsletters. Our subscribers are always in the loop, receiving the latest news and features. Subscribe now and never miss an update from us.',\n      number: 350,\n      title: 'Subscribers'\n    }\n  ]}\n />",
+    "code": "<Stats\n  stat={[\n    {\n      description: 'Experience the power of our platform, embraced by a vast community of users. Our user base is diverse and dynamic, including both active and inactive members. Join us and become part of this ever-growing community.',\n      number: '1500',\n      title: 'Users'\n    },\n    {\n      description: 'Stay ahead with our regular updates and newsletters. Our subscribers are always in the loop, receiving the latest news and features. Subscribe now and never miss an update from us.',\n      number: '350',\n      title: 'Subscribers'\n    }\n  ]}\n />",
     "args": {
       "stat": [
         {
-          "number": 1500,
+          "number": "1500",
           "title": "Users",
           "description": "Experience the power of our platform, embraced by a vast community of users. Our user base is diverse and dynamic, including both active and inactive members. Join us and become part of this ever-growing community."
         },
         {
-          "number": 350,
+          "number": "350",
           "title": "Subscribers",
           "description": "Stay ahead with our regular updates and newsletters. Our subscribers are always in the loop, receiving the latest news and features. Subscribe now and never miss an update from us."
         }
@@ -3147,9 +3086,10 @@
     "id": "components-testimonials--simple",
     "group": "Components/Testimonials",
     "name": "Simple",
-    "code": "<Testimonials\n  layout=\"slider\"\n  testimonial={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      title: undefined\n    }\n  ]}\n/>",
+    "code": "<Testimonials\n  layout=\"slider\"\n  quoteSigns=\"normal\"\n  testimonial={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      title: undefined\n    }\n  ]}\n/>",
     "args": {
       "layout": "slider",
+      "quoteSigns": "normal",
       "testimonial": [
         {
           "quote": "Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.",
@@ -3167,9 +3107,10 @@
     "id": "components-testimonials--with-title",
     "group": "Components/Testimonials",
     "name": "WithTitle",
-    "code": "<Testimonials\n  layout=\"slider\"\n  testimonial={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      title: 'Chief Marketing Officer at TechFusion Enterprises'\n    }\n  ]}\n/>",
+    "code": "<Testimonials\n  layout=\"slider\"\n  quoteSigns=\"normal\"\n  testimonial={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      title: 'Chief Marketing Officer at TechFusion Enterprises'\n    }\n  ]}\n/>",
     "args": {
       "layout": "slider",
+      "quoteSigns": "normal",
       "testimonial": [
         {
           "quote": "Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.",
@@ -3188,9 +3129,10 @@
     "id": "components-testimonials--list-layout",
     "group": "Components/Testimonials",
     "name": "ListLayout",
-    "code": "<Testimonials\n  layout=\"list\"\n  testimonial={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      rating: 5,\n      title: 'Chief Marketing Officer at TechFusion Enterprises'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 2',\n        src: 'img/people/author-john.png'\n      },\n      name: 'John Smith',\n      quote: 'Systemics\\'s design system transformed our development process. The consistency it introduced across our platforms not only saved us time but also boosted our brand\\'s credibility. It\\'s a partnership that continues to pay dividends.',\n      rating: 4,\n      title: 'Director of Digital Strategy at EcoTech Solutions'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 3',\n        src: 'img/people/author-alex.png'\n      },\n      name: 'Alex Chen',\n      quote: 'As a startup, we needed to hit the ground running. Systemics\\'s approach streamlined our dev and design process, allowing us to scale faster and focus on what truly matters - building a product that stands out in the market.',\n      rating: 5,\n      title: 'CEO of LaunchPad Innovations'\n    }\n  ]}\n/>",
+    "code": "<Testimonials\n  layout=\"list\"\n  quoteSigns=\"normal\"\n  testimonial={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      rating: 5,\n      title: 'Chief Marketing Officer at TechFusion Enterprises'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 2',\n        src: 'img/people/author-john.png'\n      },\n      name: 'John Smith',\n      quote: 'Systemics\\'s design system transformed our development process. The consistency it introduced across our platforms not only saved us time but also boosted our brand\\'s credibility. It\\'s a partnership that continues to pay dividends.',\n      rating: 4,\n      title: 'Director of Digital Strategy at EcoTech Solutions'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 3',\n        src: 'img/people/author-alex.png'\n      },\n      name: 'Alex Chen',\n      quote: 'As a startup, we needed to hit the ground running. Systemics\\'s approach streamlined our dev and design process, allowing us to scale faster and focus on what truly matters - building a product that stands out in the market.',\n      rating: 5,\n      title: 'CEO of LaunchPad Innovations'\n    }\n  ]}\n/>",
     "args": {
       "layout": "list",
+      "quoteSigns": "normal",
       "testimonial": [
         {
           "quote": "Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.",
@@ -3230,9 +3172,10 @@
     "id": "components-testimonials--slider-layout",
     "group": "Components/Testimonials",
     "name": "SliderLayout",
-    "code": "<Testimonials\n  layout=\"slider\"\n  testimonial={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      title: 'Chief Marketing Officer at TechFusion Enterprises'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 2',\n        src: 'img/people/author-john.png'\n      },\n      name: 'John Smith',\n      quote: 'Systemics\\'s design system transformed our development process. The consistency it introduced across our platforms not only saved us time but also boosted our brand\\'s credibility. It\\'s a partnership that continues to pay dividends.',\n      title: 'Director of Digital Strategy at EcoTech Solutions'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 3',\n        src: 'img/people/author-alex.png'\n      },\n      name: 'Alex Chen',\n      quote: 'As a startup, we needed to hit the ground running. Systemics\\'s approach streamlined our dev and design process, allowing us to scale faster and focus on what truly matters - building a product that stands out in the market.',\n      title: 'CEO of LaunchPad Innovations'\n    }\n  ]}\n/>",
+    "code": "<Testimonials\n  layout=\"slider\"\n  quoteSigns=\"normal\"\n  testimonial={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      title: 'Chief Marketing Officer at TechFusion Enterprises'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 2',\n        src: 'img/people/author-john.png'\n      },\n      name: 'John Smith',\n      quote: 'Systemics\\'s design system transformed our development process. The consistency it introduced across our platforms not only saved us time but also boosted our brand\\'s credibility. It\\'s a partnership that continues to pay dividends.',\n      title: 'Director of Digital Strategy at EcoTech Solutions'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 3',\n        src: 'img/people/author-alex.png'\n      },\n      name: 'Alex Chen',\n      quote: 'As a startup, we needed to hit the ground running. Systemics\\'s approach streamlined our dev and design process, allowing us to scale faster and focus on what truly matters - building a product that stands out in the market.',\n      title: 'CEO of LaunchPad Innovations'\n    }\n  ]}\n/>",
     "args": {
       "layout": "slider",
+      "quoteSigns": "normal",
       "testimonial": [
         {
           "quote": "Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.",
@@ -3269,9 +3212,10 @@
     "id": "components-testimonials--with-rating",
     "group": "Components/Testimonials",
     "name": "WithRating",
-    "code": "<Testimonials\n  layout=\"slider\"\n  testimonial={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      rating: 5,\n      title: 'Chief Marketing Officer at TechFusion Enterprises'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 2',\n        src: 'img/people/author-john.png'\n      },\n      name: 'John Smith',\n      quote: 'Systemics\\'s design system transformed our development process. The consistency it introduced across our platforms not only saved us time but also boosted our brand\\'s credibility. It\\'s a partnership that continues to pay dividends.',\n      rating: 4,\n      title: 'Director of Digital Strategy at EcoTech Solutions'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 3',\n        src: 'img/people/author-alex.png'\n      },\n      name: 'Alex Chen',\n      quote: 'As a startup, we needed to hit the ground running. Systemics\\'s approach streamlined our dev and design process, allowing us to scale faster and focus on what truly matters - building a product that stands out in the market.',\n      rating: 5,\n      title: 'CEO of LaunchPad Innovations'\n    }\n  ]}\n/>",
+    "code": "<Testimonials\n  layout=\"slider\"\n  quoteSigns=\"normal\"\n  testimonial={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      rating: 5,\n      title: 'Chief Marketing Officer at TechFusion Enterprises'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 2',\n        src: 'img/people/author-john.png'\n      },\n      name: 'John Smith',\n      quote: 'Systemics\\'s design system transformed our development process. The consistency it introduced across our platforms not only saved us time but also boosted our brand\\'s credibility. It\\'s a partnership that continues to pay dividends.',\n      rating: 4,\n      title: 'Director of Digital Strategy at EcoTech Solutions'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 3',\n        src: 'img/people/author-alex.png'\n      },\n      name: 'Alex Chen',\n      quote: 'As a startup, we needed to hit the ground running. Systemics\\'s approach streamlined our dev and design process, allowing us to scale faster and focus on what truly matters - building a product that stands out in the market.',\n      rating: 5,\n      title: 'CEO of LaunchPad Innovations'\n    }\n  ]}\n/>",
     "args": {
       "layout": "slider",
+      "quoteSigns": "normal",
       "testimonial": [
         {
           "quote": "Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.",
@@ -3311,9 +3255,10 @@
     "id": "components-testimonials--alternating-layout",
     "group": "Components/Testimonials",
     "name": "AlternatingLayout",
-    "code": "<Testimonials\n  layout=\"alternating\"\n  testimonial={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      rating: 5,\n      title: 'Chief Marketing Officer at TechFusion Enterprises'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 2',\n        src: 'img/people/author-john.png'\n      },\n      name: 'John Smith',\n      quote: 'Systemics\\'s design system transformed our development process. The consistency it introduced across our platforms not only saved us time but also boosted our brand\\'s credibility. It\\'s a partnership that continues to pay dividends.',\n      rating: 4,\n      title: 'Director of Digital Strategy at EcoTech Solutions'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 3',\n        src: 'img/people/author-alex.png'\n      },\n      name: 'Alex Chen',\n      quote: 'As a startup, we needed to hit the ground running. Systemics\\'s approach streamlined our dev and design process, allowing us to scale faster and focus on what truly matters - building a product that stands out in the market.',\n      rating: 5,\n      title: 'CEO of LaunchPad Innovations'\n    }\n  ]}\n/>",
+    "code": "<Testimonials\n  layout=\"alternating\"\n  quoteSigns=\"normal\"\n  testimonial={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      rating: 5,\n      title: 'Chief Marketing Officer at TechFusion Enterprises'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 2',\n        src: 'img/people/author-john.png'\n      },\n      name: 'John Smith',\n      quote: 'Systemics\\'s design system transformed our development process. The consistency it introduced across our platforms not only saved us time but also boosted our brand\\'s credibility. It\\'s a partnership that continues to pay dividends.',\n      rating: 4,\n      title: 'Director of Digital Strategy at EcoTech Solutions'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 3',\n        src: 'img/people/author-alex.png'\n      },\n      name: 'Alex Chen',\n      quote: 'As a startup, we needed to hit the ground running. Systemics\\'s approach streamlined our dev and design process, allowing us to scale faster and focus on what truly matters - building a product that stands out in the market.',\n      rating: 5,\n      title: 'CEO of LaunchPad Innovations'\n    }\n  ]}\n/>",
     "args": {
       "layout": "alternating",
+      "quoteSigns": "normal",
       "testimonial": [
         {
           "quote": "Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.",