@kickstartds/ds-agency-premium 1.6.43 → 1.6.44--canary.39.1363.0

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 (27) hide show
  1. package/dist/BlogOverviewProps-9f207f1c.d.ts +1 -1
  2. package/dist/BlogPostProps-6b3cff22.d.ts +1 -1
  3. package/dist/PageProps-aa29c554.d.ts +1 -1
  4. package/dist/{SectionProps-7a46a8ad.d.ts → SectionProps-1cfcf6e8.d.ts} +6 -1
  5. package/dist/components/blog-overview/blog-overview.schema.dereffed.json +9 -0
  6. package/dist/components/blog-post/blog-post.schema.dereffed.json +9 -0
  7. package/dist/components/cta/cta.css +2 -2
  8. package/dist/components/footer/footer.css +2 -2
  9. package/dist/components/header/header.css +1 -1
  10. package/dist/components/headline/headline.css +1 -1
  11. package/dist/components/hero/hero.css +5 -4
  12. package/dist/components/image-story/image-story.css +1 -1
  13. package/dist/components/logos/logos.css +2 -2
  14. package/dist/components/page/page.schema.dereffed.json +9 -0
  15. package/dist/components/page-wrapper/tokens.css +12 -12
  16. package/dist/components/presets.json +32 -14
  17. package/dist/components/section/index.d.ts +1 -1
  18. package/dist/components/section/section.css +31 -23
  19. package/dist/components/section/section.schema.dereffed.json +9 -0
  20. package/dist/components/section/section.schema.json +7 -0
  21. package/dist/components/split/split.css +3 -3
  22. package/dist/components/video-curtain/video-curtain.css +3 -2
  23. package/dist/global.css +12 -11
  24. package/dist/tokens/themes.css +4 -4
  25. package/dist/tokens/tokens.css +12 -12
  26. package/dist/tokens/tokens.js +12 -12
  27. package/package.json +1 -1
package/dist/BlogOverviewProps-9f207f1c.d.ts CHANGED
@@ -3,7 +3,7 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { SectionProps } from "./SectionProps-7a46a8ad.js";
6
+ import { SectionProps } from "./SectionProps-1cfcf6e8.js";
7
7
  import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
8
8
  import { CtaProps } from "./CtaProps-93230a76.js";
9
9
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
package/dist/BlogPostProps-6b3cff22.d.ts CHANGED
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
7
7
  import { BlogAsideProps } from "./BlogAsideProps-d9decb7c.js";
8
- import { SectionProps } from "./SectionProps-7a46a8ad.js";
8
+ import { SectionProps } from "./SectionProps-1cfcf6e8.js";
9
9
  import { CtaProps } from "./CtaProps-93230a76.js";
10
10
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
11
11
  /**
package/dist/PageProps-aa29c554.d.ts CHANGED
@@ -3,7 +3,7 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { SectionProps } from "./SectionProps-7a46a8ad.js";
6
+ import { SectionProps } from "./SectionProps-1cfcf6e8.js";
7
7
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
8
8
  /**
9
9
  * Collection of sections (with their contents) to render on the page
package/dist/{SectionProps-7a46a8ad.d.ts → SectionProps-1cfcf6e8.d.ts} RENAMED
@@ -33,6 +33,10 @@ type Style = "stagelights" | "horizontalGradient" | "verticalGradient" | "accent
33
33
  * Color of background
34
34
  */
35
35
  type Style1 = "default" | "accent" | "bold";
36
+ /**
37
+ * Background image for the whole section
38
+ */
39
+ type BackgroundImage = string;
36
40
  /**
37
41
  * Show spotlight behind cursor
38
42
  */
@@ -116,6 +120,7 @@ interface SectionProps {
116
120
  width?: Width;
117
121
  style?: Style;
118
122
  backgroundColor?: Style1;
123
+ backgroundImage?: BackgroundImage;
119
124
  spotlight?: Spotlight;
120
125
  spaceBefore?: SpaceBefore;
121
126
  spaceAfter?: SpaceAfter;
@@ -140,4 +145,4 @@ interface SectionProps {
140
145
  components?: Content;
141
146
  buttons?: Buttons;
142
147
  }
143
- export { Width, Style, Style1, Spotlight, SpaceBefore, SpaceAfter, Inverted, HeaderSpacing, Headline, LargeHeadline, HeadlineWidth, HeadlineTextAlignment, HeadlineAlignment, Subheadline, SwitchHeadlineOrder, ContentWidth, ContentAlignment, Gutter, Mode, TileWidth, Content, Buttons, SectionProps };
148
+ export { Width, Style, Style1, BackgroundImage, Spotlight, SpaceBefore, SpaceAfter, Inverted, HeaderSpacing, Headline, LargeHeadline, HeadlineWidth, HeadlineTextAlignment, HeadlineAlignment, Subheadline, SwitchHeadlineOrder, ContentWidth, ContentAlignment, Gutter, Mode, TileWidth, Content, Buttons, SectionProps };
package/dist/components/blog-overview/blog-overview.schema.dereffed.json CHANGED
@@ -58,6 +58,15 @@
58
58
  ],
59
59
  "default": "default"
60
60
  },
61
+ "backgroundImage": {
62
+ "title": "Background image",
63
+ "description": "Background image for the whole section",
64
+ "type": "string",
65
+ "format": "image",
66
+ "examples": [
67
+ "https://picsum.photos/seed/visual/1920/600"
68
+ ]
69
+ },
61
70
  "spotlight": {
62
71
  "type": "boolean",
63
72
  "title": "Spotlight",
package/dist/components/blog-post/blog-post.schema.dereffed.json CHANGED
@@ -334,6 +334,15 @@
334
334
  ],
335
335
  "default": "default"
336
336
  },
337
+ "backgroundImage": {
338
+ "title": "Background image",
339
+ "description": "Background image for the whole section",
340
+ "type": "string",
341
+ "format": "image",
342
+ "examples": [
343
+ "https://picsum.photos/seed/visual/1920/600"
344
+ ]
345
+ },
337
346
  "spotlight": {
338
347
  "type": "boolean",
339
348
  "title": "Spotlight",
package/dist/components/cta/cta.css CHANGED
@@ -100,7 +100,7 @@
100
100
  }
101
101
  .dsa-cta.c-storytelling .c-storytelling__box:only-child {
102
102
  width: 100%;
103
- max-width: calc(var(--l-section--content-width-default) - var(--dsa-content--spacing) * var(--c-storytelling--padding-ratio));
103
+ max-width: calc(var(--dsa-content--width_default) - var(--dsa-content--spacing) * var(--c-storytelling--padding-ratio));
104
104
  }
105
105
  .dsa-cta.c-storytelling > .c-storytelling__image {
106
106
  padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing));
@@ -111,7 +111,7 @@
111
111
  }
112
112
  .dsa-cta.c-storytelling > .c-storytelling__image,
113
113
  .dsa-cta.c-storytelling > .c-storytelling__box {
114
- max-width: calc(var(--l-section--content-width-wide) / 2);
114
+ max-width: calc(var(--dsa-content--width_wide) / 2);
115
115
  }
116
116
  .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__image,
