@kickstartds/ds-agency-premium 1.6.68--canary.45.1719.0 → 1.6.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (194) hide show
  1. package/dist/{BlogAsideProps-c760fd2a.d.ts → BlogAsideProps-d9decb7c.d.ts} +5 -5
  2. package/dist/{BlogAuthorProps-fb0241df.d.ts → BlogAuthorProps-88a11566.d.ts} +2 -7
  3. package/dist/BlogOverviewProps-9f207f1c.d.ts +2 -2
  4. package/dist/{BlogPostProps-6b3cff22.d.ts → BlogPostProps-d9decb7c.d.ts} +3 -3
  5. package/dist/{ButtonProps-00ddee3a.d.ts → ButtonProps-03ff6d21.d.ts} +4 -4
  6. package/dist/{CtaProps-babe4ee6.d.ts → CtaProps-93230a76.d.ts} +11 -21
  7. package/dist/{FeaturesProps-a9041d97.d.ts → FeaturesProps-e58616a5.d.ts} +4 -9
  8. package/dist/{FooterProps-a0a104ca.d.ts → FooterProps-171a3067.d.ts} +2 -2
  9. package/dist/{HeaderProps-72763967.d.ts → HeaderProps-e22382f1.d.ts} +2 -2
  10. package/dist/{HeroProps-40f6c7f5.d.ts → HeroProps-f704d270.d.ts} +4 -9
  11. package/dist/ImageStoryProps-e853e1e7.d.ts +1 -1
  12. package/dist/MosaicProps-d52c7151.d.ts +4 -4
  13. package/dist/PageProps-aa29c554.d.ts +1 -1
  14. package/dist/{SectionProps-7caa223c.d.ts → SectionProps-1cfcf6e8.d.ts} +9 -14
  15. package/dist/{SliderProps-babe4ee6.d.ts → SliderProps-93230a76.d.ts} +4 -4
  16. package/dist/{StatProps-12a3eae0.d.ts → StatProps-79109ad0.d.ts} +1 -1
  17. package/dist/StatsProps-bf5ef578.d.ts +1 -1
  18. package/dist/{TeaserCardProps-994cb119.d.ts → TeaserCardProps-b9c28e78.d.ts} +4 -4
  19. package/dist/{VideoCurtainProps-a2c0cc7f.d.ts → VideoCurtainProps-6c625a69.d.ts} +5 -5
  20. package/dist/components/blog-aside/blog-aside.schema.dereffed.json +8 -16
  21. package/dist/components/blog-aside/blog-aside.schema.json +4 -4
  22. package/dist/components/blog-aside/index.d.ts +1 -1
  23. package/dist/components/blog-aside/index.js +1 -1
  24. package/dist/components/blog-author/blog-author.schema.dereffed.json +4 -12
  25. package/dist/components/blog-author/index.d.ts +1 -1
  26. package/dist/components/blog-overview/blog-overview.schema.dereffed.json +85 -178
  27. package/dist/components/blog-post/blog-post.schema.dereffed.json +93 -194
  28. package/dist/components/blog-post/index.d.ts +1 -1
  29. package/dist/components/blog-teaser/index.js +7 -5
  30. package/dist/components/button/button.css +2 -2
  31. package/dist/components/button/button.schema.dereffed.json +3 -3
  32. package/dist/components/button/button.schema.json +3 -3
  33. package/dist/components/button/index.d.ts +1 -1
  34. package/dist/components/button/index.js +1 -1
  35. package/dist/components/button-group/button-group.schema.dereffed.json +3 -3
  36. package/dist/components/button-group/index.d.ts +1 -1
  37. package/dist/components/contact/contact.schema.dereffed.json +5 -13
  38. package/dist/components/contact/contact.schema.json +5 -11
  39. package/dist/components/contact/index.d.ts +1 -6
  40. package/dist/components/contact/index.js +1 -1
  41. package/dist/components/cta/cta.css +56 -44
  42. package/dist/components/cta/cta.schema.dereffed.json +11 -28
  43. package/dist/components/cta/cta.schema.json +10 -23
  44. package/dist/components/cta/index.d.ts +1 -1
  45. package/dist/components/cta/index.js +26 -25
  46. package/dist/components/feature/feature.schema.dereffed.json +3 -13
  47. package/dist/components/feature/feature.schema.json +3 -11
  48. package/dist/components/feature/index.d.ts +3 -8
  49. package/dist/components/feature/index.js +2 -2
  50. package/dist/components/features/features.css +1 -7
  51. package/dist/components/features/features.schema.dereffed.json +3 -13
  52. package/dist/components/features/features.schema.json +2 -5
  53. package/dist/components/features/index.d.ts +1 -1
  54. package/dist/components/features/index.js +1 -2
  55. package/dist/components/footer/footer.css +1 -1
  56. package/dist/components/footer/footer.schema.dereffed.json +12 -12
  57. package/dist/components/footer/index.d.ts +1 -1
  58. package/dist/components/footer/index.js +1 -1
  59. package/dist/components/gallery/gallery.schema.dereffed.json +1 -2
  60. package/dist/components/gallery/gallery.schema.json +1 -2
  61. package/dist/components/gallery/index.js +1 -1
  62. package/dist/components/header/header.css +9 -47
  63. package/dist/components/header/header.schema.dereffed.json +12 -12
  64. package/dist/components/header/index.d.ts +1 -1
  65. package/dist/components/header/index.js +5 -5
  66. package/dist/components/headline/headline.css +2 -2
  67. package/dist/components/hero/hero.css +25 -61
  68. package/dist/components/hero/hero.schema.dereffed.json +3 -9
  69. package/dist/components/hero/hero.schema.json +2 -8
  70. package/dist/components/hero/index.d.ts +1 -1
  71. package/dist/components/hero/index.js +39 -39
  72. package/dist/components/image-story/image-story.css +2 -5
  73. package/dist/components/image-story/image-story.schema.dereffed.json +3 -3
  74. package/dist/components/index/index.d.ts +3 -4
  75. package/dist/components/logos/index.js +1 -1
  76. package/dist/components/mosaic/index.js +1 -1
  77. package/dist/components/mosaic/mosaic.css +1 -1
  78. package/dist/components/mosaic/mosaic.schema.dereffed.json +3 -3
  79. package/dist/components/nav-dropdown/index.d.ts +1 -1
  80. package/dist/components/nav-dropdown/index.js +2 -2
  81. package/dist/components/nav-dropdown/nav-dropdown.css +3 -12
  82. package/dist/components/nav-dropdown/nav-dropdown.schema.dereffed.json +1 -1
  83. package/dist/components/nav-flyout/index.d.ts +2 -2
  84. package/dist/components/nav-flyout/index.js +8 -6
  85. package/dist/components/nav-flyout/nav-flyout.css +15 -29
  86. package/dist/components/nav-flyout/nav-flyout.schema.dereffed.json +12 -12
  87. package/dist/components/nav-main/index.d.ts +5 -5
  88. package/dist/components/nav-main/index.js +2 -0
  89. package/dist/components/nav-main/nav-main.schema.dereffed.json +15 -15
  90. package/dist/components/nav-main/nav-main.schema.json +14 -14
  91. package/dist/components/nav-toggle/index.js +1 -1
  92. package/dist/components/nav-topbar/index.d.ts +2 -2
  93. package/dist/components/nav-topbar/index.js +2 -2
  94. package/dist/components/nav-topbar/nav-topbar.css +2 -15
  95. package/dist/components/nav-topbar/nav-topbar.schema.dereffed.json +12 -12
  96. package/dist/components/page/page.schema.dereffed.json +74 -150
  97. package/dist/components/page-wrapper/index.js +0 -26
  98. package/dist/components/page-wrapper/tokens.css +729 -425
  99. package/dist/components/presets.json +259 -749
  100. package/dist/components/section/index.d.ts +1 -1
  101. package/dist/components/section/index.js +3 -11
  102. package/dist/components/section/section.css +58 -38
  103. package/dist/components/section/section.schema.dereffed.json +74 -150
  104. package/dist/components/section/section.schema.json +10 -8
  105. package/dist/components/settings/settings.schema.dereffed.json +24 -24
  106. package/dist/components/slider/index.d.ts +1 -1
  107. package/dist/components/slider/slider.schema.dereffed.json +26 -59
  108. package/dist/components/split/split.css +2 -2
  109. package/dist/components/stat/index.d.ts +1 -1
  110. package/dist/components/stat/index.js +12 -3
  111. package/dist/components/stat/stat.schema.dereffed.json +4 -3
  112. package/dist/components/stat/stat.schema.json +2 -2
  113. package/dist/components/stats/stats.schema.dereffed.json +4 -3
  114. package/dist/components/teaser-card/index.d.ts +1 -1
  115. package/dist/components/teaser-card/index.js +9 -9
  116. package/dist/components/teaser-card/teaser-card.css +46 -65
  117. package/dist/components/teaser-card/teaser-card.schema.dereffed.json +4 -4
  118. package/dist/components/teaser-card/teaser-card.schema.json +4 -4
  119. package/dist/components/testimonials/index.d.ts +1 -1
  120. package/dist/components/tile/tile.schema.dereffed.json +3 -3
  121. package/dist/components/tile/tile.schema.json +2 -2
  122. package/dist/components/video-curtain/index.d.ts +1 -1
  123. package/dist/components/video-curtain/index.js +4 -12
  124. package/dist/components/video-curtain/video-curtain.css +29 -52
  125. package/dist/components/video-curtain/video-curtain.schema.dereffed.json +4 -6
  126. package/dist/components/video-curtain/video-curtain.schema.json +3 -3
  127. package/dist/global.css +59 -283
  128. package/dist/static/logo-inverted.svg +25 -12
  129. package/dist/static/logo.svg +25 -12
  130. package/dist/tokens/IconSprite.js +0 -26
  131. package/dist/tokens/icon-sprite.html +0 -10
  132. package/dist/tokens/themes.css +4 -4
  133. package/dist/tokens/tokens.css +729 -425
  134. package/dist/tokens/tokens.js +730 -626
  135. package/package.json +1 -1
  136. package/dist/EventAppointmentProps-443cd1ce.d.ts +0 -38
  137. package/dist/EventDetailProps-42a7eebe.d.ts +0 -387
  138. package/dist/EventLatestTeaserProps-fc9d3281.d.ts +0 -58
  139. package/dist/EventLocationProps-dd4aeaa9.d.ts +0 -36
  140. package/dist/components/downloads/downloads.css +0 -153
  141. package/dist/components/downloads/downloads.schema.dereffed.json +0 -55
  142. package/dist/components/downloads/downloads.schema.json +0 -44
  143. package/dist/components/downloads/index.d.ts +0 -41
  144. package/dist/components/downloads/index.js +0 -18
  145. package/dist/components/event-appointment/event-appointment.css +0 -55
  146. package/dist/components/event-appointment/event-appointment.schema.dereffed.json +0 -56
  147. package/dist/components/event-appointment/event-appointment.schema.json +0 -47
  148. package/dist/components/event-appointment/index.d.ts +0 -7
  149. package/dist/components/event-appointment/index.js +0 -14
  150. package/dist/components/event-detail/event-detail.schema.dereffed.json +0 -277
  151. package/dist/components/event-detail/event-detail.schema.json +0 -74
  152. package/dist/components/event-detail/index.d.ts +0 -5
  153. package/dist/components/event-detail/index.js +0 -35
  154. package/dist/components/event-header/event-header.css +0 -6
  155. package/dist/components/event-header/event-header.schema.dereffed.json +0 -38
  156. package/dist/components/event-header/event-header.schema.json +0 -34
  157. package/dist/components/event-header/index.d.ts +0 -35
  158. package/dist/components/event-header/index.js +0 -20
  159. package/dist/components/event-latest/event-latest.css +0 -5
  160. package/dist/components/event-latest/event-latest.schema.dereffed.json +0 -142
  161. package/dist/components/event-latest/event-latest.schema.json +0 -46
  162. package/dist/components/event-latest/index.d.ts +0 -30
  163. package/dist/components/event-latest/index.js +0 -19
  164. package/dist/components/event-latest-teaser/event-latest-teaser.css +0 -128
  165. package/dist/components/event-latest-teaser/event-latest-teaser.schema.dereffed.json +0 -97
  166. package/dist/components/event-latest-teaser/event-latest-teaser.schema.json +0 -73
  167. package/dist/components/event-latest-teaser/index.d.ts +0 -8
  168. package/dist/components/event-latest-teaser/index.js +0 -18
  169. package/dist/components/event-location/event-location.css +0 -66
  170. package/dist/components/event-location/event-location.schema.dereffed.json +0 -116
  171. package/dist/components/event-location/event-location.schema.json +0 -54
  172. package/dist/components/event-location/index.d.ts +0 -7
  173. package/dist/components/event-location/index.js +0 -16
  174. package/dist/static/fonts/systemics/Montserrat-Bold.woff2 +0 -0
  175. package/dist/static/fonts/systemics/Montserrat-Light.woff2 +0 -0
  176. package/dist/static/fonts/systemics/Montserrat-Medium.woff2 +0 -0
  177. package/dist/static/fonts/systemics/Montserrat-Regular.woff2 +0 -0
  178. package/dist/static/fonts/systemics/Montserrat-SemiBold.woff2 +0 -0
  179. package/dist/static/img/about/angled-image.png +0 -0
  180. package/dist/static/img/about/cta.png +0 -0
  181. package/dist/static/img/about/cutout.png +0 -0
  182. package/dist/static/img/about/disclaimer.png +0 -0
  183. package/dist/static/img/about/purpose.png +0 -0
  184. package/dist/static/img/about/spoiler.png +0 -0
  185. package/dist/static/img/kickstartDS/CMS-Starter producthunt-slide-01.svg +0 -72
  186. package/dist/static/img/kickstartDS/CMS-Starter producthunt-slide-02.svg +0 -112
  187. package/dist/static/img/kickstartDS/CMS-Starter producthunt-slide-03.svg +0 -197
  188. package/dist/static/img/kickstartDS/CMS-Starter producthunt-slide-04.svg +0 -76
  189. package/dist/static/img/kickstartDS/CMS-Starter producthunt-slide-05.svg +0 -82
  190. package/dist/static/img/kickstartDS/CMS-Starter producthunt-slide-06.svg +0 -219
  191. package/dist/static/img/kickstartDS/CMS-Starter producthunt-slide-07.svg +0 -85
  192. package/dist/static/logo-dark.svg +0 -13
  193. package/dist/static/logo-dsa-inverted.svg +0 -26
  194. package/dist/static/logo-dsa.svg +0 -26
@@ -3,14 +3,14 @@
3
3
  "id": "blog-blog-aside--default",
4
4
  "group": "Blog/ Blog Aside",
5
5
  "name": "Default",
6
- "code": "<BlogAside\n author={{\n byline: 'CEO at Company',\n image: {\n alt: 'Picture of Isabella Doe',\n aspectRatio: 'square',\n fullWidth: false,\n src: 'img/people/author-emily.png'\n },\n links: [\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n icon: 'twitter',\n label: 'jane_smith',\n newTab: false,\n url: 'tel:+4922868896620'\n },\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n icon: 'email',\n label: 'jane.smith@example.com',\n newTab: false,\n url: 'mailto:mail@example.com'\n }\n ],\n name: 'Jane Smith'\n }}\n date=\"12/30/2022\"\n readingTime=\"5 min read\"\n socialSharing={[\n {\n href: 'https://twitter.com/share?text=The%20Future%20of%20AI&url=https://example.com/blog/the-future-of-ai',\n icon: 'twitter',\n title: 'Share on Twitter',\n url: 'https://twitter.com/share?text=Check%20this%20out!&url=https://example.com'\n },\n {\n href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog/the-future-of-ai&title=The%20Future%20of%20AI&summary=The%20Future%20of%20AI&source=LinkedIn',\n icon: 'linkedin',\n title: 'Share on LinkedIn',\n url: 'https://twitter.com/share?text=Check%20this%20out!&url=https://example.com'\n }\n ]}\n/>",
6
+ "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/>",
7
7
  "args": {
8
8
  "author": {
9
9
  "name": "Jane Smith",
10
10
  "byline": "CEO at Company",
11
11
  "image": {
12
12
  "src": "img/people/author-emily.png",
13
- "alt": "Picture of Isabella Doe",
13
+ "alt": "Picture of Jane Smith",
14
14
  "fullWidth": false,
15
15
  "aspectRatio": "square"
16
16
  },
@@ -18,31 +18,27 @@
18
18
  {
19
19
  "icon": "twitter",
20
20
  "label": "jane_smith",
21
- "url": "tel:+4922868896620",
22
- "newTab": false,
23
- "ariaLabel": "Link to Isabella Doe's social media profile"
21
+ "href": "tel:+4922868896620",
22
+ "newTab": false
24
23
  },
25
24
  {
26
25
  "icon": "email",
27
26
  "label": "jane.smith@example.com",
28
- "url": "mailto:mail@example.com",
29
- "newTab": false,
30
- "ariaLabel": "Link to Isabella Doe's social media profile"
27
+ "href": "mailto:mail@example.com",
28
+ "newTab": false
31
29
  }
32
30
  ]
33
31
  },
34
32
  "socialSharing": [
35
33
  {
36
34
  "icon": "twitter",
37
- "url": "https://twitter.com/share?text=Check%20this%20out!&url=https://example.com",
38
- "title": "Share on Twitter",
39
- "href": "https://twitter.com/share?text=The%20Future%20of%20AI&url=https://example.com/blog/the-future-of-ai"
35
+ "href": "https://twitter.com/share?text=The%20Future%20of%20AI&url=https://example.com/blog/the-future-of-ai",
36
+ "title": "Share on Twitter"
40
37
  },
41
38
  {
42
39
  "icon": "linkedin",
43
- "url": "https://twitter.com/share?text=Check%20this%20out!&url=https://example.com",
44
- "title": "Share on LinkedIn",
45
- "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"
40
+ "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",
41
+ "title": "Share on LinkedIn"
46
42
  }
47
43
  ],
48
44
  "readingTime": "5 min read",
@@ -54,13 +50,13 @@
54
50
  "id": "blog-blog-author--default",
55
51
  "group": "Blog/ Blog Author",
56
52
  "name": "Default",
