@kickstartds/ds-agency-premium 1.2.10--canary.178.33c3c92.0 → 1.2.10--canary.183.909265f.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/components/cta/cta.css +74 -49
- package/dist/components/cta/index.js +2 -2
- package/dist/components/hero/hero.css +2 -2
- package/dist/components/logo/index.js +1 -1
- package/dist/components/logos/index.js +1 -1
- package/dist/components/logos/logos.css +64 -52
- package/dist/components/mosaic/index.js +1 -1
- package/dist/components/mosaic/mosaic.css +22 -32
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/static/tokens-business.css +1 -1
- package/dist/static/tokens-google.css +1 -1
- package/dist/static/tokens-ngo.css +1 -1
- package/dist/static/tokens-telekom.css +1 -1
- package/dist/static/tokens.css +1 -1
- package/dist/tokens/tokens.css +1 -1
- package/dist/tokens/tokens.js +1 -1
- package/package.json +1 -1
|
@@ -1,100 +1,125 @@
|
|
|
1
|
-
.
|
|
2
|
-
--
|
|
3
|
-
--
|
|
4
|
-
--
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
--
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
--
|
|
11
|
-
--
|
|
1
|
+
.dsa-cta {
|
|
2
|
+
--dsa-cta--vertical-padding: var(--l-section--space-default);
|
|
3
|
+
--dsa-cta--horizontal-padding: var(--l-section--content-padding);
|
|
4
|
+
--dsa-cta__copy--font: var(--dsa-rich-text--font);
|
|
5
|
+
--dsa-cta__copy--color: var(--ks-text-color-default);
|
|
6
|
+
--dsa-cta__headline--color: var(--dsa-headline--color);
|
|
7
|
+
--dsa-cta__headline--font: var(--dsa-headline_h2--font);
|
|
8
|
+
--dsa-cta__subheadline--color: var(--dsa-headline__subheadline--color);
|
|
9
|
+
--dsa-cta__subheadline--font: var(--dsa-headline-font-copy-xs);
|
|
10
|
+
--dsa-cta_color-neutral__headline--color: var(--ks-text-color-default);
|
|
11
|
+
--dsa-cta_color-neutral__subheadline--color: var(--ks-text-color-default);
|
|
12
|
+
--dsa-cta_color-neutral__copy--color: var(--ks-text-color-default);
|
|
13
|
+
--dsa-cta_highlight-text__headline--font: var(--dsa-headline_h1--font);
|
|
14
|
+
--dsa-cta_highlight-text__subheadline--font: var(--dsa-headline_h1__subheadline--font);
|
|
15
|
+
--dsa-cta_highlight-text__copy--font: var(--ks-font-copy-l);
|
|
12
16
|
}
|
|
13
17
|
|
|
14
18
|
@media (min-width: 640px) {
|
|
15
|
-
.c-header--floating + .l-container--storytelling .c-storytelling.
|
|
16
|
-
.c-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.
|
|
17
|
-
padding-top: calc(var(--g-header-height) + var(--
|
|
19
|
+
.c-header--floating + .l-container--storytelling .c-storytelling.dsa-cta,
|
|
20
|
+
.c-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.dsa-cta {
|
|
21
|
+
padding-top: calc(var(--g-header-height) + var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)));
|
|
18
22
|
z-index: 1;
|
|
19
23
|
}
|
|
20
24
|
}
|
|
21
25
|
|
|
22
|
-
.c-storytelling.
|
|
26
|
+
.c-storytelling.dsa-cta {
|
|
23
27
|
--c-storytelling--padding-ratio: 2;
|
|
24
28
|
justify-content: center;
|
|
25
29
|
align-items: center;
|
|
26
30
|
padding: 0;
|
|
27
31
|
}
|
|
28
|
-
.c-storytelling.
|
|
29
|
-
--
|
|
32
|
+
.c-storytelling.dsa-cta--color-neutral {
|
|
33
|
+
--dsa-cta__copy--color: var(--dsa-cta_color-neutral__copy--color, var(--ks-text-color-default));
|
|
34
|
+
--dsa-cta__headline--color: var(--dsa-cta_color-neutral__headline--color, var(--ks-text-color-default));
|
|
35
|
+
--dsa-cta__subheadline--color: var(--dsa-cta_color-neutral__subheadline--color, var(--ks-text-color-default));
|
|
30
36
|
}
|
|
31
|
-
.c-storytelling.
|
|
32
|
-
--
|
|
37
|
+
.c-storytelling.dsa-cta--highlight-text {
|
|
38
|
+
--dsa-cta__copy--font: var(--dsa-cta_highlight-text__copy--font, var(--ks-text-font-default));
|
|
39
|
+
--dsa-cta__headline--font: var(--dsa-cta_highlight-text__headline--font, var(--ks-text-font-default));
|
|
40
|
+
--dsa-cta__subheadline--font: var(--dsa-cta_highlight-text__subheadline--font, var(--ks-text-font-default));
|
|
33
41
|
}
|
|
34
|
-
.c-storytelling.
|
|
42
|
+
.c-storytelling.dsa-cta.c-storytelling--full {
|
|
35
43
|
--c-storytelling--padding-ratio: 1;
|
|
36
44
|
}
|
|
37
|
-
.c-storytelling.
|
|
45
|
+
.c-storytelling.dsa-cta.dsa-cta--align-top {
|
|
38
46
|
align-items: flex-start;
|
|
39
47
|
}
|
|
40
|
-
.c-storytelling.
|
|
48
|
+
.c-storytelling.dsa-cta.dsa-cta--align-bottom {
|
|
41
49
|
align-items: flex-end;
|
|
42
50
|
}
|
|
43
|
-
.c-storytelling.
|
|
51
|
+
.c-storytelling.dsa-cta.dsa-cta--highlight-text .c-storytelling__text {
|
|
44
52
|
font: var(--ks-font-copy-l);
|
|
45
53
|
color: var(--ks-color-fg);
|
|
46
54
|
}
|
|
47
|
-
.c-storytelling.
|
|
55
|
+
.c-storytelling.dsa-cta .c-storytelling__box {
|
|
48
56
|
width: 100%;
|
|
49
|
-
padding: var(--
|
|
57
|
+
padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--l-section--content-padding));
|
|
50
58
|
}
|
|
51
59
|
@container storytelling (max-width: 640px) {
|
|
52
|
-
.c-storytelling.
|
|
53
|
-
padding-top: calc(var(--
|
|
60
|
+
.c-storytelling.dsa-cta .c-storytelling__box {
|
|
61
|
+
padding-top: calc(var(--dsa-cta--vertical-padding, var(--l-section--space-default)) / var(--c-storytelling--padding-ratio));
|
|
54
62
|
}
|
|
55
|
-
.c-storytelling.
|
|
56
|
-
padding-top: var(--
|
|
63
|
+
.c-storytelling.dsa-cta .c-storytelling__box:only-child {
|
|
64
|
+
padding-top: var(--dsa-cta--vertical-padding, var(--l-section--space-default));
|
|
57
65
|
}
|
|
58
66
|
}
|
|
59
|
-
.c-storytelling.
|
|
60
|
-
padding: var(--
|
|
67
|
+
.c-storytelling.dsa-cta .c-storytelling__box:only-child {
|
|
68
|
+
padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--l-section--content-padding));
|
|
61
69
|
}
|
|
62
|
-
.c-storytelling.
|
|
70
|
+
.c-storytelling.dsa-cta .c-storytelling__box__content {
|
|
63
71
|
max-width: 100%;
|
|
64
72
|
}
|
|
65
|
-
.c-storytelling.
|
|
73
|
+
.c-storytelling.dsa-cta .c-storytelling__box .dsa-headline__headline {
|
|
74
|
+
font: var(--dsa-cta__headline--font, var(--dsa-headline_h2--font, var(--ks-font-display-xl)));
|
|
75
|
+
color: var(--dsa-cta__headline--color, var(--ks-text-color-display));
|
|
76
|
+
font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-semi-bold));
|
|
77
|
+
}
|
|
78
|
+
.c-storytelling.dsa-cta .c-storytelling__box .dsa-headline__subheadline {
|
|
79
|
+
font: var(--dsa-cta__subheadline--font, var(--dsa-headline_h2__subheadline--font, var(--ks-font-display-xl)));
|
|
80
|
+
color: var(--dsa-cta__subheadline--color, var(--ks-text-color-primary));
|
|
81
|
+
font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-medium));
|
|
82
|
+
}
|
|
83
|
+
.c-storytelling.dsa-cta .c-storytelling__box .c-rich-text {
|
|
84
|
+
font: var(--dsa-cta__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
|
|
85
|
+
color: var(--dsa-cta__copy--color, var(--das-rich-text--color, var(--ks-text-color-copy)));
|
|
86
|
+
}
|
|
87
|
+
.c-storytelling.dsa-cta .c-storytelling__box:only-child {
|
|
88
|
+
--dsa-cta--horizontal-padding: var(--l-section--content-padding);
|
|
89
|
+
}
|
|
90
|
+
.c-storytelling.dsa-cta .c-storytelling__image {
|
|
66
91
|
margin: 0;
|
|
67
92
|
}
|
|
68
93
|
@container storytelling (min-width: 640px) {
|
|
69
|
-
.c-storytelling.
|
|
70
|
-
padding-left: calc(var(--
|
|
94
|
+
.c-storytelling.dsa-cta.c-storytelling--order-desktop-image-last .c-storytelling__image {
|
|
95
|
+
padding-left: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
|
|
71
96
|
}
|
|
72
|
-
.c-storytelling.
|
|
73
|
-
padding-right: calc(var(--
|
|
97
|
+
.c-storytelling.dsa-cta.c-storytelling--order-desktop-image-last .c-storytelling__box {
|
|
98
|
+
padding-right: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
|
|
74
99
|
}
|
|
75
|
-
.c-storytelling.
|
|
76
|
-
padding-left: calc(var(--
|
|
100
|
+
.c-storytelling.dsa-cta .c-storytelling__box {
|
|
101
|
+
padding-left: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
|
|
77
102
|
}
|
|
78
|
-
.c-storytelling.
|
|
103
|
+
.c-storytelling.dsa-cta .c-storytelling__box__content--center .c-button-group {
|
|
79
104
|
justify-content: center;
|
|
80
105
|
}
|
|
81
|
-
.c-storytelling.
|
|
106
|
+
.c-storytelling.dsa-cta .c-storytelling__box:only-child {
|
|
82
107
|
width: 100%;
|
|
83
108
|
max-width: calc(var(--l-section--content-width-default) - var(--l-section--content-padding) * var(--c-storytelling--padding-ratio));
|
|
84
109
|
}
|
|
85
|
-
.c-storytelling.
|
|
86
|
-
padding: var(--
|
|
87
|
-
padding-right: calc(var(--
|
|
110
|
+
.c-storytelling.dsa-cta > .c-storytelling__image {
|
|
111
|
+
padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--l-section--content-padding));
|
|
112
|
+
padding-right: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
|
|
88
113
|
}
|
|
89
|
-
.c-storytelling.
|
|
114
|
+
.c-storytelling.dsa-cta.c-storytelling--full > .c-storytelling__image {
|
|
90
115
|
padding: 0;
|
|
91
116
|
}
|
|
92
|
-
.c-storytelling.
|
|
93
|
-
.c-storytelling.
|
|
117
|
+
.c-storytelling.dsa-cta > .c-storytelling__image,
|
|
118
|
+
.c-storytelling.dsa-cta > .c-storytelling__box {
|
|
94
119
|
max-width: calc(var(--l-section--content-width-wide) / 2);
|
|
95
120
|
}
|
|
96
|
-
.c-storytelling.
|
|
97
|
-
.c-storytelling.
|
|
121
|
+
.c-storytelling.dsa-cta.dsa-cta--full-width > .c-storytelling__image,
|
|
122
|
+
.c-storytelling.dsa-cta.dsa-cta--full-width > .c-storytelling__box {
|
|
98
123
|
max-width: 100%;
|
|
99
124
|
}
|
|
100
125
|
}
|
|
@@ -13,8 +13,8 @@ const Cta = ({ headline, highlightText = false, sub, image, text, textAlign, bac
|
|
|
13
13
|
// @ts-expect-error
|
|
14
14
|
, {
|
|
15
15
|
// @ts-expect-error
|
|
16
|
-
value: ButtonGroup, children: jsx(Storytelling, { className: classnames("
|
|
17
|
-
? `
|
|
16
|
+
value: ButtonGroup, children: jsx(Storytelling, { className: classnames("dsa-cta", fullWidth ? `dsa-cta--full-width` : "", highlightText ? `dsa-cta--highlight-text` : "", colorNeutral ? `dsa-cta--color-neutral` : "", contentAlign && contentAlign !== "center"
|
|
17
|
+
? `dsa-cta--align-${contentAlign}`
|
|
18
18
|
: ""), backgroundImage: backgroundImage, backgroundColor: backgroundColor, full: image?.padding === false, image: {
|
|
19
19
|
source: image?.src,
|
|
20
20
|
order: order,
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
--dsa-hero_color-neutral__headline--color: var(--ks-text-color-default);
|
|
5
5
|
--dsa-hero_color-neutral__subheadline--color: var(--ks-text-color-default);
|
|
6
6
|
--dsa-hero__copy--color: var(--ks-text-color-default);
|
|
7
|
-
--dsa-hero__copy--font: var(--
|
|
7
|
+
--dsa-hero__copy--font: var(--dsa-rich-text--font);
|
|
8
8
|
--dsa-hero_highlight-text__copy--font: var(--ks-font-copy-l);
|
|
9
9
|
--dsa-hero_color-neutral__copy--color: var(--ks-text-color-default);
|
|
10
10
|
--dsa-hero__textbox--border-radius: var(--ks-border-radius-surface);
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
--c-visual_box--color: var(--dsa-hero__copy--color, var(--ks-text-color-default));
|
|
28
28
|
--c-visual_box--border-radius: var(--dsa-hero__textbox--border-radius, var(--ks-border-radius-surface));
|
|
29
29
|
--c-visual_box--padding: var(--dsa-hero__textbox--padding, var(--ks-spacing-inset-squish-xl));
|
|
30
|
-
--c-visual_text--font: var(--dsa-hero__copy--font, var(--
|
|
30
|
+
--c-visual_text--font: var(--dsa-hero__copy--font, var(--dsa-rich-text--font));
|
|
31
31
|
}
|
|
32
32
|
.c-visual.dsa-hero--highlight-text.c-visual {
|
|
33
33
|
--dsa-hero__copy--font: var(--dsa-hero_highlight-text__box--font, var(--ks-font-copy-l));
|
|
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { forwardRef, createContext, useContext } from 'react';
|
|
3
3
|
import { Picture } from '@kickstartds/base/lib/picture';
|
|
4
4
|
|
|
5
|
-
const LogoContextDefault = forwardRef(({ src, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: "
|
|
5
|
+
const LogoContextDefault = forwardRef(({ src, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: "dsa-logos__logo", children: jsx(Picture, { src: src }) })));
|
|
6
6
|
const LogoContext = createContext(LogoContextDefault);
|
|
7
7
|
const Logo = forwardRef((props, ref) => {
|
|
8
8
|
const Component = useContext(LogoContext);
|
|
@@ -6,7 +6,7 @@ import { Button } from '@kickstartds/base/lib/button';
|
|
|
6
6
|
import { Link } from '@kickstartds/base/lib/link';
|
|
7
7
|
|
|
8
8
|
const Logos = ({ items = [], tagline, align, cta, logosPerRow = "6", }) => {
|
|
9
|
-
return (jsx(Fragment, { children: jsxs("div", { className: classnames(`
|
|
9
|
+
return (jsx(Fragment, { children: jsxs("div", { className: classnames(`dsa-logos dsa-logos--align-${align}`), children: [jsx("div", { className: "dsa-logos__tagline", children: tagline }), jsx(LogoTiles, { className: classnames(`dsa-logo-tiles dsa-logo-tiles--cols-${logosPerRow}`), logos: items }), cta?.toggle ? (jsxs("div", { className: "dsa-logos__cta", children: [jsxs("div", { className: "dsa-logos__cta__text", children: [cta?.text, cta?.style === "text" ? (jsxs(Fragment, { children: [" ", jsx(Link, { className: "dsa-logos__cta__link", href: cta.link, children: cta.label })] })) : ("")] }), cta?.style === "button" ? (jsx(Button, { href: cta.link, label: cta.label })) : ("")] })) : ("")] }) }));
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
export { Logos };
|
|
@@ -1,91 +1,103 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
.l-container--logos {
|
|
2
|
+
/* stylelint-disable-next-line property-no-unknown */
|
|
3
|
+
container-name: logos;
|
|
4
4
|
}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
.c-logos .c-logo-tiles--cols-2 {
|
|
16
|
-
--c-logo-tiles--cols: 2;
|
|
17
|
-
}
|
|
18
|
-
.c-logos .c-logo-tiles--cols-3 {
|
|
19
|
-
--c-logo-tiles--cols: 3;
|
|
20
|
-
}
|
|
21
|
-
.c-logos .c-logo-tiles--cols-4 {
|
|
22
|
-
--c-logo-tiles--cols: 4;
|
|
23
|
-
}
|
|
24
|
-
.c-logos .c-logo-tiles--cols-5 {
|
|
25
|
-
--c-logo-tiles--cols: 5;
|
|
26
|
-
}
|
|
27
|
-
.c-logos .c-logo-tiles--cols-6 {
|
|
28
|
-
--c-logo-tiles--cols: 6;
|
|
29
|
-
}
|
|
30
|
-
.c-logos .c-logo-tiles--cols-7 {
|
|
31
|
-
--c-logo-tiles--cols: 7;
|
|
32
|
-
}
|
|
33
|
-
.c-logos .c-logo-tiles--cols-8 {
|
|
34
|
-
--c-logo-tiles--cols: 8;
|
|
35
|
-
}
|
|
5
|
+
|
|
6
|
+
.dsa-logos {
|
|
7
|
+
--dsa-logos-gap: var(--ks-spacing-stack-m);
|
|
8
|
+
--dsa-logos-tagline--font: var(--dsa-headline_h3--font);
|
|
9
|
+
--dsa-logos-tagline--font-weight: var(--dsa-headline--font-weight);
|
|
10
|
+
--dsa-logos-tagline--color: var(--dsa-headline--color);
|
|
11
|
+
--dsa-logos__grid--gap-horizontal: var(--ks-spacing-inline-l);
|
|
12
|
+
--dsa-logos__grid--gap-vertical: var(--ks-spacing-stack-s);
|
|
13
|
+
--dsa-logos__grid_mobile--cols: 2;
|
|
14
|
+
--dsa-logos__grid_tablet--cols: 3;
|
|
36
15
|
}
|
|
37
16
|
|
|
38
|
-
.
|
|
17
|
+
.dsa-logos {
|
|
39
18
|
display: flex;
|
|
40
19
|
flex-direction: column;
|
|
41
|
-
gap: var(--ks-spacing-stack-m);
|
|
20
|
+
gap: var(--dsa-logos-gap, var(--ks-spacing-stack-m));
|
|
42
21
|
}
|
|
43
|
-
.
|
|
44
|
-
font: var(--ks-font-display-m);
|
|
22
|
+
.dsa-logos__tagline {
|
|
23
|
+
font: var(--dsa-logos-tagline--font, var(--ks-font-display-m));
|
|
24
|
+
font-weight: var(--dsa-logos-tagline--font-weight, var(--dsa-headline--font-weight));
|
|
45
25
|
max-width: var(--l-section--content-width-narrow);
|
|
46
|
-
color: var(--ks-color-
|
|
26
|
+
color: var(--dsa-logos-tagline--color, var(--dsa-headline--color, var(--ks-text-color-display)));
|
|
47
27
|
width: 100%;
|
|
48
28
|
}
|
|
49
|
-
.
|
|
29
|
+
.dsa-logos__cta {
|
|
50
30
|
display: flex;
|
|
51
31
|
flex-direction: column;
|
|
52
32
|
gap: var(--ks-spacing-stack-m);
|
|
53
33
|
}
|
|
54
|
-
.
|
|
34
|
+
.dsa-logos__cta .c-button {
|
|
55
35
|
width: fit-content;
|
|
56
36
|
}
|
|
57
|
-
.
|
|
37
|
+
.dsa-logos__cta__text {
|
|
58
38
|
color: var(--ks-text-color-default);
|
|
59
39
|
max-width: var(--l-section--content-width-narrow);
|
|
60
40
|
}
|
|
61
|
-
.
|
|
41
|
+
.dsa-logos__cta__text, .dsa-logos__cta__link {
|
|
62
42
|
font: var(--ks-font-copy-m);
|
|
63
43
|
}
|
|
64
|
-
.
|
|
44
|
+
.dsa-logos--align-left .dsa-logo-tiles {
|
|
65
45
|
justify-content: start;
|
|
66
46
|
}
|
|
67
|
-
.
|
|
47
|
+
.dsa-logos--align-center .dsa-logos__cta {
|
|
68
48
|
align-items: center;
|
|
69
49
|
}
|
|
70
|
-
.
|
|
71
|
-
.
|
|
50
|
+
.dsa-logos--align-center .dsa-logos__cta__text,
|
|
51
|
+
.dsa-logos--align-center .dsa-logos__tagline {
|
|
72
52
|
text-align: center;
|
|
73
53
|
margin: auto;
|
|
74
54
|
}
|
|
75
|
-
.
|
|
76
|
-
|
|
55
|
+
.dsa-logos .dsa-logo-tiles {
|
|
56
|
+
--dsa-logo-tiles--cols: var(--dsa-logos__grid_mobile--cols, 2);
|
|
57
|
+
gap: var(--dsa-logos__grid--gap-horizontal) var(--dsa-logos__grid--gap-horizontal);
|
|
77
58
|
margin: 0;
|
|
78
59
|
}
|
|
79
|
-
|
|
60
|
+
@container logo-tiles (min-width: 420px) {
|
|
61
|
+
.dsa-logos .dsa-logo-tiles {
|
|
62
|
+
--dsa-logo-tiles--cols: var(--dsa-logos__grid_tablet--cols, 3);
|
|
63
|
+
}
|
|
64
|
+
.dsa-logos .dsa-logo-tiles--cols-2 {
|
|
65
|
+
--dsa-logo-tiles--cols: 2;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
@container logo-tiles (min-width: 640px) {
|
|
69
|
+
.dsa-logos .dsa-logo-tiles--cols-2 {
|
|
70
|
+
--dsa-logo-tiles--cols: 2;
|
|
71
|
+
}
|
|
72
|
+
.dsa-logos .dsa-logo-tiles--cols-3 {
|
|
73
|
+
--dsa-logo-tiles--cols: 3;
|
|
74
|
+
}
|
|
75
|
+
.dsa-logos .dsa-logo-tiles--cols-4 {
|
|
76
|
+
--dsa-logo-tiles--cols: 4;
|
|
77
|
+
}
|
|
78
|
+
.dsa-logos .dsa-logo-tiles--cols-5 {
|
|
79
|
+
--dsa-logo-tiles--cols: 5;
|
|
80
|
+
}
|
|
81
|
+
.dsa-logos .dsa-logo-tiles--cols-6 {
|
|
82
|
+
--dsa-logo-tiles--cols: 6;
|
|
83
|
+
}
|
|
84
|
+
.dsa-logos .dsa-logo-tiles--cols-7 {
|
|
85
|
+
--dsa-logo-tiles--cols: 7;
|
|
86
|
+
}
|
|
87
|
+
.dsa-logos .dsa-logo-tiles--cols-8 {
|
|
88
|
+
--dsa-logo-tiles--cols: 8;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
.dsa-logos .dsa-logo-tiles .c-logo-tiles__col {
|
|
80
92
|
margin: 0;
|
|
81
93
|
aspect-ratio: 16/9;
|
|
82
94
|
display: flex;
|
|
83
95
|
justify-content: center;
|
|
84
96
|
align-items: center;
|
|
85
97
|
}
|
|
86
|
-
.
|
|
98
|
+
.dsa-logos .dsa-logo-tiles .c-logo-tiles__col::after {
|
|
87
99
|
content: none;
|
|
88
100
|
}
|
|
89
|
-
.
|
|
101
|
+
.dsa-logos .dsa-logo-tiles img {
|
|
90
102
|
position: relative;
|
|
91
103
|
}
|
|
@@ -2,7 +2,7 @@ import "./mosaic.css";
|
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { Storytelling } from '@kickstartds/content/lib/storytelling';
|
|
4
4
|
|
|
5
|
-
const Mosaic = ({ layout, largeHeadlines, tiles }) => (jsx("div", { className: "
|
|
5
|
+
const Mosaic = ({ layout, largeHeadlines, tiles }) => (jsx("div", { className: "dsa-mosaic", children: tiles.map((tile, index) => (jsx(Storytelling, { full: true, backgroundColor: tile.backgroundColor, backgroundImage: tile.backgroundImage, box: {
|
|
6
6
|
headline: {
|
|
7
7
|
text: tile?.headline,
|
|
8
8
|
sub: tile?.sub,
|
|
@@ -1,35 +1,25 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
.dsa-mosaic {
|
|
2
|
+
--dsa-mosaic--vertical-padding: var(--l-section--space-default);
|
|
3
|
+
--dsa-mosaic--horizontal-padding: var(--l-section--content-padding);
|
|
4
|
+
--dsa-mosaic__copy--font: var(--dsa-rich-text--font);
|
|
5
|
+
--dsa-mosaic__copy--color: var(--ks-text-color-default);
|
|
6
|
+
--dsa-mosaic__headline--color: var(--dsa-headline--color);
|
|
7
|
+
--dsa-mosaic__headline--font: var(--dsa-headline_h2--font);
|
|
8
|
+
--dsa-mosaic__subheadline--color: var(--dsa-headline__subheadline--color);
|
|
9
|
+
--dsa-mosaic__subheadline--font: var(--dsa-headline-font-copy-xs);
|
|
7
10
|
}
|
|
8
11
|
|
|
9
|
-
.
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
--
|
|
18
|
-
}
|
|
19
|
-
.
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
.c-visual .c-visual__box {
|
|
23
|
-
max-width: 100%;
|
|
24
|
-
}
|
|
25
|
-
@container visual (min-width: 640px) {
|
|
26
|
-
.c-visual.c-visual--full {
|
|
27
|
-
height: 100vh;
|
|
28
|
-
}
|
|
29
|
-
.c-visual .c-visual__box {
|
|
30
|
-
max-width: var(--c-visual_box--max-width);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
.c-visual .c-visual__content--indent {
|
|
34
|
-
max-width: var(--l-section--content-width-wide);
|
|
12
|
+
.dsa-mosaic .dsa-headline__headline {
|
|
13
|
+
font: var(--dsa-mosaic__headline--font, var(--dsa-headline_h2--font, var(--ks-font-display-xl)));
|
|
14
|
+
color: var(--dsa-mosaic__headline--color, var(--ks-text-color-display));
|
|
15
|
+
font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-semi-bold));
|
|
16
|
+
}
|
|
17
|
+
.dsa-mosaic .dsa-headline__subheadline {
|
|
18
|
+
font: var(--dsa-mosaic__subheadline--font, var(--dsa-headline_h2__subheadline--font, var(--ks-font-display-xl)));
|
|
19
|
+
color: var(--dsa-mosaic__subheadline--color, var(--ks-text-color-primary));
|
|
20
|
+
font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-medium));
|
|
21
|
+
}
|
|
22
|
+
.dsa-mosaic .c-rich-text {
|
|
23
|
+
font: var(--dsa-mosaic__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
|
|
24
|
+
color: var(--dsa-mosaic__copy--color, var(--das-rich-text--color, var(--ks-text-color-copy)));
|
|
35
25
|
}
|
package/dist/static/tokens.css
CHANGED
package/dist/tokens/tokens.css
CHANGED
package/dist/tokens/tokens.js
CHANGED
package/package.json
CHANGED