117
117
  .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__box {
package/dist/components/footer/footer.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .dsa-footer {
2
2
  --dsa-footer--background-color: var(--ks-background-color-default);
3
3
  --dsa-footer--border-top: 1px solid var(--ks-border-color-default);
4
- --dsa-footer--max-width: var(--l-section--content-width-wide);
4
+ --dsa-footer--max-width: var(--dsa-content--width_wide);
5
5
  --dsa-footer--gap-vertical: var(--ks-spacing-stack-m);
6
6
  --dsa-footer__byline--font: var(--ks-font-copy-xs);
7
7
  --dsa-footer__byline--color: var(--ks-text-color-default);
@@ -29,7 +29,7 @@
29
29
  .dsa-footer__content {
30
30
  padding: var(--l-section--space-small) var(--dsa-content--spacing);
31
31
  border-top: var(--dsa-footer--border-top, 1px solid var(--ks-border-color-default));
32
- max-width: var(--dsa-footer--max-width, var(--l-section--content-width-wide));
32
+ max-width: var(--dsa-footer--max-width, var(--dsa-content--width_wide));
33
33
  width: 100%;
34
34
  margin: auto;
35
35
  display: flex;
package/dist/components/header/header.css CHANGED
@@ -14,7 +14,7 @@
14
14
  }
15
15
 
16
16
  .dsa-header {
17
- --dsa-header--max-width: var(--l-section--content-width-max);
17
+ --dsa-header--max-width: var(--dsa-content--width_max);
18
18
  --dsa-header--background: var(--ks-background-color-default);
19
19
  --dsa-header_floating--background: linear-gradient(var(--ks-color-bg), transparent);
20
20
  --dsa-header__logo--height: var(--dsa-logo--height);
package/dist/components/headline/headline.css CHANGED
@@ -113,7 +113,7 @@
113
113
  .dsa-headline .dsa-headline__subheadline {
114
114
  font: var(--subheadline--font);
115
115
  margin: 0;
116
- max-width: var(--l-section--content-width-default);
116
+ max-width: var(--dsa-content--width_default);
117
117
  color: var(--dsa-headline__subheadline--color, var(--ks-text-color-primary));
118
118
  font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-semi-bold));
119
119
  }
package/dist/components/hero/hero.css CHANGED
@@ -14,9 +14,10 @@
14
14
  --dsa-hero__copy--font: var(--dsa-rich-text--font);
15
15
  --dsa-hero_highlight-text__copy--font: var(--ks-font-copy-l);
16
16
  --dsa-hero_color-neutral__copy--color: var(--ks-text-color-default);
17
+ --dsa-hero__textbox--background-color: var(--ks-color-bg-alpha-2);
17
18
  --dsa-hero__textbox--border-radius: var(--ks-border-radius-surface);
19
+ --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
18
20
  --dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
19
- --dsa-hero__textbox--background-color: var(--ks-color-bg-alpha-2);
20
21
  --dsa-hero__overlay--background: linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%);
21
22
  }
22
23
  @container visual (min-width: 640px) {
@@ -81,7 +82,7 @@
81
82
  );
82
83
  }
83
84
  .c-visual.dsa-hero .c-visual__box {
84
- --c-visual_box--max-width: 50rem;
85
+ --c-visual_box--max-width: var(--dsa-hero__textbox--max-width, var(--dsa-content--width_narrow));
85
86
  }
86
87
  }
87
88
 
@@ -103,7 +104,7 @@
103
104
  padding: var(--c-visual_box--padding);
104
105
  }
105
106
  .c-visual.dsa-hero .c-visual__content--indent {
106
- max-width: var(--l-section--content-width-wide);
107
+ max-width: var(--dsa-content--width_wide);
107
108
  }