57
- "code": "<BlogAuthor\n byline=\"CEO at Company\"\n image={{\n alt: 'Picture of Isabella Doe',\n aspectRatio: 'square',\n fullWidth: false,\n src: 'img/people/author-emily.png'\n }}\n links={[\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n icon: 'twitter',\n label: 'jane_smith',\n newTab: false,\n url: 'tel:+4922868896620'\n },\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n icon: 'email',\n label: 'jane.smith@example.com',\n newTab: false,\n url: 'mailto:mail@example.com'\n }\n ]}\n name=\"Jane Smith\"\n/>",
53
+ "code": "<BlogAuthor\n byline=\"CEO at Company\"\n image={{\n alt: 'Picture of Jane Smith',\n aspectRatio: 'square',\n fullWidth: false,\n src: 'img/people/author-emily.png'\n }}\n links={[\n {\n href: 'tel:+4922868896620',\n icon: 'twitter',\n label: 'jane_smith',\n newTab: false\n },\n {\n href: 'mailto:mail@example.com',\n icon: 'email',\n label: 'jane.smith@example.com',\n newTab: false\n }\n ]}\n name=\"Jane Smith\"\n/>",
58
54
  "args": {
59
55
  "name": "Jane Smith",
60
56
  "byline": "CEO at Company",
61
57
  "image": {
62
58
  "src": "img/people/author-emily.png",
63
- "alt": "Picture of Isabella Doe",
59
+ "alt": "Picture of Jane Smith",
64
60
  "fullWidth": false,
65
61
  "aspectRatio": "square"
66
62
  },
@@ -68,16 +64,14 @@
68
64
  {
69
65
  "icon": "twitter",
70
66
  "label": "jane_smith",
71
- "url": "tel:+4922868896620",
72
- "newTab": false,
73
- "ariaLabel": "Link to Isabella Doe's social media profile"
67
+ "href": "tel:+4922868896620",
68
+ "newTab": false
74
69
  },
75
70
  {
76
71
  "icon": "email",
77
72
  "label": "jane.smith@example.com",
78
- "url": "mailto:mail@example.com",
79
- "newTab": false,
80
- "ariaLabel": "Link to Isabella Doe's social media profile"
73
+ "href": "mailto:mail@example.com",
74
+ "newTab": false
81
75
  }
82
76
  ]
83
77
  },
@@ -192,13 +186,13 @@
192
186
  "id": "page-archetypes-blog-overview--blog-overview",
193
187
  "group": "Page Archetypes/Blog Overview",
194
188
  "name": "BlogOverview",
