@kickstartds/ds-agency-premium 1.6.64 → 1.6.65--canary.40.1537.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 (31) hide show
  1. package/dist/BlogOverviewProps-1cfcf6e8.d.ts +1 -1
  2. package/dist/BlogPostProps-1cfcf6e8.d.ts +1 -1
  3. package/dist/{CtaProps-93230a76.d.ts → CtaProps-fd5e75dc.d.ts} +13 -8
  4. package/dist/SectionProps-1cfcf6e8.d.ts +2 -2
  5. package/dist/{SliderProps-93230a76.d.ts → SliderProps-fd5e75dc.d.ts} +1 -1
  6. package/dist/components/blog-overview/blog-overview.schema.dereffed.json +57 -24
  7. package/dist/components/blog-post/blog-post.schema.dereffed.json +57 -24
  8. package/dist/components/cta/cta.css +37 -57
  9. package/dist/components/cta/cta.schema.dereffed.json +19 -8
  10. package/dist/components/cta/cta.schema.json +15 -8
  11. package/dist/components/cta/index.d.ts +1 -1
  12. package/dist/components/cta/index.js +4 -6
  13. package/dist/components/footer/footer.css +1 -1
  14. package/dist/components/header/header.css +1 -1
  15. package/dist/components/hero/hero.css +3 -2
  16. package/dist/components/image-story/image-story.css +5 -2
  17. package/dist/components/mosaic/mosaic.css +1 -1
  18. package/dist/components/page/page.schema.dereffed.json +38 -16
  19. package/dist/components/page-wrapper/tokens.css +1 -1
  20. package/dist/components/presets.json +56 -50
  21. package/dist/components/section/section.css +2 -2
  22. package/dist/components/section/section.schema.dereffed.json +38 -16
  23. package/dist/components/slider/index.d.ts +1 -1
  24. package/dist/components/slider/slider.schema.dereffed.json +19 -8
  25. package/dist/components/split/split.css +2 -2
  26. package/dist/components/testimonials/index.d.ts +1 -1
  27. package/dist/global.css +3 -2
  28. package/dist/tokens/themes.css +4 -4
  29. package/dist/tokens/tokens.css +1 -1
  30. package/dist/tokens/tokens.js +1 -1
  31. package/package.json +1 -1
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import { SectionProps } from "./SectionProps-1cfcf6e8.js";
7
7
  import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
8
- import { CtaProps } from "./CtaProps-93230a76.js";
8
+ import { CtaProps } from "./CtaProps-fd5e75dc.js";
9
9
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
10
10
  /**
11
11
  * Collection of sections (with their contents) to render as the blog overview intro
@@ -6,7 +6,7 @@
6
6
  import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
7
7
  import { BlogAsideProps } from "./BlogAsideProps-d9decb7c.js";
8
8
  import { SectionProps } from "./SectionProps-1cfcf6e8.js";
9
- import { CtaProps } from "./CtaProps-93230a76.js";
9
+ import { CtaProps } from "./CtaProps-fd5e75dc.js";
10
10
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
11
11
  /**
12
12
  * Body text for the blog post, overwrites sections if present
@@ -23,10 +23,6 @@ type HighlightText = boolean;
23
23
  * Make the text and buttons color neutral
24
24
  */
25
25
  type ColorNeutral = boolean;
26
- /**
27
- * Set the width of the content to the full width of the element
28
- */
29
- type Width = boolean;
30
26
  /**
31
27
  * Text content to display inside the button
32
28
  */
@@ -59,6 +55,10 @@ type Padding = boolean;
59
55
  * Image description
60
56
  */
61
57
  type AltText = string;
58
+ /**
59
+ * Select a vertical alignment for the image
60
+ */
61
+ type VerticalAlignmentOfTheImage = "center" | "top" | "bottom";
62
62
  /**
63
63
  * Switch to displaying the image after the text on mobile
64
64
  */
@@ -72,23 +72,27 @@ type DesktopImageAfterText = boolean;
72
72
  */
73
73
  type TextAlignment = "left" | "center";
74
74
  /**
75
- * Select a vertical alignment for the image
75
+ * Select a vertical alignment for the content
76
76
  */