108
109
  @container visual (min-width: 640px) {
109
110
  .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media {
@@ -118,7 +119,7 @@
118
119
  position: relative;
119
120
  }
120
121
  .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content .c-visual__box {
121
- --c-visual_box--max-width: var(--l-section--content-width-default);
122
+ --c-visual_box--max-width: var(--dsa-content--width_default);
122
123
  }
123
124
  @container visual (min-width: 640px) {
124
125
  .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image {
package/dist/components/image-story/image-story.css CHANGED
@@ -12,7 +12,7 @@
12
12
  --c-storytelling--vertical-padding: var(--dsa-image-story--vertical-padding, var(--ks-spacing-xl));
13
13
  }
14
14
  .c-storytelling.dsa-image-story .c-storytelling__box__content {
15
- max-width: var(--l-section--content-width-narrow);
15
+ max-width: var(--dsa-content--width_narrow);
16
16
  }
17
17
  .c-storytelling.dsa-image-story.c-storytelling--three-to-two img {
18
18
  aspect-ratio: 3/2;
package/dist/components/logos/logos.css CHANGED
@@ -26,7 +26,7 @@
26
26
  .dsa-logos__tagline {
27
27
  font: var(--dsa-logos__tagline--font, var(--ks-font-display-m));
28
28
  font-weight: var(--dsa-logos__tagline--font-weight, var(--dsa-headline--font-weight));
29
- max-width: var(--l-section--content-width-narrow);
29
+ max-width: var(--dsa-content--width_narrow);
30
30
  color: var(--dsa-logos__tagline--color, var(--dsa-headline--color, var(--ks-text-color-display)));
31
31
  width: 100%;
32
32
  }
@@ -40,7 +40,7 @@
40
40
  }
41
41
  .dsa-logos__cta__text {
42
42
  color: var(--ks-text-color-default);
43
- max-width: var(--l-section--content-width-narrow);
43
+ max-width: var(--dsa-content--width_narrow);
44
44
  }
45
45
  .dsa-logos__cta__text, .dsa-logos__cta__link {
46
46
  font: var(--ks-font-copy-m);
package/dist/components/page/page.schema.dereffed.json CHANGED
@@ -58,6 +58,15 @@
58
58
  ],
59
59
  "default": "default"
60
60
  },
61
+ "backgroundImage": {
62
+ "title": "Background image",
63
+ "description": "Background image for the whole section",
64
+ "type": "string",
65
+ "format": "image",
66
+ "examples": [
67
+ "https://picsum.photos/seed/visual/1920/600"
68
+ ]
69
+ },
61
70
  "spotlight": {
62
71
  "type": "boolean",
63
72
  "title": "Spotlight",
package/dist/components/page-wrapper/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 10 Dec 2024 16:01:35 GMT
3
+ * Generated on Wed, 11 Dec 2024 09:16:09 GMT
4
4
  */
5
5
  :root, [ks-theme] {
6
6
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -744,49 +744,49 @@
744
744
  --ks-spacing-xxs-bp-factor-tablet: 1.5006;
745
745
  --ks-spacing-xxs-bp-factor-laptop: 1.8383;
746
746
  --ks-spacing-xxs-bp-factor-desktop: 2.2519;
747
- --ks-spacing-xxs-bp-factor-tv: 2.35;
747
+ --ks-spacing-xxs-bp-factor-tv: 2.5;
748
748
  --ks-spacing-xs: var(--ks-spacing-xs-base);
749
749
  --ks-spacing-xs-base: 0.4309rem;
750
750
  --ks-spacing-xs-bp-factor-phone: 1.225;
751
751
  --ks-spacing-xs-bp-factor-tablet: 1.5006;
752
752
  --ks-spacing-xs-bp-factor-laptop: 1.8383;
753
753
  --ks-spacing-xs-bp-factor-desktop: 2.2519;
754
- --ks-spacing-xs-bp-factor-tv: 2.35;
754
+ --ks-spacing-xs-bp-factor-tv: 2.5;
755
755
  --ks-spacing-s: var(--ks-spacing-s-base);
756
756
  --ks-spacing-s-base: 0.614rem;
757
757
  --ks-spacing-s-bp-factor-phone: 1.225;
758
758
  --ks-spacing-s-bp-factor-tablet: 1.5006;
759
759
  --ks-spacing-s-bp-factor-laptop: 1.8383;
760
760
  --ks-spacing-s-bp-factor-desktop: 2.2519;
761
- --ks-spacing-s-bp-factor-tv: 2.35;
761
+ --ks-spacing-s-bp-factor-tv: 2.5;
762
762
  --ks-spacing-m: var(--ks-spacing-m-base);
763
763
  --ks-spacing-m-base: 0.875rem;
764
764
  --ks-spacing-m-bp-factor-phone: 1.225;
765
765
  --ks-spacing-m-bp-factor-tablet: 1.5006;
766
766
  --ks-spacing-m-bp-factor-laptop: 1.8383;
767
767
  --ks-spacing-m-bp-factor-desktop: 2.2519;
768
- --ks-spacing-m-bp-factor-tv: 2.35;
768
+ --ks-spacing-m-bp-factor-tv: 2.5;
769
769
  --ks-spacing-l: var(--ks-spacing-l-base);
770
770
  --ks-spacing-l-base: 1.2469rem;
771
771
  --ks-spacing-l-bp-factor-phone: 1.225;
772
772
  --ks-spacing-l-bp-factor-tablet: 1.5006;
773
773
  --ks-spacing-l-bp-factor-laptop: 1.8383;
774
774
  --ks-spacing-l-bp-factor-desktop: 2.2519;
775
- --ks-spacing-l-bp-factor-tv: 2.35;
775
+ --ks-spacing-l-bp-factor-tv: 2.5;
776
776
  --ks-spacing-xl: var(--ks-spacing-xl-base);
777
777
  --ks-spacing-xl-base: 1.7768rem;
778
778
  --ks-spacing-xl-bp-factor-phone: 1.225;
779
779
  --ks-spacing-xl-bp-factor-tablet: 1.5006;
780
780
  --ks-spacing-xl-bp-factor-laptop: 1.8383;
781
781
  --ks-spacing-xl-bp-factor-desktop: 2.2519;
782
- --ks-spacing-xl-bp-factor-tv: 2.35;
782
+ --ks-spacing-xl-bp-factor-tv: 2.7;
783
783
  --ks-spacing-xxl: var(--ks-spacing-xxl-base);
784
784
  --ks-spacing-xxl-base: 2.5319rem;
785
785
  --ks-spacing-xxl-bp-factor-phone: 1.225;
786
786
  --ks-spacing-xxl-bp-factor-tablet: 1.5006;
787
787
  --ks-spacing-xxl-bp-factor-laptop: 1.8383;
788
788
  --ks-spacing-xxl-bp-factor-desktop: 2.2519;
789
- --ks-spacing-xxl-bp-factor-tv: 2.35;
789
+ --ks-spacing-xxl-bp-factor-tv: 2.5;
790
790
  --ks-spacing-stack-xs: var(--ks-spacing-xs);
791
791
  --ks-spacing-stack-s: var(--ks-spacing-s);
792
792
  --ks-spacing-stack-m: var(--ks-spacing-m);
@@ -947,7 +947,7 @@
947
947
  --ks-font-size-display-bp-factor-tablet: 1.5;
948
948
  --ks-font-size-display-bp-factor-laptop: 1.5;
949
949
  --ks-font-size-display-bp-factor-desktop: 1.75;
950
- --ks-font-size-display-bp-factor-tv: 2;
950
+ --ks-font-size-display-bp-factor-tv: 2.25;
951
951
  --ks-font-size-display-xxs-base: 0.68rem;
952
952
  --ks-font-size-display-xs-base: 0.833rem;
953
953
  --ks-font-size-display-s-base: 1.0204rem;
@@ -956,7 +956,7 @@
956
956
  --ks-font-size-display-xl-base: 1.8758rem;
957
957
  --ks-font-size-display-xxl-base: 2.2978rem;
958
958
  --ks-font-size-copy-bp-factor-tablet: 1.125;
959
- --ks-font-size-copy-bp-factor-tv: 1.25;
959
+ --ks-font-size-copy-bp-factor-tv: 1.35;
960
960
  --ks-font-size-copy-xxs-base: 0.612rem;
961
961
  --ks-font-size-copy-xs-base: 0.7497rem;
962
962
  --ks-font-size-copy-s-base: 0.9184rem;
@@ -965,7 +965,7 @@
965
965
  --ks-font-size-copy-xl-base: 1.6882rem;
966
966
  --ks-font-size-copy-xxl-base: 2.068rem;
967
967
  --ks-font-size-interface-bp-factor-tablet: 1.125;
968
- --ks-font-size-interface-bp-factor-tv: 1.25;
968
+ --ks-font-size-interface-bp-factor-tv: 1.5;
969
969
  --ks-font-size-interface-xxs-base: 0.544rem;
970
970
  --ks-font-size-interface-xs-base: 0.6664rem;
971
971
  --ks-font-size-interface-s-base: 0.8163rem;
@@ -974,7 +974,7 @@
974
974
  --ks-font-size-interface-xl-base: 1.5006rem;
975
975
  --ks-font-size-interface-xxl-base: 1.8383rem;
976
976
  --ks-font-size-mono-bp-factor-tablet: 1.125;
977
- --ks-font-size-mono-bp-factor-tv: 1.25;
977
+ --ks-font-size-mono-bp-factor-tv: 1.5;
978
978
  --ks-font-size-mono-xxs-base: 0.612rem;
979
979
  --ks-font-size-mono-xs-base: 0.7497rem;
980
980
  --ks-font-size-mono-s-base: 0.9184rem;
package/dist/components/presets.json CHANGED
@@ -186,13 +186,14 @@
186
186
  "id": "pages-archetypes--blog-overview",
187
187
  "group": "Pages/Archetypes",
188
188
  "name": "BlogOverview",
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/>",
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 backgroundImage: 'https://picsum.photos/seed/visual/1920/600',\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 backgroundImage: 'https://picsum.photos/seed/visual/1920/600',\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 backgroundImage: 'https://picsum.photos/seed/visual/1920/600',\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/>",
190
190
  "args": {
191
191
  "section": [
192
192
  {
193
193
  "width": "default",
194
194
  "style": "default",
195
195
  "backgroundColor": "default",
196
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
196
197
  "spotlight": false,
197
198
  "spaceBefore": "default",
198
199
  "spaceAfter": "default",
@@ -235,6 +236,7 @@
235
236
  "width": "default",
236
237
  "style": "default",
237
238
  "backgroundColor": "default",
239
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
238
240
  "spotlight": false,
239
241
  "spaceBefore": "default",
240
242
  "spaceAfter": "default",
@@ -277,6 +279,7 @@
277
279
  "width": "default",
278
280
  "style": "default",
279
281
  "backgroundColor": "default",
282
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
280
283
  "spotlight": false,
281
284
  "spaceBefore": "default",
282
285
  "spaceAfter": "default",
@@ -505,7 +508,7 @@
505
508
  "id": "pages-archetypes--blog-post",
506
509
  "group": "Pages/Archetypes",
507
510
  "name": "BlogPost",
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/>",
511
+ "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 backgroundImage: 'https://picsum.photos/seed/visual/1920/600',\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 backgroundImage: 'https://picsum.photos/seed/visual/1920/600',\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 backgroundImage: 'https://picsum.photos/seed/visual/1920/600',\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/>",
509
512
  "args": {
510
513
  "head": {
511
514
  "date": "12/30/2022",
@@ -568,6 +571,7 @@
568
571
  "width": "default",
569
572
  "style": "default",
570
573
  "backgroundColor": "default",
574
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
571
575
  "spotlight": false,
572
576
  "spaceBefore": "default",
573
577
  "spaceAfter": "default",
@@ -610,6 +614,7 @@
610
614
  "width": "default",
611
615
  "style": "default",
612
616
  "backgroundColor": "default",
617
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
613
618
  "spotlight": false,
614
619
  "spaceBefore": "default",
615
620
  "spaceAfter": "default",
@@ -652,6 +657,7 @@
652
657
  "width": "default",
653
658
  "style": "default",
654
659
  "backgroundColor": "default",
660
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
655
661
  "spotlight": false,
656
662
  "spaceBefore": "default",
657
663
  "spaceAfter": "default",
@@ -2502,11 +2508,12 @@
2502
2508
  "id": "layout-section--cards",
2503
2509
  "group": "Layout/Section",
2504
2510
  "name": "Cards",
2505
- "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>",
2511
+ "code": "<Section\n backgroundColor=\"default\"\n backgroundImage=\"https://picsum.photos/seed/visual/1920/600\"\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>",
2506
2512
  "args": {
2507
2513
  "width": "default",
2508
2514
  "style": "default",
2509
2515
  "backgroundColor": "default",
2516
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
2510
2517
  "spotlight": false,
2511
2518
  "spaceBefore": "default",
2512
2519
  "spaceAfter": "default",
@@ -2533,11 +2540,12 @@
2533
2540
  "id": "layout-section--slider",
2534
2541
  "group": "Layout/Section",
2535
2542
  "name": "Slider",
2536
- "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>",
2543
+ "code": "<Section\n backgroundColor=\"default\"\n backgroundImage=\"https://picsum.photos/seed/visual/1920/600\"\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>",
2537
2544
  "args": {
2538
2545
  "width": "default",
2539
2546
  "style": "default",
2540
2547
  "backgroundColor": "default",
2548
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
2541
2549
  "spotlight": false,
2542
2550
  "spaceBefore": "default",
2543
2551
  "spaceAfter": "default",
@@ -2563,11 +2571,12 @@
2563
2571
  "id": "layout-section--inverted",
2564
2572
  "group": "Layout/Section",
2565
2573
  "name": "Inverted",
2566
- "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>",
2574
+ "code": "<Section\n backgroundColor=\"default\"\n backgroundImage=\"https://picsum.photos/seed/visual/1920/600\"\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>",
2567
2575
  "args": {
2568
2576
  "width": "default",
2569
2577
  "style": "default",
2570
2578
  "backgroundColor": "default",
2579
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
2571
2580
  "spotlight": false,
2572
2581
  "spaceBefore": "default",
2573
2582
  "spaceAfter": "default",
@@ -2594,11 +2603,12 @@
2594
2603
  "id": "layout-section--spotlight",
2595
2604
  "group": "Layout/Section",
2596
2605
  "name": "Spotlight",
2597
- "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>",
2606
+ "code": "<Section\n backgroundColor=\"default\"\n backgroundImage=\"https://picsum.photos/seed/visual/1920/600\"\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>",
2598
2607
  "args": {
2599
2608
  "width": "default",
2600
2609
  "style": "default",
2601
2610
  "backgroundColor": "default",
2611
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
2602
2612
  "spotlight": true,
2603
2613
  "spaceBefore": "default",
2604
2614
  "spaceAfter": "default",
@@ -2625,11 +2635,12 @@
2625
2635
  "id": "layout-section--stagelights",
2626
2636
  "group": "Layout/Section",
2627
2637
  "name": "Stagelights",
2628
- "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>",
2638
+ "code": "<Section\n backgroundColor=\"default\"\n backgroundImage=\"https://picsum.photos/seed/visual/1920/600\"\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>",
2629
2639
  "args": {
2630
2640
  "width": "default",
2631
2641
  "style": "stagelights",
2632
2642
  "backgroundColor": "default",
2643
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
2633
2644
  "spotlight": false,
2634
2645
  "spaceBefore": "default",
2635
2646
  "spaceAfter": "default",
@@ -2657,11 +2668,12 @@
2657
2668
  "id": "layout-section--accent-background",
2658
2669
  "group": "Layout/Section",
2659
2670
  "name": "AccentBackground",
2660
- "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>",
2671
+ "code": "<Section\n backgroundColor=\"accent\"\n backgroundImage=\"https://picsum.photos/seed/visual/1920/600\"\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>",
2661
2672
  "args": {
2662
2673
  "width": "default",
2663
2674
  "style": "default",
2664
2675
  "backgroundColor": "accent",
2676
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
2665
2677
  "spotlight": false,
2666
2678
  "spaceBefore": "default",
2667
2679
  "spaceAfter": "default",
@@ -2689,11 +2701,12 @@
2689
2701
  "id": "layout-section--bold-background",
2690
2702
  "group": "Layout/Section",
2691
2703
  "name": "BoldBackground",
2692
- "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>",
2704
+ "code": "<Section\n backgroundColor=\"bold\"\n backgroundImage=\"https://picsum.photos/seed/visual/1920/600\"\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>",
2693
2705
  "args": {
2694
2706
  "width": "default",
2695
2707
  "style": "default",
2696
2708
  "backgroundColor": "bold",
2709
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
2697
2710
  "spotlight": false,
2698
2711
  "spaceBefore": "default",
2699
2712
  "spaceAfter": "default",
@@ -2721,11 +2734,12 @@
2721
2734
  "id": "layout-section--colorful-gradient",
2722
2735
  "group": "Layout/Section",
2723
2736
  "name": "ColorfulGradient",
2724
- "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>",
2737
+ "code": "<Section\n backgroundColor=\"default\"\n backgroundImage=\"https://picsum.photos/seed/visual/1920/600\"\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>",
2725
2738
  "args": {
2726
2739
  "width": "default",
2727
2740
  "style": "horizontalGradient",
2728
2741
  "backgroundColor": "default",
2742
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
2729
2743
  "spotlight": false,
2730
2744
  "spaceBefore": "default",
2731
2745
  "spaceAfter": "default",
@@ -2753,11 +2767,12 @@
2753
2767
  "id": "layout-section--with-buttons",
2754
2768
  "group": "Layout/Section",
2755
2769
  "name": "WithButtons",
2756
- "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>",
2770
+ "code": "<Section\n backgroundColor=\"default\"\n backgroundImage=\"https://picsum.photos/seed/visual/1920/600\"\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>",
2757
2771
  "args": {
2758
2772
  "width": "default",
2759
2773
  "style": "default",
2760
2774
  "backgroundColor": "default",
2775
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
2761
2776
  "spotlight": false,
2762
2777
  "spaceBefore": "default",
2763
2778
  "spaceAfter": "default",
@@ -2800,11 +2815,12 @@
2800
2815
  "id": "layout-section--tile-layout",
2801
2816
  "group": "Layout/Section",
2802
2817
  "name": "TileLayout",
2803
- "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>",
2818
+ "code": "<Section\n backgroundColor=\"default\"\n backgroundImage=\"https://picsum.photos/seed/visual/1920/600\"\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>",
2804
2819
  "args": {
2805
2820
  "width": "max",
2806
2821
  "style": "default",
2807
2822
  "backgroundColor": "default",
2823
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
2808
2824
  "spotlight": false,
2809
2825
  "spaceBefore": "default",
2810
2826
  "spaceAfter": "default",
@@ -2832,11 +2848,12 @@
2832
2848
  "id": "layout-section--flex-layout",
2833
2849
  "group": "Layout/Section",
2834
2850
  "name": "FlexLayout",
2835
- "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>",
2851
+ "code": "<Section\n backgroundColor=\"default\"\n backgroundImage=\"https://picsum.photos/seed/visual/1920/600\"\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>",
2836
2852
  "args": {
2837
2853
  "width": "max",
2838
2854
  "style": "default",
2839
2855
  "backgroundColor": "default",
2856
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
2840
2857
  "spotlight": false,
2841
2858
  "spaceBefore": "default",
2842
2859
  "spaceAfter": "default",
@@ -2864,11 +2881,12 @@
2864
2881
  "id": "layout-section--list-layout",
2865
2882
  "group": "Layout/Section",
2866
2883
  "name": "ListLayout",
2867
- "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>",
2884
+ "code": "<Section\n backgroundColor=\"default\"\n backgroundImage=\"https://picsum.photos/seed/visual/1920/600\"\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>",
2868
2885
  "args": {
2869
2886
  "width": "default",
2870
2887
  "style": "default",
2871
2888
  "backgroundColor": "default",
2889
+ "backgroundImage": "https://picsum.photos/seed/visual/1920/600",
2872
2890
  "spotlight": false,
2873
2891
  "spaceBefore": "default",
2874
2892
  "spaceAfter": "default",
package/dist/components/section/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { HTMLAttributes, FC, PropsWithChildren } from "react";
3
- import { SectionProps } from "../../SectionProps-7a46a8ad.js";
3
+ import { SectionProps } from "../../SectionProps-1cfcf6e8.js";
4
4
  declare const SectionContextDefault: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
5
5
  declare const SectionContext: import("react").Context<import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>>;
6
6
  declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
package/dist/components/section/section.css CHANGED
@@ -1,3 +1,8 @@
1
+ .l-container--section {
2
+ /* stylelint-disable-next-line property-no-unknown */
3
+ container-name: section;
4
+ }
5
+
1
6
  .dsa-section {
2
7
  --dsa-section__col--min-width: var(--dsa-section_tile-width--default);
3
8
  --dsa-section__col--max-width: 1fr;
@@ -6,16 +11,16 @@
6
11
  --dsa-section--space_small: calc(var(--ks-spacing-xxl) / 2);
7
12
  --dsa-section__tile--width_smallest: 14rem;
8
13
  --dsa-section__tile--width_default: 18rem;
9
- --dsa-section__tile--width_medium: var(--l-section--content-width-narrow);
10
- --dsa-section__tile--width_large: var(--l-section--content-width-default);
11
- --dsa-section__tile--width_largest: var(--l-section--content-width-wide);
14
+ --dsa-section__tile--width_medium: var(--dsa-content-width_narrow);
15
+ --dsa-section__tile--width_large: var(--dsa-content-width_default);
16
+ --dsa-section__tile--width_largest: var(--dsa-content-width_wide);
12
17
  --dsa-section--gutter_small: var(--ks-spacing-xs);
13
18
  --dsa-section--gutter_default: var(--ks-spacing-m);
14
19
  --dsa-section--gutter_large: var(--ks-spacing-xl);
15
20
  --dsa-section__buttons--space-before: var(--ks-spacing-stack-m);
16
- --dsa-section__content--width_narrow: 46.5rem;
17
- --dsa-section__content--width_default: 62rem;
18
- --dsa-section__content--width_wide: 75rem;
21
+ --dsa-section__content--width_narrow: var(--dsa-content-width_narrow);
22
+ --dsa-section__content--width_default: var(--dsa-content-width_default);
23
+ --dsa-section__content--width_wide: var(--dsa-content-width_wide);
19
24
  --dsa-section__content--width_max: 100vw;
20
25
  --dsa-section__content--width_full: 100vw;
21
26
  --dsa-section__content--padding: var(--dsa-content--spacing);
@@ -73,26 +78,27 @@
73
78
  }
74
79
 
75
80
  .l-section.dsa-section {
76
- --l-section--gutter: var(--dsa-section--gutter_default);
81
+ --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
82
+ --l-section--background-default: var(--dsa-section--background-color_default, var(--ks-background-color-default));
83
+ --l-section--background-accent: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
84
+ --l-section--background-bold: var(--dsa-section--background-color_bold, var(--ks-background-color-primary));
77
85
  --l-section_col--min-width: var(--dsa-section__col--min-width, var(--l-section_tile-width--default));
78
- --l-section_col--max-width: var(--dsa-section__col--min-width, 1fr);
86
+ --l-section_col--max-width: var(--dsa-section__col--max-width, 1fr);
79
87
  --l-section_col--repeat: var(--dsa-section__col--repeat, auto-fit);
88
+ --l-section--content-width: var(--dsa-section__content--width, var(--l-section--container-width));
89
+ --l-section--content-width-narrow: var(--dsa-section__content--width_narrow, var(--dsa-content-width_narrow));
90
+ --l-section--content-width-default: var(--dsa-section__content--width_default, var(--dsa-content-width_default));
91
+ --l-section--content-width-wide: var(--dsa-section__content--width_wide, var(--dsa-content-width_wide));
92
+ --l-section--content-width-max: var(--dsa-section__content--width_max, var(--dsa-content-width_max));
93
+ --l-section--content-width-full: var(--dsa-section__content--width_full, var(--dsa-content-width_full));
94
+ --l-section--content-padding: var(--dsa-section__content--padding, var(--ks-spacing-m));
80
95
  --l-section_tile-width--smallest: var(--dsa-section__tile--width_smallest, 14rem);
81
96
  --l-section_tile-width--default: var(--dsa-section__tile--width_default, 18rem);
82
- --l-section_tile-width--medium: var(--dsa-section__tile--width_medium, var(--l-section--content-width-narrow));
83
- --l-section_tile-width--large: var(--dsa-section__tile--width_large, var(--l-section--content-width-default));
84
- --l-section_tile-width--largest: var(--dsa-section__tile--width_largest, var(--l-section--content-width-wide));
85
- --l-section--content-width-narrow: var(--dsa-section__content--width_narrow, 46.5rem);
86
- --l-section--content-width-default: var(--dsa-section__content--width_default, 62rem);
87
- --l-section--content-width-wide: var(--dsa-section__content--width_wide, 75rem);
88
- --l-section--content-width-max: var(--dsa-section__content--width_max, 120rem);
89
- --l-section--content-width-full: var(--dsa-section__content--width_full, 120rem);
90
- --l-section--content-padding: var(--dsa-section__content--padding, var(--ks-spacing-m));
91
- --l-section--background-default: var(--dsa-section--background-color_default, var(--ks-background-color-default));
92
- --l-section--background-accent: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
93
- --l-section--background-bold: var(--dsa-section--background-color_bold, var(--ks-background-color-primary));
94
- --l-section--space-default: var(--dsa-section--space_default, var(--ks-spacing-xxl));
95
- --l-section--space-small: var(--dsa-section--space_small, calc(var(--l-section--space-default) / 2));
97
+ --l-section_tile-width--medium: var(--dsa-section__tile--width_medium, var(--dsa-content-width_narrow));
98
+ --l-section_tile-width--large: var(--dsa-section__tile--width_large, var(--dsa-content-width_default));
99
+ --l-section_tile-width--largest: var(--dsa-section__tile--width_largest, var(--dsa-content-width_wide));
100
+ --l-section--gutter: var(--dsa-section--gutter_default);
101
+ --dsa-section--gutter_none: 0;
96
102
  --l-section--gutter-small: var(--dsa-section--gutter_small, var(--ks-spacing-xs));
97
103
  --l-section--gutter-default: var(--dsa-section--gutter_default, var(--ks-spacing-m));
98
104
  --l-section--gutter-large: var(--dsa-section--gutter_large, var(--ks-spacing-xl));
@@ -100,9 +106,11 @@
100
106
  --l-section_slider-arrow--padding: var(--dsa-section__slider-arrow--padding, var(--ks-spacing-xs));
101
107
  --l-section_slider-arrow--color: var(--dsa-section__slider-arrow--color, var(--ks-text-color-interface-interactive));
102
108
  --l-section_slider-arrow--opacity: var(--dsa-section__slider-arrow--opacity, 0.6);
103
- --l-section_slider-arrow--opacity_hover: var(--dsa-section__slider-arrow--opcaity_hover, 0.9);
109
+ --l-section_slider-arrow--opacity_hover: var(--dsa-section__slider-arrow--opacity_hover, 0.9);
104
110
  --l-section_slider-arrow--opacity_disabled: var(--dsa-section__slider-arrow--opacity_disabled, 0.3);
105
111
  --l-section_slider-arrow--background: var(--dsa-section__slider-arrow--background, transparent);
112
+ --l-section--space-default: var(--dsa-section--space_default, var(--ks-spacing-xxl));
113
+ --l-section--space-small: var(--dsa-section--space_small, calc(var(--l-section--space-default) / 2));
106
114
  background-image: var(--dsa-section--background-image);
107
115
  position: relative;
108
116
  background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
package/dist/components/section/section.schema.dereffed.json CHANGED
@@ -44,6 +44,15 @@
44
44
  ],
45
45
  "default": "default"
46
46
  },
47
+ "backgroundImage": {
48
+ "title": "Background image",
49
+ "description": "Background image for the whole section",
50
+ "type": "string",
51
+ "format": "image",
52
+ "examples": [
53
+ "https://picsum.photos/seed/visual/1920/600"
54
+ ]
55
+ },
47
56
  "spotlight": {
48
57
  "type": "boolean",
49
58
  "title": "Spotlight",
package/dist/components/section/section.schema.json CHANGED
@@ -34,6 +34,13 @@
34
34
  "enum": ["default", "accent", "bold"],
35
35
  "default": "default"
36
36
  },
37
+ "backgroundImage": {
38
+ "title": "Background image",
39
+ "description": "Background image for the whole section",
40
+ "type": "string",
41
+ "format": "image",
42
+ "examples": ["https://picsum.photos/seed/visual/1920/600"]
43
+ },
37
44
  "spotlight": {
38
45
  "type": "boolean",
39
46
  "title": "Spotlight",
package/dist/components/split/split.css CHANGED
@@ -12,13 +12,13 @@
12
12
  gap: var(--dsa-split--gap-horizontal) var(--dsa-split--gap-horizontal);
13
13
  }
14
14
  .l-split--narrow {
15
- --split__main--flex-basis: var(--l-section--content-width-narrow);
15
+ --split__main--flex-basis: var(--dsa-content--width_narrow);
16
16
  }
17
17
  .l-split--medium {
18
- --split__main--flex-basis: var(--l-section--content-width-default);
18
+ --split__main--flex-basis: var(--dsa-content--width_default);
19
19
  }
20
20
  .l-split--wide {
21
- --split__main--flex-basis: var(--l-section--content-width-wide);
21
+ --split__main--flex-basis: var(--dsa-content--width_wide);
22
22
  }
23
23
  @media (min-width: 48em) {
24
24
  .l-split {
package/dist/components/video-curtain/video-curtain.css CHANGED
@@ -7,9 +7,10 @@
7
7
  --dsa-video-curtain__copy--font: var(--dsa-rich-text--font);
8
8
  --dsa-video-curtain_highlight-text__copy--font: var(--ks-font-copy-l);
9
9
  --dsa-video-curtain_color-neutral__copy--color: var(--ks-text-color-default);
10
+ --dsa-video-curtain__textbox--background-color: var(--ks-color-bg-alpha-2);
10
11
  --dsa-video-curtain__textbox--border-radius: var(--ks-border-radius-surface);
12
+ --dsa-video-curtain__textbox--max-width: var(--dsa-section__content--width_narrow);
11
13
  --dsa-video-curtain__textbox--padding: var(--ks-spacing-inset-squish-xl);
12
- --dsa-video-curtain__textbox--background-color: var(--ks-color-bg-alpha-2);
13
14
  --dsa-video-curtain__overlay--background: linear-gradient(
14
15
  0deg,
15
16
  var(--ks-background-color-default) 15%,
@@ -40,7 +41,7 @@
40
41
  }
41
42
  @container visual (min-width: 640px) {
42
43
  .c-visual.dsa-video-curtain .c-visual__box {
43
- --c-visual_box--max-width: 50rem;
44
+ --c-visual_box--max-width: var(--dsa-video-curtain__textbox--max-width, 50rem);
44
45
  }
45
46
  }
46
47
 
package/dist/global.css CHANGED
@@ -306,7 +306,11 @@ h3 {
306
306
  --dsa-header--height: calc(var(--dsa-logo--height) + var(--ks-spacing-stack-m) + var(--ks-spacing-stack-m));
307
307
  --dsa-gradient--higlight: linear-gradient(135deg, var(--ks-color-primary) 0%, var(--ks-color-secondary) 100%);
308
308
  --dsa-content--spacing: var(--ks-spacing-inset-l);
309
- --dsa-section__content_wide--width: 1440px;
309
+ --dsa-content--width_narrow: 46.5rem;
310
+ --dsa-content--width_default: 62rem;
311
+ --dsa-content--width_wide: 75rem;
312
+ --dsa-content--width_max: 100vw;
313
+ --dsa-content--width_full: 100vw;
310
314
  --dsa-logo--height: 2.25rem;
311
315
  }
312
316
  @media (min-width: 48em) {
@@ -314,6 +318,13 @@ h3 {
314
318
  --dsa-content--spacing: var(--ks-spacing-inset-xl);
315
319
  }
316
320
  }
321
+ @media (min-width: 122em) {
322
+ :root, [ks-inverted], [ks-theme] {
323
+ --dsa-content--width_narrow: 55.8rem;
324
+ --dsa-content--width_default: 74.4rem;
325
+ --dsa-content--width_wide: 90rem;
326
+ }
327
+ }
317
328
  @media (min-width: 48em) {
318
329
  :root, [ks-inverted], [ks-theme] {
319
330
  --dsa-logo--height: 2.5rem;
@@ -712,16 +723,6 @@ hr.c-divider {
712
723
  --g-link--color-hover: var(--dsa-link--color_hover, var(--ks-text-color-default-interactive-hover));
713
724
  --g-link--background: var(--dsa-link--background, transparent);
714
725
  --g-link--border-radius: var(--dsa-link--border-radius, 0);
715
- --l-section_col--min-width: var(--dsa-section__col--min-width, var(--l-section_tile-width--default));
716
- --l-section_col--max-width: var(--dsa-section__col--max-width, 1fr);
717
- --l-section_col--repeat: var(--dsa-section__col--repeat, auto-fit);
718
- --l-section_tile-width--smallest: var(--dsa-section__tile-width--smallest, 14rem);
719
- --l-section_tile-width--default: var(--dsa-section__tile-width--default, 18rem);
720
- --l-section_tile-width--medium: var(--dsa-section__tile-width--medium, var(--l-section--content-width-narrow));
721
- --l-section_tile-width--large: var(--dsa-section__tile-width--large, var(--l-section--content-width-default));
722
- --l-section_tile-width--largest: var(--dsa-section__tile-width--largest, var(--l-section--content-width-wide));
723
- --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
724
- --l-section--content-width: var(--dsa-section__content--width, var(--l-section--container-width));
725
726
  --g-topic--color: var(--dsa-topic--color, var(--ks-text-color-default));
726
727
  --g-topic--font: var(--dsa-topic--font, var(--ks-font-display-l));
727
728
  --g-topic--font-weight: var(--dsa-topic--font-weight, var(--ks-font-weight-bold));
package/dist/tokens/themes.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 10 Dec 2024 16:01:39 GMT
3
+ * Generated on Wed, 11 Dec 2024 09:16:11 GMT
4
4
  */
5
5
  :root [ks-theme=business] {
6
6
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
2727
2727
  }
2728
2728
  /**
2729
2729
  * Do not edit directly
2730
- * Generated on Tue, 10 Dec 2024 16:01:45 GMT
2730
+ * Generated on Wed, 11 Dec 2024 09:16:15 GMT
2731
2731
  */
2732
2732
  :root [ks-theme=google] {
2733
2733
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
5458
5458
  }
5459
5459
  /**
5460
5460
  * Do not edit directly
5461
- * Generated on Tue, 10 Dec 2024 16:01:42 GMT
5461
+ * Generated on Wed, 11 Dec 2024 09:16:13 GMT
5462
5462
  */
5463
5463
  :root [ks-theme=ngo] {
5464
5464
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
8459
8459
  }
8460
8460
  /**
8461
8461
  * Do not edit directly
8462
- * Generated on Tue, 10 Dec 2024 16:01:48 GMT
8462
+ * Generated on Wed, 11 Dec 2024 09:16:17 GMT
8463
8463
  */
8464
8464
  :root [ks-theme=telekom] {
8465
8465
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
package/dist/tokens/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 10 Dec 2024 16:01:35 GMT
3
+ * Generated on Wed, 11 Dec 2024 09:16:09 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
@@ -745,49 +745,49 @@
745
745
  --ks-spacing-xxs-bp-factor-tablet: 1.5006;
746
746
  --ks-spacing-xxs-bp-factor-laptop: 1.8383;
747
747
  --ks-spacing-xxs-bp-factor-desktop: 2.2519;
748
- --ks-spacing-xxs-bp-factor-tv: 2.35;
748
+ --ks-spacing-xxs-bp-factor-tv: 2.5;
749
749
  --ks-spacing-xs: var(--ks-spacing-xs-base);
750
750
  --ks-spacing-xs-base: 0.4309rem;
751
751
  --ks-spacing-xs-bp-factor-phone: 1.225;
752
752
  --ks-spacing-xs-bp-factor-tablet: 1.5006;
753
753
  --ks-spacing-xs-bp-factor-laptop: 1.8383;
754
754
  --ks-spacing-xs-bp-factor-desktop: 2.2519;
755
- --ks-spacing-xs-bp-factor-tv: 2.35;
755
+ --ks-spacing-xs-bp-factor-tv: 2.5;
756
756
  --ks-spacing-s: var(--ks-spacing-s-base);
757
757
  --ks-spacing-s-base: 0.614rem;
758
758
  --ks-spacing-s-bp-factor-phone: 1.225;
759
759
  --ks-spacing-s-bp-factor-tablet: 1.5006;
760
760
  --ks-spacing-s-bp-factor-laptop: 1.8383;
761
761
  --ks-spacing-s-bp-factor-desktop: 2.2519;
762
- --ks-spacing-s-bp-factor-tv: 2.35;
762
+ --ks-spacing-s-bp-factor-tv: 2.5;
763
763
  --ks-spacing-m: var(--ks-spacing-m-base);
764
764
  --ks-spacing-m-base: 0.875rem;
765
765
  --ks-spacing-m-bp-factor-phone: 1.225;
766
766
  --ks-spacing-m-bp-factor-tablet: 1.5006;
767
767
  --ks-spacing-m-bp-factor-laptop: 1.8383;
768
768
  --ks-spacing-m-bp-factor-desktop: 2.2519;
769
- --ks-spacing-m-bp-factor-tv: 2.35;
769
+ --ks-spacing-m-bp-factor-tv: 2.5;
770
770
  --ks-spacing-l: var(--ks-spacing-l-base);
771
771
  --ks-spacing-l-base: 1.2469rem;
772
772
  --ks-spacing-l-bp-factor-phone: 1.225;
773
773
  --ks-spacing-l-bp-factor-tablet: 1.5006;
774
774
  --ks-spacing-l-bp-factor-laptop: 1.8383;
775
775
  --ks-spacing-l-bp-factor-desktop: 2.2519;
776
- --ks-spacing-l-bp-factor-tv: 2.35;
776
+ --ks-spacing-l-bp-factor-tv: 2.5;
777
777
  --ks-spacing-xl: var(--ks-spacing-xl-base);
778
778
  --ks-spacing-xl-base: 1.7768rem;
779
779
  --ks-spacing-xl-bp-factor-phone: 1.225;
780
780
  --ks-spacing-xl-bp-factor-tablet: 1.5006;
781
781
  --ks-spacing-xl-bp-factor-laptop: 1.8383;
782
782
  --ks-spacing-xl-bp-factor-desktop: 2.2519;
783
- --ks-spacing-xl-bp-factor-tv: 2.35;
783
+ --ks-spacing-xl-bp-factor-tv: 2.7;
784
784
  --ks-spacing-xxl: var(--ks-spacing-xxl-base);
785
785
  --ks-spacing-xxl-base: 2.5319rem;
786
786
  --ks-spacing-xxl-bp-factor-phone: 1.225;
787
787
  --ks-spacing-xxl-bp-factor-tablet: 1.5006;
788
788
  --ks-spacing-xxl-bp-factor-laptop: 1.8383;
789
789
  --ks-spacing-xxl-bp-factor-desktop: 2.2519;
790
- --ks-spacing-xxl-bp-factor-tv: 2.35;
790
+ --ks-spacing-xxl-bp-factor-tv: 2.5;
791
791
  --ks-spacing-stack-xs: var(--ks-spacing-xs);
792
792
  --ks-spacing-stack-s: var(--ks-spacing-s);
793
793
  --ks-spacing-stack-m: var(--ks-spacing-m);
@@ -948,7 +948,7 @@
948
948
  --ks-font-size-display-bp-factor-tablet: 1.5;
949
949
  --ks-font-size-display-bp-factor-laptop: 1.5;
950
950
  --ks-font-size-display-bp-factor-desktop: 1.75;
951
- --ks-font-size-display-bp-factor-tv: 2;
951
+ --ks-font-size-display-bp-factor-tv: 2.25;
952
952
  --ks-font-size-display-xxs-base: 0.68rem;
953
953
  --ks-font-size-display-xs-base: 0.833rem;
954
954
  --ks-font-size-display-s-base: 1.0204rem;
@@ -957,7 +957,7 @@
957
957
  --ks-font-size-display-xl-base: 1.8758rem;
958
958
  --ks-font-size-display-xxl-base: 2.2978rem;
959
959
  --ks-font-size-copy-bp-factor-tablet: 1.125;
960
- --ks-font-size-copy-bp-factor-tv: 1.25;
960
+ --ks-font-size-copy-bp-factor-tv: 1.35;
961
961
  --ks-font-size-copy-xxs-base: 0.612rem;
962
962
  --ks-font-size-copy-xs-base: 0.7497rem;
963
963
  --ks-font-size-copy-s-base: 0.9184rem;
@@ -966,7 +966,7 @@
966
966
  --ks-font-size-copy-xl-base: 1.6882rem;
967
967
  --ks-font-size-copy-xxl-base: 2.068rem;
968
968
  --ks-font-size-interface-bp-factor-tablet: 1.125;
969
- --ks-font-size-interface-bp-factor-tv: 1.25;
969
+ --ks-font-size-interface-bp-factor-tv: 1.5;
970
970
  --ks-font-size-interface-xxs-base: 0.544rem;
971
971
  --ks-font-size-interface-xs-base: 0.6664rem;
972
972
  --ks-font-size-interface-s-base: 0.8163rem;
@@ -975,7 +975,7 @@
975
975
  --ks-font-size-interface-xl-base: 1.5006rem;
976
976
  --ks-font-size-interface-xxl-base: 1.8383rem;
977
977
  --ks-font-size-mono-bp-factor-tablet: 1.125;
978
- --ks-font-size-mono-bp-factor-tv: 1.25;
978
+ --ks-font-size-mono-bp-factor-tv: 1.5;
979
979
  --ks-font-size-mono-xxs-base: 0.612rem;
980
980
  --ks-font-size-mono-xs-base: 0.7497rem;
981
981
  --ks-font-size-mono-s-base: 0.9184rem;
package/dist/tokens/tokens.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 10 Dec 2024 16:01:36 GMT
3
+ * Generated on Wed, 11 Dec 2024 09:16:09 GMT
4
4
  */
5
5
 
6
6
  export const KsBackgroundColorAccentBase = "#230a2b";
@@ -749,49 +749,49 @@ export const KsSpacingXxsBpFactorPhone = "1.225";
749
749
  export const KsSpacingXxsBpFactorTablet = "1.5006";
750
750
  export const KsSpacingXxsBpFactorLaptop = "1.8383";
751
751
  export const KsSpacingXxsBpFactorDesktop = "2.2519";
752
- export const KsSpacingXxsBpFactorTv = "2.35";
752
+ export const KsSpacingXxsBpFactorTv = "2.5";
753
753
  export const KsSpacingXs = "0.4309rem";
754
754
  export const KsSpacingXsBase = "0.4309rem";
755
755
  export const KsSpacingXsBpFactorPhone = "1.225";
756
756
  export const KsSpacingXsBpFactorTablet = "1.5006";
757
757
  export const KsSpacingXsBpFactorLaptop = "1.8383";
758
758
  export const KsSpacingXsBpFactorDesktop = "2.2519";
759
- export const KsSpacingXsBpFactorTv = "2.35";
759
+ export const KsSpacingXsBpFactorTv = "2.5";
760
760
  export const KsSpacingS = "0.614rem";
761
761
  export const KsSpacingSBase = "0.614rem";
762
762
  export const KsSpacingSBpFactorPhone = "1.225";
763
763
  export const KsSpacingSBpFactorTablet = "1.5006";
764
764
  export const KsSpacingSBpFactorLaptop = "1.8383";
765
765
  export const KsSpacingSBpFactorDesktop = "2.2519";
766
- export const KsSpacingSBpFactorTv = "2.35";
766
+ export const KsSpacingSBpFactorTv = "2.5";
767
767
  export const KsSpacingM = "0.875rem";
768
768
  export const KsSpacingMBase = "0.875rem";
769
769
  export const KsSpacingMBpFactorPhone = "1.225";
770
770
  export const KsSpacingMBpFactorTablet = "1.5006";
771
771
  export const KsSpacingMBpFactorLaptop = "1.8383";
772
772
  export const KsSpacingMBpFactorDesktop = "2.2519";
773
- export const KsSpacingMBpFactorTv = "2.35";
773
+ export const KsSpacingMBpFactorTv = "2.5";
774
774
  export const KsSpacingL = "1.2469rem";
775
775
  export const KsSpacingLBase = "1.2469rem";
776
776
  export const KsSpacingLBpFactorPhone = "1.225";
777
777
  export const KsSpacingLBpFactorTablet = "1.5006";
778
778
  export const KsSpacingLBpFactorLaptop = "1.8383";
779
779
  export const KsSpacingLBpFactorDesktop = "2.2519";
780
- export const KsSpacingLBpFactorTv = "2.35";
780
+ export const KsSpacingLBpFactorTv = "2.5";
781
781
  export const KsSpacingXl = "1.7768rem";
782
782
  export const KsSpacingXlBase = "1.7768rem";
783
783
  export const KsSpacingXlBpFactorPhone = "1.225";
784
784
  export const KsSpacingXlBpFactorTablet = "1.5006";
785
785
  export const KsSpacingXlBpFactorLaptop = "1.8383";
786
786
  export const KsSpacingXlBpFactorDesktop = "2.2519";
787
- export const KsSpacingXlBpFactorTv = "2.35";
787
+ export const KsSpacingXlBpFactorTv = "2.7";
788
788
  export const KsSpacingXxl = "2.5319rem";
789
789
  export const KsSpacingXxlBase = "2.5319rem";
790
790
  export const KsSpacingXxlBpFactorPhone = "1.225";
791
791
  export const KsSpacingXxlBpFactorTablet = "1.5006";
792
792
  export const KsSpacingXxlBpFactorLaptop = "1.8383";
793
793
  export const KsSpacingXxlBpFactorDesktop = "2.2519";
794
- export const KsSpacingXxlBpFactorTv = "2.35";
794
+ export const KsSpacingXxlBpFactorTv = "2.5";
795
795
  export const KsSpacingStackXs = "0.4309rem";
796
796
  export const KsSpacingStackS = "0.614rem";
797
797
  export const KsSpacingStackM = "0.875rem";
@@ -952,7 +952,7 @@ export const KsFontSizeDisplayBpFactorPhone = 1.125;
952
952
  export const KsFontSizeDisplayBpFactorTablet = 1.5;
953
953
  export const KsFontSizeDisplayBpFactorLaptop = 1.5;
954
954
  export const KsFontSizeDisplayBpFactorDesktop = 1.75;
955
- export const KsFontSizeDisplayBpFactorTv = 2;
955
+ export const KsFontSizeDisplayBpFactorTv = 2.25;
956
956
  export const KsFontSizeDisplayXxsBase = "0.68rem";
957
957
  export const KsFontSizeDisplayXsBase = "0.833rem";
958
958
  export const KsFontSizeDisplaySBase = "1.0204rem";
@@ -961,7 +961,7 @@ export const KsFontSizeDisplayLBase = "1.5313rem";
961
961
  export const KsFontSizeDisplayXlBase = "1.8758rem";
962
962
  export const KsFontSizeDisplayXxlBase = "2.2978rem";
963
963
  export const KsFontSizeCopyBpFactorTablet = 1.125;
964
- export const KsFontSizeCopyBpFactorTv = 1.25;
964
+ export const KsFontSizeCopyBpFactorTv = 1.35;
965
965
  export const KsFontSizeCopyXxsBase = "0.612rem";
966
966
  export const KsFontSizeCopyXsBase = "0.7497rem";
967
967
  export const KsFontSizeCopySBase = "0.9184rem";
@@ -970,7 +970,7 @@ export const KsFontSizeCopyLBase = "1.3781rem";
970
970
  export const KsFontSizeCopyXlBase = "1.6882rem";
971
971
  export const KsFontSizeCopyXxlBase = "2.068rem";
972
972
  export const KsFontSizeInterfaceBpFactorTablet = 1.125;
973
- export const KsFontSizeInterfaceBpFactorTv = 1.25;
973
+ export const KsFontSizeInterfaceBpFactorTv = 1.5;
974
974
  export const KsFontSizeInterfaceXxsBase = "0.544rem";
975
975
  export const KsFontSizeInterfaceXsBase = "0.6664rem";
976
976
  export const KsFontSizeInterfaceSBase = "0.8163rem";
@@ -979,7 +979,7 @@ export const KsFontSizeInterfaceLBase = "1.225rem";
979
979
  export const KsFontSizeInterfaceXlBase = "1.5006rem";
980
980
  export const KsFontSizeInterfaceXxlBase = "1.8383rem";
981
981
  export const KsFontSizeMonoBpFactorTablet = 1.125;
982
- export const KsFontSizeMonoBpFactorTv = 1.25;
982
+ export const KsFontSizeMonoBpFactorTv = 1.5;
983
983
  export const KsFontSizeMonoXxsBase = "0.612rem";
984
984
  export const KsFontSizeMonoXsBase = "0.7497rem";
985
985
  export const KsFontSizeMonoSBase = "0.9184rem";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kickstartds/ds-agency-premium",
3
- "version": "1.6.43",
3
+ "version": "1.6.44--canary.39.1363.0",
4
4
  "description": "",
5
5
  "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
6
6
  "bugs": {