195
- "code": "<BlogOverview\n cta={{\n align: 'center',\n buttons: [\n {\n icon: 'person',\n label: 'Contact us',\n url: '#'\n },\n {\n icon: 'date',\n label: 'Book a meeting',\n url: '#'\n }\n ],\n colorNeutral: false,\n contentAlign: 'center',\n fullWidth: true,\n headline: 'Get in touch',\n highlightText: false,\n image: {\n align: 'center',\n padding: false,\n src: 'img/contact-person.png'\n },\n inverted: false,\n order: {\n desktopImageLast: false,\n mobileImageLast: false\n },\n padding: false,\n sub: 'Chat with us about getting your product or platform to market faster',\n text: 'Our modular design approach allows for flexibility and scalability in your application\\'s architecture.',\n textAlign: 'left',\n width: 'wide'\n }}\n latest={{\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article1'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Design Systems'\n },\n {\n entry: 'Headless Websites'\n },\n {\n entry: 'Training'\n }\n ],\n teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences.'\n }}\n latestTitle=\"Latest Post\"\n list={[\n {\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Mastering the Art of Design Systems with Systemics',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article1'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Design Systems'\n }\n ],\n teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n },\n {\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-emily.png',\n name: 'Jane Doe',\n title: 'CTO'\n },\n date: '12/30/2022',\n headline: 'Unleashing Innovation with Headless Websites',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article2'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Headless Websites'\n }\n ],\n teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n },\n {\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Investing in Digital Excellence: Systemics\\' Design System Trainings',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article3'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Training'\n }\n ],\n teaserText: 'Investing in your digital team\\'s growth is crucial for sustainable success. In this article, we highlight Systemics\\' Design System Trainings, designed to equip your team with the skills they need to harness your design system effectively.'\n }\n ]}\n listTitle=\"Recent Posts\"\n more={[\n {\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Mastering the Art of Design Systems with Systemics',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article1'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Design Systems'\n }\n ],\n teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n },\n {\n alt: 'Image of a business team working',\n author: {\n image: 'img/people/author-emily.png',\n name: 'Jane Doe',\n title: 'CTO'\n },\n date: '12/30/2022',\n headline: 'Unleashing Innovation with Headless Websites',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n text: 'Read article',\n url: 'https://example.com/article2'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Headless Websites'\n }\n ],\n teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n }\n ]}\n moreTitle=\"Featured Posts\"\n section={[\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: '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 transition: '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 transition: '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 transition: 'default',\n width: 'default'\n }\n ]}\n/>",
189
+ "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 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/>",
196
190
  "args": {
197
191
  "section": [
198
192
  {
199
193
  "width": "default",
194
+ "style": "default",
200
195
  "backgroundColor": "default",
201
- "transition": "default",
202
196
  "spotlight": false,
203
197
  "spaceBefore": "default",
204
198
  "spaceAfter": "default",
@@ -239,8 +233,8 @@
239
233
  },
240
234
  {
241
235
  "width": "default",
236
+ "style": "default",
242
237
  "backgroundColor": "default",
243
- "transition": "default",
244
238
  "spotlight": false,
245
239
  "spaceBefore": "default",
246
240
  "spaceAfter": "default",
@@ -281,8 +275,8 @@
281
275
  },
282
276
  {
283
277
  "width": "default",
278
+ "style": "default",
284
279
  "backgroundColor": "default",
285
- "transition": "default",
286
280
  "spotlight": false,
287
281
  "spaceBefore": "default",
288
282
  "spaceAfter": "default",
@@ -478,21 +472,21 @@
478
472
  "sub": "Chat with us about getting your product or platform to market faster",
479
473
  "highlightText": false,
480
474
  "colorNeutral": false,
475
+ "fullWidth": true,
481
476
  "buttons": [
482
477
  {
483
478
  "label": "Contact us",
484
479
  "icon": "person",
485
- "url": "#"
480
+ "target": "#"
486
481
  },
487
482
  {
488
483
  "label": "Book a meeting",
489
484
  "icon": "date",
490
- "url": "#"
485
+ "target": "#"
491
486
  }
492
487
  ],
493
488
  "image": {
494
489
  "padding": false,
495
- "align": "center",
496
490
  "src": "img/contact-person.png"
497
491
  },
498
492
  "order": {
@@ -500,10 +494,6 @@
500
494
  "desktopImageLast": false
501
495
  },
502
496
  "textAlign": "left",
503
- "align": "center",
504
- "padding": false,
505
- "inverted": false,
506
- "fullWidth": true,
507
497
  "contentAlign": "center",
508
498
  "text": "Our modular design approach allows for flexibility and scalability in your application's architecture.",
509
499
  "width": "wide"
@@ -515,7 +505,7 @@
515
505
  "id": "page-archetypes-blog-post--blog-post",
516
506
  "group": "Page Archetypes/Blog Post",
517
507
  "name": "BlogPost",
518
- "code": "<BlogPost\n aside={{\n author: {\n byline: 'Senior Developer',\n email: 'Jane.doe@example.com',\n image: {\n alt: 'Picture of Isabella Doe',\n aspectRatio: 'square',\n fullWidth: false,\n src: 'img/people/author-emily.png'\n },\n links: [\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n icon: 'phone',\n label: '0228 / 688 966 20',\n newTab: false,\n url: 'tel:+4922868896620'\n },\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n icon: 'email',\n label: 'mail@example.com',\n newTab: false,\n url: 'mailto:mail@example.com'\n }\n ],\n name: 'Jane Doe',\n twitter: 'Janedoe'\n },\n date: '12/30/2022',\n readingTime: '5 min read',\n socialSharing: [\n {\n icon: 'twitter',\n title: 'Share on Twitter',\n url: 'https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog'\n },\n {\n icon: 'linkedin',\n title: 'Share on LinkedIn',\n url: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline'\n }\n ]\n }}\n contact={{\n copy: 'Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences.',\n image: {\n alt: 'Picture of Jane Smith',\n aspectRatio: 'vertical',\n fullWidth: false,\n src: 'img/people/contact-john.png'\n },\n links: [\n {\n icon: 'xing',\n label: 'john.smith',\n newTab: false,\n url: 'mailto:mail@example.com'\n },\n {\n icon: 'twitter',\n label: '@john_smith',\n newTab: false,\n url: '#'\n }\n ],\n subtitle: 'Sales Representative',\n title: 'John Smith'\n }}\n content=\"\n## Introduction\nThe future of **Artificial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n \"\n cta={{\n align: 'center',\n buttons: [\n {\n icon: 'person',\n label: 'Contact Us',\n url: '#'\n },\n {\n icon: 'date',\n label: 'Learn More',\n url: '#'\n }\n ],\n colorNeutral: false,\n headline: 'Ready to Transform Your Development Process?',\n highlightText: false,\n image: {\n align: 'center',\n padding: true\n },\n inverted: false,\n order: {\n desktopImageLast: true,\n mobileImageLast: false\n },\n padding: false,\n sub: 'Start your journey today.',\n text: 'Get started with our design system today and experience a new level of efficiency and consistency in your projects.',\n textAlign: 'center'\n }}\n head={{\n alt: 'Image of a business team working',\n date: '12/30/2022',\n headline: 'The Future of AI: A Glimpse into the Unseen',\n image: 'img/close-up-young-business-team-working.png',\n tags: [\n {\n entry: 'Technology'\n },\n {\n entry: 'AI'\n }\n ]\n }}\n section={[\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: '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 transition: '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 transition: '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 transition: 'default',\n width: 'default'\n }\n ]}\n/>",
508
+ "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 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/>",
519
509
  "args": {
520
510
  "head": {
521
511
  "date": "12/30/2022",
@@ -537,7 +527,7 @@
537
527
  "byline": "Senior Developer",
538
528
  "image": {
539
529
  "src": "img/people/author-emily.png",
540
- "alt": "Picture of Isabella Doe",
530
+ "alt": "Picture of Jane Smith",
541
531
  "fullWidth": false,
542
532
  "aspectRatio": "square"
543
533
  },
@@ -545,16 +535,14 @@
545
535
  {
546
536
  "icon": "phone",
547
537
  "label": "0228 / 688 966 20",
548
- "url": "tel:+4922868896620",
549
- "newTab": false,
550
- "ariaLabel": "Link to Isabella Doe's social media profile"
538
+ "href": "tel:+4922868896620",
539
+ "newTab": false
551
540
  },
552
541
  {
553
542
  "icon": "email",
554
543
  "label": "mail@example.com",
555
- "url": "mailto:mail@example.com",
556
- "newTab": false,
557
- "ariaLabel": "Link to Isabella Doe's social media profile"
544
+ "href": "mailto:mail@example.com",
545
+ "newTab": false
558
546
  }
559
547
  ],
560
548
  "twitter": "Janedoe",
@@ -563,12 +551,12 @@
563
551
  "socialSharing": [
564
552
  {
565
553
  "icon": "twitter",
566
- "url": "https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog",
554
+ "href": "https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog",
567
555
  "title": "Share on Twitter"
568
556
  },
569
557
  {
570
558
  "icon": "linkedin",
571
- "url": "https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline",
559
+ "href": "https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline",
572
560
  "title": "Share on LinkedIn"
573
561
  }
574
562
  ],
@@ -578,8 +566,8 @@
578
566
  "section": [
579
567
  {
580
568
  "width": "default",
569
+ "style": "default",
581
570
  "backgroundColor": "default",
582
- "transition": "default",
583
571
  "spotlight": false,
584
572
  "spaceBefore": "default",
585
573
  "spaceAfter": "default",
@@ -620,8 +608,8 @@
620
608
  },
621
609
  {
622
610
  "width": "default",
611
+ "style": "default",
623
612
  "backgroundColor": "default",
624
- "transition": "default",
625
613
  "spotlight": false,
626
614
  "spaceBefore": "default",
627
615
  "spaceAfter": "default",
@@ -662,8 +650,8 @@
662
650
  },
663
651
  {
664
652
  "width": "default",
653
+ "style": "default",
665
654
  "backgroundColor": "default",
666
- "transition": "default",
667
655
  "spotlight": false,
668
656
  "spaceBefore": "default",
669
657
  "spaceAfter": "default",
@@ -708,30 +696,28 @@
708
696
  "sub": "Start your journey today.",
709
697
  "highlightText": false,
710
698
  "colorNeutral": false,
699
+ "fullWidth": false,
711
700
  "buttons": [
712
701
  {
713
702
  "label": "Contact Us",
714
- "url": "#",
703
+ "target": "#",
715
704
  "icon": "person"
716
705
  },
717
706
  {
718
707
  "label": "Learn More",
719
- "url": "#",
708
+ "target": "#",
720
709
  "icon": "date"
721
710
  }
722
711
  ],
723
712
  "image": {
724
- "padding": true,
725
- "align": "center"
713
+ "padding": true
726
714
  },
727
715
  "order": {
728
716
  "mobileImageLast": false,
729
717
  "desktopImageLast": true
730
718
  },
731
719
  "textAlign": "center",
732
- "align": "center",
733
- "padding": false,
734
- "inverted": false,
720
+ "contentAlign": "center",
735
721
  "text": "Get started with our design system today and experience a new level of efficiency and consistency in your projects."
736
722
  },
737
723
  "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 ",
@@ -748,13 +734,13 @@
748
734
  {
749
735
  "icon": "xing",
750
736
  "label": "john.smith",
751
- "url": "mailto:mail@example.com",
737
+ "href": "mailto:mail@example.com",
752
738
  "newTab": false
753
739
  },
754
740
  {
755
741
  "icon": "twitter",
756
742
  "label": "@john_smith",
757
- "url": "#",
743
+ "href": "#",
758
744
  "newTab": false
759
745
  }
760
746
  ],
@@ -763,146 +749,15 @@
763
749
  },
764
750
  "screenshot": "img/screenshots/page-archetypes-blog-post--blog-post.png"
765
751
  },
766
- {
767
- "id": "page-archetypes-event-detail--event-detail",
768
- "group": "Page Archetypes/Event Detail",
769
- "name": "EventDetail",
770
- "code": "<EventDetail\n button={{\n label: 'See all Events',\n url: '/#'\n }}\n categories={[\n {\n label: 'Conference'\n },\n {\n label: 'Design Systems'\n }\n ]}\n description=\"\nJoin us for a day of inspiring talks, hands-on workshops, and networking with design system experts from around the world.\n\n**Highlights:**\n- Keynotes from industry leaders\n- Practical sessions on design tokens, accessibility, and scaling systems\n- Evening networking event with food & drinks\n \"\n downloads={[\n {\n format: 'PDF',\n name: 'Product Brochure',\n previewImage: 'img/offset-image.png',\n size: '2.5 MB',\n url: 'img/offset-image.png'\n },\n {\n format: 'PDF',\n name: 'Company Brochure',\n previewImage: 'img/kickstartDS/CMS-Starter producthunt-slide-01.svg',\n size: '3.2 MB',\n url: 'img/kickstartDS/CMS-Starter producthunt-slide-01.svg'\n },\n {\n format: 'DOC',\n name: 'User Guide',\n size: '20 KB',\n url: 'assets/user-guide.doc'\n },\n {\n format: 'TXT',\n name: 'Technical Specifications',\n size: '12 KB',\n url: 'assets/technical-specifications.txt'\n }\n ]}\n images={[\n {\n alt: 'Alt text Image 1',\n caption: 'Caption Image 1',\n src: 'img/close-up-young-business-team-working.png'\n },\n {\n alt: 'Alt text Image 2',\n caption: 'Caption Image 2',\n src: 'img/low-angle-tall-building-with-many-windows_23-2148230392.png'\n },\n {\n alt: 'Alt text Image 3',\n caption: 'Caption Image 3',\n src: 'img/full-shot-different-people-working-together.png'\n },\n {\n alt: 'Alt text Image 4',\n caption: 'Caption Image 4',\n src: 'img/top-view-desk-with-keyboard-drawing-pad.png'\n }\n ]}\n intro=\"A full-day event for design system professionals and enthusiasts. Join us to learn, share, and connect with like-minded individuals.\"\n locations={[\n {\n address: 'Alexanderplatz 1<br />\\n 10178 Berlin',\n dates: [\n {\n ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n date: '2025-09-18',\n label: 'Register',\n newTab: true,\n time: '09:00 – 17:00',\n url: '#'\n },\n {\n ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n date: '2025-09-18',\n label: 'Register',\n newTab: true,\n time: '09:00 – 17:00',\n url: '#'\n }\n ],\n links: [\n {\n label: 'Open in Google Maps',\n newTab: true,\n url: 'https://maps.google.com/?q=Berlin+Congress+Center'\n }\n ],\n locationName: 'Berlin Congress Center'\n },\n {\n address: 'Messeplatz 1<br />\\n 50679 Köln',\n dates: [\n {\n ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n date: '2025-09-18',\n label: 'Register',\n newTab: true,\n time: '09:00 – 17:00',\n url: '#'\n }\n ],\n links: [\n {\n label: 'Open in Google Maps',\n newTab: true,\n url: 'https://maps.google.com/?q=Berlin+Congress+Center'\n },\n {\n label: 'Location Website',\n newTab: true,\n url: 'https://www.berlincongresscenter.com'\n }\n ],\n locationName: 'Köln Messe'\n }\n ]}\n title=\"Systemics Design Conference 2025\"\n/>",
771
- "args": {
772
- "categories": [
773
- {
774
- "label": "Conference"
775
- },
776
- {
777
- "label": "Design Systems"
778
- }
779
- ],
780
- "locations": [
781
- {
782
- "dates": [
783
- {
784
- "date": "2025-09-18",
785
- "time": "09:00 – 17:00",
786
- "label": "Register",
787
- "url": "#",
788
- "newTab": true,
789
- "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
790
- },
791
- {
792
- "date": "2025-09-18",
793
- "time": "09:00 – 17:00",
794
- "label": "Register",
795
- "url": "#",
796
- "newTab": true,
797
- "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
798
- }
799
- ],
800
- "locationName": "Berlin Congress Center",
801
- "address": "Alexanderplatz 1<br />\n 10178 Berlin",
802
- "links": [
803
- {
804
- "newTab": true,
805
- "url": "https://maps.google.com/?q=Berlin+Congress+Center",
806
- "label": "Open in Google Maps"
807
- }
808
- ]
809
- },
810
- {
811
- "dates": [
812
- {
813
- "date": "2025-09-18",
814
- "time": "09:00 – 17:00",
815
- "label": "Register",
816
- "url": "#",
817
- "newTab": true,
818
- "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
819
- }
820
- ],
821
- "locationName": "Köln Messe",
822
- "address": "Messeplatz 1<br />\n 50679 Köln",
823
- "links": [
824
- {
825
- "newTab": true,
826
- "url": "https://maps.google.com/?q=Berlin+Congress+Center",
827
- "label": "Open in Google Maps"
828
- },
829
- {
830
- "newTab": true,
831
- "url": "https://www.berlincongresscenter.com",
832
- "label": "Location Website"
833
- }
834
- ]
835
- }
836
- ],
837
- "images": [
838
- {
839
- "src": "img/close-up-young-business-team-working.png",
840
- "alt": "Alt text Image 1",
841
- "caption": "Caption Image 1"
842
- },
843
- {
844
- "src": "img/low-angle-tall-building-with-many-windows_23-2148230392.png",
845
- "alt": "Alt text Image 2",
846
- "caption": "Caption Image 2"
847
- },
848
- {
849
- "src": "img/full-shot-different-people-working-together.png",
850
- "alt": "Alt text Image 3",
851
- "caption": "Caption Image 3"
852
- },
853
- {
854
- "src": "img/top-view-desk-with-keyboard-drawing-pad.png",
855
- "alt": "Alt text Image 4",
856
- "caption": "Caption Image 4"
857
- }
858
- ],
859
- "button": {
860
- "label": "See all Events",
861
- "url": "/#"
862
- },
863
- "title": "Systemics Design Conference 2025",
864
- "intro": "A full-day event for design system professionals and enthusiasts. Join us to learn, share, and connect with like-minded individuals.",
865
- "description": "\nJoin us for a day of inspiring talks, hands-on workshops, and networking with design system experts from around the world.\n\n**Highlights:**\n- Keynotes from industry leaders\n- Practical sessions on design tokens, accessibility, and scaling systems\n- Evening networking event with food & drinks\n ",
866
- "downloads": [
867
- {
868
- "name": "Product Brochure",
869
- "format": "PDF",
870
- "size": "2.5 MB",
871
- "previewImage": "img/offset-image.png",
872
- "url": "img/offset-image.png"
873
- },
874
- {
875
- "name": "Company Brochure",
876
- "previewImage": "img/kickstartDS/CMS-Starter producthunt-slide-01.svg",
877
- "format": "PDF",
878
- "size": "3.2 MB",
879
- "url": "img/kickstartDS/CMS-Starter producthunt-slide-01.svg"
880
- },
881
- {
882
- "name": "User Guide",
883
- "format": "DOC",
884
- "size": "20 KB",
885
- "url": "assets/user-guide.doc"
886
- },
887
- {
888
- "name": "Technical Specifications",
889
- "format": "TXT",
890
- "size": "12 KB",
891
- "url": "assets/technical-specifications.txt"
892
- }
893
- ]
894
- },
895
- "screenshot": "img/screenshots/page-archetypes-event-detail--event-detail.png"
896
- },
897
752
  {
898
753
  "id": "components-contact--wide-image",
899
754
  "group": "Components/Contact",
900
755
  "name": "WideImage",
901
- "code": "<Contact\n image={{\n alt: 'Picture of Isabella Doe',\n aspectRatio: 'wide',\n fullWidth: false,\n src: 'img/people/contact-isabella.png'\n }}\n links={[\n {\n ariaLabel: 'Isabella Doe on Twitter',\n icon: 'twitter',\n label: '@Isabella_Doe',\n newTab: false,\n url: '#'\n },\n {\n ariaLabel: 'Isabella Doe on LinkedIn',\n icon: 'linkedin',\n label: 'Isabella.Doe',\n newTab: false,\n url: 'mailto:mail@example.com'\n }\n ]}\n subtitle=\"Creative Director\"\n title=\"Isabella Doe\"\n/>",
756
+ "code": "<Contact\n image={{\n alt: 'Picture of Jane Smith',\n aspectRatio: 'wide',\n fullWidth: false,\n src: 'img/people/contact-isabella.png'\n }}\n links={[\n {\n href: '#',\n icon: 'twitter',\n label: '@Isabella_Doe',\n newTab: false\n },\n {\n href: 'mailto:mail@example.com',\n icon: 'linkedin',\n label: 'Isabella.Doe',\n newTab: false\n }\n ]}\n subtitle=\"Creative Director\"\n title=\"Isabella Doe\"\n/>",
902
757
  "args": {
903
758
  "image": {
904
759
  "src": "img/people/contact-isabella.png",
905
- "alt": "Picture of Isabella Doe",
760
+ "alt": "Picture of Jane Smith",
906
761
  "fullWidth": false,
907
762
  "aspectRatio": "wide"
908
763
  },
@@ -912,16 +767,14 @@
912
767
  {
913
768
  "icon": "twitter",
914
769
  "label": "@Isabella_Doe",
915
- "url": "#",
916
- "newTab": false,
917
- "ariaLabel": "Isabella Doe on Twitter"
770
+ "href": "#",
771
+ "newTab": false
918
772
  },
919
773
  {
920
774
  "icon": "linkedin",
921
775
  "label": "Isabella.Doe",
922
- "url": "mailto:mail@example.com",
923
- "newTab": false,
924
- "ariaLabel": "Isabella Doe on LinkedIn"
776
+ "href": "mailto:mail@example.com",
777
+ "newTab": false
925
778
  }
926
779
  ]
927
780
  },
@@ -931,11 +784,11 @@
931
784
  "id": "components-contact--circular-avatar",
932
785
  "group": "Components/Contact",
933
786
  "name": "CircularAvatar",
934
- "code": "<Contact\n copy=\"Leads with a vision for innovative, user-centric web designs\"\n image={{\n alt: 'Picture of Isabella Doe',\n aspectRatio: 'square',\n fullWidth: false,\n src: 'img/people/author-emily.png'\n }}\n links={[\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n icon: 'twitter',\n label: '@jane_smith',\n newTab: false,\n url: '#'\n },\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n icon: 'linkedin',\n label: 'jane.smith',\n newTab: false,\n url: 'mailto:mail@example.com'\n }\n ]}\n subtitle=\"CEO at DS Agency\"\n title=\"Jane Smith\"\n/>",
787
+ "code": "<Contact\n copy=\"Leads with a vision for innovative, user-centric web designs\"\n image={{\n alt: 'Picture of Jane Smith',\n aspectRatio: 'square',\n fullWidth: false,\n src: 'img/people/author-emily.png'\n }}\n links={[\n {\n href: '#',\n icon: 'twitter',\n label: '@jane_smith',\n newTab: false\n },\n {\n href: 'mailto:mail@example.com',\n icon: 'linkedin',\n label: 'jane.smith',\n newTab: false\n }\n ]}\n subtitle=\"CEO at DS Agency\"\n title=\"Jane Smith\"\n/>",
935
788
  "args": {
936
789
  "image": {
937
790
  "src": "img/people/author-emily.png",
938
- "alt": "Picture of Isabella Doe",
791
+ "alt": "Picture of Jane Smith",
939
792
  "fullWidth": false,
940
793
  "aspectRatio": "square"
941
794
  },
@@ -945,16 +798,14 @@
945
798
  {
946
799
  "icon": "twitter",
947
800
  "label": "@jane_smith",
948
- "url": "#",
949
- "newTab": false,
950
- "ariaLabel": "Link to Isabella Doe's social media profile"
801
+ "href": "#",
802
+ "newTab": false
951
803
  },
952
804
  {
953
805
  "icon": "linkedin",
954
806
  "label": "jane.smith",
955
- "url": "mailto:mail@example.com",
956
- "newTab": false,
957
- "ariaLabel": "Link to Isabella Doe's social media profile"
807
+ "href": "mailto:mail@example.com",
808
+ "newTab": false
958
809
  }
959
810
  ],
960
811
  "copy": "Leads with a vision for innovative, user-centric web designs"
@@ -965,11 +816,11 @@
965
816
  "id": "components-contact--vertical-image-with-paragraph",
966
817
  "group": "Components/Contact",
967
818
  "name": "VerticalImageWithParagraph",
968
- "code": "<Contact\n copy=\"Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences.\"\n image={{\n alt: 'Picture of Isabella Doe',\n aspectRatio: 'vertical',\n fullWidth: false,\n src: 'img/people/contact-john.png'\n }}\n links={[\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n icon: 'xing',\n label: 'john.smith',\n newTab: false,\n url: 'mailto:mail@example.com'\n },\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n icon: 'twitter',\n label: '@john_smith',\n newTab: false,\n url: '#'\n }\n ]}\n subtitle=\"Sales Representative\"\n title=\"John Smith\"\n/>",
819
+ "code": "<Contact\n copy=\"Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences.\"\n image={{\n alt: 'Picture of Jane Smith',\n aspectRatio: 'vertical',\n fullWidth: false,\n src: 'img/people/contact-john.png'\n }}\n links={[\n {\n href: 'mailto:mail@example.com',\n icon: 'xing',\n label: 'john.smith',\n newTab: false\n },\n {\n href: '#',\n icon: 'twitter',\n label: '@john_smith',\n newTab: false\n }\n ]}\n subtitle=\"Sales Representative\"\n title=\"John Smith\"\n/>",
969
820
  "args": {
970
821
  "image": {
971
822
  "src": "img/people/contact-john.png",
972
- "alt": "Picture of Isabella Doe",
823
+ "alt": "Picture of Jane Smith",
973
824
  "fullWidth": false,
974
825
  "aspectRatio": "vertical"
975
826
  },
@@ -979,16 +830,14 @@
979
830
  {
980
831
  "icon": "xing",
981
832
  "label": "john.smith",
982
- "url": "mailto:mail@example.com",
983
- "newTab": false,
984
- "ariaLabel": "Link to Isabella Doe's social media profile"
833
+ "href": "mailto:mail@example.com",
834
+ "newTab": false
985
835
  },
986
836
  {
987
837
  "icon": "twitter",
988
838
  "label": "@john_smith",
989
- "url": "#",
990
- "newTab": false,
991
- "ariaLabel": "Link to Isabella Doe's social media profile"
839
+ "href": "#",
840
+ "newTab": false
992
841
  }
993
842
  ],
994
843
  "copy": "Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences."
@@ -999,11 +848,11 @@
999
848
  "id": "components-contact--full-image-width",
1000
849
  "group": "Components/Contact",
1001
850
  "name": "FullImageWidth",
1002
- "code": "<Contact\n copy=\"Blends artistic flair with technical expertise, creating visually stunning and intuitive websites that captivate users and drive engagement.\"\n image={{\n alt: 'Picture of Isabella Doe',\n aspectRatio: 'wide',\n fullWidth: true,\n src: 'img/people/contact-jim.png'\n }}\n links={[\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n icon: 'email',\n label: 'jim.johnsson@mail.com',\n newTab: false,\n url: 'mailto:mail@example.com'\n },\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n icon: 'facebook',\n label: '@jim_johnsson',\n newTab: false,\n url: '#'\n }\n ]}\n subtitle=\"Lead Designer\"\n title=\"Jim Johnsson\"\n/>",
851
+ "code": "<Contact\n copy=\"Blends artistic flair with technical expertise, creating visually stunning and intuitive websites that captivate users and drive engagement.\"\n image={{\n alt: 'Picture of Jane Smith',\n aspectRatio: 'wide',\n fullWidth: true,\n src: 'img/people/contact-jim.png'\n }}\n links={[\n {\n href: 'mailto:mail@example.com',\n icon: 'email',\n label: 'jim.johnsson@mail.com',\n newTab: false\n },\n {\n href: '#',\n icon: 'facebook',\n label: '@jim_johnsson',\n newTab: false\n }\n ]}\n subtitle=\"Lead Designer\"\n title=\"Jim Johnsson\"\n/>",
1003
852
  "args": {
1004
853
  "image": {
1005
854
  "src": "img/people/contact-jim.png",
1006
- "alt": "Picture of Isabella Doe",
855
+ "alt": "Picture of Jane Smith",
1007
856
  "fullWidth": true,
1008
857
  "aspectRatio": "wide"
1009
858
  },
@@ -1013,16 +862,14 @@
1013
862
  {
1014
863
  "icon": "email",
1015
864
  "label": "jim.johnsson@mail.com",
1016
- "url": "mailto:mail@example.com",
1017
- "newTab": false,
1018
- "ariaLabel": "Link to Isabella Doe's social media profile"
865
+ "href": "mailto:mail@example.com",
866
+ "newTab": false
1019
867
  },
1020
868
  {
1021
869
  "icon": "facebook",
1022
870
  "label": "@jim_johnsson",
1023
- "url": "#",
1024
- "newTab": false,
1025
- "ariaLabel": "Link to Isabella Doe's social media profile"
871
+ "href": "#",
872
+ "newTab": false
1026
873
  }
1027
874
  ],
1028
875
  "copy": "Blends artistic flair with technical expertise, creating visually stunning and intuitive websites that captivate users and drive engagement."
@@ -1033,36 +880,34 @@
1033
880
  "id": "components-cta--banner",
1034
881
  "group": "Components/Cta",
1035
882
  "name": "Banner",
1036
- "code": "<Cta\n align=\"center\"\n buttons={[\n {\n icon: 'person',\n label: 'Contact Us',\n url: '#'\n },\n {\n icon: 'date',\n label: 'Learn More',\n url: '#'\n }\n ]}\n headline=\"Ready to Transform Your Development Process?\"\n image={{\n align: 'center',\n padding: true\n }}\n order={{\n desktopImageLast: true,\n mobileImageLast: false\n }}\n sub=\"Start your journey today.\"\n text=\"Get started with our design system today and experience a new level of efficiency and consistency in your projects.\"\n textAlign=\"center\"\n/>",
883
+ "code": "<Cta\n buttons={[\n {\n icon: 'person',\n label: 'Contact Us',\n target: '#'\n },\n {\n icon: 'date',\n label: 'Learn More',\n target: '#'\n }\n ]}\n contentAlign=\"center\"\n headline=\"Ready to Transform Your Development Process?\"\n image={{\n padding: true\n }}\n order={{\n desktopImageLast: true,\n mobileImageLast: false\n }}\n sub=\"Start your journey today.\"\n text=\"Get started with our design system today and experience a new level of efficiency and consistency in your projects.\"\n textAlign=\"center\"\n/>",
1037
884
  "args": {
1038
885
  "headline": "Ready to Transform Your Development Process?",
1039
886
  "sub": "Start your journey today.",
1040
887
  "highlightText": false,
1041
888
  "colorNeutral": false,
889
+ "fullWidth": false,
1042
890
  "buttons": [
1043
891
  {
1044
892
  "label": "Contact Us",
1045
- "url": "#",
893
+ "target": "#",
1046
894
  "icon": "person"
1047
895
  },
1048
896
  {
1049
897
  "label": "Learn More",
1050
- "url": "#",
898
+ "target": "#",
1051
899
  "icon": "date"
1052
900
  }
1053
901
  ],
1054
902
  "image": {
1055
- "padding": true,
1056
- "align": "center"
903
+ "padding": true
1057
904
  },
1058
905
  "order": {
1059
906
  "mobileImageLast": false,
1060
907
  "desktopImageLast": true
1061
908
  },
1062
909
  "textAlign": "center",
1063
- "align": "center",
1064
- "padding": false,
1065
- "inverted": false,
910
+ "contentAlign": "center",
1066
911
  "text": "Get started with our design system today and experience a new level of efficiency and consistency in your projects."
1067
912
  },
1068
913
  "screenshot": "img/screenshots/components-cta--banner.png"
@@ -1071,31 +916,29 @@
1071
916
  "id": "components-cta--highlighted",
1072
917
  "group": "Components/Cta",
1073
918
  "name": "Highlighted",
1074
- "code": "<Cta\n align=\"center\"\n buttons={[\n {\n icon: 'person',\n label: 'Get Started',\n url: '#'\n }\n ]}\n headline=\"Why Choose Our Design System?\"\n highlightText\n image={{\n align: 'center',\n padding: true\n }}\n order={{\n desktopImageLast: true,\n mobileImageLast: false\n }}\n sub=\"Built for consistency and speed.\"\n text=\"Our design system is built with scalability and efficiency in mind. It allows for consistent UI across different platforms, making your development process smoother and faster.\"\n textAlign=\"center\"\n/>",
919
+ "code": "<Cta\n buttons={[\n {\n icon: 'person',\n label: 'Get Started',\n target: '#'\n }\n ]}\n contentAlign=\"center\"\n headline=\"Why Choose Our Design System?\"\n highlightText\n image={{\n padding: true\n }}\n order={{\n desktopImageLast: true,\n mobileImageLast: false\n }}\n sub=\"Built for consistency and speed.\"\n text=\"Our design system is built with scalability and efficiency in mind. It allows for consistent UI across different platforms, making your development process smoother and faster.\"\n textAlign=\"center\"\n/>",
1075
920
  "args": {
1076
921
  "headline": "Why Choose Our Design System?",
1077
922
  "sub": "Built for consistency and speed.",
1078
923
  "highlightText": true,
1079
924
  "colorNeutral": false,
925
+ "fullWidth": false,
1080
926
  "buttons": [
1081
927
  {
1082
928
  "label": "Get Started",
1083
- "url": "#",
929
+ "target": "#",
1084
930
  "icon": "person"
1085
931
  }
1086
932
  ],
1087
933
  "image": {
1088
- "padding": true,
1089
- "align": "center"
934
+ "padding": true
1090
935
  },
1091
936
  "order": {
1092
937
  "mobileImageLast": false,
1093
938
  "desktopImageLast": true
1094
939
  },
1095
940
  "textAlign": "center",
1096
- "align": "center",
1097
- "padding": false,
1098
- "inverted": false,
941
+ "contentAlign": "center",
1099
942
  "text": "Our design system is built with scalability and efficiency in mind. It allows for consistent UI across different platforms, making your development process smoother and faster."
1100
943
  },
1101
944
  "screenshot": "img/screenshots/components-cta--highlighted.png"
@@ -1104,31 +947,29 @@
1104
947
  "id": "components-cta--left-aligned",
1105
948
  "group": "Components/Cta",
1106
949
  "name": "LeftAligned",
1107
- "code": "<Cta\n align=\"center\"\n buttons={[\n {\n icon: 'person',\n label: 'Learn More',\n url: '#'\n }\n ]}\n headline=\"Experience Our Design System\"\n image={{\n align: 'center',\n padding: true\n }}\n order={{\n desktopImageLast: true,\n mobileImageLast: false\n }}\n sub=\"Efficient, scalable, seamless.\"\n text=\"Our design system offers a seamless and efficient way to build scalable applications. Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.\"\n textAlign=\"left\"\n/>",
950
+ "code": "<Cta\n buttons={[\n {\n icon: 'person',\n label: 'Learn More',\n target: '#'\n }\n ]}\n contentAlign=\"center\"\n headline=\"Experience Our Design System\"\n image={{\n padding: true\n }}\n order={{\n desktopImageLast: true,\n mobileImageLast: false\n }}\n sub=\"Efficient, scalable, seamless.\"\n text=\"Our design system offers a seamless and efficient way to build scalable applications. Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.\"\n textAlign=\"left\"\n/>",
1108
951
  "args": {
1109
952
  "headline": "Experience Our Design System",
1110
953
  "sub": "Efficient, scalable, seamless.",
1111
954
  "highlightText": false,
1112
955
  "colorNeutral": false,
956
+ "fullWidth": false,
1113
957
  "buttons": [
1114
958
  {
1115
959
  "label": "Learn More",
1116
- "url": "#",
960
+ "target": "#",
1117
961
  "icon": "person"
1118
962
  }
1119
963
  ],
1120
964
  "image": {
1121
- "padding": true,
1122
- "align": "center"
965
+ "padding": true
1123
966
  },
1124
967
  "order": {
1125
968
  "mobileImageLast": false,
1126
969
  "desktopImageLast": true
1127
970
  },
1128
971
  "textAlign": "left",
1129
- "align": "center",
1130
- "padding": false,
1131
- "inverted": false,
972
+ "contentAlign": "center",
1132
973
  "text": "Our design system offers a seamless and efficient way to build scalable applications. Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture."
1133
974
  },
1134
975
  "screenshot": "img/screenshots/components-cta--left-aligned.png"
@@ -1137,26 +978,28 @@
1137
978
  "id": "components-cta--product-advertisement",
1138
979
  "group": "Components/Cta",
1139
980
  "name": "ProductAdvertisement",
1140
- "code": "<Cta\n align=\"center\"\n backgroundImage=\"img/bg_dot-carpet-blue.svg\"\n buttons={[\n {\n icon: 'chevron-right',\n label: 'Shop Now',\n url: '/shop'\n },\n {\n label: 'Learn More',\n url: '/product-info'\n }\n ]}\n headline=\"Experience Immersive Sound\"\n highlightText\n image={{\n align: 'center',\n alt: 'Over-Ear Headphones',\n padding: false,\n src: 'img/showcases/comp_audio04.png'\n }}\n order={{\n desktopImageLast: false,\n mobileImageLast: false\n }}\n padding\n sub=\"With Our Premium Over-Ear Headphones\"\n text=\"Our over-ear headphones provide an immersive audio experience. With noise-cancellation technology and high-quality sound.\"\n textAlign=\"left\"\n/>",
981
+ "code": "<Cta\n backgroundImage=\"img/bg_dot-carpet-blue.svg\"\n buttons={[\n {\n icon: 'chevron-right',\n label: 'Shop Now',\n target: '/shop',\n variant: 'primary'\n },\n {\n label: 'Learn More',\n target: '/product-info',\n variant: 'secondary'\n }\n ]}\n contentAlign=\"center\"\n headline=\"Experience Immersive Sound\"\n highlightText\n image={{\n alt: 'Over-Ear Headphones',\n padding: false,\n src: 'img/showcases/comp_audio04.png'\n }}\n order={{\n desktopImageLast: false,\n mobileImageLast: false\n }}\n sub=\"With Our Premium Over-Ear Headphones\"\n text=\"Our over-ear headphones provide an immersive audio experience. With noise-cancellation technology and high-quality sound.\"\n textAlign=\"left\"\n width=\"wide\"\n/>",
1141
982
  "args": {
1142
983
  "headline": "Experience Immersive Sound",
1143
984
  "sub": "With Our Premium Over-Ear Headphones",
1144
985
  "highlightText": true,
1145
986
  "colorNeutral": false,
987
+ "fullWidth": false,
1146
988
  "buttons": [
1147
989
  {
1148
990
  "label": "Shop Now",
1149
- "url": "/shop",
991
+ "target": "/shop",
992
+ "variant": "primary",
1150
993
  "icon": "chevron-right"
1151
994
  },
1152
995
  {
1153
996
  "label": "Learn More",
1154
- "url": "/product-info"
997
+ "target": "/product-info",
998
+ "variant": "secondary"
1155
999
  }
1156
1000
  ],
1157
1001
  "image": {
1158
1002
  "padding": false,
1159
- "align": "center",
1160
1003
  "src": "img/showcases/comp_audio04.png",
1161
1004
  "alt": "Over-Ear Headphones"
1162
1005
  },
@@ -1165,11 +1008,10 @@
1165
1008
  "desktopImageLast": false
1166
1009
  },
1167
1010
  "textAlign": "left",
1168
- "align": "center",
1169
- "padding": true,
1170
- "inverted": false,
1011
+ "contentAlign": "center",
1171
1012
  "text": "Our over-ear headphones provide an immersive audio experience. With noise-cancellation technology and high-quality sound.",
1172
- "backgroundImage": "img/bg_dot-carpet-blue.svg"
1013
+ "backgroundImage": "img/bg_dot-carpet-blue.svg",
1014
+ "width": "wide"
1173
1015
  },
1174
1016
  "screenshot": "img/screenshots/components-cta--product-advertisement.png"
1175
1017
  },