77
77
  type VerticalAlignmentOfTheContent = "center" | "top" | "bottom";
78
+ /**
79
+ * Toggle padding of the content
80
+ */
81
+ type Padding1 = boolean;
78
82
  interface CtaProps {
79
83
  headline?: ComponentHeadline;
80
84
  sub?: ComponentSubheadline;
81
85
  text?: ComponentText;
82
86
  highlightText?: HighlightText;
83
87
  colorNeutral?: ColorNeutral;
84
- fullWidth?: Width;
85
88
  buttons?: Button[];
86
89
  backgroundColor?: BackgroundColor;
87
90
  backgroundImage?: BackgroundImage;
88
91
  image?: Image;
89
92
  order?: Order;
90
93
  textAlign?: TextAlignment;
91
- contentAlign?: VerticalAlignmentOfTheContent;
94
+ align?: VerticalAlignmentOfTheContent;
95
+ padding?: Padding1;
92
96
  }
93
97
  interface Button {
94
98
  label?: Label;
@@ -102,6 +106,7 @@ interface Image {
102
106
  src?: ImageSource;
103
107
  padding?: Padding;
104
108
  alt?: AltText;
109
+ align?: VerticalAlignmentOfTheImage;
105
110
  }
106
111
  /**
107
112
  * Choose what comes first on mobile and desktop: image or text
@@ -110,4 +115,4 @@ interface Order {
110
115
  mobileImageLast?: MobileImageAfterText;
111
116
  desktopImageLast?: DesktopImageAfterText;
112
117
  }
113
- export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Width, Label, Icon, Target, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, MobileImageAfterText, DesktopImageAfterText, TextAlignment, VerticalAlignmentOfTheContent, CtaProps, Button, Image, Order };
118
+ export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Label, Icon, Target, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, VerticalAlignmentOfTheImage, MobileImageAfterText, DesktopImageAfterText, TextAlignment, VerticalAlignmentOfTheContent, Padding1, CtaProps, Button, Image, Order };
@@ -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 { CtaProps } from "./CtaProps-93230a76.js";
6
+ import { CtaProps } from "./CtaProps-fd5e75dc.js";
7
7
  import { DividerProps } from "./DividerProps-2ef31901.js";
8
8
  import { FaqProps } from "./FaqProps-ad618cd5.js";
9
9
  import { FeaturesProps } from "./FeaturesProps-e58616a5.js";
@@ -14,7 +14,7 @@ import { ImageStoryProps } from "./ImageStoryProps-03ff6d21.js";
14
14
  import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
15
15
  import { LogosProps } from "./LogosProps-f9474fe2.js";
16
16
  import { MosaicProps } from "./MosaicProps-d52c7151.js";
17
- import { SliderProps } from "./SliderProps-93230a76.js";
17
+ import { SliderProps } from "./SliderProps-fd5e75dc.js";
18
18
  import { StatsProps } from "./StatsProps-bf5ef578.js";
19
19
  import { TeaserCardProps } from "./TeaserCardProps-b9c28e78.js";
20
20
  import { TestimonialsProps } from "./TestimonialsProps-e344f597.js";
@@ -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 { CtaProps } from "./CtaProps-93230a76.js";
6
+ import { CtaProps } from "./CtaProps-fd5e75dc.js";
7
7
  import { FeaturesProps } from "./FeaturesProps-e58616a5.js";
8
8
  import { GalleryProps } from "./GalleryProps-76e7de44.js";
9
9
  import { HeroProps } from "./HeroProps-f704d270.js";
@@ -282,12 +282,6 @@
282
282
  "default": false,
283
283
  "type": "boolean"
284
284
  },
285
- "fullWidth": {
286
- "title": "Width",
287
- "description": "Set the width of the content to the full width of the element",
288
- "type": "boolean",
289
- "default": false
290
- },
291
285
  "buttons": {
292
286
  "type": "array",
293
287
  "items": {
@@ -351,6 +345,17 @@
351
345
  "title": "Alt text",
352
346
  "description": "Image description",
353
347
  "type": "string"
348
+ },
349
+ "align": {
350
+ "title": "Vertical alignment of the image",
351
+ "description": "Select a vertical alignment for the image",
352
+ "type": "string",
353
+ "enum": [
354
+ "center",
355
+ "top",
356
+ "bottom"
357
+ ],
358
+ "default": "center"
354
359
  }
355
360
  },
356
361
  "additionalProperties": false
@@ -385,9 +390,9 @@
385
390
  "type": "string",
386
391
  "default": "left"
387
392
  },
388
- "contentAlign": {
393
+ "align": {
389
394
  "title": "Vertical alignment of the content",
390
- "description": "Select a vertical alignment for the image",
395
+ "description": "Select a vertical alignment for the content",
391
396
  "type": "string",
392
397
  "enum": [
393
398
  "center",
@@ -396,6 +401,12 @@
396
401
  ],
397
402
  "default": "center"
398
403
  },
404
+ "padding": {
405
+ "title": "Padding",
406
+ "description": "Toggle padding of the content",
407
+ "type": "boolean",
408
+ "default": false
409
+ },
399
410
  "type": {
400
411
  "const": "cta"
401
412
  }
@@ -1538,12 +1549,6 @@
1538
1549
  "default": false,
1539
1550
  "type": "boolean"
1540
1551
  },
1541
- "fullWidth": {
1542
- "title": "Width",
1543
- "description": "Set the width of the content to the full width of the element",
1544
- "type": "boolean",
1545
- "default": false
1546
- },
1547
1552
  "buttons": {
1548
1553
  "type": "array",
1549
1554
  "items": {
@@ -1607,6 +1612,17 @@
1607
1612
  "title": "Alt text",
1608
1613
  "description": "Image description",
1609
1614
  "type": "string"
1615
+ },
1616
+ "align": {
1617
+ "title": "Vertical alignment of the image",
1618
+ "description": "Select a vertical alignment for the image",
1619
+ "type": "string",
1620
+ "enum": [
1621
+ "center",
1622
+ "top",
1623
+ "bottom"
1624
+ ],
1625
+ "default": "center"
1610
1626
  }
1611
1627
  },
1612
1628
  "additionalProperties": false
@@ -1641,9 +1657,9 @@
1641
1657
  "type": "string",
1642
1658
  "default": "left"
1643
1659
  },
1644
- "contentAlign": {
1660
+ "align": {
1645
1661
  "title": "Vertical alignment of the content",
1646
- "description": "Select a vertical alignment for the image",
1662
+ "description": "Select a vertical alignment for the content",
1647
1663
  "type": "string",
1648
1664
  "enum": [
1649
1665
  "center",
@@ -1652,6 +1668,12 @@
1652
1668
  ],
1653
1669
  "default": "center"
1654
1670
  },
1671
+ "padding": {
1672
+ "title": "Padding",
1673
+ "description": "Toggle padding of the content",
1674
+ "type": "boolean",
1675
+ "default": false
1676
+ },
1655
1677
  "type": {
1656
1678
  "const": "cta"
1657
1679
  }
@@ -3705,12 +3727,6 @@
3705
3727
  "default": false,
3706
3728
  "type": "boolean"
3707
3729
  },
3708
- "fullWidth": {
3709
- "title": "Width",
3710
- "description": "Set the width of the content to the full width of the element",
3711
- "type": "boolean",
3712
- "default": false
3713
- },
3714
3730
  "buttons": {
3715
3731
  "type": "array",
3716
3732
  "items": {
@@ -3774,6 +3790,17 @@
3774
3790
  "title": "Alt text",
3775
3791
  "description": "Image description",
3776
3792
  "type": "string"
3793
+ },
3794
+ "align": {
3795
+ "title": "Vertical alignment of the image",
3796
+ "description": "Select a vertical alignment for the image",
3797
+ "type": "string",
3798
+ "enum": [
3799
+ "center",
3800
+ "top",
3801
+ "bottom"
3802
+ ],
3803
+ "default": "center"
3777
3804
  }
3778
3805
  },
3779
3806
  "additionalProperties": false
@@ -3808,9 +3835,9 @@
3808
3835
  "type": "string",
3809
3836
  "default": "left"
3810
3837
  },
3811
- "contentAlign": {
3838
+ "align": {
3812
3839
  "title": "Vertical alignment of the content",
3813
- "description": "Select a vertical alignment for the image",
3840
+ "description": "Select a vertical alignment for the content",
3814
3841
  "type": "string",
3815
3842
  "enum": [
3816
3843
  "center",
@@ -3819,6 +3846,12 @@
3819
3846
  ],
3820
3847
  "default": "center"
3821
3848
  },
3849
+ "padding": {
3850
+ "title": "Padding",
3851
+ "description": "Toggle padding of the content",
3852
+ "type": "boolean",
3853
+ "default": false
3854
+ },
3822
3855
  "type": {
3823
3856
  "const": "cta"
3824
3857
  }
@@ -558,12 +558,6 @@
558
558
  "default": false,
559
559
  "type": "boolean"
560
560
  },
561
- "fullWidth": {
562
- "title": "Width",
563
- "description": "Set the width of the content to the full width of the element",
564
- "type": "boolean",
565
- "default": false
566
- },
567
561
  "buttons": {
568
562
  "type": "array",
569
563
  "items": {
@@ -627,6 +621,17 @@
627
621
  "title": "Alt text",
628
622
  "description": "Image description",
629
623
  "type": "string"
624
+ },
625
+ "align": {
626
+ "title": "Vertical alignment of the image",
627
+ "description": "Select a vertical alignment for the image",
628
+ "type": "string",
629
+ "enum": [
630
+ "center",
631
+ "top",
632
+ "bottom"
633
+ ],
634
+ "default": "center"
630
635
  }
631
636
  },
632
637
  "additionalProperties": false
@@ -661,9 +666,9 @@
661
666
  "type": "string",
662
667
  "default": "left"
663
668
  },
664
- "contentAlign": {
669
+ "align": {
665
670
  "title": "Vertical alignment of the content",
666
- "description": "Select a vertical alignment for the image",
671
+ "description": "Select a vertical alignment for the content",
667
672
  "type": "string",
668
673
  "enum": [
669
674
  "center",
@@ -672,6 +677,12 @@
672
677
  ],
673
678
  "default": "center"
674
679
  },
680
+ "padding": {
681
+ "title": "Padding",
682
+ "description": "Toggle padding of the content",
683
+ "type": "boolean",
684
+ "default": false
685
+ },
675
686
  "type": {
676
687
  "const": "cta"
677
688
  }
@@ -1814,12 +1825,6 @@
1814
1825
  "default": false,
1815
1826
  "type": "boolean"
1816
1827
  },
1817
- "fullWidth": {
1818
- "title": "Width",
1819
- "description": "Set the width of the content to the full width of the element",
1820
- "type": "boolean",
1821
- "default": false
1822
- },
1823
1828
  "buttons": {
1824
1829
  "type": "array",
1825
1830
  "items": {
@@ -1883,6 +1888,17 @@
1883
1888
  "title": "Alt text",
1884
1889
  "description": "Image description",
1885
1890
  "type": "string"
1891
+ },
1892
+ "align": {
1893
+ "title": "Vertical alignment of the image",
1894
+ "description": "Select a vertical alignment for the image",
1895
+ "type": "string",
1896
+ "enum": [
1897
+ "center",
1898
+ "top",
1899
+ "bottom"
1900
+ ],
1901
+ "default": "center"
1886
1902
  }
1887
1903
  },
1888
1904
  "additionalProperties": false
@@ -1917,9 +1933,9 @@
1917
1933
  "type": "string",
1918
1934
  "default": "left"
1919
1935
  },
1920
- "contentAlign": {
1936
+ "align": {
1921
1937
  "title": "Vertical alignment of the content",
1922
- "description": "Select a vertical alignment for the image",
1938
+ "description": "Select a vertical alignment for the content",
1923
1939
  "type": "string",
1924
1940
  "enum": [
1925
1941
  "center",
@@ -1928,6 +1944,12 @@
1928
1944
  ],
1929
1945
  "default": "center"
1930
1946
  },
1947
+ "padding": {
1948
+ "title": "Padding",
1949
+ "description": "Toggle padding of the content",
1950
+ "type": "boolean",
1951
+ "default": false
1952
+ },
1931
1953
  "type": {
1932
1954
  "const": "cta"
1933
1955
  }
@@ -3464,12 +3486,6 @@
3464
3486
  "default": false,
3465
3487
  "type": "boolean"
3466
3488
  },
3467
- "fullWidth": {
3468
- "title": "Width",
3469
- "description": "Set the width of the content to the full width of the element",
3470
- "type": "boolean",
3471
- "default": false
3472
- },
3473
3489
  "buttons": {
3474
3490
  "type": "array",
3475
3491
  "items": {
@@ -3533,6 +3549,17 @@
3533
3549
  "title": "Alt text",
3534
3550
  "description": "Image description",
3535
3551
  "type": "string"
3552
+ },
3553
+ "align": {
3554
+ "title": "Vertical alignment of the image",
3555
+ "description": "Select a vertical alignment for the image",
3556
+ "type": "string",
3557
+ "enum": [
3558
+ "center",
3559
+ "top",
3560
+ "bottom"
3561
+ ],
3562
+ "default": "center"
3536
3563
  }
3537
3564
  },
3538
3565
  "additionalProperties": false
@@ -3567,9 +3594,9 @@
3567
3594
  "type": "string",
3568
3595
  "default": "left"
3569
3596
  },
3570
- "contentAlign": {
3597
+ "align": {
3571
3598
  "title": "Vertical alignment of the content",
3572
- "description": "Select a vertical alignment for the image",
3599
+ "description": "Select a vertical alignment for the content",
3573
3600
  "type": "string",
3574
3601
  "enum": [
3575
3602
  "center",
@@ -3578,6 +3605,12 @@
3578
3605
  ],
3579
3606
  "default": "center"
3580
3607
  },
3608
+ "padding": {
3609
+ "title": "Padding",
3610
+ "description": "Toggle padding of the content",
3611
+ "type": "boolean",
3612
+ "default": false
3613
+ },
3581
3614
  "type": {
3582
3615
  "const": "cta"
3583
3616
  }
@@ -1,12 +1,15 @@
1
1
  .dsa-cta {
2
- --dsa-cta--vertical-padding: var(--l-section--space-default);
3
- --dsa-cta--horizontal-padding: var(--dsa-content--spacing);
2
+ --dsa-cta--gap: var(--ks-spacing-stack-l) var(--ks-spacing-inline-l);
3
+ --dsa-cta__content--vertical-padding: var(--dsa-content--vertical-spacing);
4
+ --dsa-cta__content--horizontal-padding: var(--dsa-content--horizontal-spacing);
5
+ --dsa-cta__content--max-width: var(--dsa-content--width_narrow);
4
6
  --dsa-cta__copy--font: var(--dsa-rich-text--font);
5
7
  --dsa-cta__copy--color: var(--ks-text-color-default);
6
8
  --dsa-cta__headline--color: var(--dsa-headline--color);
7
9
  --dsa-cta__headline--font: var(--dsa-headline_h2--font);
8
10
  --dsa-cta__subheadline--color: var(--dsa-headline__subheadline--color);
9
11
  --dsa-cta__subheadline--font: var(--dsa-headline_h2__subheadline--font);
12
+ --dsa-cta__image--padding: var(--ks-spacing-inset-m);
10
13
  --dsa-cta_color-neutral__headline--color: var(--ks-text-color-default);
11
14
  --dsa-cta_color-neutral__subheadline--color: var(--ks-text-color-default);
12
15
  --dsa-cta_color-neutral__copy--color: var(--ks-text-color-default);
@@ -16,11 +19,11 @@
16
19
  }
17
20
 
18
21
  .dsa-cta.c-storytelling {
19
- --c-storytelling--padding-ratio: 2;
20
- --c-storytelling--horizontal-padding: var(--dsa-content--spacing);
22
+ --c-storytelling--horizontal-padding: var(--dsa-cta__content--horizontal-padding);
23
+ --c-storytelling--vertical-padding: var(--dsa-cta__content--vertical-padding);
21
24
  justify-content: center;
22
25
  align-items: stretch;
23
- padding: 0;
26
+ gap: var(--dsa-cta--gap, var(--ks-spacing-inline-m));
24
27
  }
25
28
  .dsa-cta.c-storytelling.dsa-cta--color-neutral {
26
29
  --dsa-cta__copy--color: var(--dsa-cta_color-neutral__copy--color, var(--ks-text-color-default));
@@ -35,34 +38,19 @@
35
38
  var(--dsa-headline_h1__subheadline--font)
36
39
  );
37
40
  }
38
- .dsa-cta.c-storytelling.c-storytelling--full {
39
- --c-storytelling--padding-ratio: 1;
40
- }
41
- .dsa-cta.c-storytelling.c-storytelling--full.c-storytelling--order-desktop-image-last .c-storytelling__box {
42
- padding-left: var(--dsa-cta--horizontal-padding);
43
- }
44
- .dsa-cta.c-storytelling.dsa-cta--align-top {
45
- align-items: flex-start;
46
- }
47
- .dsa-cta.c-storytelling.dsa-cta--align-bottom {
48
- align-items: flex-end;
41
+ .dsa-cta.c-storytelling.dsa-cta--no-padding .c-storytelling__box {
42
+ padding: 0;
49
43
  }
50
- .dsa-cta.c-storytelling .c-storytelling__box {
51
- width: 100%;
52
- padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing));
44
+ .dsa-cta.c-storytelling.dsa-cta--image-padding .c-storytelling__image {
45
+ padding: var(--dsa-cta__content--vertical-padding, var(--dsa-content--vertical-spacing)) var(--dsa-cta__content--horizontal-padding, var(--dsa-content--horizontal-spacing));
53
46
  }
54
- @container storytelling (max-width: 640px) {
55
- .dsa-cta.c-storytelling .c-storytelling__box {
56
- padding-top: calc(var(--dsa-cta--vertical-padding, var(--l-section--space-default)) / var(--c-storytelling--padding-ratio));
57
- }
58
- .dsa-cta.c-storytelling .c-storytelling__box:only-child {
59
- padding-top: var(--dsa-cta--vertical-padding, var(--l-section--space-default));
60
- }
47
+ .dsa-cta.c-storytelling .c-storytelling__box__content {
48
+ max-width: var(--dsa-cta__content--max-width, var(--dsa-content--width_narrow));
61
49
  }
62
50
  .dsa-cta.c-storytelling .c-storytelling__box:only-child {
63
- padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing));
51
+ --c-storytelling--horizontal-padding: var(--dsa-cta__content--horizontal-padding);
64
52
  }
65
- .dsa-cta.c-storytelling .c-storytelling__box__content {
53
+ .dsa-cta.c-storytelling .c-storytelling__box:only-child .c-storytelling__box__content {
66
54
  max-width: 100%;
67
55
  }
68
56
  .dsa-cta.c-storytelling .c-storytelling__box .dsa-headline__headline {
@@ -79,50 +67,42 @@
79
67
  font: var(--dsa-cta__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
80
68
  color: var(--dsa-cta__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-copy)));
81
69
  }
82
- .dsa-cta.c-storytelling .c-storytelling__box:only-child {
83
- --dsa-cta--horizontal-padding: var(--dsa-content--spacing);
84
- }
85
- .dsa-cta.c-storytelling .c-storytelling__image {
70
+ .dsa-cta.c-storytelling > .c-storytelling__image {
86
71
  margin: 0;
87
72
  }
88
- @container storytelling (min-width: 640px) {
89
- .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__image {
90
- padding-left: calc(var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)) / var(--c-storytelling--padding-ratio));
73
+ @container storytelling (max-width: 639.9px) {
74
+ .dsa-cta.c-storytelling.c-storytelling--order-mobile-image-last .c-storytelling__box {
75
+ padding-bottom: 0;
91
76
  }
92
- .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__box {
93
- padding-right: calc(var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)) / var(--c-storytelling--padding-ratio));
77
+ .dsa-cta.c-storytelling.c-storytelling--order-mobile-image-last .c-storytelling__image {
78
+ padding-top: 0;
94
79
  }
95
- .dsa-cta.c-storytelling .c-storytelling__box {
96
- padding-left: calc(var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)) / var(--c-storytelling--padding-ratio));
80
+ .dsa-cta.c-storytelling:not(.c-storytelling--order-mobile-image-last) .c-storytelling__box:not(:only-child) {
81
+ padding-top: 0;
97
82
  }
98
- .dsa-cta.c-storytelling .c-storytelling__box__content--center .c-button-group {
99
- justify-content: center;
83
+ .dsa-cta.c-storytelling:not(.c-storytelling--order-mobile-image-last) .c-storytelling__image {
84
+ padding-bottom: 0;
100
85
  }
101
- .dsa-cta.c-storytelling .c-storytelling__box:only-child {
102
- width: 100%;
103
- max-width: calc(var(--dsa-content--width_default) - var(--dsa-content--spacing) * var(--c-storytelling--padding-ratio));
104
- }
105
- .dsa-cta.c-storytelling > .c-storytelling__image {
106
- padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing));
107
- padding-right: calc(var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)) / var(--c-storytelling--padding-ratio));
86
+ }
87
+ @container storytelling (min-width: 640px) {
88
+ .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__box:not(:only-child) {
89
+ padding-right: 0;
108
90
  }
109
- .dsa-cta.c-storytelling.c-storytelling--full > .c-storytelling__image {
110
- padding: 0;
91
+ .dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__image {
92
+ padding-left: 0;
111
93
  }
112
- .dsa-cta.c-storytelling > .c-storytelling__image,
113
- .dsa-cta.c-storytelling > .c-storytelling__box {
114
- max-width: calc(var(--dsa-content--width_wide) / 2);
94
+ .dsa-cta.c-storytelling:not(.c-storytelling--order-desktop-image-last) .c-storytelling__box {
95
+ padding-left: 0;
115
96
  }
116
- .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__image,
117
- .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__box {
118
- max-width: 100%;
97
+ .dsa-cta.c-storytelling:not(.c-storytelling--order-desktop-image-last) .c-storytelling__image {
98
+ padding-right: 0;
119
99
  }
120
100
  }
121
101
 
122
102
  @media (min-width: 640px) {
123
103
  .dsa-header--floating + .l-container--storytelling .c-storytelling.dsa-cta,
124
104
  .dsa-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.dsa-cta {
125
- padding-top: calc(var(--dsa-header--height) + var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)));
105
+ padding-top: calc(var(--dsa-header--height) + var(--dsa-cta__content--horizontal-padding, var(--dsa-content--horizontal-spacing)));
126
106
  z-index: 1;
127
107
  }
128
108
  }
@@ -40,12 +40,6 @@
40
40
  "default": false,
41
41
  "type": "boolean"
42
42
  },
43
- "fullWidth": {
44
- "title": "Width",
45
- "description": "Set the width of the content to the full width of the element",
46
- "type": "boolean",
47
- "default": false
48
- },
49
43
  "buttons": {
50
44
  "type": "array",
51
45
  "items": {
@@ -109,6 +103,17 @@
109
103
  "title": "Alt text",
110
104
  "description": "Image description",
111
105
  "type": "string"
106
+ },
107
+ "align": {
108
+ "title": "Vertical alignment of the image",
109
+ "description": "Select a vertical alignment for the image",
110
+ "type": "string",
111
+ "enum": [
112
+ "center",
113
+ "top",
114
+ "bottom"
115
+ ],
116
+ "default": "center"
112
117
  }
113
118
  },
114
119
  "additionalProperties": false
@@ -143,9 +148,9 @@
143
148
  "type": "string",
144
149
  "default": "left"
145
150
  },
146
- "contentAlign": {
151
+ "align": {
147
152
  "title": "Vertical alignment of the content",
148
- "description": "Select a vertical alignment for the image",
153
+ "description": "Select a vertical alignment for the content",
149
154
  "type": "string",
150
155
  "enum": [
151
156
  "center",
@@ -154,6 +159,12 @@
154
159
  ],
155
160
  "default": "center"
156
161
  },
162
+ "padding": {
163
+ "title": "Padding",
164
+ "description": "Toggle padding of the content",
165
+ "type": "boolean",
166
+ "default": false
167
+ },
157
168
  "type": {
158
169
  "const": "cta"
159
170
  }