@comicrelief/component-library 8.51.3 → 8.51.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js +11 -6
  2. package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md +4 -4
  3. package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js +41 -22
  4. package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.test.js +0 -1
  5. package/dist/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +996 -2653
  6. package/dist/components/Molecules/CTA/CTASingleCard/CTASingleCard.js +9 -4
  7. package/dist/components/Molecules/CTA/CTASingleCard/CTASingleCard.md +10 -10
  8. package/dist/components/Molecules/CTA/CTASingleCard/CTASingleCard.style.js +16 -6
  9. package/dist/components/Molecules/CTA/CTASingleCard/CTASingleCard.test.js +2 -0
  10. package/dist/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap +245 -233
  11. package/dist/components/Molecules/CTA/shared/CTACard.js +11 -8
  12. package/dist/components/Molecules/CTA/shared/CTACard.style.js +101 -73
  13. package/dist/components/Molecules/EmailSignUp/EmailSignUp.style.js +1 -1
  14. package/dist/components/Organisms/FooterNew/FooterNew.style.js +2 -2
  15. package/dist/components/Organisms/FooterNew/__snapshots__/FooterNew.test.js.snap +6 -6
  16. package/package.json +1 -1
  17. package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js +48 -41
  18. package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md +4 -4
  19. package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js +34 -9
  20. package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.test.js +0 -1
  21. package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +996 -2653
  22. package/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.js +22 -10
  23. package/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.md +10 -10
  24. package/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.style.js +7 -9
  25. package/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.test.js +2 -0
  26. package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap +245 -233
  27. package/src/components/Molecules/CTA/shared/CTACard.js +14 -7
  28. package/src/components/Molecules/CTA/shared/CTACard.style.js +80 -43
  29. package/src/components/Molecules/EmailSignUp/EmailSignUp.style.js +1 -1
  30. package/src/components/Organisms/FooterNew/FooterNew.style.js +2 -2
  31. package/src/components/Organisms/FooterNew/__snapshots__/FooterNew.test.js.snap +6 -6
  32. package/dist/components/Molecules/OLD_CTAMultiCard/CTAMultiCard.js +0 -58
  33. package/dist/components/Molecules/OLD_CTAMultiCard/CTAMultiCard.style.js +0 -157
  34. package/dist/components/Molecules/OLD_CTAMultiCard/CTAMultiCard.test.js +0 -70
  35. package/dist/components/Molecules/OLD_CTAMultiCard/SingleCard.js +0 -56
  36. package/dist/components/Molecules/OLD_CTAMultiCard/_ArrowIcon.js +0 -29
  37. package/dist/components/Molecules/OLD_CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +0 -2296
  38. package/dist/components/Molecules/OLD_CTAMultiCard/example_data.json +0 -107
  39. package/src/components/Molecules/OLD_CTAMultiCard/CTAMultiCard.js +0 -100
  40. package/src/components/Molecules/OLD_CTAMultiCard/CTAMultiCard.style.js +0 -259
  41. package/src/components/Molecules/OLD_CTAMultiCard/CTAMultiCard.test.js +0 -86
  42. package/src/components/Molecules/OLD_CTAMultiCard/SingleCard.js +0 -100
  43. package/src/components/Molecules/OLD_CTAMultiCard/_ArrowIcon.js +0 -22
  44. package/src/components/Molecules/OLD_CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +0 -2296
  45. package/src/components/Molecules/OLD_CTAMultiCard/example_data.json +0 -107