@@ -1177,27 +1019,27 @@
1177
1019
  "id": "components-cta--contact-banner",
1178
1020
  "group": "Components/Cta",
1179
1021
  "name": "ContactBanner",
1180
- "code": "<Cta\n align=\"center\"\n buttons={[\n {\n icon: 'person',\n label: 'Contact us',\n url: '#'\n },\n {\n icon: 'date',\n label: 'Book a meeting',\n url: '#'\n }\n ]}\n headline=\"Get in touch\"\n image={{\n align: 'center',\n padding: false,\n src: 'img/contact-person.png'\n }}\n order={{\n desktopImageLast: false,\n mobileImageLast: false\n }}\n padding\n sub=\"Chat with us about getting your product or platform to market faster\"\n text=\"Our modular design approach allows for flexibility and scalability in your application's architecture.\"\n textAlign=\"left\"\n/>",
1022
+ "code": "<Cta\n buttons={[\n {\n icon: 'person',\n label: 'Contact us',\n target: '#'\n },\n {\n icon: 'date',\n label: 'Book a meeting',\n target: '#'\n }\n ]}\n contentAlign=\"center\"\n fullWidth\n headline=\"Get in touch\"\n image={{\n padding: false,\n src: 'img/contact-person.png'\n }}\n order={{\n desktopImageLast: false,\n mobileImageLast: false\n }}\n sub=\"Chat with us about getting your product or platform to market faster\"\n text=\"Our modular design approach allows for flexibility and scalability in your application's architecture.\"\n textAlign=\"left\"\n width=\"wide\"\n/>",
1181
1023
  "args": {
1182
1024
  "headline": "Get in touch",
1183
1025
  "sub": "Chat with us about getting your product or platform to market faster",
1184
1026
  "highlightText": false,
1185
1027
  "colorNeutral": false,
1028
+ "fullWidth": true,
1186
1029
  "buttons": [
1187
1030
  {
1188
1031
  "label": "Contact us",
1189
1032
  "icon": "person",
1190
- "url": "#"
1033
+ "target": "#"
1191
1034
  },
1192
1035
  {
1193
1036
  "label": "Book a meeting",
1194
1037
  "icon": "date",
1195
- "url": "#"
1038
+ "target": "#"
1196
1039
  }
1197
1040
  ],
1198
1041
  "image": {
1199
1042
  "padding": false,
1200
- "align": "center",
1201
1043
  "src": "img/contact-person.png"
1202
1044
  },
1203
1045
  "order": {
@@ -1205,10 +1047,9 @@
1205
1047
  "desktopImageLast": false
1206
1048
  },
1207
1049
  "textAlign": "left",
1208
- "align": "center",
1209
- "padding": true,
1210
- "inverted": false,
1211
- "text": "Our modular design approach allows for flexibility and scalability in your application's architecture."
1050
+ "contentAlign": "center",
1051
+ "text": "Our modular design approach allows for flexibility and scalability in your application's architecture.",
1052
+ "width": "wide"
1212
1053
  },
1213
1054
  "screenshot": "img/screenshots/components-cta--contact-banner.png"
1214
1055
  },
@@ -1216,22 +1057,22 @@
1216
1057
  "id": "components-cta--split-banner",
1217
1058
  "group": "Components/Cta",
1218
1059
  "name": "SplitBanner",
1219
- "code": "<Cta\n align=\"center\"\n backgroundColor=\"#001856\"\n buttons={[\n {\n icon: 'person',\n label: 'What can we do for you?',\n url: '#'\n }\n ]}\n colorNeutral\n headline=\"Design System Services\"\n image={{\n align: 'center',\n padding: false,\n src: 'img/colored-square.png'\n }}\n order={{\n desktopImageLast: false,\n mobileImageLast: false\n }}\n padding\n sub=\"Subheadline\"\n text=\"Here at Systemics, we bring a range of design system services that can make a difference.\"\n textAlign=\"left\"\n/>",
1060
+ "code": "<Cta\n backgroundColor=\"#001856\"\n buttons={[\n {\n icon: 'person',\n label: 'What can we do for you?',\n target: '#'\n }\n ]}\n colorNeutral\n contentAlign=\"center\"\n fullWidth\n headline=\"Design System Services\"\n image={{\n padding: false,\n src: 'img/colored-square.png'\n }}\n order={{\n desktopImageLast: false,\n mobileImageLast: false\n }}\n sub=\"Subheadline\"\n text=\"Here at Systemics, we bring a range of design system services that can make a difference.\"\n textAlign=\"left\"\n width=\"wide\"\n/>",
1220
1061
  "args": {
1221
1062
  "headline": "Design System Services",
1222
1063
  "sub": "Subheadline",
1223
1064
  "highlightText": false,
1224
1065
  "colorNeutral": true,
1066
+ "fullWidth": true,
1225
1067
  "buttons": [
1226
1068
  {
1227
1069
  "label": "What can we do for you?",
1228
1070
  "icon": "person",
1229
- "url": "#"
1071
+ "target": "#"
1230
1072
  }
1231
1073
  ],
1232
1074
  "image": {
1233
1075
  "padding": false,
1234
- "align": "center",
1235
1076
  "src": "img/colored-square.png"
1236
1077
  },
1237
1078
  "order": {
@@ -1239,11 +1080,10 @@
1239
1080
  "desktopImageLast": false
1240
1081
  },
1241
1082
  "textAlign": "left",
1242
- "align": "center",
1243
- "padding": true,
1244
- "inverted": false,
1083
+ "contentAlign": "center",
1245
1084
  "text": "Here at Systemics, we bring a range of design system services that can make a difference.",
1246
- "backgroundColor": "#001856"
1085
+ "backgroundColor": "#001856",
1086
+ "width": "wide"
1247
1087
  },
1248
1088
  "screenshot": "img/screenshots/components-cta--split-banner.png"
1249
1089
  },
@@ -1251,27 +1091,27 @@
1251
1091
  "id": "components-cta--angled-image",
1252
1092
  "group": "Components/Cta",
1253
1093
  "name": "AngledImage",
1254
- "code": "<Cta\n align=\"center\"\n buttons={[\n {\n icon: 'person',\n label: 'Contact us',\n url: '#'\n },\n {\n icon: 'date',\n label: 'Book a meeting',\n url: '#'\n }\n ]}\n headline=\"Our **Approach** to Design Systems\"\n image={{\n align: 'center',\n padding: false,\n src: 'img/angled-image.png'\n }}\n order={{\n desktopImageLast: true,\n mobileImageLast: false\n }}\n padding\n sub=\"Subheadline\"\n text=\"We value efficiency without compromising quality. Our secret weapon? kickstartDS, a revolutionary code-first and open source framework for creating design systems.\n\nThis tool accelerates our development, saving you valuable time and helping us deliver top-notch results faster.\"\n textAlign=\"left\"\n/>",
1094
+ "code": "<Cta\n buttons={[\n {\n icon: 'person',\n label: 'Contact us',\n target: '#'\n },\n {\n icon: 'date',\n label: 'Book a meeting',\n target: '#'\n }\n ]}\n contentAlign=\"center\"\n fullWidth\n headline=\"Our **Approach** to Design Systems\"\n image={{\n padding: false,\n src: 'img/angled-image.png'\n }}\n order={{\n desktopImageLast: true,\n mobileImageLast: false\n }}\n sub=\"Subheadline\"\n text=\"We value efficiency without compromising quality. Our secret weapon? kickstartDS, a revolutionary code-first and open source framework for creating design systems.\n\nThis tool accelerates our development, saving you valuable time and helping us deliver top-notch results faster.\"\n textAlign=\"left\"\n width=\"wide\"\n/>",
1255
1095
  "args": {
1256
1096
  "headline": "Our **Approach** to Design Systems",
1257
1097
  "sub": "Subheadline",
1258
1098
  "highlightText": false,
1259
1099
  "colorNeutral": false,
1100
+ "fullWidth": true,
1260
1101
  "buttons": [
1261
1102
  {
1262
1103
  "label": "Contact us",
1263
1104
  "icon": "person",
1264
- "url": "#"
1105
+ "target": "#"
1265
1106
  },
1266
1107
  {
1267
1108
  "label": "Book a meeting",
1268
1109
  "icon": "date",
1269
- "url": "#"
1110
+ "target": "#"
1270
1111
  }
1271
1112
  ],
1272
1113
  "image": {
1273
1114
  "padding": false,
1274
- "align": "center",
1275
1115
  "src": "img/angled-image.png"
1276
1116
  },
1277
1117
  "order": {
@@ -1279,10 +1119,9 @@
1279
1119
  "desktopImageLast": true
1280
1120
  },
1281
1121
  "textAlign": "left",
1282
- "align": "center",
1283
- "padding": true,
1284
- "inverted": false,
1285
- "text": "We value efficiency without compromising quality. Our secret weapon? kickstartDS, a revolutionary code-first and open source framework for creating design systems.\n\nThis tool accelerates our development, saving you valuable time and helping us deliver top-notch results faster."
1122
+ "contentAlign": "center",
1123
+ "text": "We value efficiency without compromising quality. Our secret weapon? kickstartDS, a revolutionary code-first and open source framework for creating design systems.\n\nThis tool accelerates our development, saving you valuable time and helping us deliver top-notch results faster.",
1124
+ "width": "wide"
1286
1125
  },
1287
1126
  "screenshot": "img/screenshots/components-cta--angled-image.png"
1288
1127
  },
@@ -1290,34 +1129,32 @@
1290
1129
  "id": "components-cta--colored-banner",
1291
1130
  "group": "Components/Cta",
1292
1131
  "name": "ColoredBanner",
1293
- "code": "<Cta\n align=\"center\"\n backgroundColor=\"#a30051\"\n buttons={[\n {\n label: 'Learn More',\n url: '#'\n },\n {\n label: 'Contact Us',\n url: '#'\n }\n ]}\n colorNeutral\n headline=\"Expertise in Scalable Solutions\"\n highlightText\n image={{\n align: 'center',\n padding: true\n }}\n order={{\n desktopImageLast: true,\n mobileImageLast: false\n }}\n padding\n sub=\"Subheadline\"\n text=\"Leverage our expertise in creating scalable and robust applications using modern technologies.\"\n textAlign=\"left\"\n/>",
1132
+ "code": "<Cta\n backgroundColor=\"#a30051\"\n buttons={[\n {\n label: 'Learn More',\n target: '#'\n },\n {\n label: 'Contact Us',\n target: '#'\n }\n ]}\n colorNeutral\n contentAlign=\"center\"\n headline=\"Expertise in Scalable Solutions\"\n highlightText\n image={{\n padding: true\n }}\n order={{\n desktopImageLast: true,\n mobileImageLast: false\n }}\n sub=\"Subheadline\"\n text=\"Leverage our expertise in creating scalable and robust applications using modern technologies.\"\n textAlign=\"left\"\n/>",
1294
1133
  "args": {
1295
1134
  "headline": "Expertise in Scalable Solutions",
1296
1135
  "sub": "Subheadline",
1297
1136
  "highlightText": true,
1298
1137
  "colorNeutral": true,
1138
+ "fullWidth": false,
1299
1139
  "buttons": [
1300
1140
  {
1301
1141
  "label": "Learn More",
1302
- "url": "#"
1142
+ "target": "#"
1303
1143
  },
1304
1144
  {
1305
1145
  "label": "Contact Us",
1306
- "url": "#"
1146
+ "target": "#"
1307
1147
  }
1308
1148
  ],
1309
1149
  "image": {
1310
- "padding": true,
1311
- "align": "center"
1150
+ "padding": true
1312
1151
  },
1313
1152
  "order": {
1314
1153
  "mobileImageLast": false,
1315
1154
  "desktopImageLast": true
1316
1155
  },
1317
1156
  "textAlign": "left",
1318
- "align": "center",
1319
- "padding": true,
1320
- "inverted": false,
1157
+ "contentAlign": "center",
1321
1158
  "text": "Leverage our expertise in creating scalable and robust applications using modern technologies.",
1322
1159
  "backgroundColor": "#a30051"
1323
1160
  },
@@ -1327,27 +1164,27 @@
1327
1164
  "id": "components-cta--align-bottom",
1328
1165
  "group": "Components/Cta",
1329
1166
  "name": "AlignBottom",
