@kickstartds/ds-agency-premium 1.6.58 → 1.6.59--canary.40.1490.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.
- package/dist/{BlogOverviewProps-9f207f1c.d.ts → BlogOverviewProps-1cfcf6e8.d.ts} +2 -2
- package/dist/{BlogPostProps-6b3cff22.d.ts → BlogPostProps-d9decb7c.d.ts} +2 -2
- package/dist/{CtaProps-93230a76.d.ts → CtaProps-02e33bf1.d.ts} +8 -8
- package/dist/{PageProps-aa29c554.d.ts → PageProps-1cfcf6e8.d.ts} +1 -1
- package/dist/{SectionProps-1cfcf6e8.d.ts → SectionProps-03ff6d21.d.ts} +3 -3
- package/dist/{SliderProps-93230a76.d.ts → SliderProps-02e33bf1.d.ts} +1 -1
- package/dist/components/blog-overview/blog-overview.schema.dereffed.json +39 -24
- package/dist/components/blog-overview/index.d.ts +1 -1
- package/dist/components/blog-post/blog-post.schema.dereffed.json +39 -24
- package/dist/components/blog-post/index.d.ts +1 -1
- package/dist/components/cta/cta.css +35 -61
- package/dist/components/cta/cta.schema.dereffed.json +13 -8
- package/dist/components/cta/cta.schema.json +9 -8
- package/dist/components/cta/index.d.ts +1 -1
- package/dist/components/cta/index.js +4 -6
- package/dist/components/footer/footer.css +1 -1
- package/dist/components/header/header.css +1 -1
- package/dist/components/hero/hero.css +3 -2
- package/dist/components/image-story/image-story.css +5 -2
- package/dist/components/image-story/index.d.ts +1 -1
- package/dist/components/index/index.d.ts +3 -3
- package/dist/components/mosaic/mosaic.css +1 -1
- package/dist/components/page/index.d.ts +1 -1
- package/dist/components/page/page.schema.dereffed.json +26 -16
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +45 -49
- package/dist/components/section/index.d.ts +1 -1
- package/dist/components/section/section.css +2 -2
- package/dist/components/section/section.schema.dereffed.json +26 -16
- package/dist/components/slider/index.d.ts +1 -1
- package/dist/components/slider/slider.schema.dereffed.json +13 -8
- package/dist/components/split/split.css +2 -2
- package/dist/components/testimonials/index.d.ts +1 -1
- package/dist/global.css +15 -6
- 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
- /package/dist/{ImageStoryProps-e853e1e7.d.ts → ImageStoryProps-03ff6d21.d.ts} +0 -0
|
@@ -3,9 +3,9 @@
|
|
|
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-
|
|
6
|
+
import { SectionProps } from "./SectionProps-03ff6d21.js";
|
|
7
7
|
import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
|
|
8
|
-
import { CtaProps } from "./CtaProps-
|
|
8
|
+
import { CtaProps } from "./CtaProps-02e33bf1.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
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
|
|
7
7
|
import { BlogAsideProps } from "./BlogAsideProps-d9decb7c.js";
|
|
8
|
-
import { SectionProps } from "./SectionProps-
|
|
9
|
-
import { CtaProps } from "./CtaProps-
|
|
8
|
+
import { SectionProps } from "./SectionProps-03ff6d21.js";
|
|
9
|
+
import { CtaProps } from "./CtaProps-02e33bf1.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,7 +72,7 @@ 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 content
|
|
76
76
|
*/
|
|
77
77
|
type VerticalAlignmentOfTheContent = "center" | "top" | "bottom";
|
|
78
78
|
interface CtaProps {
|
|
@@ -81,14 +81,13 @@ interface CtaProps {
|
|
|
81
81
|
text?: ComponentText;
|
|
82
82
|
highlightText?: HighlightText;
|
|
83
83
|
colorNeutral?: ColorNeutral;
|
|
84
|
-
fullWidth?: Width;
|
|
85
84
|
buttons?: Button[];
|
|
86
85
|
backgroundColor?: BackgroundColor;
|
|
87
86
|
backgroundImage?: BackgroundImage;
|
|
88
87
|
image?: Image;
|
|
89
88
|
order?: Order;
|
|
90
89
|
textAlign?: TextAlignment;
|
|
91
|
-
|
|
90
|
+
align?: VerticalAlignmentOfTheContent;
|
|
92
91
|
}
|
|
93
92
|
interface Button {
|
|
94
93
|
label?: Label;
|
|
@@ -102,6 +101,7 @@ interface Image {
|
|
|
102
101
|
src?: ImageSource;
|
|
103
102
|
padding?: Padding;
|
|
104
103
|
alt?: AltText;
|
|
104
|
+
align?: VerticalAlignmentOfTheImage;
|
|
105
105
|
}
|
|
106
106
|
/**
|
|
107
107
|
* Choose what comes first on mobile and desktop: image or text
|
|
@@ -110,4 +110,4 @@ interface Order {
|
|
|
110
110
|
mobileImageLast?: MobileImageAfterText;
|
|
111
111
|
desktopImageLast?: DesktopImageAfterText;
|
|
112
112
|
}
|
|
113
|
-
export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral,
|
|
113
|
+
export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Label, Icon, Target, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, VerticalAlignmentOfTheImage, 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 { SectionProps } from "./SectionProps-
|
|
6
|
+
import { SectionProps } from "./SectionProps-03ff6d21.js";
|
|
7
7
|
import { SeoProps } from "./SeoProps-f2d6dcaa.js";
|
|
8
8
|
/**
|
|
9
9
|
* Collection of sections (with their contents) to render on the page
|
|
@@ -3,18 +3,18 @@
|
|
|
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-02e33bf1.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";
|
|
10
10
|
import { GalleryProps } from "./GalleryProps-76e7de44.js";
|
|
11
11
|
import { HeroProps } from "./HeroProps-f704d270.js";
|
|
12
12
|
import { HtmlProps } from "./HtmlProps-8e95ed81.js";
|
|
13
|
-
import { ImageStoryProps } from "./ImageStoryProps-
|
|
13
|
+
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-
|
|
17
|
+
import { SliderProps } from "./SliderProps-02e33bf1.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-02e33bf1.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
|
-
"
|
|
393
|
+
"align": {
|
|
389
394
|
"title": "Vertical alignment of the content",
|
|
390
|
-
"description": "Select a vertical alignment for the
|
|
395
|
+
"description": "Select a vertical alignment for the content",
|
|
391
396
|
"type": "string",
|
|
392
397
|
"enum": [
|
|
393
398
|
"center",
|
|
@@ -1538,12 +1543,6 @@
|
|
|
1538
1543
|
"default": false,
|
|
1539
1544
|
"type": "boolean"
|
|
1540
1545
|
},
|
|
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
1546
|
"buttons": {
|
|
1548
1547
|
"type": "array",
|
|
1549
1548
|
"items": {
|
|
@@ -1607,6 +1606,17 @@
|
|
|
1607
1606
|
"title": "Alt text",
|
|
1608
1607
|
"description": "Image description",
|
|
1609
1608
|
"type": "string"
|
|
1609
|
+
},
|
|
1610
|
+
"align": {
|
|
1611
|
+
"title": "Vertical alignment of the image",
|
|
1612
|
+
"description": "Select a vertical alignment for the image",
|
|
1613
|
+
"type": "string",
|
|
1614
|
+
"enum": [
|
|
1615
|
+
"center",
|
|
1616
|
+
"top",
|
|
1617
|
+
"bottom"
|
|
1618
|
+
],
|
|
1619
|
+
"default": "center"
|
|
1610
1620
|
}
|
|
1611
1621
|
},
|
|
1612
1622
|
"additionalProperties": false
|
|
@@ -1641,9 +1651,9 @@
|
|
|
1641
1651
|
"type": "string",
|
|
1642
1652
|
"default": "left"
|
|
1643
1653
|
},
|
|
1644
|
-
"
|
|
1654
|
+
"align": {
|
|
1645
1655
|
"title": "Vertical alignment of the content",
|
|
1646
|
-
"description": "Select a vertical alignment for the
|
|
1656
|
+
"description": "Select a vertical alignment for the content",
|
|
1647
1657
|
"type": "string",
|
|
1648
1658
|
"enum": [
|
|
1649
1659
|
"center",
|
|
@@ -3693,12 +3703,6 @@
|
|
|
3693
3703
|
"default": false,
|
|
3694
3704
|
"type": "boolean"
|
|
3695
3705
|
},
|
|
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
|
-
},
|
|
3702
3706
|
"buttons": {
|
|
3703
3707
|
"type": "array",
|
|
3704
3708
|
"items": {
|
|
@@ -3762,6 +3766,17 @@
|
|
|
3762
3766
|
"title": "Alt text",
|
|
3763
3767
|
"description": "Image description",
|
|
3764
3768
|
"type": "string"
|
|
3769
|
+
},
|
|
3770
|
+
"align": {
|
|
3771
|
+
"title": "Vertical alignment of the image",
|
|
3772
|
+
"description": "Select a vertical alignment for the image",
|
|
3773
|
+
"type": "string",
|
|
3774
|
+
"enum": [
|
|
3775
|
+
"center",
|
|
3776
|
+
"top",
|
|
3777
|
+
"bottom"
|
|
3778
|
+
],
|
|
3779
|
+
"default": "center"
|
|
3765
3780
|
}
|
|
3766
3781
|
},
|
|
3767
3782
|
"additionalProperties": false
|
|
@@ -3796,9 +3811,9 @@
|
|
|
3796
3811
|
"type": "string",
|
|
3797
3812
|
"default": "left"
|
|
3798
3813
|
},
|
|
3799
|
-
"
|
|
3814
|
+
"align": {
|
|
3800
3815
|
"title": "Vertical alignment of the content",
|
|
3801
|
-
"description": "Select a vertical alignment for the
|
|
3816
|
+
"description": "Select a vertical alignment for the content",
|
|
3802
3817
|
"type": "string",
|
|
3803
3818
|
"enum": [
|
|
3804
3819
|
"center",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BlogOverviewProps } from "../../BlogOverviewProps-
|
|
1
|
+
import { BlogOverviewProps } from "../../BlogOverviewProps-1cfcf6e8.js";
|
|
2
2
|
import { FC, PropsWithChildren } from "react";
|
|
3
3
|
declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
|
|
4
4
|
export type { BlogOverviewProps };
|
|
@@ -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
|
-
"
|
|
669
|
+
"align": {
|
|
665
670
|
"title": "Vertical alignment of the content",
|
|
666
|
-
"description": "Select a vertical alignment for the
|
|
671
|
+
"description": "Select a vertical alignment for the content",
|
|
667
672
|
"type": "string",
|
|
668
673
|
"enum": [
|
|
669
674
|
"center",
|
|
@@ -1814,12 +1819,6 @@
|
|
|
1814
1819
|
"default": false,
|
|
1815
1820
|
"type": "boolean"
|
|
1816
1821
|
},
|
|
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
1822
|
"buttons": {
|
|
1824
1823
|
"type": "array",
|
|
1825
1824
|
"items": {
|
|
@@ -1883,6 +1882,17 @@
|
|
|
1883
1882
|
"title": "Alt text",
|
|
1884
1883
|
"description": "Image description",
|
|
1885
1884
|
"type": "string"
|
|
1885
|
+
},
|
|
1886
|
+
"align": {
|
|
1887
|
+
"title": "Vertical alignment of the image",
|
|
1888
|
+
"description": "Select a vertical alignment for the image",
|
|
1889
|
+
"type": "string",
|
|
1890
|
+
"enum": [
|
|
1891
|
+
"center",
|
|
1892
|
+
"top",
|
|
1893
|
+
"bottom"
|
|
1894
|
+
],
|
|
1895
|
+
"default": "center"
|
|
1886
1896
|
}
|
|
1887
1897
|
},
|
|
1888
1898
|
"additionalProperties": false
|
|
@@ -1917,9 +1927,9 @@
|
|
|
1917
1927
|
"type": "string",
|
|
1918
1928
|
"default": "left"
|
|
1919
1929
|
},
|
|
1920
|
-
"
|
|
1930
|
+
"align": {
|
|
1921
1931
|
"title": "Vertical alignment of the content",
|
|
1922
|
-
"description": "Select a vertical alignment for the
|
|
1932
|
+
"description": "Select a vertical alignment for the content",
|
|
1923
1933
|
"type": "string",
|
|
1924
1934
|
"enum": [
|
|
1925
1935
|
"center",
|
|
@@ -3452,12 +3462,6 @@
|
|
|
3452
3462
|
"default": false,
|
|
3453
3463
|
"type": "boolean"
|
|
3454
3464
|
},
|
|
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
|
-
},
|
|
3461
3465
|
"buttons": {
|
|
3462
3466
|
"type": "array",
|
|
3463
3467
|
"items": {
|
|
@@ -3521,6 +3525,17 @@
|
|
|
3521
3525
|
"title": "Alt text",
|
|
3522
3526
|
"description": "Image description",
|
|
3523
3527
|
"type": "string"
|
|
3528
|
+
},
|
|
3529
|
+
"align": {
|
|
3530
|
+
"title": "Vertical alignment of the image",
|
|
3531
|
+
"description": "Select a vertical alignment for the image",
|
|
3532
|
+
"type": "string",
|
|
3533
|
+
"enum": [
|
|
3534
|
+
"center",
|
|
3535
|
+
"top",
|
|
3536
|
+
"bottom"
|
|
3537
|
+
],
|
|
3538
|
+
"default": "center"
|
|
3524
3539
|
}
|
|
3525
3540
|
},
|
|
3526
3541
|
"additionalProperties": false
|
|
@@ -3555,9 +3570,9 @@
|
|
|
3555
3570
|
"type": "string",
|
|
3556
3571
|
"default": "left"
|
|
3557
3572
|
},
|
|
3558
|
-
"
|
|
3573
|
+
"align": {
|
|
3559
3574
|
"title": "Vertical alignment of the content",
|
|
3560
|
-
"description": "Select a vertical alignment for the
|
|
3575
|
+
"description": "Select a vertical alignment for the content",
|
|
3561
3576
|
"type": "string",
|
|
3562
3577
|
"enum": [
|
|
3563
3578
|
"center",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BlogPostProps } from "../../BlogPostProps-
|
|
1
|
+
import { BlogPostProps } from "../../BlogPostProps-d9decb7c.js";
|
|
2
2
|
import { FC, PropsWithChildren } from "react";
|
|
3
3
|
declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
|
|
4
4
|
export type { BlogPostProps };
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
.dsa-cta {
|
|
2
|
-
--dsa-cta--
|
|
3
|
-
--dsa-
|
|
2
|
+
--dsa-cta--gap: var(--ks-spacing-stack-m) var(--ks-spacing-inline-m);
|
|
3
|
+
--dsa-cta__content--vertical-padding: var(--l-section--space-default);
|
|
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
|
|
20
|
-
--c-storytelling--
|
|
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
|
-
|
|
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,16 @@
|
|
|
35
38
|
var(--dsa-headline_h1__subheadline--font)
|
|
36
39
|
);
|
|
37
40
|
}
|
|
38
|
-
.dsa-cta.c-storytelling.
|
|
39
|
-
|
|
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;
|
|
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
|
-
}
|
|
41
|
+
.dsa-cta.c-storytelling.dsa-cta--no-padding .c-storytelling__box {
|
|
42
|
+
padding: 0;
|
|
61
43
|
}
|
|
62
|
-
.dsa-cta.c-storytelling .c-
|
|
63
|
-
padding: var(--dsa-
|
|
44
|
+
.dsa-cta.c-storytelling.dsa-cta--image-padding .c-storytelling__image {
|
|
45
|
+
padding: var(--dsa-cta__image--padding, var(--ks-spacing-inset-m));
|
|
64
46
|
}
|
|
65
47
|
.dsa-cta.c-storytelling .c-storytelling__box__content {
|
|
48
|
+
max-width: var(--dsa-cta__content--max-width, var(--dsa-content--width_narrow));
|
|
49
|
+
}
|
|
50
|
+
.dsa-cta.c-storytelling .c-storytelling__box:only-child .c-storytelling__box__content {
|
|
66
51
|
max-width: 100%;
|
|
67
52
|
}
|
|
68
53
|
.dsa-cta.c-storytelling .c-storytelling__box .dsa-headline__headline {
|
|
@@ -79,50 +64,39 @@
|
|
|
79
64
|
font: var(--dsa-cta__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
|
|
80
65
|
color: var(--dsa-cta__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-copy)));
|
|
81
66
|
}
|
|
82
|
-
|
|
83
|
-
|
|
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));
|
|
91
|
-
}
|
|
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));
|
|
67
|
+
@container storytelling (max-width: 639.9px) {
|
|
68
|
+
.dsa-cta.c-storytelling.c-storytelling--order-mobile-image-last .c-storytelling__box {
|
|
69
|
+
padding-bottom: 0;
|
|
94
70
|
}
|
|
95
|
-
.dsa-cta.c-storytelling .c-
|
|
96
|
-
padding-
|
|
71
|
+
.dsa-cta.c-storytelling.c-storytelling--order-mobile-image-last .c-storytelling__image {
|
|
72
|
+
padding-top: 0;
|
|
97
73
|
}
|
|
98
|
-
.dsa-cta.c-storytelling
|
|
99
|
-
|
|
74
|
+
.dsa-cta.c-storytelling:not(.c-storytelling--order-mobil-image-last) .c-storytelling__box {
|
|
75
|
+
padding-top: 0;
|
|
100
76
|
}
|
|
101
|
-
.dsa-cta.c-storytelling
|
|
102
|
-
|
|
103
|
-
max-width: calc(var(--dsa-content--width_default) - var(--dsa-content--spacing) * var(--c-storytelling--padding-ratio));
|
|
77
|
+
.dsa-cta.c-storytelling:not(.c-storytelling--order-mobil-image-last) .c-storytelling__image {
|
|
78
|
+
padding-bottom: 0;
|
|
104
79
|
}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
80
|
+
}
|
|
81
|
+
@container storytelling (min-width: 640px) {
|
|
82
|
+
.dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__box {
|
|
83
|
+
padding-right: 0;
|
|
108
84
|
}
|
|
109
|
-
.dsa-cta.c-storytelling.c-storytelling--
|
|
110
|
-
padding: 0;
|
|
85
|
+
.dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__image {
|
|
86
|
+
padding-left: 0;
|
|
111
87
|
}
|
|
112
|
-
.dsa-cta.c-storytelling
|
|
113
|
-
|
|
114
|
-
max-width: calc(var(--dsa-content--width_wide) / 2);
|
|
88
|
+
.dsa-cta.c-storytelling:not(.c-storytelling--order-desktop-image-last) .c-storytelling__box {
|
|
89
|
+
padding-left: 0;
|
|
115
90
|
}
|
|
116
|
-
.dsa-cta.c-storytelling.
|
|
117
|
-
|
|
118
|
-
max-width: 100%;
|
|
91
|
+
.dsa-cta.c-storytelling:not(.c-storytelling--order-desktop-image-last) .c-storytelling__image {
|
|
92
|
+
padding-right: 0;
|
|
119
93
|
}
|
|
120
94
|
}
|
|
121
95
|
|
|
122
96
|
@media (min-width: 640px) {
|
|
123
97
|
.dsa-header--floating + .l-container--storytelling .c-storytelling.dsa-cta,
|
|
124
98
|
.dsa-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.dsa-cta {
|
|
125
|
-
padding-top: calc(var(--dsa-header--height) + var(--dsa-
|
|
99
|
+
padding-top: calc(var(--dsa-header--height) + var(--dsa-cta__content--horizontal-padding, var(--dsa-content--horizontal-spacing)));
|
|
126
100
|
z-index: 1;
|
|
127
101
|
}
|
|
128
102
|
}
|
|
@@ -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
|
-
"
|
|
151
|
+
"align": {
|
|
147
152
|
"title": "Vertical alignment of the content",
|
|
148
|
-
"description": "Select a vertical alignment for the
|
|
153
|
+
"description": "Select a vertical alignment for the content",
|
|
149
154
|
"type": "string",
|
|
150
155
|
"enum": [
|
|
151
156
|
"center",
|
|
@@ -36,12 +36,6 @@
|
|
|
36
36
|
"default": false,
|
|
37
37
|
"type": "boolean"
|
|
38
38
|
},
|
|
39
|
-
"fullWidth": {
|
|
40
|
-
"title": "Width",
|
|
41
|
-
"description": "Set the width of the content to the full width of the element",
|
|
42
|
-
"type": "boolean",
|
|
43
|
-
"default": false
|
|
44
|
-
},
|
|
45
39
|
"buttons": {
|
|
46
40
|
"type": "array",
|
|
47
41
|
"items": {
|
|
@@ -87,6 +81,13 @@
|
|
|
87
81
|
"title": "Alt text",
|
|
88
82
|
"description": "Image description",
|
|
89
83
|
"type": "string"
|
|
84
|
+
},
|
|
85
|
+
"align": {
|
|
86
|
+
"title": "Vertical alignment of the image",
|
|
87
|
+
"description": "Select a vertical alignment for the image",
|
|
88
|
+
"type": "string",
|
|
89
|
+
"enum": ["center", "top", "bottom"],
|
|
90
|
+
"default": "center"
|
|
90
91
|
}
|
|
91
92
|
},
|
|
92
93
|
"additionalProperties": false
|
|
@@ -118,9 +119,9 @@
|
|
|
118
119
|
"type": "string",
|
|
119
120
|
"default": "left"
|
|
120
121
|
},
|
|
121
|
-
"
|
|
122
|
+
"align": {
|
|
122
123
|
"title": "Vertical alignment of the content",
|
|
123
|
-
"description": "Select a vertical alignment for the
|
|
124
|
+
"description": "Select a vertical alignment for the content",
|
|
124
125
|
"type": "string",
|
|
125
126
|
"enum": ["center", "top", "bottom"],
|
|
126
127
|
"default": "center"
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { HTMLAttributes } from "react";
|
|
3
|
-
import { CtaProps } from "../../CtaProps-
|
|
3
|
+
import { CtaProps } from "../../CtaProps-02e33bf1.js";
|
|
4
4
|
declare const CtaContextDefault: import("react").ForwardRefExoticComponent<CtaProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
5
|
declare const CtaContext: import("react").Context<import("react").ForwardRefExoticComponent<CtaProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
|
|
6
6
|
declare const Cta: import("react").ForwardRefExoticComponent<CtaProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|