@@ -1,2296 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`handles data structure correctly 1`] = `
4
- .c5 {
5
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
6
- font-weight: 400;
7
- text-transform: inherit;
8
- -webkit-letter-spacing: 0;
9
- -moz-letter-spacing: 0;
10
- -ms-letter-spacing: 0;
11
- letter-spacing: 0;
12
- font-size: 1rem;
13
- line-height: 1.25rem;
14
- }
15
-
16
- .c5 span {
17
- font-size: inherit;
18
- line-height: inherit;
19
- }
20
-
21
- .c13 {
22
- display: inline-block;
23
- color: #FFFFFF;
24
- fill: currentColor;
25
- }
26
-
27
- .c0 {
28
- display: -webkit-box;
29
- display: -webkit-flex;
30
- display: -ms-flexbox;
31
- display: flex;
32
- -webkit-flex-direction: column;
33
- -ms-flex-direction: column;
34
- flex-direction: column;
35
- width: 100%;
36
- background: #FFFFFF;
37
- gap: 1rem;
38
- }
39
-
40
- .c8 {
41
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
42
- font-weight: 400;
43
- text-transform: inherit;
44
- -webkit-letter-spacing: 0;
45
- -moz-letter-spacing: 0;
46
- -ms-letter-spacing: 0;
47
- letter-spacing: 0;
48
- font-size: 1rem;
49
- line-height: 1.25rem;
50
- color: #969598;
51
- font-weight: bold;
52
- -webkit-text-decoration: none;
53
- text-decoration: none;
54
- position: relative;
55
- display: inline-block;
56
- }
57
-
58
- .c10 {
59
- height: 4px;
60
- width: 100%;
61
- position: absolute;
62
- left: 0;
63
- bottom: -5px;
64
- -webkit-transition: opacity 0.15s 0.1s;
65
- transition: opacity 0.15s 0.1s;
66
- opacity: 0;
67
- pointer-events: none;
68
- }
69
-
70
- .c12 {
71
- width: 32px;
72
- height: 32px;
73
- border-radius: 50%;
74
- background: #969598;
75
- display: -webkit-box;
76
- display: -webkit-flex;
77
- display: -ms-flexbox;
78
- display: flex;
79
- -webkit-align-items: center;
80
- -webkit-box-align: center;
81
- -ms-flex-align: center;
82
- align-items: center;
83
- -webkit-box-pack: center;
84
- -webkit-justify-content: center;
85
- -ms-flex-pack: center;
86
- justify-content: center;
87
- -webkit-flex-shrink: 0;
88
- -ms-flex-negative: 0;
89
- flex-shrink: 0;
90
- }
91
-
92
- .c2 {
93
- display: -webkit-box;
94
- display: -webkit-flex;
95
- display: -ms-flexbox;
96
- display: flex;
97
- position: relative;
98
- -webkit-flex-direction: column;
99
- -ms-flex-direction: column;
100
- flex-direction: column;
101
- width: 100%;
102
- -webkit-flex: 1 1 auto;
103
- -ms-flex: 1 1 auto;
104
- flex: 1 1 auto;
105
- background: transparent;
106
- border-radius: 1rem;
107
- box-shadow: 0 0 1rem rgba(0,0,0,0.15);
108
- -webkit-text-decoration: none;
109
- text-decoration: none;
110
- overflow: hidden;
111
- cursor: pointer;
112
- }
113
-
114
- .c2 img {
115
- -webkit-transform: scale(1.02);
116
- -ms-transform: scale(1.02);
117
- transform: scale(1.02);
118
- -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
119
- -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
120
- transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
121
- }
122
-
123
- .c1 {
124
- width: 100%;
125
- -webkit-flex-shrink: 0;
126
- -ms-flex-negative: 0;
127
- flex-shrink: 0;
128
- display: -webkit-box;
129
- display: -webkit-flex;
130
- display: -ms-flexbox;
131
- display: flex;
132
- -webkit-flex-direction: column;
133
- -ms-flex-direction: column;
134
- flex-direction: column;
135
- -webkit-align-self: stretch;
136
- -ms-flex-item-align: stretch;
137
- align-self: stretch;
138
- }
139
-
140
- .c3 {
141
- width: 100%;
142
- background: inherit;
143
- display: -webkit-box;
144
- display: -webkit-flex;
145
- display: -ms-flexbox;
146
- display: flex;
147
- -webkit-flex-direction: column;
148
- -ms-flex-direction: column;
149
- flex-direction: column;
150
- padding: 2rem;
151
- -webkit-flex: 1;
152
- -ms-flex: 1;
153
- flex: 1;
154
- min-height: 0;
155
- border-radius: 0 0 1rem 1rem;
156
- }
157
-
158
- .c4 {
159
- -webkit-flex: 1;
160
- -ms-flex: 1;
161
- flex: 1;
162
- display: -webkit-box;
163
- display: -webkit-flex;
164
- display: -ms-flexbox;
165
- display: flex;
166
- -webkit-flex-direction: column;
167
- -ms-flex-direction: column;
168
- flex-direction: column;
169
- min-height: 0;
170
- }
171
-
172
- .c6 {
173
- width: 100%;
174
- display: -webkit-box;
175
- display: -webkit-flex;
176
- display: -ms-flexbox;
177
- display: flex;
178
- -webkit-flex-direction: row;
179
- -ms-flex-direction: row;
180
- flex-direction: row;
181
- -webkit-align-items: center;
182
- -webkit-box-align: center;
183
- -ms-flex-align: center;
184
- align-items: center;
185
- -webkit-box-pack: justify;
186
- -webkit-justify-content: space-between;
187
- -ms-flex-pack: justify;
188
- justify-content: space-between;
189
- margin-top: auto;
190
- padding-top: 1rem;
191
- }
192
-
193
- @media (min-width:740px) {
194
- .c5 {
195
- font-size: 1rem;
196
- line-height: 1.25rem;
197
- }
198
- }
199
-
200
- @media (min-width:1024px) {
201
- .c5 {
202
- font-size: 1.125rem;
203
- line-height: 1.375rem;
204
- }
205
- }
206
-
207
- @media (max-width:739px) {
208
- .c0 {
209
- -webkit-flex-direction: column;
210
- -ms-flex-direction: column;
211
- flex-direction: column;
212
- background: transparent;
213
- }
214
- }
215
-
216
- @media (min-width:740px) {
217
- .c0 {
218
- -webkit-flex-direction: row;
219
- -ms-flex-direction: row;
220
- flex-direction: row;
221
- -webkit-flex-wrap: wrap;
222
- -ms-flex-wrap: wrap;
223
- flex-wrap: wrap;
224
- -webkit-box-pack: center;
225
- -webkit-justify-content: center;
226
- -ms-flex-pack: center;
227
- justify-content: center;
228
- -webkit-align-items: stretch;
229
- -webkit-box-align: stretch;
230
- -ms-flex-align: stretch;
231
- align-items: stretch;
232
- width: -webkit-fit-content;
233
- width: -moz-fit-content;
234
- width: fit-content;
235
- max-width: 100%;
236
- margin: 0 auto;
237
- }
238
- }
239
-
240
- @media (min-width:1440px) {
241
- .c0 {
242
- display: grid;
243
- -webkit-box-pack: center;
244
- -webkit-justify-content: center;
245
- -ms-flex-pack: center;
246
- justify-content: center;
247
- -webkit-align-items: stretch;
248
- -webkit-box-align: stretch;
249
- -ms-flex-align: stretch;
250
- align-items: stretch;
251
- grid-template-columns: repeat(3,minmax(0,1fr));
252
- width: 100%;
253
- margin: 0 auto;
254
- max-width: 100%;
255
- }
256
- }
257
-
258
- @media (min-width:740px) {
259
- .c8 {
260
- font-size: 1rem;
261
- line-height: 1.25rem;
262
- }
263
- }
264
-
265
- @media (min-width:1024px) {
266
- .c8 {
267
- font-size: 1.125rem;
268
- line-height: 1.375rem;
269
- }
270
- }
271
-
272
- @media (min-width:740px) {
273
- .c2 {
274
- -webkit-transition: -webkit-transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
275
- -webkit-transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
276
- transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
277
- -webkit-transform-origin: center;
278
- -ms-transform-origin: center;
279
- transform-origin: center;
280
- }
281
-
282
- .c2:hover,
283
- .c2:focus {
284
- -webkit-transform: translateY(-0.02px);
285
- -ms-transform: translateY(-0.02px);
286
- transform: translateY(-0.02px);
287
- }
288
-
289
- .c2:hover {
290
- box-shadow: 0 0 1.5rem rgba(0,0,0,0.25);
291
- }
292
-
293
- .c2:hover .c7 {
294
- color: #E52630;
295
- -webkit-text-decoration: none;
296
- text-decoration: none;
297
- }
298
-
299
- .c2:hover .c9 {
300
- opacity: 1;
301
- }
302
-
303
- .c2:hover .c11 {
304
- background: #E52630;
305
- }
306
- }
307
-
308
- @media (max-width:739px) {
309
- .c1 {
310
- width: 100%;
311
- }
312
- }
313
-
314
- @media (min-width:740px) {
315
- .c1 {
316
- -webkit-flex-basis: calc(50% - 1rem);
317
- -ms-flex-preferred-size: calc(50% - 1rem);
318
- flex-basis: calc(50% - 1rem);
319
- max-width: 564px;
320
- height: 100%;
321
- -webkit-align-self: stretch;
322
- -ms-flex-item-align: stretch;
323
- align-self: stretch;
324
- }
325
- }
326
-
327
- @media (min-width:1440px) {
328
- .c1 {
329
- -webkit-flex-basis: unset;
330
- -ms-flex-preferred-size: unset;
331
- flex-basis: unset;
332
- max-width: 564px;
333
- height: 100%;
334
- -webkit-align-self: stretch;
335
- -ms-flex-item-align: stretch;
336
- align-self: stretch;
337
- }
338
- }
339
-
340
- <div
341
- className="c0"
342
- >
343
- <div
344
- className="c1"
345
- >
346
- <a
347
- className="c2"
348
- href="/test"
349
- >
350
- <div
351
- className="c3"
352
- >
353
- <div
354
- className="c4"
355
- >
356
- <p
357
- className="c5"
358
- >
359
- <strong>
360
- Load
361
- </strong>
362
- of text here
363
- </p>
364
- </div>
365
- <div
366
- className="c6"
367
- >
368
- <span
369
- className="c7 c8"
370
- >
371
- test go
372
- <img
373
- alt=""
374
- aria-hidden="true"
375
- className="c9 c10"
376
- src="mock.asset"
377
- />
378
- </span>
379
- <div
380
- className="c11 c12"
381
- >
382
- <svg
383
- className="c13"
384
- fill="none"
385
- height="13"
386
- viewBox="0 0 15 13"
387
- width="15"
388
- xmlns="http://www.w3.org/2000/svg"
389
- >
390
- <path
391
- d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
392
- fill="currentColor"
393
- />
394
- </svg>
395
- </div>
396
- </div>
397
- </div>
398
- </a>
399
- </div>
400
- <div
401
- className="c1"
402
- >
403
- <a
404
- className="c2"
405
- href="/test"
406
- >
407
- <div
408
- className="c3"
409
- >
410
- <div
411
- className="c4"
412
- >
413
- <p
414
- className="c5"
415
- >
416
- <strong>
417
- Load
418
- </strong>
419
- of text here
420
- </p>
421
- </div>
422
- <div
423
- className="c6"
424
- >
425
- <span
426
- className="c7 c8"
427
- >
428
- test go
429
- <img
430
- alt=""
431
- aria-hidden="true"
432
- className="c9 c10"
433
- src="mock.asset"
434
- />
435
- </span>
436
- <div
437
- className="c11 c12"
438
- >
439
- <svg
440
- className="c13"
441
- fill="none"
442
- height="13"
443
- viewBox="0 0 15 13"
444
- width="15"
445
- xmlns="http://www.w3.org/2000/svg"
446
- >
447
- <path
448
- d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
449
- fill="currentColor"
450
- />
451
- </svg>
452
- </div>
453
- </div>
454
- </div>
455
- </a>
456
- </div>
457
- <div
458
- className="c1"
459
- >
460
- <a
461
- className="c2"
462
- href="/test"
463
- >
464
- <div
465
- className="c3"
466
- >
467
- <div
468
- className="c4"
469
- >
470
- <p
471
- className="c5"
472
- >
473
- <strong>
474
- Load
475
- </strong>
476
- of text here
477
- </p>
478
- </div>
479
- <div
480
- className="c6"
481
- >
482
- <span
483
- className="c7 c8"
484
- >
485
- test go
486
- <img
487
- alt=""
488
- aria-hidden="true"
489
- className="c9 c10"
490
- src="mock.asset"
491
- />
492
- </span>
493
- <div
494
- className="c11 c12"
495
- >
496
- <svg
497
- className="c13"
498
- fill="none"
499
- height="13"
500
- viewBox="0 0 15 13"
501
- width="15"
502
- xmlns="http://www.w3.org/2000/svg"
503
- >
504
- <path
505
- d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
506
- fill="currentColor"
507
- />
508
- </svg>
509
- </div>
510
- </div>
511
- </div>
512
- </a>
513
- </div>
514
- <div
515
- className="c1"
516
- >
517
- <a
518
- className="c2"
519
- href="/test-no-image"
520
- >
521
- <div
522
- className="c3"
523
- >
524
- <div
525
- className="c4"
526
- >
527
- <p
528
- className="c5"
529
- >
530
- Load of text here
531
- </p>
532
- </div>
533
- <div
534
- className="c6"
535
- >
536
- <span
537
- className="c7 c8"
538
- >
539
- View card
540
- <img
541
- alt=""
542
- aria-hidden="true"
543
- className="c9 c10"
544
- src="mock.asset"
545
- />
546
- </span>
547
- <div
548
- className="c11 c12"
549
- >
550
- <svg
551
- className="c13"
552
- fill="none"
553
- height="13"
554
- viewBox="0 0 15 13"
555
- width="15"
556
- xmlns="http://www.w3.org/2000/svg"
557
- >
558
- <path
559
- d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
560
- fill="currentColor"
561
- />
562
- </svg>
563
- </div>
564
- </div>
565
- </div>
566
- </a>
567
- </div>
568
- </div>
569
- `;
570
-
571
- exports[`renders 2 columns layout correctly 1`] = `
572
- .c5 {
573
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
574
- font-weight: 400;
575
- text-transform: inherit;
576
- -webkit-letter-spacing: 0;
577
- -moz-letter-spacing: 0;
578
- -ms-letter-spacing: 0;
579
- letter-spacing: 0;
580
- font-size: 1rem;
581
- line-height: 1.25rem;
582
- }
583
-
584
- .c5 span {
585
- font-size: inherit;
586
- line-height: inherit;
587
- }
588
-
589
- .c13 {
590
- display: inline-block;
591
- color: #FFFFFF;
592
- fill: currentColor;
593
- }
594
-
595
- .c0 {
596
- display: -webkit-box;
597
- display: -webkit-flex;
598
- display: -ms-flexbox;
599
- display: flex;
600
- -webkit-flex-direction: column;
601
- -ms-flex-direction: column;
602
- flex-direction: column;
603
- width: 100%;
604
- background: transparent;
605
- gap: 1rem;
606
- }
607
-
608
- .c8 {
609
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
610
- font-weight: 400;
611
- text-transform: inherit;
612
- -webkit-letter-spacing: 0;
613
- -moz-letter-spacing: 0;
614
- -ms-letter-spacing: 0;
615
- letter-spacing: 0;
616
- font-size: 1rem;
617
- line-height: 1.25rem;
618
- color: #969598;
619
- font-weight: bold;
620
- -webkit-text-decoration: none;
621
- text-decoration: none;
622
- position: relative;
623
- display: inline-block;
624
- }
625
-
626
- .c10 {
627
- height: 4px;
628
- width: 100%;
629
- position: absolute;
630
- left: 0;
631
- bottom: -5px;
632
- -webkit-transition: opacity 0.15s 0.1s;
633
- transition: opacity 0.15s 0.1s;
634
- opacity: 0;
635
- pointer-events: none;
636
- }
637
-
638
- .c12 {
639
- width: 32px;
640
- height: 32px;
641
- border-radius: 50%;
642
- background: #969598;
643
- display: -webkit-box;
644
- display: -webkit-flex;
645
- display: -ms-flexbox;
646
- display: flex;
647
- -webkit-align-items: center;
648
- -webkit-box-align: center;
649
- -ms-flex-align: center;
650
- align-items: center;
651
- -webkit-box-pack: center;
652
- -webkit-justify-content: center;
653
- -ms-flex-pack: center;
654
- justify-content: center;
655
- -webkit-flex-shrink: 0;
656
- -ms-flex-negative: 0;
657
- flex-shrink: 0;
658
- }
659
-
660
- .c2 {
661
- display: -webkit-box;
662
- display: -webkit-flex;
663
- display: -ms-flexbox;
664
- display: flex;
665
- position: relative;
666
- -webkit-flex-direction: column;
667
- -ms-flex-direction: column;
668
- flex-direction: column;
669
- width: 100%;
670
- -webkit-flex: 1 1 auto;
671
- -ms-flex: 1 1 auto;
672
- flex: 1 1 auto;
673
- background: transparent;
674
- border-radius: 1rem;
675
- box-shadow: 0 0 1rem rgba(0,0,0,0.15);
676
- -webkit-text-decoration: none;
677
- text-decoration: none;
678
- overflow: hidden;
679
- cursor: pointer;
680
- }
681
-
682
- .c2 img {
683
- -webkit-transform: scale(1.02);
684
- -ms-transform: scale(1.02);
685
- transform: scale(1.02);
686
- -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
687
- -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
688
- transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
689
- }
690
-
691
- .c1 {
692
- width: 100%;
693
- -webkit-flex-shrink: 0;
694
- -ms-flex-negative: 0;
695
- flex-shrink: 0;
696
- display: -webkit-box;
697
- display: -webkit-flex;
698
- display: -ms-flexbox;
699
- display: flex;
700
- -webkit-flex-direction: column;
701
- -ms-flex-direction: column;
702
- flex-direction: column;
703
- -webkit-align-self: stretch;
704
- -ms-flex-item-align: stretch;
705
- align-self: stretch;
706
- }
707
-
708
- .c3 {
709
- width: 100%;
710
- background: inherit;
711
- display: -webkit-box;
712
- display: -webkit-flex;
713
- display: -ms-flexbox;
714
- display: flex;
715
- -webkit-flex-direction: column;
716
- -ms-flex-direction: column;
717
- flex-direction: column;
718
- padding: 2rem;
719
- -webkit-flex: 1;
720
- -ms-flex: 1;
721
- flex: 1;
722
- min-height: 0;
723
- border-radius: 0 0 1rem 1rem;
724
- }
725
-
726
- .c4 {
727
- -webkit-flex: 1;
728
- -ms-flex: 1;
729
- flex: 1;
730
- display: -webkit-box;
731
- display: -webkit-flex;
732
- display: -ms-flexbox;
733
- display: flex;
734
- -webkit-flex-direction: column;
735
- -ms-flex-direction: column;
736
- flex-direction: column;
737
- min-height: 0;
738
- }
739
-
740
- .c6 {
741
- width: 100%;
742
- display: -webkit-box;
743
- display: -webkit-flex;
744
- display: -ms-flexbox;
745
- display: flex;
746
- -webkit-flex-direction: row;
747
- -ms-flex-direction: row;
748
- flex-direction: row;
749
- -webkit-align-items: center;
750
- -webkit-box-align: center;
751
- -ms-flex-align: center;
752
- align-items: center;
753
- -webkit-box-pack: justify;
754
- -webkit-justify-content: space-between;
755
- -ms-flex-pack: justify;
756
- justify-content: space-between;
757
- margin-top: auto;
758
- padding-top: 1rem;
759
- }
760
-
761
- @media (min-width:740px) {
762
- .c5 {
763
- font-size: 1rem;
764
- line-height: 1.25rem;
765
- }
766
- }
767
-
768
- @media (min-width:1024px) {
769
- .c5 {
770
- font-size: 1.125rem;
771
- line-height: 1.375rem;
772
- }
773
- }
774
-
775
- @media (max-width:739px) {
776
- .c0 {
777
- -webkit-flex-direction: column;
778
- -ms-flex-direction: column;
779
- flex-direction: column;
780
- background: transparent;
781
- }
782
- }
783
-
784
- @media (min-width:740px) {
785
- .c0 {
786
- -webkit-flex-direction: row;
787
- -ms-flex-direction: row;
788
- flex-direction: row;
789
- -webkit-flex-wrap: wrap;
790
- -ms-flex-wrap: wrap;
791
- flex-wrap: wrap;
792
- -webkit-box-pack: center;
793
- -webkit-justify-content: center;
794
- -ms-flex-pack: center;
795
- justify-content: center;
796
- -webkit-align-items: stretch;
797
- -webkit-box-align: stretch;
798
- -ms-flex-align: stretch;
799
- align-items: stretch;
800
- width: -webkit-fit-content;
801
- width: -moz-fit-content;
802
- width: fit-content;
803
- max-width: 100%;
804
- margin: 0 auto;
805
- }
806
- }
807
-
808
- @media (min-width:1440px) {
809
-
810
- }
811
-
812
- @media (min-width:740px) {
813
- .c8 {
814
- font-size: 1rem;
815
- line-height: 1.25rem;
816
- }
817
- }
818
-
819
- @media (min-width:1024px) {
820
- .c8 {
821
- font-size: 1.125rem;
822
- line-height: 1.375rem;
823
- }
824
- }
825
-
826
- @media (min-width:740px) {
827
- .c2 {
828
- -webkit-transition: -webkit-transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
829
- -webkit-transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
830
- transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
831
- -webkit-transform-origin: center;
832
- -ms-transform-origin: center;
833
- transform-origin: center;
834
- }
835
-
836
- .c2:hover,
837
- .c2:focus {
838
- -webkit-transform: translateY(-0.02px);
839
- -ms-transform: translateY(-0.02px);
840
- transform: translateY(-0.02px);
841
- }
842
-
843
- .c2:hover {
844
- box-shadow: 0 0 1.5rem rgba(0,0,0,0.25);
845
- }
846
-
847
- .c2:hover .c7 {
848
- color: #E52630;
849
- -webkit-text-decoration: none;
850
- text-decoration: none;
851
- }
852
-
853
- .c2:hover .c9 {
854
- opacity: 1;
855
- }
856
-
857
- .c2:hover .c11 {
858
- background: #E52630;
859
- }
860
- }
861
-
862
- @media (max-width:739px) {
863
- .c1 {
864
- width: 100%;
865
- }
866
- }
867
-
868
- @media (min-width:740px) {
869
- .c1 {
870
- -webkit-flex-basis: calc(50% - 1rem);
871
- -ms-flex-preferred-size: calc(50% - 1rem);
872
- flex-basis: calc(50% - 1rem);
873
- max-width: 564px;
874
- height: 100%;
875
- -webkit-align-self: stretch;
876
- -ms-flex-item-align: stretch;
877
- align-self: stretch;
878
- }
879
- }
880
-
881
- @media (min-width:1440px) {
882
- .c1 {
883
- -webkit-flex-basis: unset;
884
- -ms-flex-preferred-size: unset;
885
- flex-basis: unset;
886
- max-width: 564px;
887
- height: 100%;
888
- -webkit-align-self: stretch;
889
- -ms-flex-item-align: stretch;
890
- align-self: stretch;
891
- }
892
- }
893
-
894
- <div
895
- className="c0"
896
- >
897
- <div
898
- className="c1"
899
- >
900
- <a
901
- className="c2"
902
- href="/test"
903
- >
904
- <div
905
- className="c3"
906
- >
907
- <div
908
- className="c4"
909
- >
910
- <p
911
- className="c5"
912
- >
913
- <strong>
914
- Load
915
- </strong>
916
- of text here
917
- </p>
918
- </div>
919
- <div
920
- className="c6"
921
- >
922
- <span
923
- className="c7 c8"
924
- >
925
- test go
926
- <img
927
- alt=""
928
- aria-hidden="true"
929
- className="c9 c10"
930
- src="mock.asset"
931
- />
932
- </span>
933
- <div
934
- className="c11 c12"
935
- >
936
- <svg
937
- className="c13"
938
- fill="none"
939
- height="13"
940
- viewBox="0 0 15 13"
941
- width="15"
942
- xmlns="http://www.w3.org/2000/svg"
943
- >
944
- <path
945
- d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
946
- fill="currentColor"
947
- />
948
- </svg>
949
- </div>
950
- </div>
951
- </div>
952
- </a>
953
- </div>
954
- <div
955
- className="c1"
956
- >
957
- <a
958
- className="c2"
959
- href="/test"
960
- >
961
- <div
962
- className="c3"
963
- >
964
- <div
965
- className="c4"
966
- >
967
- <p
968
- className="c5"
969
- >
970
- <strong>
971
- Load
972
- </strong>
973
- of text here
974
- </p>
975
- </div>
976
- <div
977
- className="c6"
978
- >
979
- <span
980
- className="c7 c8"
981
- >
982
- test go
983
- <img
984
- alt=""
985
- aria-hidden="true"
986
- className="c9 c10"
987
- src="mock.asset"
988
- />
989
- </span>
990
- <div
991
- className="c11 c12"
992
- >
993
- <svg
994
- className="c13"
995
- fill="none"
996
- height="13"
997
- viewBox="0 0 15 13"
998
- width="15"
999
- xmlns="http://www.w3.org/2000/svg"
1000
- >
1001
- <path
1002
- d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
1003
- fill="currentColor"
1004
- />
1005
- </svg>
1006
- </div>
1007
- </div>
1008
- </div>
1009
- </a>
1010
- </div>
1011
- <div
1012
- className="c1"
1013
- >
1014
- <a
1015
- className="c2"
1016
- href="/test"
1017
- >
1018
- <div
1019
- className="c3"
1020
- >
1021
- <div
1022
- className="c4"
1023
- >
1024
- <p
1025
- className="c5"
1026
- >
1027
- <strong>
1028
- Load
1029
- </strong>
1030
- of text here
1031
- </p>
1032
- </div>
1033
- <div
1034
- className="c6"
1035
- >
1036
- <span
1037
- className="c7 c8"
1038
- >
1039
- test go
1040
- <img
1041
- alt=""
1042
- aria-hidden="true"
1043
- className="c9 c10"
1044
- src="mock.asset"
1045
- />
1046
- </span>
1047
- <div
1048
- className="c11 c12"
1049
- >
1050
- <svg
1051
- className="c13"
1052
- fill="none"
1053
- height="13"
1054
- viewBox="0 0 15 13"
1055
- width="15"
1056
- xmlns="http://www.w3.org/2000/svg"
1057
- >
1058
- <path
1059
- d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
1060
- fill="currentColor"
1061
- />
1062
- </svg>
1063
- </div>
1064
- </div>
1065
- </div>
1066
- </a>
1067
- </div>
1068
- <div
1069
- className="c1"
1070
- >
1071
- <a
1072
- className="c2"
1073
- href="/test-no-image"
1074
- >
1075
- <div
1076
- className="c3"
1077
- >
1078
- <div
1079
- className="c4"
1080
- >
1081
- <p
1082
- className="c5"
1083
- >
1084
- Load of text here
1085
- </p>
1086
- </div>
1087
- <div
1088
- className="c6"
1089
- >
1090
- <span
1091
- className="c7 c8"
1092
- >
1093
- View card
1094
- <img
1095
- alt=""
1096
- aria-hidden="true"
1097
- className="c9 c10"
1098
- src="mock.asset"
1099
- />
1100
- </span>
1101
- <div
1102
- className="c11 c12"
1103
- >
1104
- <svg
1105
- className="c13"
1106
- fill="none"
1107
- height="13"
1108
- viewBox="0 0 15 13"
1109
- width="15"
1110
- xmlns="http://www.w3.org/2000/svg"
1111
- >
1112
- <path
1113
- d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
1114
- fill="currentColor"
1115
- />
1116
- </svg>
1117
- </div>
1118
- </div>
1119
- </div>
1120
- </a>
1121
- </div>
1122
- </div>
1123
- `;
1124
-
1125
- exports[`renders carousel mode correctly 1`] = `
1126
- .c5 {
1127
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
1128
- font-weight: 400;
1129
- text-transform: inherit;
1130
- -webkit-letter-spacing: 0;
1131
- -moz-letter-spacing: 0;
1132
- -ms-letter-spacing: 0;
1133
- letter-spacing: 0;
1134
- font-size: 1rem;
1135
- line-height: 1.25rem;
1136
- }
1137
-
1138
- .c5 span {
1139
- font-size: inherit;
1140
- line-height: inherit;
1141
- }
1142
-
1143
- .c13 {
1144
- display: inline-block;
1145
- color: #FFFFFF;
1146
- fill: currentColor;
1147
- }
1148
-
1149
- .c0 {
1150
- display: -webkit-box;
1151
- display: -webkit-flex;
1152
- display: -ms-flexbox;
1153
- display: flex;
1154
- -webkit-flex-direction: column;
1155
- -ms-flex-direction: column;
1156
- flex-direction: column;
1157
- width: 100%;
1158
- background: transparent;
1159
- gap: 1rem;
1160
- }
1161
-
1162
- .c8 {
1163
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
1164
- font-weight: 400;
1165
- text-transform: inherit;
1166
- -webkit-letter-spacing: 0;
1167
- -moz-letter-spacing: 0;
1168
- -ms-letter-spacing: 0;
1169
- letter-spacing: 0;
1170
- font-size: 1rem;
1171
- line-height: 1.25rem;
1172
- color: #969598;
1173
- font-weight: bold;
1174
- -webkit-text-decoration: none;
1175
- text-decoration: none;
1176
- position: relative;
1177
- display: inline-block;
1178
- }
1179
-
1180
- .c10 {
1181
- height: 4px;
1182
- width: 100%;
1183
- position: absolute;
1184
- left: 0;
1185
- bottom: -5px;
1186
- -webkit-transition: opacity 0.15s 0.1s;
1187
- transition: opacity 0.15s 0.1s;
1188
- opacity: 0;
1189
- pointer-events: none;
1190
- }
1191
-
1192
- .c12 {
1193
- width: 32px;
1194
- height: 32px;
1195
- border-radius: 50%;
1196
- background: #969598;
1197
- display: -webkit-box;
1198
- display: -webkit-flex;
1199
- display: -ms-flexbox;
1200
- display: flex;
1201
- -webkit-align-items: center;
1202
- -webkit-box-align: center;
1203
- -ms-flex-align: center;
1204
- align-items: center;
1205
- -webkit-box-pack: center;
1206
- -webkit-justify-content: center;
1207
- -ms-flex-pack: center;
1208
- justify-content: center;
1209
- -webkit-flex-shrink: 0;
1210
- -ms-flex-negative: 0;
1211
- flex-shrink: 0;
1212
- }
1213
-
1214
- .c2 {
1215
- display: -webkit-box;
1216
- display: -webkit-flex;
1217
- display: -ms-flexbox;
1218
- display: flex;
1219
- position: relative;
1220
- -webkit-flex-direction: column;
1221
- -ms-flex-direction: column;
1222
- flex-direction: column;
1223
- width: 100%;
1224
- -webkit-flex: 1 1 auto;
1225
- -ms-flex: 1 1 auto;
1226
- flex: 1 1 auto;
1227
- background: transparent;
1228
- border-radius: 1rem;
1229
- box-shadow: 0 0 1rem rgba(0,0,0,0.15);
1230
- -webkit-text-decoration: none;
1231
- text-decoration: none;
1232
- overflow: hidden;
1233
- cursor: pointer;
1234
- }
1235
-
1236
- .c2 img {
1237
- -webkit-transform: scale(1.02);
1238
- -ms-transform: scale(1.02);
1239
- transform: scale(1.02);
1240
- -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
1241
- -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
1242
- transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
1243
- }
1244
-
1245
- .c1 {
1246
- width: 100%;
1247
- -webkit-flex-shrink: 0;
1248
- -ms-flex-negative: 0;
1249
- flex-shrink: 0;
1250
- display: -webkit-box;
1251
- display: -webkit-flex;
1252
- display: -ms-flexbox;
1253
- display: flex;
1254
- -webkit-flex-direction: column;
1255
- -ms-flex-direction: column;
1256
- flex-direction: column;
1257
- -webkit-align-self: stretch;
1258
- -ms-flex-item-align: stretch;
1259
- align-self: stretch;
1260
- }
1261
-
1262
- .c3 {
1263
- width: 100%;
1264
- background: inherit;
1265
- display: -webkit-box;
1266
- display: -webkit-flex;
1267
- display: -ms-flexbox;
1268
- display: flex;
1269
- -webkit-flex-direction: column;
1270
- -ms-flex-direction: column;
1271
- flex-direction: column;
1272
- padding: 2rem;
1273
- -webkit-flex: 1;
1274
- -ms-flex: 1;
1275
- flex: 1;
1276
- min-height: 0;
1277
- border-radius: 0 0 1rem 1rem;
1278
- }
1279
-
1280
- .c4 {
1281
- -webkit-flex: 1;
1282
- -ms-flex: 1;
1283
- flex: 1;
1284
- display: -webkit-box;
1285
- display: -webkit-flex;
1286
- display: -ms-flexbox;
1287
- display: flex;
1288
- -webkit-flex-direction: column;
1289
- -ms-flex-direction: column;
1290
- flex-direction: column;
1291
- min-height: 0;
1292
- }
1293
-
1294
- .c6 {
1295
- width: 100%;
1296
- display: -webkit-box;
1297
- display: -webkit-flex;
1298
- display: -ms-flexbox;
1299
- display: flex;
1300
- -webkit-flex-direction: row;
1301
- -ms-flex-direction: row;
1302
- flex-direction: row;
1303
- -webkit-align-items: center;
1304
- -webkit-box-align: center;
1305
- -ms-flex-align: center;
1306
- align-items: center;
1307
- -webkit-box-pack: justify;
1308
- -webkit-justify-content: space-between;
1309
- -ms-flex-pack: justify;
1310
- justify-content: space-between;
1311
- margin-top: auto;
1312
- padding-top: 1rem;
1313
- }
1314
-
1315
- @media (min-width:740px) {
1316
- .c5 {
1317
- font-size: 1rem;
1318
- line-height: 1.25rem;
1319
- }
1320
- }
1321
-
1322
- @media (min-width:1024px) {
1323
- .c5 {
1324
- font-size: 1.125rem;
1325
- line-height: 1.375rem;
1326
- }
1327
- }
1328
-
1329
- @media (min-width:740px) {
1330
- .c0 {
1331
- -webkit-flex-direction: row;
1332
- -ms-flex-direction: row;
1333
- flex-direction: row;
1334
- -webkit-flex-wrap: wrap;
1335
- -ms-flex-wrap: wrap;
1336
- flex-wrap: wrap;
1337
- -webkit-box-pack: center;
1338
- -webkit-justify-content: center;
1339
- -ms-flex-pack: center;
1340
- justify-content: center;
1341
- -webkit-align-items: stretch;
1342
- -webkit-box-align: stretch;
1343
- -ms-flex-align: stretch;
1344
- align-items: stretch;
1345
- width: -webkit-fit-content;
1346
- width: -moz-fit-content;
1347
- width: fit-content;
1348
- max-width: 100%;
1349
- margin: 0 auto;
1350
- }
1351
- }
1352
-
1353
- @media (max-width:1023px) {
1354
- .c0 {
1355
- -webkit-flex-direction: row;
1356
- -ms-flex-direction: row;
1357
- flex-direction: row;
1358
- -webkit-flex-wrap: nowrap;
1359
- -ms-flex-wrap: nowrap;
1360
- flex-wrap: nowrap;
1361
- -webkit-box-pack: start;
1362
- -webkit-justify-content: flex-start;
1363
- -ms-flex-pack: start;
1364
- justify-content: flex-start;
1365
- width: 100%;
1366
- margin: 0;
1367
- max-width: 100%;
1368
- overflow-x: visible;
1369
- overflow-y: scroll;
1370
- -webkit-overflow-scrolling: touch;
1371
- -webkit-scroll-snap-type: x mandatory;
1372
- -moz-scroll-snap-type: x mandatory;
1373
- -ms-scroll-snap-type: x mandatory;
1374
- scroll-snap-type: x mandatory;
1375
- padding: 0.75rem 1rem;
1376
- -webkit-scrollbar-width: none;
1377
- -moz-scrollbar-width: none;
1378
- -ms-scrollbar-width: none;
1379
- scrollbar-width: none;
1380
- -ms-overflow-style: none;
1381
- }
1382
-
1383
- .c0::-webkit-scrollbar {
1384
- display: none;
1385
- }
1386
- }
1387
-
1388
- @media (min-width:1440px) {
1389
- .c0 {
1390
- display: grid;
1391
- -webkit-box-pack: center;
1392
- -webkit-justify-content: center;
1393
- -ms-flex-pack: center;
1394
- justify-content: center;
1395
- -webkit-align-items: stretch;
1396
- -webkit-box-align: stretch;
1397
- -ms-flex-align: stretch;
1398
- align-items: stretch;
1399
- grid-template-columns: repeat(3,minmax(0,1fr));
1400
- width: 100%;
1401
- margin: 0 auto;
1402
- max-width: 100%;
1403
- }
1404
- }
1405
-
1406
- @media (min-width:740px) {
1407
- .c8 {
1408
- font-size: 1rem;
1409
- line-height: 1.25rem;
1410
- }
1411
- }
1412
-
1413
- @media (min-width:1024px) {
1414
- .c8 {
1415
- font-size: 1.125rem;
1416
- line-height: 1.375rem;
1417
- }
1418
- }
1419
-
1420
- @media (min-width:740px) {
1421
- .c2 {
1422
- -webkit-transition: -webkit-transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
1423
- -webkit-transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
1424
- transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
1425
- -webkit-transform-origin: center;
1426
- -ms-transform-origin: center;
1427
- transform-origin: center;
1428
- }
1429
-
1430
- .c2:hover,
1431
- .c2:focus {
1432
- -webkit-transform: translateY(-0.02px);
1433
- -ms-transform: translateY(-0.02px);
1434
- transform: translateY(-0.02px);
1435
- }
1436
-
1437
- .c2:hover {
1438
- box-shadow: 0 0 1.5rem rgba(0,0,0,0.25);
1439
- }
1440
-
1441
- .c2:hover .c7 {
1442
- color: #E52630;
1443
- -webkit-text-decoration: none;
1444
- text-decoration: none;
1445
- }
1446
-
1447
- .c2:hover .c9 {
1448
- opacity: 1;
1449
- }
1450
-
1451
- .c2:hover .c11 {
1452
- background: #E52630;
1453
- }
1454
- }
1455
-
1456
- @media (max-width:1023px) {
1457
- .c1 {
1458
- -webkit-scroll-snap-align: start;
1459
- -moz-scroll-snap-align: start;
1460
- -ms-scroll-snap-align: start;
1461
- scroll-snap-align: start;
1462
- -webkit-flex: 0 0 calc(100% - 1.5rem);
1463
- -ms-flex: 0 0 calc(100% - 1.5rem);
1464
- flex: 0 0 calc(100% - 1.5rem);
1465
- min-width: calc(100% - 1.5rem);
1466
- max-width: calc(100% - 1.5rem);
1467
- -webkit-flex-shrink: 0;
1468
- -ms-flex-negative: 0;
1469
- flex-shrink: 0;
1470
- }
1471
- }
1472
-
1473
- @media (min-width:1024px) {
1474
- .c1 {
1475
- -webkit-flex-basis: calc(50% - 1rem);
1476
- -ms-flex-preferred-size: calc(50% - 1rem);
1477
- flex-basis: calc(50% - 1rem);
1478
- max-width: 564px;
1479
- height: 100%;
1480
- -webkit-align-self: stretch;
1481
- -ms-flex-item-align: stretch;
1482
- align-self: stretch;
1483
- }
1484
- }
1485
-
1486
- @media (min-width:1440px) {
1487
- .c1 {
1488
- -webkit-flex-basis: unset;
1489
- -ms-flex-preferred-size: unset;
1490
- flex-basis: unset;
1491
- max-width: 564px;
1492
- height: 100%;
1493
- -webkit-align-self: stretch;
1494
- -ms-flex-item-align: stretch;
1495
- align-self: stretch;
1496
- }
1497
- }
1498
-
1499
- <div
1500
- className="c0"
1501
- >
1502
- <div
1503
- className="c1"
1504
- >
1505
- <a
1506
- className="c2"
1507
- href="/test"
1508
- >
1509
- <div
1510
- className="c3"
1511
- >
1512
- <div
1513
- className="c4"
1514
- >
1515
- <p
1516
- className="c5"
1517
- >
1518
- <strong>
1519
- Load
1520
- </strong>
1521
- of text here
1522
- </p>
1523
- </div>
1524
- <div
1525
- className="c6"
1526
- >
1527
- <span
1528
- className="c7 c8"
1529
- >
1530
- test go
1531
- <img
1532
- alt=""
1533
- aria-hidden="true"
1534
- className="c9 c10"
1535
- src="mock.asset"
1536
- />
1537
- </span>
1538
- <div
1539
- className="c11 c12"
1540
- >
1541
- <svg
1542
- className="c13"
1543
- fill="none"
1544
- height="13"
1545
- viewBox="0 0 15 13"
1546
- width="15"
1547
- xmlns="http://www.w3.org/2000/svg"
1548
- >
1549
- <path
1550
- d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
1551
- fill="currentColor"
1552
- />
1553
- </svg>
1554
- </div>
1555
- </div>
1556
- </div>
1557
- </a>
1558
- </div>
1559
- <div
1560
- className="c1"
1561
- >
1562
- <a
1563
- className="c2"
1564
- href="/test"
1565
- >
1566
- <div
1567
- className="c3"
1568
- >
1569
- <div
1570
- className="c4"
1571
- >
1572
- <p
1573
- className="c5"
1574
- >
1575
- <strong>
1576
- Load
1577
- </strong>
1578
- of text here
1579
- </p>
1580
- </div>
1581
- <div
1582
- className="c6"
1583
- >
1584
- <span
1585
- className="c7 c8"
1586
- >
1587
- test go
1588
- <img
1589
- alt=""
1590
- aria-hidden="true"
1591
- className="c9 c10"
1592
- src="mock.asset"
1593
- />
1594
- </span>
1595
- <div
1596
- className="c11 c12"
1597
- >
1598
- <svg
1599
- className="c13"
1600
- fill="none"
1601
- height="13"
1602
- viewBox="0 0 15 13"
1603
- width="15"
1604
- xmlns="http://www.w3.org/2000/svg"
1605
- >
1606
- <path
1607
- d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
1608
- fill="currentColor"
1609
- />
1610
- </svg>
1611
- </div>
1612
- </div>
1613
- </div>
1614
- </a>
1615
- </div>
1616
- <div
1617
- className="c1"
1618
- >
1619
- <a
1620
- className="c2"
1621
- href="/test"
1622
- >
1623
- <div
1624
- className="c3"
1625
- >
1626
- <div
1627
- className="c4"
1628
- >
1629
- <p
1630
- className="c5"
1631
- >
1632
- <strong>
1633
- Load
1634
- </strong>
1635
- of text here
1636
- </p>
1637
- </div>
1638
- <div
1639
- className="c6"
1640
- >
1641
- <span
1642
- className="c7 c8"
1643
- >
1644
- test go
1645
- <img
1646
- alt=""
1647
- aria-hidden="true"
1648
- className="c9 c10"
1649
- src="mock.asset"
1650
- />
1651
- </span>
1652
- <div
1653
- className="c11 c12"
1654
- >
1655
- <svg
1656
- className="c13"
1657
- fill="none"
1658
- height="13"
1659
- viewBox="0 0 15 13"
1660
- width="15"
1661
- xmlns="http://www.w3.org/2000/svg"
1662
- >
1663
- <path
1664
- d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
1665
- fill="currentColor"
1666
- />
1667
- </svg>
1668
- </div>
1669
- </div>
1670
- </div>
1671
- </a>
1672
- </div>
1673
- <div
1674
- className="c1"
1675
- >
1676
- <a
1677
- className="c2"
1678
- href="/test-no-image"
1679
- >
1680
- <div
1681
- className="c3"
1682
- >
1683
- <div
1684
- className="c4"
1685
- >
1686
- <p
1687
- className="c5"
1688
- >
1689
- Load of text here
1690
- </p>
1691
- </div>
1692
- <div
1693
- className="c6"
1694
- >
1695
- <span
1696
- className="c7 c8"
1697
- >
1698
- View card
1699
- <img
1700
- alt=""
1701
- aria-hidden="true"
1702
- className="c9 c10"
1703
- src="mock.asset"
1704
- />
1705
- </span>
1706
- <div
1707
- className="c11 c12"
1708
- >
1709
- <svg
1710
- className="c13"
1711
- fill="none"
1712
- height="13"
1713
- viewBox="0 0 15 13"
1714
- width="15"
1715
- xmlns="http://www.w3.org/2000/svg"
1716
- >
1717
- <path
1718
- d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
1719
- fill="currentColor"
1720
- />
1721
- </svg>
1722
- </div>
1723
- </div>
1724
- </div>
1725
- </a>
1726
- </div>
1727
- </div>
1728
- `;
1729
-
1730
- exports[`renders correctly with data prop 1`] = `
1731
- .c5 {
1732
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
1733
- font-weight: 400;
1734
- text-transform: inherit;
1735
- -webkit-letter-spacing: 0;
1736
- -moz-letter-spacing: 0;
1737
- -ms-letter-spacing: 0;
1738
- letter-spacing: 0;
1739
- font-size: 1rem;
1740
- line-height: 1.25rem;
1741
- }
1742
-
1743
- .c5 span {
1744
- font-size: inherit;
1745
- line-height: inherit;
1746
- }
1747
-
1748
- .c13 {
1749
- display: inline-block;
1750
- color: #FFFFFF;
1751
- fill: currentColor;
1752
- }
1753
-
1754
- .c0 {
1755
- display: -webkit-box;
1756
- display: -webkit-flex;
1757
- display: -ms-flexbox;
1758
- display: flex;
1759
- -webkit-flex-direction: column;
1760
- -ms-flex-direction: column;
1761
- flex-direction: column;
1762
- width: 100%;
1763
- background: transparent;
1764
- gap: 1rem;
1765
- }
1766
-
1767
- .c8 {
1768
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
1769
- font-weight: 400;
1770
- text-transform: inherit;
1771
- -webkit-letter-spacing: 0;
1772
- -moz-letter-spacing: 0;
1773
- -ms-letter-spacing: 0;
1774
- letter-spacing: 0;
1775
- font-size: 1rem;
1776
- line-height: 1.25rem;
1777
- color: #969598;
1778
- font-weight: bold;
1779
- -webkit-text-decoration: none;
1780
- text-decoration: none;
1781
- position: relative;
1782
- display: inline-block;
1783
- }
1784
-
1785
- .c10 {
1786
- height: 4px;
1787
- width: 100%;
1788
- position: absolute;
1789
- left: 0;
1790
- bottom: -5px;
1791
- -webkit-transition: opacity 0.15s 0.1s;
1792
- transition: opacity 0.15s 0.1s;
1793
- opacity: 0;
1794
- pointer-events: none;
1795
- }
1796
-
1797
- .c12 {
1798
- width: 32px;
1799
- height: 32px;
1800
- border-radius: 50%;
1801
- background: #969598;
1802
- display: -webkit-box;
1803
- display: -webkit-flex;
1804
- display: -ms-flexbox;
1805
- display: flex;
1806
- -webkit-align-items: center;
1807
- -webkit-box-align: center;
1808
- -ms-flex-align: center;
1809
- align-items: center;
1810
- -webkit-box-pack: center;
1811
- -webkit-justify-content: center;
1812
- -ms-flex-pack: center;
1813
- justify-content: center;
1814
- -webkit-flex-shrink: 0;
1815
- -ms-flex-negative: 0;
1816
- flex-shrink: 0;
1817
- }
1818
-
1819
- .c2 {
1820
- display: -webkit-box;
1821
- display: -webkit-flex;
1822
- display: -ms-flexbox;
1823
- display: flex;
1824
- position: relative;
1825
- -webkit-flex-direction: column;
1826
- -ms-flex-direction: column;
1827
- flex-direction: column;
1828
- width: 100%;
1829
- -webkit-flex: 1 1 auto;
1830
- -ms-flex: 1 1 auto;
1831
- flex: 1 1 auto;
1832
- background: transparent;
1833
- border-radius: 1rem;
1834
- box-shadow: 0 0 1rem rgba(0,0,0,0.15);
1835
- -webkit-text-decoration: none;
1836
- text-decoration: none;
1837
- overflow: hidden;
1838
- cursor: pointer;
1839
- }
1840
-
1841
- .c2 img {
1842
- -webkit-transform: scale(1.02);
1843
- -ms-transform: scale(1.02);
1844
- transform: scale(1.02);
1845
- -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
1846
- -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
1847
- transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
1848
- }
1849
-
1850
- .c1 {
1851
- width: 100%;
1852
- -webkit-flex-shrink: 0;
1853
- -ms-flex-negative: 0;
1854
- flex-shrink: 0;
1855
- display: -webkit-box;
1856
- display: -webkit-flex;
1857
- display: -ms-flexbox;
1858
- display: flex;
1859
- -webkit-flex-direction: column;
1860
- -ms-flex-direction: column;
1861
- flex-direction: column;
1862
- -webkit-align-self: stretch;
1863
- -ms-flex-item-align: stretch;
1864
- align-self: stretch;
1865
- }
1866
-
1867
- .c3 {
1868
- width: 100%;
1869
- background: inherit;
1870
- display: -webkit-box;
1871
- display: -webkit-flex;
1872
- display: -ms-flexbox;
1873
- display: flex;
1874
- -webkit-flex-direction: column;
1875
- -ms-flex-direction: column;
1876
- flex-direction: column;
1877
- padding: 2rem;
1878
- -webkit-flex: 1;
1879
- -ms-flex: 1;
1880
- flex: 1;
1881
- min-height: 0;
1882
- border-radius: 0 0 1rem 1rem;
1883
- }
1884
-
1885
- .c4 {
1886
- -webkit-flex: 1;
1887
- -ms-flex: 1;
1888
- flex: 1;
1889
- display: -webkit-box;
1890
- display: -webkit-flex;
1891
- display: -ms-flexbox;
1892
- display: flex;
1893
- -webkit-flex-direction: column;
1894
- -ms-flex-direction: column;
1895
- flex-direction: column;
1896
- min-height: 0;
1897
- }
1898
-
1899
- .c6 {
1900
- width: 100%;
1901
- display: -webkit-box;
1902
- display: -webkit-flex;
1903
- display: -ms-flexbox;
1904
- display: flex;
1905
- -webkit-flex-direction: row;
1906
- -ms-flex-direction: row;
1907
- flex-direction: row;
1908
- -webkit-align-items: center;
1909
- -webkit-box-align: center;
1910
- -ms-flex-align: center;
1911
- align-items: center;
1912
- -webkit-box-pack: justify;
1913
- -webkit-justify-content: space-between;
1914
- -ms-flex-pack: justify;
1915
- justify-content: space-between;
1916
- margin-top: auto;
1917
- padding-top: 1rem;
1918
- }
1919
-
1920
- @media (min-width:740px) {
1921
- .c5 {
1922
- font-size: 1rem;
1923
- line-height: 1.25rem;
1924
- }
1925
- }
1926
-
1927
- @media (min-width:1024px) {
1928
- .c5 {
1929
- font-size: 1.125rem;
1930
- line-height: 1.375rem;
1931
- }
1932
- }
1933
-
1934
- @media (max-width:739px) {
1935
- .c0 {
1936
- -webkit-flex-direction: column;
1937
- -ms-flex-direction: column;
1938
- flex-direction: column;
1939
- background: transparent;
1940
- }
1941
- }
1942
-
1943
- @media (min-width:740px) {
1944
- .c0 {
1945
- -webkit-flex-direction: row;
1946
- -ms-flex-direction: row;
1947
- flex-direction: row;
1948
- -webkit-flex-wrap: wrap;
1949
- -ms-flex-wrap: wrap;
1950
- flex-wrap: wrap;
1951
- -webkit-box-pack: center;
1952
- -webkit-justify-content: center;
1953
- -ms-flex-pack: center;
1954
- justify-content: center;
1955
- -webkit-align-items: stretch;
1956
- -webkit-box-align: stretch;
1957
- -ms-flex-align: stretch;
1958
- align-items: stretch;
1959
- width: -webkit-fit-content;
1960
- width: -moz-fit-content;
1961
- width: fit-content;
1962
- max-width: 100%;
1963
- margin: 0 auto;
1964
- }
1965
- }
1966
-
1967
- @media (min-width:1440px) {
1968
- .c0 {
1969
- display: grid;
1970
- -webkit-box-pack: center;
1971
- -webkit-justify-content: center;
1972
- -ms-flex-pack: center;
1973
- justify-content: center;
1974
- -webkit-align-items: stretch;
1975
- -webkit-box-align: stretch;
1976
- -ms-flex-align: stretch;
1977
- align-items: stretch;
1978
- grid-template-columns: repeat(3,minmax(0,1fr));
1979
- width: 100%;
1980
- margin: 0 auto;
1981
- max-width: 100%;
1982
- }
1983
- }
1984
-
1985
- @media (min-width:740px) {
1986
- .c8 {
1987
- font-size: 1rem;
1988
- line-height: 1.25rem;
1989
- }
1990
- }
1991
-
1992
- @media (min-width:1024px) {
1993
- .c8 {
1994
- font-size: 1.125rem;
1995
- line-height: 1.375rem;
1996
- }
1997
- }
1998
-
1999
- @media (min-width:740px) {
2000
- .c2 {
2001
- -webkit-transition: -webkit-transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
2002
- -webkit-transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
2003
- transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
2004
- -webkit-transform-origin: center;
2005
- -ms-transform-origin: center;
2006
- transform-origin: center;
2007
- }
2008
-
2009
- .c2:hover,
2010
- .c2:focus {
2011
- -webkit-transform: translateY(-0.02px);
2012
- -ms-transform: translateY(-0.02px);
2013
- transform: translateY(-0.02px);
2014
- }
2015
-
2016
- .c2:hover {
2017
- box-shadow: 0 0 1.5rem rgba(0,0,0,0.25);
2018
- }
2019
-
2020
- .c2:hover .c7 {
2021
- color: #E52630;
2022
- -webkit-text-decoration: none;
2023
- text-decoration: none;
2024
- }
2025
-
2026
- .c2:hover .c9 {
2027
- opacity: 1;
2028
- }
2029
-
2030
- .c2:hover .c11 {
2031
- background: #E52630;
2032
- }
2033
- }
2034
-
2035
- @media (max-width:739px) {
2036
- .c1 {
2037
- width: 100%;
2038
- }
2039
- }
2040
-
2041
- @media (min-width:740px) {
2042
- .c1 {
2043
- -webkit-flex-basis: calc(50% - 1rem);
2044
- -ms-flex-preferred-size: calc(50% - 1rem);
2045
- flex-basis: calc(50% - 1rem);
2046
- max-width: 564px;
2047
- height: 100%;
2048
- -webkit-align-self: stretch;
2049
- -ms-flex-item-align: stretch;
2050
- align-self: stretch;
2051
- }
2052
- }
2053
-
2054
- @media (min-width:1440px) {
2055
- .c1 {
2056
- -webkit-flex-basis: unset;
2057
- -ms-flex-preferred-size: unset;
2058
- flex-basis: unset;
2059
- max-width: 564px;
2060
- height: 100%;
2061
- -webkit-align-self: stretch;
2062
- -ms-flex-item-align: stretch;
2063
- align-self: stretch;
2064
- }
2065
- }
2066
-
2067
- <div
2068
- className="c0"
2069
- >
2070
- <div
2071
- className="c1"
2072
- >
2073
- <a
2074
- className="c2"
2075
- href="/test"
2076
- >
2077
- <div
2078
- className="c3"
2079
- >
2080
- <div
2081
- className="c4"
2082
- >
2083
- <p
2084
- className="c5"
2085
- >
2086
- <strong>
2087
- Load
2088
- </strong>
2089
- of text here
2090
- </p>
2091
- </div>
2092
- <div
2093
- className="c6"
2094
- >
2095
- <span
2096
- className="c7 c8"
2097
- >
2098
- test go
2099
- <img
2100
- alt=""
2101
- aria-hidden="true"
2102
- className="c9 c10"
2103
- src="mock.asset"
2104
- />
2105
- </span>
2106
- <div
2107
- className="c11 c12"
2108
- >
2109
- <svg
2110
- className="c13"
2111
- fill="none"
2112
- height="13"
2113
- viewBox="0 0 15 13"
2114
- width="15"
2115
- xmlns="http://www.w3.org/2000/svg"
2116
- >
2117
- <path
2118
- d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
2119
- fill="currentColor"
2120
- />
2121
- </svg>
2122
- </div>
2123
- </div>
2124
- </div>
2125
- </a>
2126
- </div>
2127
- <div
2128
- className="c1"
2129
- >
2130
- <a
2131
- className="c2"
2132
- href="/test"
2133
- >
2134
- <div
2135
- className="c3"
2136
- >
2137
- <div
2138
- className="c4"
2139
- >
2140
- <p
2141
- className="c5"
2142
- >
2143
- <strong>
2144
- Load
2145
- </strong>
2146
- of text here
2147
- </p>
2148
- </div>
2149
- <div
2150
- className="c6"
2151
- >
2152
- <span
2153
- className="c7 c8"
2154
- >
2155
- test go
2156
- <img
2157
- alt=""
2158
- aria-hidden="true"
2159
- className="c9 c10"
2160
- src="mock.asset"
2161
- />
2162
- </span>
2163
- <div
2164
- className="c11 c12"
2165
- >
2166
- <svg
2167
- className="c13"
2168
- fill="none"
2169
- height="13"
2170
- viewBox="0 0 15 13"
2171
- width="15"
2172
- xmlns="http://www.w3.org/2000/svg"
2173
- >
2174
- <path
2175
- d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
2176
- fill="currentColor"
2177
- />
2178
- </svg>
2179
- </div>
2180
- </div>
2181
- </div>
2182
- </a>
2183
- </div>
2184
- <div
2185
- className="c1"
2186
- >
2187
- <a
2188
- className="c2"
2189
- href="/test"
2190
- >
2191
- <div
2192
- className="c3"
2193
- >
2194
- <div
2195
- className="c4"
2196
- >
2197
- <p
2198
- className="c5"
2199
- >
2200
- <strong>
2201
- Load
2202
- </strong>
2203
- of text here
2204
- </p>
2205
- </div>
2206
- <div
2207
- className="c6"
2208
- >
2209
- <span
2210
- className="c7 c8"
2211
- >
2212
- test go
2213
- <img
2214
- alt=""
2215
- aria-hidden="true"
2216
- className="c9 c10"
2217
- src="mock.asset"
2218
- />
2219
- </span>
2220
- <div
2221
- className="c11 c12"
2222
- >
2223
- <svg
2224
- className="c13"
2225
- fill="none"
2226
- height="13"
2227
- viewBox="0 0 15 13"
2228
- width="15"
2229
- xmlns="http://www.w3.org/2000/svg"
2230
- >
2231
- <path
2232
- d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
2233
- fill="currentColor"
2234
- />
2235
- </svg>
2236
- </div>
2237
- </div>
2238
- </div>
2239
- </a>
2240
- </div>
2241
- <div
2242
- className="c1"
2243
- >
2244
- <a
2245
- className="c2"
2246
- href="/test-no-image"
2247
- >
2248
- <div
2249
- className="c3"
2250
- >
2251
- <div
2252
- className="c4"
2253
- >
2254
- <p
2255
- className="c5"
2256
- >
2257
- Load of text here
2258
- </p>
2259
- </div>
2260
- <div
2261
- className="c6"
2262
- >
2263
- <span
2264
- className="c7 c8"
2265
- >
2266
- View card
2267
- <img
2268
- alt=""
2269
- aria-hidden="true"
2270
- className="c9 c10"
2271
- src="mock.asset"
2272
- />
2273
- </span>
2274
- <div
2275
- className="c11 c12"
2276
- >
2277
- <svg
2278
- className="c13"
2279
- fill="none"
2280
- height="13"
2281
- viewBox="0 0 15 13"
2282
- width="15"
2283
- xmlns="http://www.w3.org/2000/svg"
2284
- >
2285
- <path
2286
- d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
2287
- fill="currentColor"
2288
- />
2289
- </svg>
2290
- </div>
2291
- </div>
2292
- </div>
2293
- </a>
2294
- </div>
2295
- </div>
2296
- `;