1330
- "code": "<Cta\n align=\"bottom\"\n backgroundImage=\"img/grid-bg.svg\"\n buttons={[\n {\n icon: 'person',\n label: 'Contact us',\n url: '#'\n },\n {\n icon: 'date',\n label: 'Book a meeting',\n url: '#'\n }\n ]}\n headline=\"Custom Solutions\"\n image={{\n align: 'center',\n padding: true,\n src: 'img/offset-image.png'\n }}\n order={{\n desktopImageLast: false,\n mobileImageLast: false\n }}\n sub=\"Subheadline\"\n text=\"At Systemics, we believe in the power of technology to transform businesses. Our team of experienced professionals is dedicated to providing innovative solutions that meet the unique needs of your business.\n\nWe understand that every business is different, and that's why we offer custom solutions tailored to your specific business needs and requirements.\"\n textAlign=\"left\"\n/>",
1167
+ "code": "<Cta\n backgroundImage=\"img/grid-bg.svg\"\n buttons={[\n {\n icon: 'person',\n label: 'Contact us',\n target: '#'\n },\n {\n icon: 'date',\n label: 'Book a meeting',\n target: '#'\n }\n ]}\n contentAlign=\"bottom\"\n fullWidth\n headline=\"Custom Solutions\"\n image={{\n padding: true,\n src: 'img/offset-image.png'\n }}\n order={{\n desktopImageLast: false,\n mobileImageLast: false\n }}\n sub=\"Subheadline\"\n text=\"At Systemics, we believe in the power of technology to transform businesses. Our team of experienced professionals is dedicated to providing innovative solutions that meet the unique needs of your business.\n\nWe understand that every business is different, and that's why we offer custom solutions tailored to your specific business needs and requirements.\"\n textAlign=\"left\"\n width=\"wide\"\n/>",
1331
1168
  "args": {
1332
1169
  "headline": "Custom Solutions",
1333
1170
  "sub": "Subheadline",
1334
1171
  "highlightText": false,
1335
1172
  "colorNeutral": false,
1173
+ "fullWidth": true,
1336
1174
  "buttons": [
1337
1175
  {
1338
1176
  "label": "Contact us",
1339
1177
  "icon": "person",
1340
- "url": "#"
1178
+ "target": "#"
1341
1179
  },
1342
1180
  {
1343
1181
  "label": "Book a meeting",
1344
1182
  "icon": "date",
1345
- "url": "#"
1183
+ "target": "#"
1346
1184
  }
1347
1185
  ],
1348
1186
  "image": {
1349
1187
  "padding": true,
1350
- "align": "center",
1351
1188
  "src": "img/offset-image.png"
1352
1189
  },
1353
1190
  "order": {
@@ -1355,11 +1192,10 @@
1355
1192
  "desktopImageLast": false
1356
1193
  },
1357
1194
  "textAlign": "left",
1358
- "align": "bottom",
1359
- "padding": false,
1360
- "inverted": false,
1195
+ "contentAlign": "bottom",
1361
1196
  "text": "At Systemics, we believe in the power of technology to transform businesses. Our team of experienced professionals is dedicated to providing innovative solutions that meet the unique needs of your business.\n\nWe understand that every business is different, and that's why we offer custom solutions tailored to your specific business needs and requirements.",
1362
- "backgroundImage": "img/grid-bg.svg"
1197
+ "backgroundImage": "img/grid-bg.svg",
1198
+ "width": "wide"
1363
1199
  },
1364
1200
  "screenshot": "img/screenshots/components-cta--align-bottom.png"
1365
1201
  },
@@ -1383,300 +1219,6 @@
1383
1219
  },
1384
1220
  "screenshot": "img/screenshots/layout-divider--default.png"
1385
1221
  },
1386
- {
1387
- "id": "industry-downloads--technical-details-only",
1388
- "group": "Industry/Downloads",
1389
- "name": "TechnicalDetailsOnly",
1390
- "code": "<Downloads\n downloads={[\n {\n format: 'PDF',\n name: 'Product Brochure',\n previewImage: 'img/offset-image.png',\n size: '2.5 MB',\n url: '#'\n },\n {\n format: 'PDF',\n name: 'Company Brochure',\n previewImage: 'img/kickstartDS/CMS-Starter producthunt-slide-01.svg',\n size: '3.2 MB',\n url: '#'\n },\n {\n format: 'DOC',\n name: 'User Guide',\n size: '20 KB',\n url: '#'\n },\n {\n format: 'TXT',\n name: 'Technical Specifications',\n size: '12 KB',\n url: '#'\n }\n ]}\n />",
1391
- "args": {
1392
- "downloads": [
1393
- {
1394
- "name": "Product Brochure",
1395
- "format": "PDF",
1396
- "size": "2.5 MB",
1397
- "previewImage": "img/offset-image.png",
1398
- "url": "#"
1399
- },
1400
- {
1401
- "name": "Company Brochure",
1402
- "previewImage": "img/kickstartDS/CMS-Starter producthunt-slide-01.svg",
1403
- "format": "PDF",
1404
- "size": "3.2 MB",
1405
- "url": "#"
1406
- },
1407
- {
1408
- "name": "User Guide",
1409
- "format": "DOC",
1410
- "size": "20 KB",
1411
- "url": "#"
1412
- },
1413
- {
1414
- "name": "Technical Specifications",
1415
- "format": "TXT",
1416
- "size": "12 KB",
1417
- "url": "#"
1418
- }
1419
- ]
1420
- },
1421
- "screenshot": "img/screenshots/industry-downloads--technical-details-only.png"
1422
- },
1423
- {
1424
- "id": "industry-downloads--description-only",
1425
- "group": "Industry/Downloads",
1426
- "name": "DescriptionOnly",
1427
- "code": "<Downloads\n downloads={[\n {\n description: 'Detailed product information and specifications. Recommended for all users.',\n name: 'Product Brochure',\n previewImage: 'img/offset-image.png'\n },\n {\n description: 'In-depth technical details and requirements. Recommended for technical users.',\n name: 'Technical Specifications',\n previewImage: 'img/kickstartDS/CMS-Starter producthunt-slide-01.svg'\n },\n {\n description: 'Comprehensive guide to using our product.',\n name: 'User Guide',\n previewImage: 'img/about/cta.png'\n },\n {\n description: 'Overview of our company and services.',\n name: 'Company Brochure',\n previewImage: 'img/view-modern-office.jpg'\n }\n ]}\n />",
1428
- "args": {
1429
- "downloads": [
1430
- {
1431
- "name": "Product Brochure",
1432
- "description": "Detailed product information and specifications. Recommended for all users.",
1433
- "previewImage": "img/offset-image.png"
1434
- },
1435
- {
1436
- "name": "Technical Specifications",
1437
- "description": "In-depth technical details and requirements. Recommended for technical users.",
1438
- "previewImage": "img/kickstartDS/CMS-Starter producthunt-slide-01.svg"
1439
- },
1440
- {
1441
- "name": "User Guide",
1442
- "description": "Comprehensive guide to using our product.",
1443
- "previewImage": "img/about/cta.png"
1444
- },
1445
- {
1446
- "name": "Company Brochure",
1447
- "description": "Overview of our company and services.",
1448
- "previewImage": "img/view-modern-office.jpg"
1449
- }
1450
- ]
1451
- },
1452
- "screenshot": "img/screenshots/industry-downloads--description-only.png"
1453
- },
1454
- {
1455
- "id": "industry-downloads--complete",
1456
- "group": "Industry/Downloads",
1457
- "name": "Complete",
1458
- "code": "<Downloads\n downloads={[\n {\n description: 'Detailed product information and specifications. Recommended for all users.',\n format: 'PDF',\n name: 'Product Brochure',\n previewImage: 'img/offset-image.png',\n size: '2.5 MB'\n },\n {\n description: 'Overview of our company and services.',\n format: 'PDF',\n name: 'Company Brochure',\n previewImage: 'img/kickstartDS/CMS-Starter producthunt-slide-01.svg',\n size: '3.2 MB'\n },\n {\n description: 'Comprehensive guide to using our product.',\n format: 'DOC',\n name: 'User Guide',\n size: '20 KB'\n },\n {\n description: 'In-depth technical details and requirements. Recommended for technical users.',\n format: 'TXT',\n name: 'Technical Specifications',\n size: '12 KB'\n }\n ]}\n />",
1459
- "args": {
1460
- "downloads": [
1461
- {
1462
- "name": "Product Brochure",
1463
- "format": "PDF",
1464
- "size": "2.5 MB",
1465
- "description": "Detailed product information and specifications. Recommended for all users.",
1466
- "previewImage": "img/offset-image.png"
1467
- },
1468
- {
1469
- "name": "Company Brochure",
1470
- "description": "Overview of our company and services.",
1471
- "previewImage": "img/kickstartDS/CMS-Starter producthunt-slide-01.svg",
1472
- "format": "PDF",
1473
- "size": "3.2 MB"
1474
- },
1475
- {
1476
- "name": "User Guide",
1477
- "description": "Comprehensive guide to using our product.",
1478
- "format": "DOC",
1479
- "size": "20 KB"
1480
- },
1481
- {
1482
- "name": "Technical Specifications",
1483
- "description": "In-depth technical details and requirements. Recommended for technical users.",
1484
- "format": "TXT",
1485
- "size": "12 KB"
1486
- }
1487
- ]
1488
- },
1489
- "screenshot": "img/screenshots/industry-downloads--complete.png"
1490
- },
1491
- {
1492
- "id": "industry-downloads--mixed",
1493
- "group": "Industry/Downloads",
1494
- "name": "Mixed",
1495
- "code": "<Downloads\n downloads={[\n {\n description: 'Detailed product information and specifications. Recommended for all users.',\n format: 'PDF',\n name: 'Product Brochure',\n previewImage: 'img/offset-image.png',\n size: '2.5 MB'\n },\n {\n format: 'PDF',\n name: 'User Guide',\n previewImage: 'img/about/cta.png',\n size: '1.2 MB'\n },\n {\n name: 'Company Brochure',\n previewImage: 'img/kickstartDS/CMS-Starter producthunt-slide-01.svg'\n },\n {\n description: 'In-depth technical details and requirements.',\n name: 'Technical Specifications'\n }\n ]}\n />",
1496
- "args": {
1497
- "downloads": [
1498
- {
1499
- "name": "Product Brochure",
1500
- "format": "PDF",
1501
- "size": "2.5 MB",
1502
- "description": "Detailed product information and specifications. Recommended for all users.",
1503
- "previewImage": "img/offset-image.png"
1504
- },
1505
- {
1506
- "name": "User Guide",
1507
- "format": "PDF",
1508
- "size": "1.2 MB",
1509
- "previewImage": "img/about/cta.png"
1510
- },
1511
- {
1512
- "name": "Company Brochure",
1513
- "previewImage": "img/kickstartDS/CMS-Starter producthunt-slide-01.svg"
1514
- },
1515
- {
1516
- "name": "Technical Specifications",
1517
- "description": "In-depth technical details and requirements."
1518
- }
1519
- ]
1520
- },
1521
- "screenshot": "img/screenshots/industry-downloads--mixed.png"
1522
- },
1523
- {
1524
- "id": "event-event-appointment--default",
1525
- "group": "Event/ Event Appointment",
1526
- "name": "Default",
1527
- "code": "<EventAppointment\n ariaLabel=\"Register for the event on 18th September 2025 from 09:00 to 17:00\"\n date=\"2025-09-18\"\n label=\"Register\"\n newTab\n time=\"09:00 – 17:00\"\n url=\"#\"\n/>",
1528
- "args": {
1529
- "date": "2025-09-18",
1530
- "time": "09:00 – 17:00",
1531
- "label": "Register",
1532
- "url": "#",
1533
- "newTab": true,
1534
- "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
1535
- },
1536
- "screenshot": "img/screenshots/event-event-appointment--default.png"
1537
- },
1538
- {
1539
- "id": "event-event-header--default",
1540
- "group": "Event/ Event Header",
1541
- "name": "Default",
1542
- "code": "<EventHeader\n categories={[\n {\n label: 'Conference'\n },\n {\n label: 'Design Systems'\n }\n ]}\n intro=\"A full-day event for design system professionals and enthusiasts. Join us to learn, share, and connect with like-minded individuals.\"\n title=\"Systemics Design Conference 2025\"\n/>",
1543
- "args": {
1544
- "title": "Systemics Design Conference 2025",
1545
- "categories": [
1546
- {
1547
- "label": "Conference"
1548
- },
1549
- {
1550
- "label": "Design Systems"
1551
- }
1552
- ],
1553
- "intro": "A full-day event for design system professionals and enthusiasts. Join us to learn, share, and connect with like-minded individuals."
1554
- },
1555
- "screenshot": "img/screenshots/event-event-header--default.png"
1556
- },
1557
- {
1558
- "id": "event-event-latest-teaser--default",
1559
- "group": "Event/ Event Latest Teaser",
1560
- "name": "Default",
1561
- "code": "<EventLatestTeaser\n ariaLabel=\"Event teaser for \"\n calendar={{\n day: '30',\n month: 'Dec'\n }}\n cta=\"Show event\"\n date=\"12/30/2025\"\n link={{\n text: 'Show event',\n url: '#'\n }}\n location=\"Berlin, Germany\"\n title=\"The Future of AI\"\n url=\"https://example.com\"\n/>",
1562
- "args": {
1563
- "date": "12/30/2025",
1564
- "calendar": {
1565
- "month": "Dec",
1566
- "day": "30"
1567
- },
1568
- "title": "The Future of AI",
1569
- "location": "Berlin, Germany",
1570
- "url": "https://example.com",
1571
- "cta": "Show event",
1572
- "ariaLabel": "Event teaser for ",
1573
- "link": {
1574
- "url": "#",
1575
- "text": "Show event"
1576
- }
1577
- },
1578
- "screenshot": "img/screenshots/event-event-latest-teaser--default.png"
1579
- },
1580
- {
1581
- "id": "event-event-latest--default",
1582
- "group": "Event/ Event Latest",
1583
- "name": "Default",
1584
- "code": "<EventLatest\n events={[\n {\n ariaLabel: 'Systemics Design Conference on September 18, 2025 in Berlin',\n calendar: {\n day: '18',\n month: 'Sep'\n },\n cta: 'View event',\n date: '09/18/2025',\n location: 'Berlin Congress Center, Berlin',\n title: 'Systemics Design Conference',\n url: 'https://systemics.events/conference-berlin'\n },\n {\n ariaLabel: 'UX Leadership Summit on October 5, 2025 in Cologne',\n calendar: {\n day: '05',\n month: 'Oct'\n },\n cta: 'View event',\n date: '10/05/2025',\n location: 'Köln Messe, Cologne',\n title: 'UX Leadership Summit',\n url: 'https://uxsummit.de/koeln-2025'\n },\n {\n ariaLabel: 'Frontend Future Days on November 12, 2025 in Hamburg',\n calendar: {\n day: '12',\n month: 'Nov'\n },\n cta: 'View event',\n date: '11/12/2025',\n location: 'Hamburg Digital Campus, Hamburg',\n title: 'Frontend Future Days',\n url: 'https://frontendfuture.de/hamburg'\n },\n {\n ariaLabel: 'Accessibility in Practice Workshop on December 1, 2025 online',\n calendar: {\n day: '01',\n month: 'Dec'\n },\n cta: 'View event',\n date: '12/01/2025',\n location: 'Online',\n title: 'Accessibility in Practice Workshop',\n url: 'https://a11yworkshop.com/dec-2025'\n }\n ]}\n />",
1585
- "args": {
1586
- "events": [
1587
- {
1588
- "date": "09/18/2025",
1589
- "calendar": {
1590
- "month": "Sep",
1591
- "day": "18"
1592
- },
1593
- "title": "Systemics Design Conference",
1594
- "location": "Berlin Congress Center, Berlin",
1595
- "url": "https://systemics.events/conference-berlin",
1596
- "cta": "View event",
1597
- "ariaLabel": "Systemics Design Conference on September 18, 2025 in Berlin"
1598
- },
1599
- {
1600
- "date": "10/05/2025",
1601
- "calendar": {
1602
- "month": "Oct",
1603
- "day": "05"
1604
- },
1605
- "title": "UX Leadership Summit",
1606
- "location": "Köln Messe, Cologne",
1607
- "url": "https://uxsummit.de/koeln-2025",
1608
- "cta": "View event",
1609
- "ariaLabel": "UX Leadership Summit on October 5, 2025 in Cologne"
1610
- },
1611
- {
1612
- "date": "11/12/2025",
1613
- "calendar": {
1614
- "month": "Nov",
1615
- "day": "12"
1616
- },
1617
- "title": "Frontend Future Days",
1618
- "location": "Hamburg Digital Campus, Hamburg",
1619
- "url": "https://frontendfuture.de/hamburg",
1620
- "cta": "View event",
1621
- "ariaLabel": "Frontend Future Days on November 12, 2025 in Hamburg"
1622
- },
1623
- {
1624
- "date": "12/01/2025",
1625
- "calendar": {
1626
- "month": "Dec",
1627
- "day": "01"
1628
- },
1629
- "title": "Accessibility in Practice Workshop",
1630
- "location": "Online",
1631
- "url": "https://a11yworkshop.com/dec-2025",
1632
- "cta": "View event",
1633
- "ariaLabel": "Accessibility in Practice Workshop on December 1, 2025 online"
1634
- }
1635
- ]
1636
- },
1637
- "screenshot": "img/screenshots/event-event-latest--default.png"
1638
- },
1639
- {
1640
- "id": "event-event-location--default",
1641
- "group": "Event/ Event Location",
1642
- "name": "Default",
1643
- "code": "<EventLocation\n address=\"Alexanderplatz 1<br />\n 10178 Berlin\"\n dates={[\n {\n ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n date: '2025-09-18',\n label: 'Register',\n newTab: true,\n time: '09:00 – 17:00',\n url: '#'\n },\n {\n ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n date: '2025-09-18',\n label: 'Register',\n newTab: true,\n time: '09:00 – 17:00',\n url: '#'\n }\n ]}\n links={[\n {\n label: 'Open in Google Maps',\n newTab: true,\n url: 'https://maps.google.com/?q=Berlin+Congress+Center'\n },\n {\n label: 'Location Website',\n newTab: true,\n url: 'https://maps.google.com/?q=Berlin+Congress+Center'\n }\n ]}\n locationName=\"Berlin Congress Center\"\n/>",
1644
- "args": {
1645
- "dates": [
1646
- {
1647
- "date": "2025-09-18",
1648
- "time": "09:00 – 17:00",
1649
- "label": "Register",
1650
- "url": "#",
1651
- "newTab": true,
1652
- "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
1653
- },
1654
- {
1655
- "date": "2025-09-18",
1656
- "time": "09:00 – 17:00",
1657
- "label": "Register",
1658
- "url": "#",
1659
- "newTab": true,
1660
- "ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
1661
- }
1662
- ],
1663
- "locationName": "Berlin Congress Center",
1664
- "address": "Alexanderplatz 1<br />\n 10178 Berlin",
1665
- "links": [
1666
- {
1667
- "newTab": true,
1668
- "url": "https://maps.google.com/?q=Berlin+Congress+Center",
1669
- "label": "Open in Google Maps"
1670
- },
1671
- {
1672
- "newTab": true,
1673
- "url": "https://maps.google.com/?q=Berlin+Congress+Center",
1674
- "label": "Location Website"
1675
- }
1676
- ]
1677
- },
1678
- "screenshot": "img/screenshots/event-event-location--default.png"
1679
- },
1680
1222
  {
1681
1223
  "id": "components-faq--dropdown-list",
1682
1224
  "group": "Components/Faq",
@@ -1719,7 +1261,7 @@
1719
1261
  "id": "components-features--icon-centered",
1720
1262
  "group": "Components/Features",
1721
1263
  "name": "IconCentered",
1722
- "code": "<Features\n ctas={{\n style: 'link',\n toggle: true\n }}\n feature={[\n {\n cta: {\n icon: 'arrow-right',\n label: 'Learn more',\n url: '#'\n },\n icon: 'home',\n text: 'Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.',\n title: 'Scalable Architecture'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Get started',\n url: '#'\n },\n icon: 'map',\n text: 'Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.',\n title: 'Efficient Development'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Explore',\n url: '#'\n },\n icon: 'person',\n text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n title: 'Consistent UI'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Customize',\n url: '#'\n },\n icon: 'star',\n text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n title: 'Customizable Design'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Deploy',\n url: '#'\n },\n icon: 'upload',\n text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n title: 'Cloud Ready'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Secure',\n url: '#'\n },\n icon: 'login',\n text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n title: 'Secure'\n }\n ]}\n layout=\"largeTiles\"\n style=\"centered\"\n/>",
1264
+ "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/>",
1723
1265
  "args": {
1724
1266
  "layout": "largeTiles",
1725
1267
  "style": "centered",
@@ -1733,9 +1275,8 @@
1733
1275
  "title": "Scalable Architecture",
1734
1276
  "text": "Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.",
1735
1277
  "cta": {
1736
- "url": "#",
1737
- "label": "Learn more",
1738
- "icon": "arrow-right"
1278
+ "target": "/feature1",
1279
+ "label": "Learn more"
1739
1280
  }
1740
1281
  },
1741
1282
  {
@@ -1743,9 +1284,8 @@
1743
1284
  "title": "Efficient Development",
1744
1285
  "text": "Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.",
1745
1286
  "cta": {
1746
- "url": "#",
1747
- "label": "Get started",
1748
- "icon": "arrow-right"
1287
+ "target": "/feature2",
1288
+ "label": "Get started"
1749
1289
  }
1750
1290
  },
1751
1291
  {
@@ -1753,9 +1293,8 @@
1753
1293
  "title": "Consistent UI",
1754
1294
  "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
1755
1295
  "cta": {
1756
- "url": "#",
1757
- "label": "Explore",
1758
- "icon": "arrow-right"
1296
+ "target": "/feature3",
1297
+ "label": "Explore"
1759
1298
  }
1760
1299
  },
1761
1300
  {
@@ -1763,9 +1302,8 @@
1763
1302
  "title": "Customizable Design",
1764
1303
  "text": "Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.",
1765
1304
  "cta": {
1766
- "url": "#",
1767
- "label": "Customize",
1768
- "icon": "arrow-right"
1305
+ "target": "/feature4",
1306
+ "label": "Customize"
1769
1307
  }
1770
1308
  },
1771
1309
  {
@@ -1773,9 +1311,8 @@
1773
1311
  "title": "Cloud Ready",
1774
1312
  "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
1775
1313
  "cta": {
1776
- "url": "#",
1777
- "label": "Deploy",
1778
- "icon": "arrow-right"
1314
+ "target": "/feature5",
1315
+ "label": "Deploy"
1779
1316
  }
1780
1317
  },
1781
1318
  {
@@ -1783,9 +1320,8 @@
1783
1320
  "title": "Secure",
1784
1321
  "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
1785
1322
  "cta": {
1786
- "url": "#",
1787
- "label": "Secure",
1788
- "icon": "arrow-right"
1323
+ "target": "/feature6",
1324
+ "label": "Secure"
1789
1325
  }
1790
1326
  }
1791
1327
  ]
