@kickstartds/ds-agency-premium 1.6.61--canary.40.1509.0 → 1.6.61
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.
- package/dist/BlogOverviewProps-9f207f1c.d.ts +1 -1
- package/dist/BlogPostProps-6b3cff22.d.ts +1 -1
- package/dist/{CtaProps-fd5e75dc.d.ts → CtaProps-93230a76.d.ts} +8 -13
- package/dist/SectionProps-1cfcf6e8.d.ts +2 -2
- package/dist/{SliderProps-fd5e75dc.d.ts → SliderProps-93230a76.d.ts} +1 -1
- package/dist/components/blog-overview/blog-overview.schema.dereffed.json +24 -57
- package/dist/components/blog-post/blog-post.schema.dereffed.json +24 -57
- package/dist/components/cta/cta.css +59 -36
- package/dist/components/cta/cta.schema.dereffed.json +8 -19
- package/dist/components/cta/cta.schema.json +8 -15
- package/dist/components/cta/index.d.ts +1 -1
- package/dist/components/cta/index.js +6 -4
- package/dist/components/footer/footer.css +1 -1
- package/dist/components/header/header.css +1 -1
- package/dist/components/hero/hero.css +5 -3
- package/dist/components/image-story/image-story.css +2 -5
- package/dist/components/mosaic/mosaic.css +1 -1
- package/dist/components/page/page.schema.dereffed.json +16 -38
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +50 -56
- package/dist/components/section/section.css +2 -2
- package/dist/components/section/section.schema.dereffed.json +16 -38
- package/dist/components/slider/index.d.ts +1 -1
- package/dist/components/slider/slider.schema.dereffed.json +8 -19
- package/dist/components/split/split.css +2 -2
- package/dist/components/testimonials/index.d.ts +1 -1
- package/dist/global.css +2 -3
- package/dist/tokens/themes.css +4 -4
- package/dist/tokens/tokens.css +1 -1
- package/dist/tokens/tokens.js +1 -1
- 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-
|
|
8
|
+
import { CtaProps } from "./CtaProps-93230a76.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-
|
|
9
|
+
import { CtaProps } from "./CtaProps-93230a76.js";
|
|
10
10
|
import { SeoProps } from "./SeoProps-f2d6dcaa.js";
|
|
11
11
|
/**
|
|
12
12
|
* Body text for the blog post, overwrites sections if present
|
|
@@ -23,6 +23,10 @@ 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;
|
|
26
30
|
/**
|
|
27
31
|
* Text content to display inside the button
|
|
28
32
|
*/
|
|
@@ -55,10 +59,6 @@ type Padding = boolean;
|
|
|
55
59
|
* Image description
|
|
56
60
|
*/
|
|
57
61
|
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,27 +72,23 @@ type DesktopImageAfterText = boolean;
|
|
|
72
72
|
*/
|
|
73
73
|
type TextAlignment = "left" | "center";
|
|
74
74
|
/**
|
|
75
|
-
* Select a vertical alignment for the
|
|
75
|
+
* Select a vertical alignment for the image
|
|
76
76
|
*/
|
|
77
77
|
type VerticalAlignmentOfTheContent = "center" | "top" | "bottom";
|
|
78
|
-
/**
|
|
79
|
-
* Toggle padding of the content
|
|
80
|
-
*/
|
|
81
|
-
type Padding1 = boolean;
|
|
82
78
|
interface CtaProps {
|
|
83
79
|
headline?: ComponentHeadline;
|
|
84
80
|
sub?: ComponentSubheadline;
|
|
85
81
|
text?: ComponentText;
|
|
86
82
|
highlightText?: HighlightText;
|
|
87
83
|
colorNeutral?: ColorNeutral;
|
|
84
|
+
fullWidth?: Width;
|
|
88
85
|
buttons?: Button[];
|
|
89
86
|
backgroundColor?: BackgroundColor;
|
|
90
87
|
backgroundImage?: BackgroundImage;
|
|
91
88
|
image?: Image;
|
|
92
89
|
order?: Order;
|
|
93
90
|
textAlign?: TextAlignment;
|
|
94
|
-
|
|
95
|
-
padding?: Padding1;
|
|
91
|
+
contentAlign?: VerticalAlignmentOfTheContent;
|
|
96
92
|
}
|
|
97
93
|
interface Button {
|
|
98
94
|
label?: Label;
|
|
@@ -106,7 +102,6 @@ interface Image {
|
|
|
106
102
|
src?: ImageSource;
|
|
107
103
|
padding?: Padding;
|
|
108
104
|
alt?: AltText;
|
|
109
|
-
align?: VerticalAlignmentOfTheImage;
|
|
110
105
|
}
|
|
111
106
|
/**
|
|
112
107
|
* Choose what comes first on mobile and desktop: image or text
|
|
@@ -115,4 +110,4 @@ interface Order {
|
|
|
115
110
|
mobileImageLast?: MobileImageAfterText;
|
|
116
111
|
desktopImageLast?: DesktopImageAfterText;
|
|
117
112
|
}
|
|
118
|
-
export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Label, Icon, Target, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText,
|
|
113
|
+
export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Width, Label, Icon, Target, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, MobileImageAfterText, DesktopImageAfterText, TextAlignment, VerticalAlignmentOfTheContent, 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-
|
|
6
|
+
import { CtaProps } from "./CtaProps-93230a76.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-e853e1e7.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-
|
|
17
|
+
import { SliderProps } from "./SliderProps-93230a76.js";
|
|
18
18
|
import { StatsProps } from "./StatsProps-bf5ef578.js";
|
|
19
19
|
import { TeaserCardProps } from "./TeaserCardProps-b9c28e78.js";
|
|
20
20
|
import { TestimonialsProps } from "./TestimonialsProps-f7211553.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-
|
|
6
|
+
import { CtaProps } from "./CtaProps-93230a76.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,6 +282,12 @@
|
|
|
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
|
+
},
|
|
285
291
|
"buttons": {
|
|
286
292
|
"type": "array",
|
|
287
293
|
"items": {
|
|
@@ -345,17 +351,6 @@
|
|
|
345
351
|
"title": "Alt text",
|
|
346
352
|
"description": "Image description",
|
|
347
353
|
"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"
|
|
359
354
|
}
|
|
360
355
|
},
|
|
361
356
|
"additionalProperties": false
|
|
@@ -390,9 +385,9 @@
|
|
|
390
385
|
"type": "string",
|
|
391
386
|
"default": "left"
|
|
392
387
|
},
|
|
393
|
-
"
|
|
388
|
+
"contentAlign": {
|
|
394
389
|
"title": "Vertical alignment of the content",
|
|
395
|
-
"description": "Select a vertical alignment for the
|
|
390
|
+
"description": "Select a vertical alignment for the image",
|
|
396
391
|
"type": "string",
|
|
397
392
|
"enum": [
|
|
398
393
|
"center",
|
|
@@ -401,12 +396,6 @@
|
|
|
401
396
|
],
|
|
402
397
|
"default": "center"
|
|
403
398
|
},
|
|
404
|
-
"padding": {
|
|
405
|
-
"title": "Padding",
|
|
406
|
-
"description": "Toggle padding of the content",
|
|
407
|
-
"type": "boolean",
|
|
408
|
-
"default": false
|
|
409
|
-
},
|
|
410
399
|
"type": {
|
|
411
400
|
"const": "cta"
|
|
412
401
|
}
|
|
@@ -1549,6 +1538,12 @@
|
|
|
1549
1538
|
"default": false,
|
|
1550
1539
|
"type": "boolean"
|
|
1551
1540
|
},
|
|
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
|
+
},
|
|
1552
1547
|
"buttons": {
|
|
1553
1548
|
"type": "array",
|
|
1554
1549
|
"items": {
|
|
@@ -1612,17 +1607,6 @@
|
|
|
1612
1607
|
"title": "Alt text",
|
|
1613
1608
|
"description": "Image description",
|
|
1614
1609
|
"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"
|
|
1626
1610
|
}
|
|
1627
1611
|
},
|
|
1628
1612
|
"additionalProperties": false
|
|
@@ -1657,9 +1641,9 @@
|
|
|
1657
1641
|
"type": "string",
|
|
1658
1642
|
"default": "left"
|
|
1659
1643
|
},
|
|
1660
|
-
"
|
|
1644
|
+
"contentAlign": {
|
|
1661
1645
|
"title": "Vertical alignment of the content",
|
|
1662
|
-
"description": "Select a vertical alignment for the
|
|
1646
|
+
"description": "Select a vertical alignment for the image",
|
|
1663
1647
|
"type": "string",
|
|
1664
1648
|
"enum": [
|
|
1665
1649
|
"center",
|
|
@@ -1668,12 +1652,6 @@
|
|
|
1668
1652
|
],
|
|
1669
1653
|
"default": "center"
|
|
1670
1654
|
},
|
|
1671
|
-
"padding": {
|
|
1672
|
-
"title": "Padding",
|
|
1673
|
-
"description": "Toggle padding of the content",
|
|
1674
|
-
"type": "boolean",
|
|
1675
|
-
"default": false
|
|
1676
|
-
},
|
|
1677
1655
|
"type": {
|
|
1678
1656
|
"const": "cta"
|
|
1679
1657
|
}
|
|
@@ -3715,6 +3693,12 @@
|
|
|
3715
3693
|
"default": false,
|
|
3716
3694
|
"type": "boolean"
|
|
3717
3695
|
},
|
|
3696
|
+
"fullWidth": {
|
|
3697
|
+
"title": "Width",
|
|
3698
|
+
"description": "Set the width of the content to the full width of the element",
|
|
3699
|
+
"type": "boolean",
|
|
3700
|
+
"default": false
|
|
3701
|
+
},
|
|
3718
3702
|
"buttons": {
|
|
3719
3703
|
"type": "array",
|
|
3720
3704
|
"items": {
|
|
@@ -3778,17 +3762,6 @@
|
|
|
3778
3762
|
"title": "Alt text",
|
|
3779
3763
|
"description": "Image description",
|
|
3780
3764
|
"type": "string"
|
|
3781
|
-
},
|
|
3782
|
-
"align": {
|
|
3783
|
-
"title": "Vertical alignment of the image",
|
|
3784
|
-
"description": "Select a vertical alignment for the image",
|
|
3785
|
-
"type": "string",
|
|
3786
|
-
"enum": [
|
|
3787
|
-
"center",
|
|
3788
|
-
"top",
|
|
3789
|
-
"bottom"
|
|
3790
|
-
],
|
|
3791
|
-
"default": "center"
|
|
3792
3765
|
}
|
|
3793
3766
|
},
|
|
3794
3767
|
"additionalProperties": false
|
|
@@ -3823,9 +3796,9 @@
|
|
|
3823
3796
|
"type": "string",
|
|
3824
3797
|
"default": "left"
|
|
3825
3798
|
},
|
|
3826
|
-
"
|
|
3799
|
+
"contentAlign": {
|
|
3827
3800
|
"title": "Vertical alignment of the content",
|
|
3828
|
-
"description": "Select a vertical alignment for the
|
|
3801
|
+
"description": "Select a vertical alignment for the image",
|
|
3829
3802
|
"type": "string",
|
|
3830
3803
|
"enum": [
|
|
3831
3804
|
"center",
|
|
@@ -3834,12 +3807,6 @@
|
|
|
3834
3807
|
],
|
|
3835
3808
|
"default": "center"
|
|
3836
3809
|
},
|
|
3837
|
-
"padding": {
|
|
3838
|
-
"title": "Padding",
|
|
3839
|
-
"description": "Toggle padding of the content",
|
|
3840
|
-
"type": "boolean",
|
|
3841
|
-
"default": false
|
|
3842
|
-
},
|
|
3843
3810
|
"type": {
|
|
3844
3811
|
"const": "cta"
|
|
3845
3812
|
}
|
|
@@ -558,6 +558,12 @@
|
|
|
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
|
+
},
|
|
561
567
|
"buttons": {
|
|
562
568
|
"type": "array",
|
|
563
569
|
"items": {
|
|
@@ -621,17 +627,6 @@
|
|
|
621
627
|
"title": "Alt text",
|
|
622
628
|
"description": "Image description",
|
|
623
629
|
"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"
|
|
635
630
|
}
|
|
636
631
|
},
|
|
637
632
|
"additionalProperties": false
|
|
@@ -666,9 +661,9 @@
|
|
|
666
661
|
"type": "string",
|
|
667
662
|
"default": "left"
|
|
668
663
|
},
|
|
669
|
-
"
|
|
664
|
+
"contentAlign": {
|
|
670
665
|
"title": "Vertical alignment of the content",
|
|
671
|
-
"description": "Select a vertical alignment for the
|
|
666
|
+
"description": "Select a vertical alignment for the image",
|
|
672
667
|
"type": "string",
|
|
673
668
|
"enum": [
|
|
674
669
|
"center",
|
|
@@ -677,12 +672,6 @@
|
|
|
677
672
|
],
|
|
678
673
|
"default": "center"
|
|
679
674
|
},
|
|
680
|
-
"padding": {
|
|
681
|
-
"title": "Padding",
|
|
682
|
-
"description": "Toggle padding of the content",
|
|
683
|
-
"type": "boolean",
|
|
684
|
-
"default": false
|
|
685
|
-
},
|
|
686
675
|
"type": {
|
|
687
676
|
"const": "cta"
|
|
688
677
|
}
|
|
@@ -1825,6 +1814,12 @@
|
|
|
1825
1814
|
"default": false,
|
|
1826
1815
|
"type": "boolean"
|
|
1827
1816
|
},
|
|
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
|
+
},
|
|
1828
1823
|
"buttons": {
|
|
1829
1824
|
"type": "array",
|
|
1830
1825
|
"items": {
|
|
@@ -1888,17 +1883,6 @@
|
|
|
1888
1883
|
"title": "Alt text",
|
|
1889
1884
|
"description": "Image description",
|
|
1890
1885
|
"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"
|
|
1902
1886
|
}
|
|
1903
1887
|
},
|
|
1904
1888
|
"additionalProperties": false
|
|
@@ -1933,9 +1917,9 @@
|
|
|
1933
1917
|
"type": "string",
|
|
1934
1918
|
"default": "left"
|
|
1935
1919
|
},
|
|
1936
|
-
"
|
|
1920
|
+
"contentAlign": {
|
|
1937
1921
|
"title": "Vertical alignment of the content",
|
|
1938
|
-
"description": "Select a vertical alignment for the
|
|
1922
|
+
"description": "Select a vertical alignment for the image",
|
|
1939
1923
|
"type": "string",
|
|
1940
1924
|
"enum": [
|
|
1941
1925
|
"center",
|
|
@@ -1944,12 +1928,6 @@
|
|
|
1944
1928
|
],
|
|
1945
1929
|
"default": "center"
|
|
1946
1930
|
},
|
|
1947
|
-
"padding": {
|
|
1948
|
-
"title": "Padding",
|
|
1949
|
-
"description": "Toggle padding of the content",
|
|
1950
|
-
"type": "boolean",
|
|
1951
|
-
"default": false
|
|
1952
|
-
},
|
|
1953
1931
|
"type": {
|
|
1954
1932
|
"const": "cta"
|
|
1955
1933
|
}
|
|
@@ -3474,6 +3452,12 @@
|
|
|
3474
3452
|
"default": false,
|
|
3475
3453
|
"type": "boolean"
|
|
3476
3454
|
},
|
|
3455
|
+
"fullWidth": {
|
|
3456
|
+
"title": "Width",
|
|
3457
|
+
"description": "Set the width of the content to the full width of the element",
|
|
3458
|
+
"type": "boolean",
|
|
3459
|
+
"default": false
|
|
3460
|
+
},
|
|
3477
3461
|
"buttons": {
|
|
3478
3462
|
"type": "array",
|
|
3479
3463
|
"items": {
|
|
@@ -3537,17 +3521,6 @@
|
|
|
3537
3521
|
"title": "Alt text",
|
|
3538
3522
|
"description": "Image description",
|
|
3539
3523
|
"type": "string"
|
|
3540
|
-
},
|
|
3541
|
-
"align": {
|
|
3542
|
-
"title": "Vertical alignment of the image",
|
|
3543
|
-
"description": "Select a vertical alignment for the image",
|
|
3544
|
-
"type": "string",
|
|
3545
|
-
"enum": [
|
|
3546
|
-
"center",
|
|
3547
|
-
"top",
|
|
3548
|
-
"bottom"
|
|
3549
|
-
],
|
|
3550
|
-
"default": "center"
|
|
3551
3524
|
}
|
|
3552
3525
|
},
|
|
3553
3526
|
"additionalProperties": false
|
|
@@ -3582,9 +3555,9 @@
|
|
|
3582
3555
|
"type": "string",
|
|
3583
3556
|
"default": "left"
|
|
3584
3557
|
},
|
|
3585
|
-
"
|
|
3558
|
+
"contentAlign": {
|
|
3586
3559
|
"title": "Vertical alignment of the content",
|
|
3587
|
-
"description": "Select a vertical alignment for the
|
|
3560
|
+
"description": "Select a vertical alignment for the image",
|
|
3588
3561
|
"type": "string",
|
|
3589
3562
|
"enum": [
|
|
3590
3563
|
"center",
|
|
@@ -3593,12 +3566,6 @@
|
|
|
3593
3566
|
],
|
|
3594
3567
|
"default": "center"
|
|
3595
3568
|
},
|
|
3596
|
-
"padding": {
|
|
3597
|
-
"title": "Padding",
|
|
3598
|
-
"description": "Toggle padding of the content",
|
|
3599
|
-
"type": "boolean",
|
|
3600
|
-
"default": false
|
|
3601
|
-
},
|
|
3602
3569
|
"type": {
|
|
3603
3570
|
"const": "cta"
|
|
3604
3571
|
}
|
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
.dsa-cta {
|
|
2
|
-
--dsa-cta--
|
|
3
|
-
--dsa-
|
|
4
|
-
--dsa-cta__content--horizontal-padding: var(--dsa-content--horizontal-spacing);
|
|
5
|
-
--dsa-cta__content--max-width: var(--dsa-content--width_narrow);
|
|
2
|
+
--dsa-cta--vertical-padding: var(--l-section--space-default);
|
|
3
|
+
--dsa-cta--horizontal-padding: var(--dsa-content--spacing);
|
|
6
4
|
--dsa-cta__copy--font: var(--dsa-rich-text--font);
|
|
7
5
|
--dsa-cta__copy--color: var(--ks-text-color-default);
|
|
8
6
|
--dsa-cta__headline--color: var(--dsa-headline--color);
|
|
9
7
|
--dsa-cta__headline--font: var(--dsa-headline_h2--font);
|
|
10
8
|
--dsa-cta__subheadline--color: var(--dsa-headline__subheadline--color);
|
|
11
9
|
--dsa-cta__subheadline--font: var(--dsa-headline_h2__subheadline--font);
|
|
12
|
-
--dsa-cta__image--padding: var(--ks-spacing-inset-m);
|
|
13
10
|
--dsa-cta_color-neutral__headline--color: var(--ks-text-color-default);
|
|
14
11
|
--dsa-cta_color-neutral__subheadline--color: var(--ks-text-color-default);
|
|
15
12
|
--dsa-cta_color-neutral__copy--color: var(--ks-text-color-default);
|
|
@@ -19,11 +16,11 @@
|
|
|
19
16
|
}
|
|
20
17
|
|
|
21
18
|
.dsa-cta.c-storytelling {
|
|
22
|
-
--c-storytelling--
|
|
23
|
-
--c-storytelling--
|
|
19
|
+
--c-storytelling--padding-ratio: 2;
|
|
20
|
+
--c-storytelling--horizontal-padding: var(--dsa-content--spacing);
|
|
24
21
|
justify-content: center;
|
|
25
22
|
align-items: stretch;
|
|
26
|
-
|
|
23
|
+
padding: 0;
|
|
27
24
|
}
|
|
28
25
|
.dsa-cta.c-storytelling.dsa-cta--color-neutral {
|
|
29
26
|
--dsa-cta__copy--color: var(--dsa-cta_color-neutral__copy--color, var(--ks-text-color-default));
|
|
@@ -38,19 +35,34 @@
|
|
|
38
35
|
var(--dsa-headline_h1__subheadline--font)
|
|
39
36
|
);
|
|
40
37
|
}
|
|
41
|
-
.dsa-cta.c-storytelling.
|
|
42
|
-
padding:
|
|
38
|
+
.dsa-cta.c-storytelling.c-storytelling--full {
|
|
39
|
+
--c-storytelling--padding-ratio: 1;
|
|
43
40
|
}
|
|
44
|
-
.dsa-cta.c-storytelling.
|
|
45
|
-
padding: var(--dsa-
|
|
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);
|
|
46
43
|
}
|
|
47
|
-
.dsa-cta.c-storytelling
|
|
48
|
-
|
|
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;
|
|
49
|
+
}
|
|
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));
|
|
53
|
+
}
|
|
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
|
+
}
|
|
49
61
|
}
|
|
50
62
|
.dsa-cta.c-storytelling .c-storytelling__box:only-child {
|
|
51
|
-
--
|
|
63
|
+
padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing));
|
|
52
64
|
}
|
|
53
|
-
.dsa-cta.c-storytelling .c-
|
|
65
|
+
.dsa-cta.c-storytelling .c-storytelling__box__content {
|
|
54
66
|
max-width: 100%;
|
|
55
67
|
}
|
|
56
68
|
.dsa-cta.c-storytelling .c-storytelling__box .dsa-headline__headline {
|
|
@@ -67,39 +79,50 @@
|
|
|
67
79
|
font: var(--dsa-cta__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
|
|
68
80
|
color: var(--dsa-cta__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-copy)));
|
|
69
81
|
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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 {
|
|
86
|
+
margin: 0;
|
|
87
|
+
}
|
|
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
91
|
}
|
|
74
|
-
.dsa-cta.c-storytelling.c-storytelling--order-
|
|
75
|
-
padding-
|
|
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));
|
|
76
94
|
}
|
|
77
|
-
.dsa-cta.c-storytelling
|
|
78
|
-
padding-
|
|
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));
|
|
79
97
|
}
|
|
80
|
-
.dsa-cta.c-storytelling
|
|
81
|
-
|
|
98
|
+
.dsa-cta.c-storytelling .c-storytelling__box__content--center .c-button-group {
|
|
99
|
+
justify-content: center;
|
|
82
100
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
padding-right: 0;
|
|
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));
|
|
87
104
|
}
|
|
88
|
-
.dsa-cta.c-storytelling
|
|
89
|
-
padding
|
|
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));
|
|
108
|
+
}
|
|
109
|
+
.dsa-cta.c-storytelling.c-storytelling--full > .c-storytelling__image {
|
|
110
|
+
padding: 0;
|
|
90
111
|
}
|
|
91
|
-
.dsa-cta.c-storytelling
|
|
92
|
-
|
|
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);
|
|
93
115
|
}
|
|
94
|
-
.dsa-cta.c-storytelling
|
|
95
|
-
|
|
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%;
|
|
96
119
|
}
|
|
97
120
|
}
|
|
98
121
|
|
|
99
122
|
@media (min-width: 640px) {
|
|
100
123
|
.dsa-header--floating + .l-container--storytelling .c-storytelling.dsa-cta,
|
|
101
124
|
.dsa-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.dsa-cta {
|
|
102
|
-
padding-top: calc(var(--dsa-header--height) + var(--dsa-
|
|
125
|
+
padding-top: calc(var(--dsa-header--height) + var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing)));
|
|
103
126
|
z-index: 1;
|
|
104
127
|
}
|
|
105
128
|
}
|
|
@@ -40,6 +40,12 @@
|
|
|
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
|
+
},
|
|
43
49
|
"buttons": {
|
|
44
50
|
"type": "array",
|
|
45
51
|
"items": {
|
|
@@ -103,17 +109,6 @@
|
|
|
103
109
|
"title": "Alt text",
|
|
104
110
|
"description": "Image description",
|
|
105
111
|
"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"
|
|
117
112
|
}
|
|
118
113
|
},
|
|
119
114
|
"additionalProperties": false
|
|
@@ -148,9 +143,9 @@
|
|
|
148
143
|
"type": "string",
|
|
149
144
|
"default": "left"
|
|
150
145
|
},
|
|
151
|
-
"
|
|
146
|
+
"contentAlign": {
|
|
152
147
|
"title": "Vertical alignment of the content",
|
|
153
|
-
"description": "Select a vertical alignment for the
|
|
148
|
+
"description": "Select a vertical alignment for the image",
|
|
154
149
|
"type": "string",
|
|
155
150
|
"enum": [
|
|
156
151
|
"center",
|
|
@@ -159,12 +154,6 @@
|
|
|
159
154
|
],
|
|
160
155
|
"default": "center"
|
|
161
156
|
},
|
|
162
|
-
"padding": {
|
|
163
|
-
"title": "Padding",
|
|
164
|
-
"description": "Toggle padding of the content",
|
|
165
|
-
"type": "boolean",
|
|
166
|
-
"default": false
|
|
167
|
-
},
|
|
168
157
|
"type": {
|
|
169
158
|
"const": "cta"
|
|
170
159
|
}
|