@slicemachine/adapter-sveltekit 0.3.78-alpha.dependabot-npm-and-yarn-nuxt-3-16-0.1 → 0.3.78-alpha.lh-svelte5.1
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/AlternateGrid/javascript.5.svelte +227 -0
- package/dist/AlternateGrid/typescript.5.svelte +228 -0
- package/dist/CallToAction/javascript.5.svelte +127 -0
- package/dist/CallToAction/typescript.5.svelte +128 -0
- package/dist/CustomerLogos/javascript.5.svelte +124 -0
- package/dist/CustomerLogos/typescript.5.svelte +125 -0
- package/dist/Hero/javascript.5.svelte +190 -0
- package/dist/Hero/typescript.5.svelte +191 -0
- package/dist/hooks/documentation-read.cjs +9 -2
- package/dist/hooks/documentation-read.cjs.map +1 -1
- package/dist/hooks/documentation-read.js +9 -2
- package/dist/hooks/documentation-read.js.map +1 -1
- package/dist/hooks/project-init.cjs.map +1 -1
- package/dist/hooks/project-init.js.map +1 -1
- package/dist/hooks/slice-create.cjs +22 -7
- package/dist/hooks/slice-create.cjs.map +1 -1
- package/dist/hooks/slice-create.js +22 -7
- package/dist/hooks/slice-create.js.map +1 -1
- package/dist/lib/checkIsSvelte5.cjs +31 -0
- package/dist/lib/checkIsSvelte5.cjs.map +1 -0
- package/dist/lib/checkIsSvelte5.d.ts +7 -0
- package/dist/lib/checkIsSvelte5.js +31 -0
- package/dist/lib/checkIsSvelte5.js.map +1 -0
- package/dist/plugin.cjs +4 -2
- package/dist/plugin.cjs.map +1 -1
- package/dist/plugin.js +4 -2
- package/dist/plugin.js.map +1 -1
- package/package.json +5 -3
- package/src/hooks/documentation-read.ts +28 -8
- package/src/hooks/project-init.ts +2 -0
- package/src/hooks/slice-create.ts +55 -22
- package/src/lib/checkIsSvelte5.ts +49 -0
- package/src/plugin.ts +5 -2
|
@@ -0,0 +1,227 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { PrismicImage, PrismicRichText } from "@prismicio/svelte";
|
|
3
|
+
import { isFilled } from "@prismicio/client";
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @type {{ slice: import("@prismicio/client").Content.${PascalNameToReplace}Slice }}
|
|
7
|
+
*/
|
|
8
|
+
let { slice } = $props();
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<section
|
|
12
|
+
data-slice-type={slice.slice_type}
|
|
13
|
+
data-slice-variation={slice.variation}
|
|
14
|
+
class="es-bounded es-alternate-grid"
|
|
15
|
+
>
|
|
16
|
+
<div
|
|
17
|
+
class={`
|
|
18
|
+
es-alternate-grid__content
|
|
19
|
+
${
|
|
20
|
+
isFilled.image(slice.primary.image)
|
|
21
|
+
? "es-alternate-grid__content--with-image"
|
|
22
|
+
: ""
|
|
23
|
+
}
|
|
24
|
+
`}
|
|
25
|
+
>
|
|
26
|
+
{#if isFilled.image(slice.primary.image)}
|
|
27
|
+
<PrismicImage
|
|
28
|
+
field={slice.primary.image}
|
|
29
|
+
class={`
|
|
30
|
+
es-alternate-grid__image
|
|
31
|
+
${
|
|
32
|
+
slice.variation === "imageRight"
|
|
33
|
+
? "es-alternate-grid__image--right"
|
|
34
|
+
: "es-alternate-grid__image--left"
|
|
35
|
+
}
|
|
36
|
+
`}
|
|
37
|
+
/>
|
|
38
|
+
{/if}
|
|
39
|
+
<div class="es-alternate-grid__primary-content">
|
|
40
|
+
<div class="es-alternate-grid__primary-content__intro">
|
|
41
|
+
{#if isFilled.keyText(slice.primary.eyebrowHeadline)}
|
|
42
|
+
<p class="es-alternate-grid__primary-content__intro__eyebrow">
|
|
43
|
+
{slice.primary.eyebrowHeadline}
|
|
44
|
+
</p>
|
|
45
|
+
{/if}
|
|
46
|
+
{#if isFilled.richText(slice.primary.title)}
|
|
47
|
+
<div class="es-alternate-grid__primary-content__intro__headline">
|
|
48
|
+
<PrismicRichText field={slice.primary.title} />
|
|
49
|
+
</div>
|
|
50
|
+
{/if}
|
|
51
|
+
{#if isFilled.richText(slice.primary.description)}
|
|
52
|
+
<div class="es-alternate-grid__primary-content__intro__description">
|
|
53
|
+
<PrismicRichText field={slice.primary.description} />
|
|
54
|
+
</div>
|
|
55
|
+
{/if}
|
|
56
|
+
</div>
|
|
57
|
+
{#if slice.primary.items && slice.primary.items.length}
|
|
58
|
+
<div class="es-alternate-grid__primary-content__items">
|
|
59
|
+
{#each slice.primary.items as item, i}
|
|
60
|
+
<div class="es-alternate-grid__item">
|
|
61
|
+
{#if isFilled.richText(item.title)}
|
|
62
|
+
<div class="es-alternate-grid__item__heading">
|
|
63
|
+
<PrismicRichText field={item.title} />
|
|
64
|
+
</div>
|
|
65
|
+
{/if}
|
|
66
|
+
{#if isFilled.richText(item.description)}
|
|
67
|
+
<div class="es-alternate-grid__item__description">
|
|
68
|
+
<PrismicRichText field={item.description} />
|
|
69
|
+
</div>
|
|
70
|
+
{/if}
|
|
71
|
+
</div>
|
|
72
|
+
{/each}
|
|
73
|
+
</div>
|
|
74
|
+
{/if}
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<style>
|
|
79
|
+
.es-bounded {
|
|
80
|
+
margin: 0px;
|
|
81
|
+
min-width: 0px;
|
|
82
|
+
position: relative;
|
|
83
|
+
padding: 8vw 1.25rem;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.es-alternate-grid {
|
|
87
|
+
font-family: system-ui, sans-serif;
|
|
88
|
+
background-color: #fff;
|
|
89
|
+
color: #333;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.es-alternate-grid__content {
|
|
93
|
+
display: grid;
|
|
94
|
+
gap: 1.5rem;
|
|
95
|
+
grid-auto-flow: dense;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
@media (min-width: 640px) {
|
|
99
|
+
.es-alternate-grid__content--with-image {
|
|
100
|
+
grid-template-columns: repeat(2, 1fr);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
@media (min-width: 1200px) {
|
|
105
|
+
.es-alternate-grid__content--with-image {
|
|
106
|
+
grid-template-columns: repeat(2, 1fr);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.es-alternate-grid__image {
|
|
111
|
+
width: auto;
|
|
112
|
+
height: auto;
|
|
113
|
+
max-width: 100%;
|
|
114
|
+
align-self: center;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.es-alternate-grid__image--left {
|
|
118
|
+
order: 1;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.es-alternate-grid__image--left + div {
|
|
122
|
+
order: 2;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.es-alternate-grid__image--right {
|
|
126
|
+
order: 2;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.es-alternate-grid__image--right + div {
|
|
130
|
+
order: 1;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.es-alternate-grid__primary-content {
|
|
134
|
+
display: grid;
|
|
135
|
+
gap: 2rem;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.es-alternate-grid__primary-content__intro {
|
|
139
|
+
display: grid;
|
|
140
|
+
gap: 0.5rem;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.es-alternate-grid__primary-content__intro__eyebrow {
|
|
144
|
+
color: #8592e0;
|
|
145
|
+
font-size: 1.15rem;
|
|
146
|
+
font-weight: 500;
|
|
147
|
+
margin: 0;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.es-alternate-grid__primary-content__intro__headline {
|
|
151
|
+
font-size: 1.625rem;
|
|
152
|
+
font-weight: 700;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.es-alternate-grid__primary-content__intro__headline * {
|
|
156
|
+
margin: 0;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
@media (min-width: 640px) {
|
|
160
|
+
.es-alternate-grid__primary-content__intro__headline {
|
|
161
|
+
font-size: 2rem;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
@media (min-width: 1024px) {
|
|
166
|
+
.es-alternate-grid__primary-content__intro__headline {
|
|
167
|
+
font-size: 2.5rem;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
@media (min-width: 1200px) {
|
|
172
|
+
.es-alternate-grid__primary-content__intro__headline {
|
|
173
|
+
font-size: 2.75rem;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.es-alternate-grid__primary-content__intro__description {
|
|
178
|
+
font-size: 1.15rem;
|
|
179
|
+
max-width: 38rem;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.es-alternate-grid__primary-content__intro__description > p {
|
|
183
|
+
margin: 0;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
@media (min-width: 1200px) {
|
|
187
|
+
.es-alternate-grid__primary-content__intro__description {
|
|
188
|
+
font-size: 1.4rem;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.es-alternate-grid__primary-content__items {
|
|
193
|
+
display: grid;
|
|
194
|
+
gap: 2rem;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
@media (min-width: 640px) {
|
|
198
|
+
.es-alternate-grid__primary-content__items {
|
|
199
|
+
grid-template-columns: repeat(2, 1fr);
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.es-alternate-grid__item {
|
|
204
|
+
display: grid;
|
|
205
|
+
align-content: start;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.es-alternate-grid__item__heading {
|
|
209
|
+
font-weight: 700;
|
|
210
|
+
font-size: 1.17rem;
|
|
211
|
+
margin-top: 0;
|
|
212
|
+
margin-bottom: 0.5rem;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.es-alternate-grid__item__heading * {
|
|
216
|
+
margin: 0;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.es-alternate-grid__item__description {
|
|
220
|
+
font-size: 0.9rem;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.es-alternate-grid__item__description * {
|
|
224
|
+
margin: 0;
|
|
225
|
+
}
|
|
226
|
+
</style>
|
|
227
|
+
</section>
|
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { PrismicImage, PrismicRichText } from "@prismicio/svelte";
|
|
3
|
+
import { type Content, isFilled } from "@prismicio/client";
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
slice: Content.PascalNameToReplaceSlice;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
let { slice }: Props = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<section
|
|
13
|
+
data-slice-type={slice.slice_type}
|
|
14
|
+
data-slice-variation={slice.variation}
|
|
15
|
+
class="es-bounded es-alternate-grid"
|
|
16
|
+
>
|
|
17
|
+
<div
|
|
18
|
+
class={`
|
|
19
|
+
es-alternate-grid__content
|
|
20
|
+
${
|
|
21
|
+
isFilled.image(slice.primary.image)
|
|
22
|
+
? "es-alternate-grid__content--with-image"
|
|
23
|
+
: ""
|
|
24
|
+
}
|
|
25
|
+
`}
|
|
26
|
+
>
|
|
27
|
+
{#if isFilled.image(slice.primary.image)}
|
|
28
|
+
<PrismicImage
|
|
29
|
+
field={slice.primary.image}
|
|
30
|
+
class={`
|
|
31
|
+
es-alternate-grid__image
|
|
32
|
+
${
|
|
33
|
+
slice.variation === "imageRight"
|
|
34
|
+
? "es-alternate-grid__image--right"
|
|
35
|
+
: "es-alternate-grid__image--left"
|
|
36
|
+
}
|
|
37
|
+
`}
|
|
38
|
+
/>
|
|
39
|
+
{/if}
|
|
40
|
+
<div class="es-alternate-grid__primary-content">
|
|
41
|
+
<div class="es-alternate-grid__primary-content__intro">
|
|
42
|
+
{#if isFilled.keyText(slice.primary.eyebrowHeadline)}
|
|
43
|
+
<p class="es-alternate-grid__primary-content__intro__eyebrow">
|
|
44
|
+
{slice.primary.eyebrowHeadline}
|
|
45
|
+
</p>
|
|
46
|
+
{/if}
|
|
47
|
+
{#if isFilled.richText(slice.primary.title)}
|
|
48
|
+
<div class="es-alternate-grid__primary-content__intro__headline">
|
|
49
|
+
<PrismicRichText field={slice.primary.title} />
|
|
50
|
+
</div>
|
|
51
|
+
{/if}
|
|
52
|
+
{#if isFilled.richText(slice.primary.description)}
|
|
53
|
+
<div class="es-alternate-grid__primary-content__intro__description">
|
|
54
|
+
<PrismicRichText field={slice.primary.description} />
|
|
55
|
+
</div>
|
|
56
|
+
{/if}
|
|
57
|
+
</div>
|
|
58
|
+
{#if slice.primary.items && slice.primary.items.length}
|
|
59
|
+
<div class="es-alternate-grid__primary-content__items">
|
|
60
|
+
{#each slice.primary.items as item, i}
|
|
61
|
+
<div class="es-alternate-grid__item">
|
|
62
|
+
{#if isFilled.richText(item.title)}
|
|
63
|
+
<div class="es-alternate-grid__item__heading">
|
|
64
|
+
<PrismicRichText field={item.title} />
|
|
65
|
+
</div>
|
|
66
|
+
{/if}
|
|
67
|
+
{#if isFilled.richText(item.description)}
|
|
68
|
+
<div class="es-alternate-grid__item__description">
|
|
69
|
+
<PrismicRichText field={item.description} />
|
|
70
|
+
</div>
|
|
71
|
+
{/if}
|
|
72
|
+
</div>
|
|
73
|
+
{/each}
|
|
74
|
+
</div>
|
|
75
|
+
{/if}
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<style>
|
|
80
|
+
.es-bounded {
|
|
81
|
+
margin: 0px;
|
|
82
|
+
min-width: 0px;
|
|
83
|
+
position: relative;
|
|
84
|
+
padding: 8vw 1.25rem;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.es-alternate-grid {
|
|
88
|
+
font-family: system-ui, sans-serif;
|
|
89
|
+
background-color: #fff;
|
|
90
|
+
color: #333;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.es-alternate-grid__content {
|
|
94
|
+
display: grid;
|
|
95
|
+
gap: 1.5rem;
|
|
96
|
+
grid-auto-flow: dense;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
@media (min-width: 640px) {
|
|
100
|
+
.es-alternate-grid__content--with-image {
|
|
101
|
+
grid-template-columns: repeat(2, 1fr);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@media (min-width: 1200px) {
|
|
106
|
+
.es-alternate-grid__content--with-image {
|
|
107
|
+
grid-template-columns: repeat(2, 1fr);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.es-alternate-grid__image {
|
|
112
|
+
width: auto;
|
|
113
|
+
height: auto;
|
|
114
|
+
max-width: 100%;
|
|
115
|
+
align-self: center;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.es-alternate-grid__image--left {
|
|
119
|
+
order: 1;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.es-alternate-grid__image--left + div {
|
|
123
|
+
order: 2;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.es-alternate-grid__image--right {
|
|
127
|
+
order: 2;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.es-alternate-grid__image--right + div {
|
|
131
|
+
order: 1;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.es-alternate-grid__primary-content {
|
|
135
|
+
display: grid;
|
|
136
|
+
gap: 2rem;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.es-alternate-grid__primary-content__intro {
|
|
140
|
+
display: grid;
|
|
141
|
+
gap: 0.5rem;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.es-alternate-grid__primary-content__intro__eyebrow {
|
|
145
|
+
color: #8592e0;
|
|
146
|
+
font-size: 1.15rem;
|
|
147
|
+
font-weight: 500;
|
|
148
|
+
margin: 0;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.es-alternate-grid__primary-content__intro__headline {
|
|
152
|
+
font-size: 1.625rem;
|
|
153
|
+
font-weight: 700;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.es-alternate-grid__primary-content__intro__headline * {
|
|
157
|
+
margin: 0;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
@media (min-width: 640px) {
|
|
161
|
+
.es-alternate-grid__primary-content__intro__headline {
|
|
162
|
+
font-size: 2rem;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
@media (min-width: 1024px) {
|
|
167
|
+
.es-alternate-grid__primary-content__intro__headline {
|
|
168
|
+
font-size: 2.5rem;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
@media (min-width: 1200px) {
|
|
173
|
+
.es-alternate-grid__primary-content__intro__headline {
|
|
174
|
+
font-size: 2.75rem;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.es-alternate-grid__primary-content__intro__description {
|
|
179
|
+
font-size: 1.15rem;
|
|
180
|
+
max-width: 38rem;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.es-alternate-grid__primary-content__intro__description > p {
|
|
184
|
+
margin: 0;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
@media (min-width: 1200px) {
|
|
188
|
+
.es-alternate-grid__primary-content__intro__description {
|
|
189
|
+
font-size: 1.4rem;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.es-alternate-grid__primary-content__items {
|
|
194
|
+
display: grid;
|
|
195
|
+
gap: 2rem;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
@media (min-width: 640px) {
|
|
199
|
+
.es-alternate-grid__primary-content__items {
|
|
200
|
+
grid-template-columns: repeat(2, 1fr);
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.es-alternate-grid__item {
|
|
205
|
+
display: grid;
|
|
206
|
+
align-content: start;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.es-alternate-grid__item__heading {
|
|
210
|
+
font-weight: 700;
|
|
211
|
+
font-size: 1.17rem;
|
|
212
|
+
margin-top: 0;
|
|
213
|
+
margin-bottom: 0.5rem;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.es-alternate-grid__item__heading * {
|
|
217
|
+
margin: 0;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.es-alternate-grid__item__description {
|
|
221
|
+
font-size: 0.9rem;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.es-alternate-grid__item__description * {
|
|
225
|
+
margin: 0;
|
|
226
|
+
}
|
|
227
|
+
</style>
|
|
228
|
+
</section>
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { isFilled } from "@prismicio/client";
|
|
3
|
+
import {
|
|
4
|
+
PrismicLink,
|
|
5
|
+
PrismicImage,
|
|
6
|
+
PrismicRichText,
|
|
7
|
+
} from "@prismicio/svelte";
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* @type {{ slice: import("@prismicio/client").Content.${PascalNameToReplace}Slice }}
|
|
11
|
+
*/
|
|
12
|
+
let { slice } = $props();
|
|
13
|
+
|
|
14
|
+
const alignment = $derived(slice.variation === "alignLeft" ? "left" : "center");
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<section
|
|
18
|
+
data-slice-type={slice.slice_type}
|
|
19
|
+
data-slice-variation={slice.variation}
|
|
20
|
+
class="es-bounded es-call-to-action"
|
|
21
|
+
style="--alignment: {alignment}"
|
|
22
|
+
>
|
|
23
|
+
<div class="es-bounded__content es-call-to-action__content">
|
|
24
|
+
{#if isFilled.image(slice.primary.image)}
|
|
25
|
+
<PrismicImage
|
|
26
|
+
class="es-call-to-action__image"
|
|
27
|
+
field={slice.primary.image}
|
|
28
|
+
/>
|
|
29
|
+
{/if}
|
|
30
|
+
<div class="es-call-to-action__content">
|
|
31
|
+
{#if isFilled.richText(slice.primary.title)}
|
|
32
|
+
<div class="es-call-to-action__content__heading">
|
|
33
|
+
<PrismicRichText field={slice.primary.title} />
|
|
34
|
+
</div>
|
|
35
|
+
{/if}
|
|
36
|
+
{#if isFilled.richText(slice.primary.paragraph)}
|
|
37
|
+
<div class="es-call-to-action__content__paragraph">
|
|
38
|
+
<PrismicRichText field={slice.primary.paragraph} />
|
|
39
|
+
</div>
|
|
40
|
+
{/if}
|
|
41
|
+
</div>
|
|
42
|
+
<PrismicLink
|
|
43
|
+
class="es-call-to-action__button"
|
|
44
|
+
field={slice.primary.buttonLink}
|
|
45
|
+
/>
|
|
46
|
+
</div>
|
|
47
|
+
<style>
|
|
48
|
+
.es-bounded {
|
|
49
|
+
padding: 8vw 2rem;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.es-bounded__content {
|
|
53
|
+
margin-left: auto;
|
|
54
|
+
margin-right: auto;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@media screen and (min-width: 640px) {
|
|
58
|
+
.es-bounded__content {
|
|
59
|
+
max-width: 90%;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@media screen and (min-width: 896px) {
|
|
64
|
+
.es-bounded__content {
|
|
65
|
+
max-width: 80%;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@media screen and (min-width: 1280px) {
|
|
70
|
+
.es-bounded__content {
|
|
71
|
+
max-width: 75%;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.es-call-to-action {
|
|
76
|
+
font-family: system-ui, sans-serif;
|
|
77
|
+
background-color: #fff;
|
|
78
|
+
color: #333;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.es-call-to-action__image {
|
|
82
|
+
max-width: 14rem;
|
|
83
|
+
height: auto;
|
|
84
|
+
width: auto;
|
|
85
|
+
justify-self: var(--alignment);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.es-call-to-action__content {
|
|
89
|
+
display: grid;
|
|
90
|
+
gap: 1rem;
|
|
91
|
+
justify-items: var(--alignment);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.es-call-to-action__content__heading {
|
|
95
|
+
font-size: 2rem;
|
|
96
|
+
font-weight: 700;
|
|
97
|
+
text-align: var(--alignment);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.es-call-to-action__content__heading * {
|
|
101
|
+
margin: 0;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.es-call-to-action__content__paragraph {
|
|
105
|
+
font-size: 1.15rem;
|
|
106
|
+
max-width: 38rem;
|
|
107
|
+
text-align: var(--alignment);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.es-call-to-action__button {
|
|
111
|
+
justify-self: var(--alignment);
|
|
112
|
+
border-radius: 0.25rem;
|
|
113
|
+
display: inline-block;
|
|
114
|
+
font-size: 0.875rem;
|
|
115
|
+
line-height: 1.3;
|
|
116
|
+
padding: 1rem 2.625rem;
|
|
117
|
+
text-align: var(--alignment);
|
|
118
|
+
transition: background-color 100ms linear;
|
|
119
|
+
background-color: #16745f;
|
|
120
|
+
color: #fff;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.es-call-to-action__button:hover {
|
|
124
|
+
background-color: #0d5e4c;
|
|
125
|
+
}
|
|
126
|
+
</style>
|
|
127
|
+
</section>
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { type Content, isFilled } from "@prismicio/client";
|
|
3
|
+
import {
|
|
4
|
+
PrismicLink,
|
|
5
|
+
PrismicImage,
|
|
6
|
+
PrismicRichText,
|
|
7
|
+
} from "@prismicio/svelte";
|
|
8
|
+
|
|
9
|
+
interface Props {
|
|
10
|
+
slice: Content.PascalNameToReplaceSlice;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
let { slice }: Props = $props();
|
|
14
|
+
|
|
15
|
+
const alignment = $derived(slice.variation === "alignLeft" ? "left" : "center");
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<section
|
|
19
|
+
data-slice-type={slice.slice_type}
|
|
20
|
+
data-slice-variation={slice.variation}
|
|
21
|
+
class="es-bounded es-call-to-action"
|
|
22
|
+
style="--alignment: {alignment}"
|
|
23
|
+
>
|
|
24
|
+
<div class="es-bounded__content es-call-to-action__content">
|
|
25
|
+
{#if isFilled.image(slice.primary.image)}
|
|
26
|
+
<PrismicImage
|
|
27
|
+
class="es-call-to-action__image"
|
|
28
|
+
field={slice.primary.image}
|
|
29
|
+
/>
|
|
30
|
+
{/if}
|
|
31
|
+
<div class="es-call-to-action__content">
|
|
32
|
+
{#if isFilled.richText(slice.primary.title)}
|
|
33
|
+
<div class="es-call-to-action__content__heading">
|
|
34
|
+
<PrismicRichText field={slice.primary.title} />
|
|
35
|
+
</div>
|
|
36
|
+
{/if}
|
|
37
|
+
{#if isFilled.richText(slice.primary.paragraph)}
|
|
38
|
+
<div class="es-call-to-action__content__paragraph">
|
|
39
|
+
<PrismicRichText field={slice.primary.paragraph} />
|
|
40
|
+
</div>
|
|
41
|
+
{/if}
|
|
42
|
+
</div>
|
|
43
|
+
<PrismicLink
|
|
44
|
+
class="es-call-to-action__button"
|
|
45
|
+
field={slice.primary.buttonLink}
|
|
46
|
+
/>
|
|
47
|
+
</div>
|
|
48
|
+
<style>
|
|
49
|
+
.es-bounded {
|
|
50
|
+
padding: 8vw 2rem;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.es-bounded__content {
|
|
54
|
+
margin-left: auto;
|
|
55
|
+
margin-right: auto;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@media screen and (min-width: 640px) {
|
|
59
|
+
.es-bounded__content {
|
|
60
|
+
max-width: 90%;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@media screen and (min-width: 896px) {
|
|
65
|
+
.es-bounded__content {
|
|
66
|
+
max-width: 80%;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@media screen and (min-width: 1280px) {
|
|
71
|
+
.es-bounded__content {
|
|
72
|
+
max-width: 75%;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.es-call-to-action {
|
|
77
|
+
font-family: system-ui, sans-serif;
|
|
78
|
+
background-color: #fff;
|
|
79
|
+
color: #333;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.es-call-to-action__image {
|
|
83
|
+
max-width: 14rem;
|
|
84
|
+
height: auto;
|
|
85
|
+
width: auto;
|
|
86
|
+
justify-self: var(--alignment);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.es-call-to-action__content {
|
|
90
|
+
display: grid;
|
|
91
|
+
gap: 1rem;
|
|
92
|
+
justify-items: var(--alignment);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.es-call-to-action__content__heading {
|
|
96
|
+
font-size: 2rem;
|
|
97
|
+
font-weight: 700;
|
|
98
|
+
text-align: var(--alignment);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.es-call-to-action__content__heading * {
|
|
102
|
+
margin: 0;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.es-call-to-action__content__paragraph {
|
|
106
|
+
font-size: 1.15rem;
|
|
107
|
+
max-width: 38rem;
|
|
108
|
+
text-align: var(--alignment);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.es-call-to-action__button {
|
|
112
|
+
justify-self: var(--alignment);
|
|
113
|
+
border-radius: 0.25rem;
|
|
114
|
+
display: inline-block;
|
|
115
|
+
font-size: 0.875rem;
|
|
116
|
+
line-height: 1.3;
|
|
117
|
+
padding: 1rem 2.625rem;
|
|
118
|
+
text-align: var(--alignment);
|
|
119
|
+
transition: background-color 100ms linear;
|
|
120
|
+
background-color: #16745f;
|
|
121
|
+
color: #fff;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.es-call-to-action__button:hover {
|
|
125
|
+
background-color: #0d5e4c;
|
|
126
|
+
}
|
|
127
|
+
</style>
|
|
128
|
+
</section>
|