@@ -1796,7 +1332,7 @@
1796
1332
  "id": "components-features--stack-with-button",
1797
1333
  "group": "Components/Features",
1798
1334
  "name": "StackWithButton",
1799
- "code": "<Features\n ctas={{\n style: 'button',\n toggle: true\n }}\n feature={[\n {\n cta: {\n icon: 'arrow-right',\n label: 'Explore',\n url: '#'\n },\n icon: 'person',\n text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n title: 'Consistent UI'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Customize',\n url: '#'\n },\n icon: 'star',\n text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n title: 'Customizable Design'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Deploy',\n url: '#'\n },\n icon: 'upload',\n text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n title: 'Cloud Ready'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Secure',\n url: '#'\n },\n icon: 'login',\n text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n title: 'Secure'\n }\n ]}\n layout=\"smallTiles\"\n style=\"stack\"\n/>",
1335
+ "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/>",
1800
1336
  "args": {
1801
1337
  "layout": "smallTiles",
1802
1338
  "style": "stack",
@@ -1810,9 +1346,8 @@
1810
1346
  "title": "Consistent UI",
1811
1347
  "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
1812
1348
  "cta": {
1813
- "url": "#",
1814
- "label": "Explore",
1815
- "icon": "arrow-right"
1349
+ "target": "/feature3",
1350
+ "label": "Explore"
1816
1351
  }
1817
1352
  },
1818
1353
  {
@@ -1820,9 +1355,8 @@
1820
1355
  "title": "Customizable Design",
1821
1356
  "text": "Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.",
1822
1357
  "cta": {
1823
- "url": "#",
1824
- "label": "Customize",
1825
- "icon": "arrow-right"
1358
+ "target": "/feature4",
1359
+ "label": "Customize"
1826
1360
  }
1827
1361
  },
1828
1362
  {
@@ -1830,9 +1364,8 @@
1830
1364
  "title": "Cloud Ready",
1831
1365
  "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
1832
1366
  "cta": {
1833
- "url": "#",
1834
- "label": "Deploy",
1835
- "icon": "arrow-right"
1367
+ "target": "/feature5",
1368
+ "label": "Deploy"
1836
1369
  }
1837
1370
  },
1838
1371
  {
@@ -1840,9 +1373,8 @@
1840
1373
  "title": "Secure",
1841
1374
  "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
1842
1375
  "cta": {
1843
- "url": "#",
1844
- "label": "Secure",
1845
- "icon": "arrow-right"
1376
+ "target": "/feature6",
1377
+ "label": "Secure"
1846
1378
  }
1847
1379
  }
1848
1380
  ]
@@ -1853,7 +1385,7 @@
1853
1385
  "id": "components-features--list-view",
1854
1386
  "group": "Components/Features",
1855
1387
  "name": "ListView",
1856
- "code": "<Features\n ctas={{\n style: 'intext',\n toggle: false\n }}\n feature={[\n {\n cta: {\n icon: 'arrow-right',\n label: 'Customize',\n url: '#'\n },\n icon: 'star',\n text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n title: 'Customizable Design'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Get started',\n url: '#'\n },\n icon: 'map',\n text: 'Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.',\n title: 'Efficient Development'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Explore',\n url: '#'\n },\n icon: 'person',\n text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n title: 'Consistent UI'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Learn more',\n url: '#'\n },\n icon: 'home',\n text: 'Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.',\n title: 'Scalable Architecture'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Deploy',\n url: '#'\n },\n icon: 'upload',\n text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n title: 'Cloud Ready'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Secure',\n url: '#'\n },\n icon: 'login',\n text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n title: 'Secure'\n }\n ]}\n layout=\"list\"\n style=\"besideLarge\"\n/>",
1388
+ "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/>",
1857
1389
  "args": {
1858
1390
  "layout": "list",
1859
1391
  "style": "besideLarge",
@@ -1867,9 +1399,8 @@
1867
1399
  "title": "Customizable Design",
1868
1400
  "text": "Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.",
1869
1401
  "cta": {
1870
- "url": "#",
1871
- "label": "Customize",
1872
- "icon": "arrow-right"
1402
+ "target": "/feature4",
1403
+ "label": "Customize"
1873
1404
  }
1874
1405
  },
1875
1406
  {
@@ -1877,9 +1408,8 @@
1877
1408
  "title": "Efficient Development",
1878
1409
  "text": "Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.",
1879
1410
  "cta": {
1880
- "url": "#",
1881
- "label": "Get started",
1882
- "icon": "arrow-right"
1411
+ "target": "/feature2",
1412
+ "label": "Get started"
1883
1413
  }
1884
1414
  },
1885
1415
  {
@@ -1887,9 +1417,8 @@
1887
1417
  "title": "Consistent UI",
1888
1418
  "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
1889
1419
  "cta": {
1890
- "url": "#",
1891
- "label": "Explore",
1892
- "icon": "arrow-right"
1420
+ "target": "/feature3",
1421
+ "label": "Explore"
1893
1422
  }
1894
1423
  },
1895
1424
  {
@@ -1897,9 +1426,8 @@
1897
1426
  "title": "Scalable Architecture",
1898
1427
  "text": "Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.",
1899
1428
  "cta": {
1900
- "url": "#",
1901
- "label": "Learn more",
1902
- "icon": "arrow-right"
1429
+ "target": "/feature1",
1430
+ "label": "Learn more"
1903
1431
  }
1904
1432
  },
1905
1433
  {
@@ -1907,9 +1435,8 @@
1907
1435
  "title": "Cloud Ready",
1908
1436
  "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
1909
1437
  "cta": {
1910
- "url": "#",
1911
- "label": "Deploy",
1912
- "icon": "arrow-right"
1438
+ "target": "/feature5",
1439
+ "label": "Deploy"
1913
1440
  }
1914
1441
  },
1915
1442
  {
@@ -1917,9 +1444,8 @@
1917
1444
  "title": "Secure",
1918
1445
  "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
1919
1446
  "cta": {
1920
- "url": "#",
1921
- "label": "Secure",
1922
- "icon": "arrow-right"
1447
+ "target": "/feature6",
1448
+ "label": "Secure"
1923
1449
  }
1924
1450
  }
1925
1451
  ]
@@ -1930,7 +1456,7 @@
1930
1456
  "id": "components-features--icon-beside-with-link-in-text",
1931
1457
  "group": "Components/Features",
1932
1458
  "name": "IconBesideWithLinkInText",
1933
- "code": "<Features\n ctas={{\n style: 'intext',\n toggle: true\n }}\n feature={[\n {\n cta: {\n icon: 'arrow-right',\n label: 'Learn more',\n url: '#'\n },\n icon: 'home',\n text: 'Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.',\n title: 'Scalable Architecture'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Get started',\n url: '#'\n },\n icon: 'map',\n text: 'Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.',\n title: 'Efficient Development'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Explore',\n url: '#'\n },\n icon: 'person',\n text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n title: 'Consistent UI'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Customize',\n url: '#'\n },\n icon: 'star',\n text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n title: 'Customizable Design'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Deploy',\n url: '#'\n },\n icon: 'upload',\n text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n title: 'Cloud Ready'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Secure',\n url: '#'\n },\n icon: 'login',\n text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n title: 'Secure'\n }\n ]}\n layout=\"smallTiles\"\n style=\"intext\"\n/>",
1459
+ "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/>",
1934
1460
  "args": {
1935
1461
  "layout": "smallTiles",
1936
1462
  "style": "intext",
@@ -1944,9 +1470,8 @@
1944
1470
  "title": "Scalable Architecture",
1945
1471
  "text": "Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.",
1946
1472
  "cta": {
1947
- "url": "#",
1948
- "label": "Learn more",
1949
- "icon": "arrow-right"
1473
+ "target": "/feature1",
1474
+ "label": "Learn more"
1950
1475
  }
1951
1476
  },
1952
1477
  {
@@ -1954,9 +1479,8 @@
1954
1479
  "title": "Efficient Development",
1955
1480
  "text": "Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.",
1956
1481
  "cta": {
1957
- "url": "#",
1958
- "label": "Get started",
1959
- "icon": "arrow-right"
1482
+ "target": "/feature2",
1483
+ "label": "Get started"
1960
1484
  }
1961
1485
  },
1962
1486
  {
@@ -1964,9 +1488,8 @@
1964
1488
  "title": "Consistent UI",
1965
1489
  "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
1966
1490
  "cta": {
1967
- "url": "#",
1968
- "label": "Explore",
1969
- "icon": "arrow-right"
1491
+ "target": "/feature3",
1492
+ "label": "Explore"
1970
1493
  }
1971
1494
  },
1972
1495
  {
@@ -1974,9 +1497,8 @@
1974
1497
  "title": "Customizable Design",
1975
1498
  "text": "Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.",
1976
1499
  "cta": {
1977
- "url": "#",
1978
- "label": "Customize",
1979
- "icon": "arrow-right"
1500
+ "target": "/feature4",
1501
+ "label": "Customize"
1980
1502
  }
1981
1503
  },
1982
1504
  {
@@ -1984,9 +1506,8 @@
1984
1506
  "title": "Cloud Ready",
1985
1507
  "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
1986
1508
  "cta": {
1987
- "url": "#",
1988
- "label": "Deploy",
1989
- "icon": "arrow-right"
1509
+ "target": "/feature5",
1510
+ "label": "Deploy"
1990
1511
  }
1991
1512
  },
1992
1513
  {
@@ -1994,9 +1515,8 @@
1994
1515
  "title": "Secure",
1995
1516
  "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
1996
1517
  "cta": {
1997
- "url": "#",
1998
- "label": "Secure",
1999
- "icon": "arrow-right"
1518
+ "target": "/feature6",
1519
+ "label": "Secure"
2000
1520
  }
2001
1521
  }
2002
1522
  ]
@@ -2007,7 +1527,7 @@
2007
1527
  "id": "components-features--icon-intext-with-link",
2008
1528
  "group": "Components/Features",
2009
1529
  "name": "IconIntextWithLink",
2010
- "code": "<Features\n ctas={{\n style: 'link',\n toggle: true\n }}\n feature={[\n {\n cta: {\n icon: 'arrow-right',\n label: 'Customize',\n url: '#'\n },\n icon: 'star',\n text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n title: 'Customizable Design'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Get started',\n url: '#'\n },\n icon: 'map',\n text: 'Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.',\n title: 'Efficient Development'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Explore',\n url: '#'\n },\n icon: 'person',\n text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n title: 'Consistent UI'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Deploy',\n url: '#'\n },\n icon: 'upload',\n text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n title: 'Cloud Ready'\n },\n {\n cta: {\n icon: 'arrow-right',\n label: 'Secure',\n url: '#'\n },\n icon: 'login',\n text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n title: 'Secure'\n }\n ]}\n layout=\"largeTiles\"\n style=\"intext\"\n/>",
1530
+ "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/>",
2011
1531
  "args": {
2012
1532
  "layout": "largeTiles",
2013
1533
  "style": "intext",
@@ -2021,9 +1541,8 @@
2021
1541
  "title": "Customizable Design",
2022
1542
  "text": "Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.",
2023
1543
  "cta": {
2024
- "url": "#",
2025
- "label": "Customize",
2026
- "icon": "arrow-right"
1544
+ "target": "/feature4",
1545
+ "label": "Customize"
2027
1546
  }
2028
1547
  },
2029
1548
  {
@@ -2031,9 +1550,8 @@
2031
1550
  "title": "Efficient Development",
2032
1551
  "text": "Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.",
2033
1552
  "cta": {
2034
- "url": "#",
2035
- "label": "Get started",
2036
- "icon": "arrow-right"
1553
+ "target": "/feature2",
1554
+ "label": "Get started"
2037
1555
  }
2038
1556
  },
2039
1557
  {
@@ -2041,9 +1559,8 @@
2041
1559
  "title": "Consistent UI",
2042
1560
  "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
2043
1561
  "cta": {
2044
- "url": "#",
2045
- "label": "Explore",
2046
- "icon": "arrow-right"
1562
+ "target": "/feature3",
1563
+ "label": "Explore"
2047
1564
  }
2048
1565
  },
2049
1566
  {
@@ -2051,9 +1568,8 @@
2051
1568
  "title": "Cloud Ready",
2052
1569
  "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
2053
1570
  "cta": {
2054
- "url": "#",
2055
- "label": "Deploy",
2056
- "icon": "arrow-right"
1571
+ "target": "/feature5",
1572
+ "label": "Deploy"
2057
1573
  }
2058
1574
  },
2059
1575
  {
@@ -2061,9 +1577,8 @@
2061
1577
  "title": "Secure",
2062
1578
  "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
2063
1579
  "cta": {
2064
- "url": "#",
2065
- "label": "Secure",
2066
- "icon": "arrow-right"
1580
+ "target": "/feature6",
1581
+ "label": "Secure"
2067
1582
  }
2068
1583
  }
2069
1584
  ]
@@ -2074,7 +1589,7 @@
2074
1589
  "id": "layout-footer--footer",
2075
1590
  "group": "Layout/Footer",
2076
1591
  "name": "Footer",
2077
- "code": "<Footer\n byline=\"© 2024 systemics Inc. All rights reserved.\"\n logo={{\n alt: 'Systemics Logo',\n height: 40,\n homepageHref: '#',\n inverted: false,\n src: '/logo.svg',\n srcInverted: '/logo-inverted.svg',\n width: 176\n }}\n navItems={[\n {\n active: true,\n label: 'Active Item',\n url: '#'\n },\n {\n label: 'Navigation Item',\n url: '#'\n },\n {\n items: [\n {\n label: 'Level 2 Item',\n url: '#'\n },\n {\n active: true,\n label: 'Active Item',\n url: '#'\n },\n {\n label: 'An Item with a longer Label',\n url: '#'\n },\n {\n label: 'And One last one',\n url: '#'\n }\n ],\n label: 'Dropdown',\n url: '#'\n },\n {\n label: 'One more Item',\n url: '#'\n },\n {\n label: 'Last Item',\n url: '#'\n }\n ]}\n/>",
1592
+ "code": "<Footer\n byline=\"© 2024 systemics Inc. All rights reserved.\"\n logo={{\n alt: 'Systemics Logo',\n height: 40,\n homepageHref: '#',\n inverted: false,\n src: '/logo.svg',\n srcInverted: '/logo-inverted.svg',\n width: 176\n }}\n navItems={[\n {\n active: true,\n href: '#',\n label: 'Active Item'\n },\n {\n href: '#',\n label: 'Navigation Item'\n },\n {\n href: '#',\n items: [\n {\n href: '#',\n label: 'Level 2 Item'\n },\n {\n active: true,\n href: '#',\n label: 'Active Item'\n },\n {\n href: '#',\n label: 'An Item with a longer Label'\n },\n {\n href: '#',\n label: 'And One last one'\n }\n ],\n label: 'Dropdown'\n },\n {\n href: '#',\n label: 'One more Item'\n },\n {\n href: '#',\n label: 'Last Item'\n }\n ]}\n/>",
2078
1593
  "args": {
2079
1594
  "logo": {
2080
1595
  "src": "/logo.svg",
@@ -2089,43 +1604,43 @@
2089
1604
  "inverted": false,
2090
1605
  "navItems": [
2091
1606
  {
2092
- "url": "#",
1607
+ "href": "#",
2093
1608
  "label": "Active Item",
2094
1609
  "active": true
2095
1610
  },
2096
1611
  {
2097
- "url": "#",
1612
+ "href": "#",
2098
1613
  "label": "Navigation Item"
2099
1614
  },
2100
1615
  {
2101
- "url": "#",
1616
+ "href": "#",
2102
1617
  "label": "Dropdown",
2103
1618
  "items": [
2104
1619
  {
2105
- "url": "#",
1620
+ "href": "#",
2106
1621
  "label": "Level 2 Item"
2107
1622
  },
2108
1623
  {
2109
- "url": "#",
1624
+ "href": "#",
2110
1625
  "label": "Active Item",
2111
1626
  "active": true
2112
1627
  },
2113
1628
  {
2114
- "url": "#",
1629
+ "href": "#",
2115
1630
  "label": "An Item with a longer Label"
2116
1631
  },
2117
1632
  {
2118
- "url": "#",
1633
+ "href": "#",
2119
1634
  "label": "And One last one"
2120
1635
  }
2121
1636
  ]
2122
1637
  },
2123
1638
  {
2124
- "url": "#",
1639
+ "href": "#",
2125
1640
  "label": "One more Item"
2126
1641
  },
2127
1642
  {
2128
- "url": "#",
1643
+ "href": "#",
2129
1644
  "label": "Last Item"
2130
1645
  }
2131
1646
  ]
@@ -2175,9 +1690,9 @@
2175
1690
  "caption": "Caption Image 7"
2176
1691
  }
2177
1692
  ],
2178
- "layout": "smallTiles",
2179
1693
  "aspectRatio": "square",
2180
- "lightbox": true
1694
+ "lightbox": true,
1695
+ "layout": "smallTiles"
2181
1696
  },
2182
1697
  "screenshot": "img/screenshots/components-gallery--small-squares-with-lightbox.png"
2183
1698
  },
@@ -2219,9 +1734,9 @@
2219
1734
  "caption": "Caption Image 6"
2220
1735
  }
2221
1736
  ],
2222
- "layout": "largeTiles",
2223
1737
  "aspectRatio": "landscape",
2224
- "lightbox": false
1738
+ "lightbox": false,
1739
+ "layout": "largeTiles"
2225
1740
  },
2226
1741
  "screenshot": "img/screenshots/components-gallery--large-landscape-tiles.png"
2227
1742
  },
@@ -2268,9 +1783,9 @@
2268
1783
  "caption": "Caption Image 7"
2269
1784
  }
2270
1785
  ],
2271
- "layout": "smallTiles",
2272
1786
  "aspectRatio": "unset",
2273
- "lightbox": true
1787
+ "lightbox": true,
1788
+ "layout": "smallTiles"
2274
1789
  },
2275
1790
  "screenshot": "img/screenshots/components-gallery--free-aspect-ratio.png"
2276
1791
  },
@@ -2297,9 +1812,9 @@
2297
1812
  "caption": "Caption Image 3"
2298
1813
  }
2299
1814
  ],
2300
- "layout": "stack",
2301
1815
  "aspectRatio": "landscape",
2302
- "lightbox": false
1816
+ "lightbox": false,
1817
+ "layout": "stack"
2303
1818
  },
2304
1819
  "screenshot": "img/screenshots/components-gallery--stack-landscape.png"
2305
1820
  },
@@ -2307,7 +1822,7 @@
2307
1822
  "id": "layout-header--header",
2308
1823
  "group": "Layout/Header",
2309
1824
  "name": "Header",
2310
- "code": "<Header\n logo={{\n alt: 'Systemics Logo',\n height: 40,\n homepageHref: '#',\n src: '/logo.svg',\n srcInverted: '/logo-inverted.svg',\n width: 176\n }}\n navItems={[\n {\n active: true,\n label: 'Active Item',\n url: '#'\n },\n {\n label: 'Navigation Item',\n url: '#'\n },\n {\n items: [\n {\n label: 'Level 2 Item',\n url: '#'\n },\n {\n active: true,\n label: 'Active Item',\n url: '#'\n },\n {\n label: 'An Item with a longer Label',\n url: '#'\n },\n {\n label: 'And One last one',\n url: '#'\n }\n ],\n label: 'Dropdown',\n url: '#'\n },\n {\n label: 'One more Item',\n url: '#'\n },\n {\n label: 'Last Item',\n url: '#'\n }\n ]}\n/>",
1825
+ "code": "<Header\n logo={{\n alt: 'Systemics Logo',\n height: 40,\n homepageHref: '#',\n src: '/logo.svg',\n srcInverted: '/logo-inverted.svg',\n width: 176\n }}\n navItems={[\n {\n active: true,\n href: '#',\n label: 'Active Item'\n },\n {\n href: '#',\n label: 'Navigation Item'\n },\n {\n href: '#',\n items: [\n {\n href: '#',\n label: 'Level 2 Item'\n },\n {\n active: true,\n href: '#',\n label: 'Active Item'\n },\n {\n href: '#',\n label: 'An Item with a longer Label'\n },\n {\n href: '#',\n label: 'And One last one'\n }\n ],\n label: 'Dropdown'\n },\n {\n href: '#',\n label: 'One more Item'\n },\n {\n href: '#',\n label: 'Last Item'\n }\n ]}\n/>",
2311
1826
  "args": {
2312
1827
  "logo": {
2313
1828
  "src": "/logo.svg",
@@ -2323,43 +1838,43 @@
2323
1838
  "inverted": false,
2324
1839
  "navItems": [
2325
1840
  {
2326
- "url": "#",
1841
+ "href": "#",
2327
1842
  "label": "Active Item",
2328
1843
  "active": true
2329
1844
  },
2330
1845
  {
2331
- "url": "#",
1846
+ "href": "#",
2332
1847
  "label": "Navigation Item"
2333
1848
  },
2334
1849
  {
2335
- "url": "#",
1850
+ "href": "#",
2336
1851
  "label": "Dropdown",
2337
1852
  "items": [
2338
1853
  {
2339
- "url": "#",
1854
+ "href": "#",
2340
1855
  "label": "Level 2 Item"
2341
1856
  },
2342
1857
  {
2343
- "url": "#",
1858
+ "href": "#",
2344
1859
  "label": "Active Item",
2345
1860
  "active": true
2346
1861
  },
2347
1862
  {
2348
- "url": "#",
1863
+ "href": "#",
2349
1864
  "label": "An Item with a longer Label"
2350
1865
  },
2351
1866
  {
2352
- "url": "#",
1867
+ "href": "#",
2353
1868
  "label": "And One last one"
2354
1869
  }
2355
1870
  ]
2356
1871
  },
2357
1872
  {
2358
- "url": "#",
1873
+ "href": "#",
2359
1874
  "label": "One more Item"
2360
1875
  },
2361
1876
  {
2362
- "url": "#",
1877
+ "href": "#",
2363
1878
  "label": "Last Item"
2364
1879
  }
2365
1880
  ]
@@ -2471,7 +1986,7 @@
2471
1986
  "id": "components-hero--text-below-image",
2472
1987
  "group": "Components/Hero",
2473
1988
  "name": "TextBelowImage",
2474
- "code": "<Hero\n buttons={[\n {\n icon: 'arrow-down',\n label: 'Explore further',\n url: '#'\n }\n ]}\n headline=\"Welcome to Our Dynamic Workplace\"\n height=\"default\"\n highlightText\n image={{\n indent: 'none',\n src: 'https://picsum.photos/seed/kdsvisual/640/270',\n srcDesktop: 'img/colleagues-work-office-using-computers-looking-aside.png',\n srcMobile: 'img/colleagues-work-office-using-computers-looking-aside.png',\n srcTablet: 'img/colleagues-work-office-using-computers-looking-aside.png'\n }}\n overlay\n sub=\"Where Creativity Meets Innovation\"\n text=\"Experience the perfect blend of creativity, innovation, and productivity in our modern office environment.\"\n textPosition=\"below\"\n/>",
1989
+ "code": "<Hero\n buttons={[\n {\n icon: 'arrow-down',\n label: 'Explore further',\n target: '#'\n }\n ]}\n headline=\"Welcome to Our Dynamic Workplace\"\n height=\"default\"\n highlightText\n image={{\n indent: 'none',\n src: 'https://picsum.photos/seed/kdsvisual/640/270',\n srcDesktop: 'img/colleagues-work-office-using-computers-looking-aside.png',\n srcMobile: 'img/colleagues-work-office-using-computers-looking-aside.png',\n srcTablet: 'img/colleagues-work-office-using-computers-looking-aside.png'\n }}\n overlay\n sub=\"Where Creativity Meets Innovation\"\n text=\"Experience the perfect blend of creativity, innovation, and productivity in our modern office environment.\"\n textPosition=\"below\"\n/>",
2475
1990
  "args": {
2476
1991
  "highlightText": true,
2477
1992
  "colorNeutral": false,
@@ -2481,7 +1996,7 @@
2481
1996
  {
2482
1997
  "label": "Explore further",
2483
1998
  "icon": "arrow-down",
2484
- "url": "#"
1999
+ "target": "#"
2485
2000
  }
2486
2001
  ],
2487
2002
  "overlay": true,
@@ -2493,7 +2008,6 @@
2493
2008
  "indent": "none"
2494
2009
  },
2495
2010
  "textPosition": "below",
2496
- "inverted": false,
2497
2011
  "headline": "Welcome to Our Dynamic Workplace",
2498
2012
  "sub": "Where Creativity Meets Innovation",
2499
2013
  "text": "Experience the perfect blend of creativity, innovation, and productivity in our modern office environment."
@@ -2504,7 +2018,7 @@
2504
2018
  "id": "components-hero--text-on-image-with-overlay",
2505
2019
  "group": "Components/Hero",
2506
2020
  "name": "TextOnImageWithOverlay",
2507
- "code": "<Hero\n buttons={[\n {\n icon: 'person',\n label: 'Meet Us',\n url: '#'\n },\n {\n icon: 'date',\n label: 'Schedule a Meeting',\n url: '#'\n }\n ]}\n colorNeutral\n headline=\"Master Scalable Solutions\"\n height=\"fullImage\"\n image={{\n indent: 'none',\n src: 'https://picsum.photos/seed/kdsvisual/640/270',\n srcDesktop: 'img/top-view-desk-with-keyboard-drawing-pad.png',\n srcMobile: 'img/top-view-desk-with-keyboard-drawing-pad.png',\n srcTablet: 'img/top-view-desk-with-keyboard-drawing-pad.png'\n }}\n overlay\n text=\"Harness our expertise in crafting scalable and robust applications using cutting-edge technologies.\"\n textPosition=\"center\"\n/>",
2021
+ "code": "<Hero\n buttons={[\n {\n icon: 'person',\n label: 'Meet Us',\n target: '#'\n },\n {\n icon: 'date',\n label: 'Schedule a Meeting',\n target: '#'\n }\n ]}\n colorNeutral\n headline=\"Master Scalable Solutions\"\n height=\"fullImage\"\n image={{\n indent: 'none',\n src: 'https://picsum.photos/seed/kdsvisual/640/270',\n srcDesktop: 'img/top-view-desk-with-keyboard-drawing-pad.png',\n srcMobile: 'img/top-view-desk-with-keyboard-drawing-pad.png',\n srcTablet: 'img/top-view-desk-with-keyboard-drawing-pad.png'\n }}\n overlay\n text=\"Harness our expertise in crafting scalable and robust applications using cutting-edge technologies.\"\n textPosition=\"center\"\n/>",
2508
2022
  "args": {
2509
2023
  "highlightText": false,
2510
2024
  "colorNeutral": true,
@@ -2514,12 +2028,12 @@
2514
2028
  {
2515
2029
  "label": "Meet Us",
2516
2030
  "icon": "person",
2517
- "url": "#"
2031
+ "target": "#"
2518
2032
  },
2519
2033
  {
2520
2034
  "label": "Schedule a Meeting",
2521
2035
  "icon": "date",
2522
- "url": "#"
2036
+ "target": "#"
2523
2037
  }
2524
2038
  ],
2525
2039
  "overlay": true,
@@ -2531,7 +2045,6 @@
2531
2045
  "indent": "none"
2532
2046
  },
2533
2047
  "textPosition": "center",
2534
- "inverted": false,
2535
2048
  "headline": "Master Scalable Solutions",
2536
2049
  "text": "Harness our expertise in crafting scalable and robust applications using cutting-edge technologies."
2537
2050
  },
@@ -2541,7 +2054,7 @@
2541
2054
  "id": "components-hero--text-box-on-full-screen",
2542
2055
  "group": "Components/Hero",
2543
2056
  "name": "TextBoxOnFullScreen",
2544
- "code": "<Hero\n buttons={[\n {\n icon: 'arrow-right',\n label: 'Discover More',\n url: '#'\n },\n {\n icon: 'phone',\n label: 'Reach Out',\n url: '#'\n }\n ]}\n headline=\"Discover Our Design System\"\n height=\"fullScreen\"\n image={{\n indent: 'none',\n src: 'https://picsum.photos/seed/kdsvisual/640/270',\n srcDesktop: 'img/people-brainstorming-work-meeting.png',\n srcMobile: 'img/people-brainstorming-work-meeting.png',\n srcTablet: 'img/people-brainstorming-work-meeting.png'\n }}\n sub=\"Scalable. Efficient. Seamless.\"\n text=\"Our design system provides a seamless and efficient framework for building scalable applications. Experience unprecedented speed and scalability with our Headless CMS powered websites, web apps & composable architecture.\"\n textPosition=\"left\"\n textbox\n/>",
2057
+ "code": "<Hero\n buttons={[\n {\n icon: 'arrow-right',\n label: 'Discover More',\n target: '#'\n },\n {\n icon: 'phone',\n label: 'Reach Out',\n target: '#'\n }\n ]}\n headline=\"Discover Our Design System\"\n height=\"fullScreen\"\n image={{\n indent: 'none',\n src: 'https://picsum.photos/seed/kdsvisual/640/270',\n srcDesktop: 'img/people-brainstorming-work-meeting.png',\n srcMobile: 'img/people-brainstorming-work-meeting.png',\n srcTablet: 'img/people-brainstorming-work-meeting.png'\n }}\n sub=\"Scalable. Efficient. Seamless.\"\n text=\"Our design system provides a seamless and efficient framework for building scalable applications. Experience unprecedented speed and scalability with our Headless CMS powered websites, web apps & composable architecture.\"\n textPosition=\"left\"\n textbox\n/>",
2545
2058
  "args": {
2546
2059
  "highlightText": false,
2547
2060
  "colorNeutral": false,
@@ -2551,12 +2064,12 @@
2551
2064
  {
2552
2065
  "label": "Discover More",
2553
2066
  "icon": "arrow-right",
2554
- "url": "#"
2067
+ "target": "#"
2555
2068
  },
2556
2069
  {
2557
2070
  "label": "Reach Out",
2558
2071
  "icon": "phone",
2559
- "url": "#"
2072
+ "target": "#"
2560
2073
  }
2561
2074
  ],
2562
2075
  "overlay": false,
@@ -2568,7 +2081,6 @@
2568
2081
  "indent": "none"
2569
2082
  },
2570
2083
  "textPosition": "left",
2571
- "inverted": false,
2572
2084
  "headline": "Discover Our Design System",
2573
2085
  "sub": "Scalable. Efficient. Seamless.",
2574
2086
  "text": "Our design system provides a seamless and efficient framework for building scalable applications. Experience unprecedented speed and scalability with our Headless CMS powered websites, web apps & composable architecture."
@@ -2622,7 +2134,7 @@
2622
2134
  "id": "components-image-story--sticky-image-next-to-scrolling-text",
2623
2135
  "group": "Components/Image Story",
2624
2136
  "name": "StickyImageNextToScrollingText",
2625
- "code": "<ImageStory\n buttons={[\n {\n disabled: false,\n label: 'Learn More',\n size: 'medium',\n url: '#',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Contact Us',\n size: 'medium',\n url: '#',\n variant: 'secondary'\n }\n ]}\n headline=\"The Sanity & Next.js Experts\"\n image={{\n aspectRatio: 'unset',\n src: 'img/full-shot-different-people-working-together.png',\n vAlign: 'top'\n }}\n largeHeadline\n layout=\"imageLeft\"\n sub=\"Subheadline\"\n text=\"\nHere at Systemics, we bring a range of design system services that can make a difference:\n\n### 1. Design System Consulting\nLet's work side by side to shape a design system strategy that aligns perfectly with your goals. It's not just about tools; it's about guiding principles, stakeholder management und making the right decisions at the right time.\n\n### 2. Design System Creation & Development\nWe'll bring your design system from concept to production, giving you consistent and engaging user experiences across different platforms. We will work together with your digital teams to transfer all complex Figma ideas into code using kickstartDS.\n\n### 3. Headless CMS & Websites\nWe leverage the power of headless CMSs to provide scalable, flexible, and versatile websites that drive your online presence.\n\n### 4. Design System Training\nWe empower your digital teams with the knowledge and skills to manage and evolve your design system effectively.\n\nReady to make your digital journey exceptional?\n \"\n textAlign=\"left\"\n/>",
2137
+ "code": "<ImageStory\n buttons={[\n {\n disabled: false,\n label: 'Learn More',\n size: 'medium',\n target: '#',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Contact Us',\n size: 'medium',\n target: '#',\n variant: 'secondary'\n }\n ]}\n headline=\"The Sanity & Next.js Experts\"\n image={{\n aspectRatio: 'unset',\n src: 'img/full-shot-different-people-working-together.png',\n vAlign: 'top'\n }}\n largeHeadline\n layout=\"imageLeft\"\n sub=\"Subheadline\"\n text=\"\nHere at Systemics, we bring a range of design system services that can make a difference:\n\n### 1. Design System Consulting\nLet's work side by side to shape a design system strategy that aligns perfectly with your goals. It's not just about tools; it's about guiding principles, stakeholder management und making the right decisions at the right time.\n\n### 2. Design System Creation & Development\nWe'll bring your design system from concept to production, giving you consistent and engaging user experiences across different platforms. We will work together with your digital teams to transfer all complex Figma ideas into code using kickstartDS.\n\n### 3. Headless CMS & Websites\nWe leverage the power of headless CMSs to provide scalable, flexible, and versatile websites that drive your online presence.\n\n### 4. Design System Training\nWe empower your digital teams with the knowledge and skills to manage and evolve your design system effectively.\n\nReady to make your digital journey exceptional?\n \"\n textAlign=\"left\"\n/>",
2626
2138
  "args": {
2627
2139
  "headline": "The Sanity & Next.js Experts",
2628
2140
  "largeHeadline": true,
@@ -2635,14 +2147,14 @@
2635
2147
  "variant": "secondary",
2636
2148
  "size": "medium",
2637
2149
  "disabled": false,
2638
- "url": "#"
2150
+ "target": "#"
2639
2151
  },
2640
2152
  {
2641
2153
  "label": "Contact Us",
2642
2154
  "variant": "secondary",
2643
2155
  "size": "medium",
2644
2156
  "disabled": false,
2645
- "url": "#"
2157
+ "target": "#"
2646
2158
  }
2647
2159
  ],
2648
2160
  "image": {
@@ -2993,11 +2505,11 @@
2993
2505
  "id": "layout-section--cards",
2994
2506
  "group": "Layout/Section",
2995
2507
  "name": "Cards",
2996
- "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 transition=\"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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n label=\"Freshest Fruit\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n</Section>",
2508
+ "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>",
2997
2509
  "args": {
2998
2510
  "width": "default",
2511
+ "style": "default",
2999
2512
  "backgroundColor": "default",
3000
- "transition": "default",
3001
2513
  "spotlight": false,
3002
2514
  "spaceBefore": "default",
3003
2515
  "spaceAfter": "default",
@@ -3024,11 +2536,11 @@
3024
2536
  "id": "layout-section--slider",
3025
2537
  "group": "Layout/Section",
3026
2538
  "name": "Slider",
3027
- "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 transition=\"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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n label=\"Freshest Fruit\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Transformation Love Story\"\n image=\"/img/showcases/comp_tfe01.jpg\"\n layout=\"row\"\n text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n label=\"Freshest Fruit\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Transformation Love Story\"\n image=\"/img/showcases/comp_tfe01.jpg\"\n layout=\"row\"\n text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n label=\"Freshest Fruit\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Transformation Love Story\"\n image=\"/img/showcases/comp_tfe01.jpg\"\n layout=\"row\"\n text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n label=\"Freshest Fruit\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n</Section>",
2539
+ "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>",
3028
2540
  "args": {
3029
2541
  "width": "default",
2542
+ "style": "default",
3030
2543
  "backgroundColor": "default",
3031
- "transition": "default",
3032
2544
  "spotlight": false,
3033
2545
  "spaceBefore": "default",
3034
2546
  "spaceAfter": "default",
@@ -3054,11 +2566,11 @@
3054
2566
  "id": "layout-section--inverted",
3055
2567
  "group": "Layout/Section",
3056
2568
  "name": "Inverted",
3057
- "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 transition=\"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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n label=\"Freshest Fruit\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n</Section>",
2569
+ "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>",
3058
2570
  "args": {
3059
2571
  "width": "default",
2572
+ "style": "default",
3060
2573
  "backgroundColor": "default",
3061
- "transition": "default",
3062
2574
  "spotlight": false,
3063
2575
  "spaceBefore": "default",
3064
2576
  "spaceAfter": "default",
@@ -3085,11 +2597,11 @@
3085
2597
  "id": "layout-section--background-image",
3086
2598
  "group": "Layout/Section",
3087
2599
  "name": "BackgroundImage",
3088
- "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 transition=\"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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n label=\"Freshest Fruit\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n</Section>",
2600
+ "code": "<Section\n backgroundColor=\"default\"\n backgroundImage=\"/img/bg_dot-carpet-blue.svg\"\n content={{\n align: 'center',\n gutter: 'default',\n mode: 'default',\n tileWidth: 'default',\n width: 'unset'\n }}\n headline={{\n large: false,\n sub: 'We can create something shining for you too!',\n text: 'Happy Customers Showcases',\n width: 'unset'\n }}\n spaceAfter=\"default\"\n spaceBefore=\"default\"\n style=\"default\"\n 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>",
3089
2601
  "args": {
3090
2602
  "width": "default",
2603
+ "style": "default",
3091
2604
  "backgroundColor": "default",
3092
- "transition": "default",
3093
2605
  "spotlight": false,
3094
2606
  "spaceBefore": "default",
3095
2607
  "spaceAfter": "default",
@@ -3117,11 +2629,11 @@
3117
2629
  "id": "layout-section--spotlight",
3118
2630
  "group": "Layout/Section",
3119
2631
  "name": "Spotlight",
3120
- "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 transition=\"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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n label=\"Freshest Fruit\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n</Section>",
2632
+ "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>",
3121
2633
  "args": {
3122
2634
  "width": "default",
2635
+ "style": "default",
3123
2636
  "backgroundColor": "default",
3124
- "transition": "default",
3125
2637
  "spotlight": true,
3126
2638
  "spaceBefore": "default",
3127
2639
  "spaceAfter": "default",
@@ -3148,11 +2660,11 @@
3148
2660
  "id": "layout-section--stagelights",
3149
2661
  "group": "Layout/Section",
3150
2662
  "name": "Stagelights",
3151
- "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 transition=\"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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n label=\"Freshest Fruit\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n</Section>",
2663
+ "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>",
3152
2664
  "args": {
3153
2665
  "width": "default",
2666
+ "style": "stagelights",
3154
2667
  "backgroundColor": "default",
3155
- "transition": "default",
3156
2668
  "spotlight": false,
3157
2669
  "spaceBefore": "default",
3158
2670
  "spaceAfter": "default",
@@ -3172,8 +2684,7 @@
3172
2684
  "mode": "list",
3173
2685
  "tileWidth": "default"
3174
2686
  },
3175
- "buttons": [],
3176
- "style": "stagelights"
2687
+ "buttons": []
3177
2688
  },
3178
2689
  "screenshot": "img/screenshots/layout-section--stagelights.png"
3179
2690
  },
@@ -3181,11 +2692,11 @@
3181
2692
  "id": "layout-section--accent-background",
3182
2693
  "group": "Layout/Section",
3183
2694
  "name": "AccentBackground",
3184
- "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 transition=\"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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n label=\"Freshest Fruit\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n</Section>",
2695
+ "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>",
3185
2696
  "args": {
3186
2697
  "width": "default",
2698
+ "style": "default",
3187
2699
  "backgroundColor": "accent",
3188
- "transition": "default",
3189
2700
  "spotlight": false,
3190
2701
  "spaceBefore": "default",
3191
2702
  "spaceAfter": "default",
@@ -3213,11 +2724,11 @@
3213
2724
  "id": "layout-section--bold-background",
3214
2725
  "group": "Layout/Section",
3215
2726
  "name": "BoldBackground",
3216
- "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 transition=\"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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n label=\"Freshest Fruit\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n</Section>",
2727
+ "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>",
3217
2728
  "args": {
3218
2729
  "width": "default",
2730
+ "style": "default",
3219
2731
  "backgroundColor": "bold",
3220
- "transition": "default",
3221
2732
  "spotlight": false,
3222
2733
  "spaceBefore": "default",
3223
2734
  "spaceAfter": "default",
@@ -3245,11 +2756,11 @@
3245
2756
  "id": "layout-section--colorful-gradient",
3246
2757
  "group": "Layout/Section",
3247
2758
  "name": "ColorfulGradient",
3248
- "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 transition=\"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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n label=\"Freshest Fruit\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n</Section>",
2759
+ "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>",
3249
2760
  "args": {
3250
2761
  "width": "default",
2762
+ "style": "horizontalGradient",
3251
2763
  "backgroundColor": "default",
3252
- "transition": "default",
3253
2764
  "spotlight": false,
3254
2765
  "spaceBefore": "default",
3255
2766
  "spaceAfter": "default",
@@ -3269,8 +2780,7 @@
3269
2780
  "mode": "list",
3270
2781
  "tileWidth": "default"
3271
2782
  },
3272
- "buttons": [],
3273
- "style": "horizontalGradient"
2783
+ "buttons": []
3274
2784
  },
3275
2785
  "screenshot": "img/screenshots/layout-section--colorful-gradient.png"
3276
2786
  },
@@ -3278,11 +2788,11 @@
3278
2788
  "id": "layout-section--with-buttons",
3279
2789
  "group": "Layout/Section",
3280
2790
  "name": "WithButtons",
3281
- "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 transition=\"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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n label=\"Freshest Fruit\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n</Section>",
2791
+ "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>",
3282
2792
  "args": {
3283
2793
  "width": "default",
2794
+ "style": "default",
3284
2795
  "backgroundColor": "default",
3285
- "transition": "default",
3286
2796
  "spotlight": false,
3287
2797
  "spaceBefore": "default",
3288
2798
  "spaceAfter": "default",
@@ -3325,11 +2835,11 @@
3325
2835
  "id": "layout-section--tile-layout",
3326
2836
  "group": "Layout/Section",
3327
2837
  "name": "TileLayout",
3328
- "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 transition=\"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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n</Section>",
2838
+ "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>",
3329
2839
  "args": {
3330
2840
  "width": "max",
2841
+ "style": "default",
3331
2842
  "backgroundColor": "default",
3332
- "transition": "default",
3333
2843
  "spotlight": false,
3334
2844
  "spaceBefore": "default",
3335
2845
  "spaceAfter": "default",
@@ -3357,11 +2867,11 @@
3357
2867
  "id": "layout-section--flex-layout",
3358
2868
  "group": "Layout/Section",
3359
2869
  "name": "FlexLayout",
3360
- "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 transition=\"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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n</Section>",
2870
+ "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>",
3361
2871
  "args": {
3362
2872
  "width": "max",
2873
+ "style": "default",
3363
2874
  "backgroundColor": "default",
3364
- "transition": "default",
3365
2875
  "spotlight": false,
3366
2876
  "spaceBefore": "default",
3367
2877
  "spaceAfter": "default",
@@ -3389,11 +2899,11 @@
3389
2899
  "id": "layout-section--list-layout",
3390
2900
  "group": "Layout/Section",
3391
2901
  "name": "ListLayout",
3392
- "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 transition=\"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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n label=\"Freshest Fruit\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'Go to Page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n</Section>",
2902
+ "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>",
3393
2903
  "args": {
3394
2904
  "width": "default",
2905
+ "style": "default",
3395
2906
  "backgroundColor": "default",
3396
- "transition": "default",
3397
2907
  "spotlight": false,
3398
2908
  "spaceBefore": "default",
3399
2909
  "spaceAfter": "default",
@@ -3421,7 +2931,7 @@
3421
2931
  "id": "layout-slider--with-arrows",
3422
2932
  "group": "Layout/Slider",
3423
2933
  "name": "WithArrows",
3424
- "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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'View page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n imageRatio=\"unset\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'View page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n imageRatio=\"unset\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n</No Display Name>",
2934
+ "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>",
3425
2935
  "args": {
3426
2936
  "autoplay": false,
3427
2937
  "nav": true,
@@ -3437,7 +2947,7 @@
3437
2947
  "id": "layout-slider--with-teased-neighbours",
3438
2948
  "group": "Layout/Slider",
3439
2949
  "name": "WithTeasedNeighbours",
3440
- "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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'View page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n imageRatio=\"unset\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'View page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n imageRatio=\"unset\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n</No Display Name>",
2950
+ "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>",
3441
2951
  "args": {
3442
2952
  "autoplay": false,
3443
2953
  "nav": true,
@@ -3453,7 +2963,7 @@
3453
2963
  "id": "layout-slider--with-nav",
3454
2964
  "group": "Layout/Slider",
3455
2965
  "name": "WithNav",
3456
- "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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'View page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n imageRatio=\"unset\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'View page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n imageRatio=\"unset\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n</No Display Name>",
2966
+ "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>",
3457
2967
  "args": {
3458
2968
  "autoplay": false,
3459
2969
  "nav": true,
@@ -3469,7 +2979,7 @@
3469
2979
  "id": "layout-slider--with-autoplay",
3470
2980
  "group": "Layout/Slider",
3471
2981
  "name": "WithAutoplay",
3472
- "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 text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'View page'\n }}\n headline=\"Speed and Scale\"\n image=\"/img/showcases/comp_audio01.jpg\"\n imageRatio=\"unset\"\n layout=\"row\"\n text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n url=\"#\"\n />\n <TeaserCard\n button={{\n hidden: true,\n label: 'View page'\n }}\n headline=\"Saving Time and Money\"\n image=\"/img/showcases/comp_eco01.jpg\"\n imageRatio=\"unset\"\n layout=\"row\"\n text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n url=\"#\"\n />\n</No Display Name>",
2982
+ "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>",
3473
2983
  "args": {
3474
2984
  "autoplay": true,
3475
2985
  "nav": true,
@@ -3532,7 +3042,7 @@
3532
3042
  "id": "components-teaser-card--product-tiles",
3533
3043
  "group": "Components/Teaser Card",
3534
3044
  "name": "ProductTiles",
3535
- "code": "<TeaserCard\n button={{\n chevron: false,\n hidden: true,\n label: 'Go to page'\n }}\n headline=\"Castaway\"\n image=\"img/logos/castaway.svg\"\n imageRatio=\"wide\"\n layout=\"stack\"\n text=\"Transforming Ideas into Code\"\n url=\"#\"\n/>",
3045
+ "code": "<TeaserCard\n button={{\n chevron: false,\n hidden: true,\n label: 'Go to page'\n }}\n headline=\"Castaway\"\n image=\"img/logos/castaway.svg\"\n imageRatio=\"wide\"\n layout=\"stack\"\n target=\"#\"\n text=\"Transforming Ideas into Code\"\n/>",
3536
3046
  "args": {
3537
3047
  "layout": "stack",
3538
3048
  "button": {
@@ -3544,7 +3054,7 @@
3544
3054
  "headline": "Castaway",
3545
3055
  "text": "Transforming Ideas into Code",
3546
3056
  "image": "img/logos/castaway.svg",
3547
- "url": "#"
3057
+ "target": "#"
3548
3058
  },
3549
3059
  "screenshot": "img/screenshots/components-teaser-card--product-tiles.png"
3550
3060
  },
@@ -3552,7 +3062,7 @@
3552
3062
  "id": "components-teaser-card--page-navigation",
3553
3063
  "group": "Components/Teaser Card",
3554
3064
  "name": "PageNavigation",
3555
- "code": "<TeaserCard\n button={{\n chevron: false,\n hidden: false,\n label: 'Read more'\n }}\n headline=\"Design System Services\"\n image=\"img/02.jpg\"\n imageRatio=\"landscape\"\n layout=\"stack\"\n text=\"Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.\"\n url=\"#\"\n/>",
3065
+ "code": "<TeaserCard\n button={{\n chevron: false,\n hidden: false,\n label: 'Read more'\n }}\n headline=\"Design System Services\"\n image=\"img/02.jpg\"\n imageRatio=\"landscape\"\n layout=\"stack\"\n target=\"#\"\n text=\"Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.\"\n/>",
3556
3066
  "args": {
3557
3067
  "layout": "stack",
3558
3068
  "button": {
@@ -3564,7 +3074,7 @@
3564
3074
  "headline": "Design System Services",
3565
3075
  "text": "Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.",
3566
3076
  "image": "img/02.jpg",
3567
- "url": "#"
3077
+ "target": "#"
3568
3078
  },
3569
3079
  "screenshot": "img/screenshots/components-teaser-card--page-navigation.png"
3570
3080
  },
@@ -3572,7 +3082,7 @@
3572
3082
  "id": "components-teaser-card--showcase-preview",
3573
3083
  "group": "Components/Teaser Card",
3574
3084
  "name": "ShowcasePreview",
3575
- "code": "<TeaserCard\n button={{\n chevron: false,\n hidden: false,\n label: 'View showcase'\n }}\n headline=\"Transformation Love Story\"\n image=\"img/showcases/comp_tfe01.jpg\"\n imageRatio=\"wide\"\n label=\"Tech\"\n layout=\"row\"\n text=\"See how we saved TechFusions a year's worth of development time\"\n url=\"#\"\n/>",
3085
+ "code": "<TeaserCard\n button={{\n chevron: false,\n hidden: false,\n label: 'View showcase'\n }}\n headline=\"Transformation Love Story\"\n image=\"img/showcases/comp_tfe01.jpg\"\n imageRatio=\"wide\"\n label=\"Tech\"\n layout=\"row\"\n target=\"#\"\n text=\"See how we saved TechFusions a year's worth of development time\"\n/>",
3576
3086
  "args": {
3577
3087
  "layout": "row",
3578
3088
  "button": {
@@ -3585,7 +3095,7 @@
3585
3095
  "headline": "Transformation Love Story",
3586
3096
  "text": "See how we saved TechFusions a year's worth of development time",
3587
3097
  "image": "img/showcases/comp_tfe01.jpg",
3588
- "url": "#"
3098
+ "target": "#"
3589
3099
  },
3590
3100
  "screenshot": "img/screenshots/components-teaser-card--showcase-preview.png"
3591
3101
  },