@newskit-render/core 1.45.0 → 1.49.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +96 -0
  2. package/__tests__/pages/__snapshots__/home.test.tsx.snap +769 -1261
  3. package/components/section/ArticleSlice.tsx +17 -43
  4. package/components/section/CollectionBlock.tsx +38 -6
  5. package/components/section/__tests__/ArticleSlice.test.tsx +37 -51
  6. package/components/section/__tests__/CollectionBlock.test.tsx +63 -13
  7. package/components/section/__tests__/pageBlock.test.tsx +8 -4
  8. package/components/section/index.tsx +17 -12
  9. package/components/section/layouts/Lead.tsx +36 -15
  10. package/components/section/layouts/Rows.tsx +67 -0
  11. package/components/section/layouts/{SectionRow.tsx → SectionTitle.tsx} +24 -52
  12. package/components/section/layouts/__tests__/Lead.test.tsx +31 -6
  13. package/components/section/layouts/__tests__/Rows.test.tsx +28 -0
  14. package/components/section/layouts/__tests__/SectionTitle.test.tsx +36 -0
  15. package/components/section/layouts/__tests__/__snapshots__/Lead.test.tsx.snap +274 -315
  16. package/components/section/layouts/__tests__/__snapshots__/SectionTitle.test.tsx.snap +942 -0
  17. package/components/section/layouts/gridUtils.ts +12 -9
  18. package/components/section/layouts/index.tsx +2 -1
  19. package/components/section/layouts/types.ts +5 -1
  20. package/components/section/{pageBlock.ts → pageBlock.tsx} +5 -2
  21. package/components/teaser/index.tsx +7 -6
  22. package/components/teaser/teaserVariants.ts +2 -0
  23. package/components/teaser/variants/horizontal.ts +14 -0
  24. package/cypress/e2e/account/account-subscription.spec.js +2 -2
  25. package/cypress/support/commands.js +2 -2
  26. package/helpers/mocks/getPageMock.ts +2 -59
  27. package/next.config.js +4 -0
  28. package/package.json +16 -10
  29. package/pages/account/cancellation/index.tsx +2 -0
  30. package/pages/api/feed.ts +19 -0
  31. package/theme/render-custom-theme.ts +1 -0
  32. package/components/section/layouts/Row.tsx +0 -28
  33. package/components/section/layouts/__tests__/SectionRow.test.tsx +0 -56
  34. package/components/section/layouts/__tests__/__snapshots__/SectionRow.test.tsx.snap +0 -4542
package/components/section/layouts/__tests__/__snapshots__/SectionRow.test.tsx.snap DELETED
@@ -1,4542 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`SectionRow SectionRow alternative titlebar 1`] = `
4
- <DocumentFragment>
5
- .emotion-0 {
6
- background:color: transparent;
7
- }
8
-
9
- .emotion-1 {
10
- margin-bottom: 32px;
11
- background: transparent;
12
- }
13
-
14
- .emotion-2 {
15
- display: -webkit-box;
16
- display: -webkit-flex;
17
- display: -ms-flexbox;
18
- display: flex;
19
- height: 100%;
20
- -webkit-align-items: center;
21
- -webkit-box-align: center;
22
- -ms-flex-align: center;
23
- align-items: center;
24
- -webkit-flex-direction: row;
25
- -ms-flex-direction: row;
26
- flex-direction: row;
27
- -webkit-box-pack: justify;
28
- -webkit-justify-content: space-between;
29
- justify-content: space-between;
30
- background-color: transparent;
31
- }
32
-
33
- @media screen and (max-width: 1023px) {
34
- .emotion-2 {
35
- padding: 12px 16px;
36
- }
37
- }
38
-
39
- @media screen and (min-width: 1024px) {
40
- .emotion-2 {
41
- padding: 16px 24px;
42
- }
43
- }
44
-
45
- .emotion-3 {
46
- margin-right: 16px;
47
- -webkit-box-flex: 1;
48
- -webkit-flex-grow: 1;
49
- -ms-flex-positive: 1;
50
- flex-grow: 1;
51
- }
52
-
53
- @media screen and (max-width: 767px) {
54
- .emotion-4 {
55
- font-family: "Bitter",serif;
56
- font-size: 28px;
57
- line-height: 31.5px;
58
- font-weight: 500;
59
- letter-spacing: 0;
60
- padding: 0.5px 0px;
61
- }
62
-
63
- .emotion-4::before {
64
- content: '';
65
- margin-bottom: -0.2055em;
66
- display: block;
67
- }
68
-
69
- .emotion-4::after {
70
- content: '';
71
- margin-top: -0.2275em;
72
- display: block;
73
- }
74
- }
75
-
76
- @media screen and (min-width: 768px) and (max-width: 1439px) {
77
- .emotion-4 {
78
- font-family: "Bitter",serif;
79
- font-size: 32px;
80
- line-height: 36px;
81
- font-weight: 500;
82
- letter-spacing: 0;
83
- padding: 0.5px 0px;
84
- }
85
-
86
- .emotion-4::before {
87
- content: '';
88
- margin-bottom: -0.2055em;
89
- display: block;
90
- }
91
-
92
- .emotion-4::after {
93
- content: '';
94
- margin-top: -0.2275em;
95
- display: block;
96
- }
97
- }
98
-
99
- @media screen and (min-width: 1440px) {
100
- .emotion-4 {
101
- font-family: "Bitter",serif;
102
- font-size: 36px;
103
- line-height: 40.5px;
104
- font-weight: 500;
105
- letter-spacing: 0;
106
- padding: 0.5px 0px;
107
- }
108
-
109
- .emotion-4::before {
110
- content: '';
111
- margin-bottom: -0.2055em;
112
- display: block;
113
- }
114
-
115
- .emotion-4::after {
116
- content: '';
117
- margin-top: -0.2275em;
118
- display: block;
119
- }
120
- }
121
-
122
- .emotion-5 {
123
- display: inline;
124
- font: inherit;
125
- margin: 0;
126
- color: #0A0A0A;
127
- }
128
-
129
- .emotion-5 svg {
130
- fill: #0A0A0A;
131
- }
132
-
133
- @media screen {
134
- .emotion-6 {
135
- display: none;
136
- }
137
- }
138
-
139
- @media screen and (min-width: 480px) {
140
- .emotion-6 {
141
- display: block;
142
- }
143
- }
144
-
145
- @media screen and (min-width: 768px) {
146
- .emotion-6 {
147
- display: block;
148
- }
149
- }
150
-
151
- @media screen and (min-width: 1024px) {
152
- .emotion-6 {
153
- display: block;
154
- }
155
- }
156
-
157
- @media screen and (min-width: 1440px) {
158
- .emotion-6 {
159
- display: block;
160
- }
161
- }
162
-
163
- .emotion-7 {
164
- display: inline-block;
165
- transition-property: color;
166
- transition-duration: 200ms;
167
- transition-timing-function: cubic-bezier(0, 0, .5, 1);
168
- color: #0A0A0A;
169
- }
170
-
171
- .emotion-7 svg {
172
- fill: #0A0A0A;
173
- }
174
-
175
- .emotion-8 {
176
- display: -webkit-box;
177
- display: -webkit-flex;
178
- display: -ms-flexbox;
179
- display: flex;
180
- height: 100%;
181
- -webkit-align-items: center;
182
- -webkit-box-align: center;
183
- -ms-flex-align: center;
184
- align-items: center;
185
- -webkit-flex-direction: row;
186
- -ms-flex-direction: row;
187
- flex-direction: row;
188
- -webkit-box-pack: start;
189
- -ms-flex-pack: start;
190
- -webkit-justify-content: flex-start;
191
- justify-content: flex-start;
192
- margin-left: calc(-8px/2);
193
- margin-right: calc(-8px/2);
194
- }
195
-
196
- .emotion-9 {
197
- display: -webkit-inline-box;
198
- display: -webkit-inline-flex;
199
- display: -ms-inline-flexbox;
200
- display: inline-flex;
201
- margin-left: calc(8px/2);
202
- margin-right: calc(8px/2);
203
- }
204
-
205
- .emotion-10 {
206
- margin: 0;
207
- font-family: "Poppins",sans-serif;
208
- font-size: 14px;
209
- line-height: 21px;
210
- font-weight: 500;
211
- letter-spacing: 0;
212
- padding: 0.5px 0px;
213
- display: inline-block;
214
- display: block;
215
- }
216
-
217
- .emotion-10::before {
218
- content: '';
219
- margin-bottom: -0.403em;
220
- display: block;
221
- }
222
-
223
- .emotion-10::after {
224
- content: '';
225
- margin-top: -0.4em;
226
- display: block;
227
- }
228
-
229
- .emotion-12 {
230
- display: inline-block;
231
- vertical-align: middle;
232
- overflow: hidden;
233
- fill: #2E2E2E;
234
- vertical-align: unset;
235
- display: inline-block;
236
- top: 1px;
237
- position: relative;
238
- }
239
-
240
- .emotion-12.emotion-12 {
241
- width: 24px;
242
- height: 24px;
243
- }
244
-
245
- .emotion-14 {
246
- margin-bottom: 40px;
247
- }
248
-
249
- .emotion-15 {
250
- width: 100%;
251
- max-width: 1920px;
252
- margin: 0 auto;
253
- }
254
-
255
- .emotion-16 {
256
- box-sizing: border-box;
257
- -webkit-background-clip: padding-box;
258
- background-clip: padding-box;
259
- display: -webkit-box;
260
- display: -webkit-flex;
261
- display: -ms-flexbox;
262
- display: flex;
263
- -webkit-box-flex-wrap: wrap;
264
- -webkit-flex-wrap: wrap;
265
- -ms-flex-wrap: wrap;
266
- flex-wrap: wrap;
267
- -webkit-flex-direction: row;
268
- -ms-flex-direction: row;
269
- flex-direction: row;
270
- }
271
-
272
- @media screen {
273
- .emotion-16 {
274
- margin: -40px 8px 0 8px;
275
- }
276
- }
277
-
278
- @media screen and (min-width: 480px) {
279
- .emotion-16 {
280
- margin: -40px 8px 0 8px;
281
- }
282
- }
283
-
284
- @media screen and (min-width: 768px) {
285
- .emotion-16 {
286
- margin: -32px 8px 0 8px;
287
- }
288
- }
289
-
290
- @media screen and (min-width: 1024px) {
291
- .emotion-16 {
292
- margin: -32px 12px 0 12px;
293
- }
294
- }
295
-
296
- @media screen and (min-width: 1440px) {
297
- .emotion-16 {
298
- margin: -0px 12px 0 12px;
299
- }
300
- }
301
-
302
- .emotion-17 {
303
- box-sizing: border-box;
304
- -webkit-background-clip: padding-box;
305
- background-clip: padding-box;
306
- -webkit-flex: 1 0 auto;
307
- -ms-flex: 1 0 auto;
308
- flex: 1 0 auto;
309
- }
310
-
311
- @media screen {
312
- .emotion-17 {
313
- padding: 0 8px;
314
- margin-top: 40px;
315
- -webkit-flex-basis: 100%;
316
- -ms-flex-preferred-size: 100%;
317
- flex-basis: 100%;
318
- max-width: 100%;
319
- }
320
- }
321
-
322
- @media screen and (min-width: 768px) {
323
- .emotion-17 {
324
- margin-top: 32px;
325
- -webkit-flex-basis: 50%;
326
- -ms-flex-preferred-size: 50%;
327
- flex-basis: 50%;
328
- max-width: 50%;
329
- }
330
- }
331
-
332
- @media screen and (min-width: 1024px) {
333
- .emotion-17 {
334
- padding: 0 12px;
335
- }
336
- }
337
-
338
- @media screen and (min-width: 1440px) {
339
- .emotion-17 {
340
- margin-top: 0;
341
- -webkit-flex-basis: 25%;
342
- -ms-flex-preferred-size: 25%;
343
- flex-basis: 25%;
344
- max-width: 25%;
345
- }
346
- }
347
-
348
- .emotion-18 {
349
- box-sizing: border-box;
350
- overflow: hidden;
351
- color: #2E2E2E;
352
- background-color: #FFFFFF;
353
- position: relative;
354
- display: -webkit-box;
355
- display: -webkit-flex;
356
- display: -ms-flexbox;
357
- display: flex;
358
- -webkit-flex-direction: column;
359
- -ms-flex-direction: column;
360
- flex-direction: column;
361
- }
362
-
363
- .emotion-19 {
364
- box-sizing: border-box;
365
- display: block;
366
- position: relative;
367
- margin-bottom: 20px;
368
- }
369
-
370
- .emotion-20 {
371
- position: relative;
372
- width: 100%;
373
- display: block;
374
- padding-top: 0;
375
- height: 0;
376
- width: 100%;
377
- border-radius: 0;
378
- background-color: #F4F4F4;
379
- }
380
-
381
- .emotion-20 svg {
382
- fill: #C0C0C0;
383
- }
384
-
385
- .emotion-21 {
386
- top: 0;
387
- left: 0;
388
- position: absolute;
389
- display: -webkit-box;
390
- display: -webkit-flex;
391
- display: -ms-flexbox;
392
- display: flex;
393
- -webkit-flex-direction: column;
394
- -ms-flex-direction: column;
395
- flex-direction: column;
396
- -webkit-box-pack: center;
397
- -ms-flex-pack: center;
398
- -webkit-justify-content: center;
399
- justify-content: center;
400
- width: 100%;
401
- height: 100%;
402
- margin: 0;
403
- }
404
-
405
- .emotion-22 {
406
- opacity: 0;
407
- display: block;
408
- border-radius: inherit;
409
- height: auto;
410
- width: 100%;
411
- top: 0;
412
- left: 0;
413
- position: absolute;
414
- }
415
-
416
- .emotion-23 {
417
- box-sizing: border-box;
418
- }
419
-
420
- .emotion-24 {
421
- box-sizing: border-box;
422
- padding: 0;
423
- }
424
-
425
- .emotion-24 a:not(.nk-card-link) {
426
- z-index: 2;
427
- position: relative;
428
- }
429
-
430
- .emotion-25 {
431
- -webkit-text-decoration: none;
432
- text-decoration: none;
433
- border: none;
434
- }
435
-
436
- .emotion-25 .nk-headline-kicker {
437
- color: #3358CC;
438
- }
439
-
440
- .emotion-25:hover:not(:disabled) .nk-headline-kicker {
441
- color: #2B4AAB;
442
- -webkit-text-decoration: underline;
443
- text-decoration: underline;
444
- }
445
-
446
- .emotion-25:active:not(:disabled) .nk-headline-kicker {
447
- color: #213A82;
448
- -webkit-text-decoration: underline;
449
- text-decoration: underline;
450
- }
451
-
452
- .emotion-25:visited:not(:disabled) .nk-headline-kicker {
453
- color: #5E44E4;
454
- }
455
-
456
- .emotion-25 .nk-headline-heading {
457
- color: #2E2E2E;
458
- }
459
-
460
- .emotion-25:hover:not(:disabled) .nk-headline-heading {
461
- color: #2B4AAB;
462
- -webkit-text-decoration: underline;
463
- text-decoration: underline;
464
- }
465
-
466
- .emotion-25:active:not(:disabled) .nk-headline-heading {
467
- color: #213A82;
468
- -webkit-text-decoration: underline;
469
- text-decoration: underline;
470
- }
471
-
472
- .emotion-25:visited:not(:disabled) .nk-headline-heading {
473
- color: #5E44E4;
474
- }
475
-
476
- .emotion-25:before {
477
- content: '';
478
- top: 0;
479
- right: 0;
480
- bottom: 0;
481
- left: 0;
482
- overflow: hidden;
483
- position: absolute;
484
- z-index: 1;
485
- }
486
-
487
- .emotion-26 {
488
- margin-bottom: 20px;
489
- }
490
-
491
- .emotion-27 {
492
- margin: 0;
493
- color: #0A0A0A;
494
- }
495
-
496
- .emotion-27 svg {
497
- fill: #0A0A0A;
498
- }
499
-
500
- @media screen and (max-width: 767px) {
501
- .emotion-27 {
502
- font-family: "Bitter",serif;
503
- font-size: 20px;
504
- line-height: 22.5px;
505
- font-weight: 500;
506
- letter-spacing: 0;
507
- padding: 0.5px 0px;
508
- }
509
-
510
- .emotion-27::before {
511
- content: '';
512
- margin-bottom: -0.2055em;
513
- display: block;
514
- }
515
-
516
- .emotion-27::after {
517
- content: '';
518
- margin-top: -0.2275em;
519
- display: block;
520
- }
521
- }
522
-
523
- @media screen and (min-width: 768px) and (max-width: 1439px) {
524
- .emotion-27 {
525
- font-family: "Bitter",serif;
526
- font-size: 22px;
527
- line-height: 24.75px;
528
- font-weight: 500;
529
- letter-spacing: 0;
530
- padding: 0.5px 0px;
531
- }
532
-
533
- .emotion-27::before {
534
- content: '';
535
- margin-bottom: -0.2055em;
536
- display: block;
537
- }
538
-
539
- .emotion-27::after {
540
- content: '';
541
- margin-top: -0.2275em;
542
- display: block;
543
- }
544
- }
545
-
546
- @media screen and (min-width: 1440px) {
547
- .emotion-27 {
548
- font-family: "Bitter",serif;
549
- font-size: 24px;
550
- line-height: 27px;
551
- font-weight: 500;
552
- letter-spacing: 0;
553
- padding: 0.5px 0px;
554
- }
555
-
556
- .emotion-27::before {
557
- content: '';
558
- margin-bottom: -0.2055em;
559
- display: block;
560
- }
561
-
562
- .emotion-27::after {
563
- content: '';
564
- margin-top: -0.2275em;
565
- display: block;
566
- }
567
- }
568
-
569
- .emotion-28 {
570
- margin-bottom: 12px;
571
- }
572
-
573
- .emotion-29 {
574
- margin: 0;
575
- color: #0A0A0A;
576
- }
577
-
578
- .emotion-29 svg {
579
- fill: #0A0A0A;
580
- }
581
-
582
- @media screen and (max-width: 767px) {
583
- .emotion-29 {
584
- font-family: "DM Sans",sans-serif;
585
- font-size: 14px;
586
- line-height: 21px;
587
- font-weight: 400;
588
- letter-spacing: 0;
589
- padding: 0.5px 0px;
590
- }
591
-
592
- .emotion-29::before {
593
- content: '';
594
- margin-bottom: -0.391em;
595
- display: block;
596
- }
597
-
598
- .emotion-29::after {
599
- content: '';
600
- margin-top: -0.409em;
601
- display: block;
602
- }
603
- }
604
-
605
- @media screen and (min-width: 768px) {
606
- .emotion-29 {
607
- font-family: "DM Sans",sans-serif;
608
- font-size: 16px;
609
- line-height: 24px;
610
- font-weight: 400;
611
- letter-spacing: 0;
612
- padding: 0.5px 0px;
613
- }
614
-
615
- .emotion-29::before {
616
- content: '';
617
- margin-bottom: -0.391em;
618
- display: block;
619
- }
620
-
621
- .emotion-29::after {
622
- content: '';
623
- margin-top: -0.409em;
624
- display: block;
625
- }
626
- }
627
-
628
- .emotion-46 {
629
- position: relative;
630
- width: 100%;
631
- display: block;
632
- padding-top: 0;
633
- height: auto;
634
- width: 100%;
635
- border-radius: 0;
636
- }
637
-
638
- .emotion-47 {
639
- opacity: 1;
640
- display: block;
641
- border-radius: inherit;
642
- height: auto;
643
- width: 100%;
644
- -webkit-animation: fadeIn 300ms;
645
- animation: fadeIn 300ms;
646
- }
647
-
648
- .emotion-68 {
649
- border-style: solid;
650
- border-color: #DEDEDE;
651
- border-width: 1px;
652
- border-width: 0px;
653
- margin: 0;
654
- border-top-width: 1px;
655
- width: 100%;
656
- background: transparent;
657
- border-color: transparent;
658
- }
659
-
660
- <div
661
- class="emotion-0"
662
- >
663
- <div
664
- class="emotion-1"
665
- data-testid="SectionTitleBar"
666
- >
667
- <div
668
- class="emotion-2"
669
- >
670
- <div
671
- class="emotion-3"
672
- >
673
- <section
674
- class="emotion-4"
675
- >
676
- <h3
677
- class="nk-headline-heading emotion-5"
678
- />
679
- </section>
680
- </div>
681
- <div
682
- class="emotion-6"
683
- >
684
- <a
685
- class="emotion-7"
686
- href="/section-one"
687
- >
688
- <span
689
- class="emotion-8"
690
- >
691
- <span
692
- class="emotion-9"
693
- >
694
- <span
695
- class="emotion-10"
696
- >
697
- Link
698
- </span>
699
- </span>
700
- <span
701
- class="emotion-9"
702
- >
703
- <svg
704
- aria-hidden="true"
705
- class="emotion-12 emotion-13"
706
- fill="currentColor"
707
- focusable="false"
708
- viewBox="0 0 24 24"
709
- xmlns="http://www.w3.org/2000/svg"
710
- >
711
- <path
712
- d="M0 0h24v24H0z"
713
- fill="none"
714
- />
715
- <path
716
- d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
717
- />
718
- </svg>
719
- </span>
720
- </span>
721
- </a>
722
- </div>
723
- </div>
724
- </div>
725
- <div
726
- class="emotion-14"
727
- >
728
- <div
729
- class="emotion-15"
730
- >
731
- <div
732
- class="emotion-16"
733
- data-testid="SECONDARY_4-Grid"
734
- >
735
- <div
736
- class="emotion-17"
737
- data-testid="titleTeaserVertical-0"
738
- >
739
- <div
740
- class="emotion-18"
741
- >
742
- <div
743
- class="emotion-19"
744
- >
745
- <picture
746
- class="emotion-20"
747
- >
748
- <div
749
- class="emotion-21"
750
- />
751
- <img
752
- alt="image alt"
753
- class="emotion-22"
754
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
755
- />
756
- </picture>
757
- </div>
758
- <div
759
- class="emotion-23"
760
- >
761
- <div
762
- class="emotion-24"
763
- >
764
- <a
765
- class="nk-card-link emotion-25"
766
- href="catagory-one/demo-1/test-headline"
767
- >
768
- <div
769
- class="emotion-26"
770
- >
771
- <h3
772
- class="emotion-27"
773
- >
774
- test headline
775
- </h3>
776
- </div>
777
- <div
778
- class="emotion-28"
779
- >
780
- <p
781
- class="emotion-29"
782
- >
783
- teaser test text
784
- </p>
785
- </div>
786
- </a>
787
- </div>
788
- </div>
789
- </div>
790
- </div>
791
- <div
792
- class="emotion-17"
793
- data-testid="titleTeaserVertical-1"
794
- >
795
- <div
796
- class="emotion-18"
797
- >
798
- <div
799
- class="emotion-19"
800
- >
801
- <picture
802
- class="emotion-20"
803
- >
804
- <div
805
- class="emotion-21"
806
- />
807
- <img
808
- alt="image alt 2"
809
- class="emotion-22"
810
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
811
- />
812
- </picture>
813
- </div>
814
- <div
815
- class="emotion-23"
816
- >
817
- <div
818
- class="emotion-24"
819
- >
820
- <a
821
- class="nk-card-link emotion-25"
822
- href="catagory-two/demo-2/test-headline-2"
823
- >
824
- <div
825
- class="emotion-26"
826
- >
827
- <h3
828
- class="emotion-27"
829
- >
830
- test headline 2
831
- </h3>
832
- </div>
833
- <div
834
- class="emotion-28"
835
- >
836
- <p
837
- class="emotion-29"
838
- >
839
- teaser test text 2
840
- </p>
841
- </div>
842
- </a>
843
- </div>
844
- </div>
845
- </div>
846
- </div>
847
- <div
848
- class="emotion-17"
849
- data-testid="titleTeaserVertical-2"
850
- >
851
- <div
852
- class="emotion-18"
853
- >
854
- <div
855
- class="emotion-19"
856
- >
857
- <picture
858
- class="emotion-46"
859
- >
860
- <img
861
- alt=""
862
- class="emotion-47"
863
- src=""
864
- />
865
- </picture>
866
- </div>
867
- <div
868
- class="emotion-23"
869
- >
870
- <div
871
- class="emotion-24"
872
- >
873
- <a
874
- class="nk-card-link emotion-25"
875
- href="catagory-three/demo-3/test-headline-3"
876
- >
877
- <div
878
- class="emotion-26"
879
- >
880
- <h3
881
- class="emotion-27"
882
- >
883
- test headline 3
884
- </h3>
885
- </div>
886
- <div
887
- class="emotion-28"
888
- >
889
- <p
890
- class="emotion-29"
891
- >
892
- teaser test text 3
893
- </p>
894
- </div>
895
- </a>
896
- </div>
897
- </div>
898
- </div>
899
- </div>
900
- <div
901
- class="emotion-17"
902
- data-testid="titleTeaserVertical-3"
903
- >
904
- <div
905
- class="emotion-18"
906
- >
907
- <div
908
- class="emotion-19"
909
- >
910
- <picture
911
- class="emotion-20"
912
- >
913
- <div
914
- class="emotion-21"
915
- />
916
- <img
917
- alt="image alt 3"
918
- class="emotion-22"
919
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
920
- />
921
- </picture>
922
- </div>
923
- <div
924
- class="emotion-23"
925
- >
926
- <div
927
- class="emotion-24"
928
- >
929
- <a
930
- class="nk-card-link emotion-25"
931
- href="catagory-four/demo-4/test-headline-4"
932
- >
933
- <div
934
- class="emotion-26"
935
- >
936
- <h3
937
- class="emotion-27"
938
- >
939
- test headline 4
940
- </h3>
941
- </div>
942
- <div
943
- class="emotion-28"
944
- >
945
- <p
946
- class="emotion-29"
947
- >
948
- teaser test text 4
949
- </p>
950
- </div>
951
- </a>
952
- </div>
953
- </div>
954
- </div>
955
- </div>
956
- </div>
957
- </div>
958
- </div>
959
- <hr
960
- aria-hidden="true"
961
- class="emotion-68"
962
- data-testid="divider"
963
- />
964
- </div>
965
- </DocumentFragment>
966
- `;
967
-
968
- exports[`SectionRow SectionRow isDarkBackground 1`] = `
969
- <DocumentFragment>
970
- .emotion-0 {
971
- background:color: #F4F4F4;
972
- }
973
-
974
- .emotion-1 {
975
- margin-bottom: 32px;
976
- background: #3358CC;
977
- }
978
-
979
- .emotion-2 {
980
- display: -webkit-box;
981
- display: -webkit-flex;
982
- display: -ms-flexbox;
983
- display: flex;
984
- height: 100%;
985
- -webkit-align-items: center;
986
- -webkit-box-align: center;
987
- -ms-flex-align: center;
988
- align-items: center;
989
- -webkit-flex-direction: row;
990
- -ms-flex-direction: row;
991
- flex-direction: row;
992
- -webkit-box-pack: justify;
993
- -webkit-justify-content: space-between;
994
- justify-content: space-between;
995
- background-color: transparent;
996
- }
997
-
998
- @media screen and (max-width: 1023px) {
999
- .emotion-2 {
1000
- padding: 12px 16px;
1001
- }
1002
- }
1003
-
1004
- @media screen and (min-width: 1024px) {
1005
- .emotion-2 {
1006
- padding: 16px 24px;
1007
- }
1008
- }
1009
-
1010
- .emotion-3 {
1011
- margin-right: 16px;
1012
- -webkit-box-flex: 1;
1013
- -webkit-flex-grow: 1;
1014
- -ms-flex-positive: 1;
1015
- flex-grow: 1;
1016
- }
1017
-
1018
- @media screen and (max-width: 767px) {
1019
- .emotion-4 {
1020
- font-family: "Bitter",serif;
1021
- font-size: 28px;
1022
- line-height: 31.5px;
1023
- font-weight: 500;
1024
- letter-spacing: 0;
1025
- padding: 0.5px 0px;
1026
- }
1027
-
1028
- .emotion-4::before {
1029
- content: '';
1030
- margin-bottom: -0.2055em;
1031
- display: block;
1032
- }
1033
-
1034
- .emotion-4::after {
1035
- content: '';
1036
- margin-top: -0.2275em;
1037
- display: block;
1038
- }
1039
- }
1040
-
1041
- @media screen and (min-width: 768px) and (max-width: 1439px) {
1042
- .emotion-4 {
1043
- font-family: "Bitter",serif;
1044
- font-size: 32px;
1045
- line-height: 36px;
1046
- font-weight: 500;
1047
- letter-spacing: 0;
1048
- padding: 0.5px 0px;
1049
- }
1050
-
1051
- .emotion-4::before {
1052
- content: '';
1053
- margin-bottom: -0.2055em;
1054
- display: block;
1055
- }
1056
-
1057
- .emotion-4::after {
1058
- content: '';
1059
- margin-top: -0.2275em;
1060
- display: block;
1061
- }
1062
- }
1063
-
1064
- @media screen and (min-width: 1440px) {
1065
- .emotion-4 {
1066
- font-family: "Bitter",serif;
1067
- font-size: 36px;
1068
- line-height: 40.5px;
1069
- font-weight: 500;
1070
- letter-spacing: 0;
1071
- padding: 0.5px 0px;
1072
- }
1073
-
1074
- .emotion-4::before {
1075
- content: '';
1076
- margin-bottom: -0.2055em;
1077
- display: block;
1078
- }
1079
-
1080
- .emotion-4::after {
1081
- content: '';
1082
- margin-top: -0.2275em;
1083
- display: block;
1084
- }
1085
- }
1086
-
1087
- .emotion-5 {
1088
- display: inline;
1089
- font: inherit;
1090
- margin: 0;
1091
- color: #FFFFFF;
1092
- }
1093
-
1094
- .emotion-5 svg {
1095
- fill: #FFFFFF;
1096
- }
1097
-
1098
- @media screen {
1099
- .emotion-6 {
1100
- display: none;
1101
- }
1102
- }
1103
-
1104
- @media screen and (min-width: 480px) {
1105
- .emotion-6 {
1106
- display: block;
1107
- }
1108
- }
1109
-
1110
- @media screen and (min-width: 768px) {
1111
- .emotion-6 {
1112
- display: block;
1113
- }
1114
- }
1115
-
1116
- @media screen and (min-width: 1024px) {
1117
- .emotion-6 {
1118
- display: block;
1119
- }
1120
- }
1121
-
1122
- @media screen and (min-width: 1440px) {
1123
- .emotion-6 {
1124
- display: block;
1125
- }
1126
- }
1127
-
1128
- .emotion-7 {
1129
- display: inline-block;
1130
- transition-property: color;
1131
- transition-duration: 200ms;
1132
- transition-timing-function: cubic-bezier(0, 0, .5, 1);
1133
- color: #FFFFFF;
1134
- }
1135
-
1136
- .emotion-7 svg {
1137
- fill: #FFFFFF;
1138
- }
1139
-
1140
- .emotion-8 {
1141
- display: -webkit-box;
1142
- display: -webkit-flex;
1143
- display: -ms-flexbox;
1144
- display: flex;
1145
- height: 100%;
1146
- -webkit-align-items: center;
1147
- -webkit-box-align: center;
1148
- -ms-flex-align: center;
1149
- align-items: center;
1150
- -webkit-flex-direction: row;
1151
- -ms-flex-direction: row;
1152
- flex-direction: row;
1153
- -webkit-box-pack: start;
1154
- -ms-flex-pack: start;
1155
- -webkit-justify-content: flex-start;
1156
- justify-content: flex-start;
1157
- margin-left: calc(-8px/2);
1158
- margin-right: calc(-8px/2);
1159
- }
1160
-
1161
- .emotion-9 {
1162
- display: -webkit-inline-box;
1163
- display: -webkit-inline-flex;
1164
- display: -ms-inline-flexbox;
1165
- display: inline-flex;
1166
- margin-left: calc(8px/2);
1167
- margin-right: calc(8px/2);
1168
- }
1169
-
1170
- .emotion-10 {
1171
- margin: 0;
1172
- font-family: "Poppins",sans-serif;
1173
- font-size: 14px;
1174
- line-height: 21px;
1175
- font-weight: 500;
1176
- letter-spacing: 0;
1177
- padding: 0.5px 0px;
1178
- display: inline-block;
1179
- display: block;
1180
- }
1181
-
1182
- .emotion-10::before {
1183
- content: '';
1184
- margin-bottom: -0.403em;
1185
- display: block;
1186
- }
1187
-
1188
- .emotion-10::after {
1189
- content: '';
1190
- margin-top: -0.4em;
1191
- display: block;
1192
- }
1193
-
1194
- .emotion-12 {
1195
- display: inline-block;
1196
- vertical-align: middle;
1197
- overflow: hidden;
1198
- fill: #2E2E2E;
1199
- vertical-align: unset;
1200
- display: inline-block;
1201
- top: 1px;
1202
- position: relative;
1203
- }
1204
-
1205
- .emotion-12.emotion-12 {
1206
- width: 24px;
1207
- height: 24px;
1208
- }
1209
-
1210
- .emotion-14 {
1211
- margin-bottom: 40px;
1212
- }
1213
-
1214
- .emotion-15 {
1215
- width: 100%;
1216
- max-width: 1920px;
1217
- margin: 0 auto;
1218
- }
1219
-
1220
- .emotion-16 {
1221
- box-sizing: border-box;
1222
- -webkit-background-clip: padding-box;
1223
- background-clip: padding-box;
1224
- display: -webkit-box;
1225
- display: -webkit-flex;
1226
- display: -ms-flexbox;
1227
- display: flex;
1228
- -webkit-box-flex-wrap: wrap;
1229
- -webkit-flex-wrap: wrap;
1230
- -ms-flex-wrap: wrap;
1231
- flex-wrap: wrap;
1232
- -webkit-flex-direction: row;
1233
- -ms-flex-direction: row;
1234
- flex-direction: row;
1235
- }
1236
-
1237
- @media screen {
1238
- .emotion-16 {
1239
- margin: -40px 8px 0 8px;
1240
- }
1241
- }
1242
-
1243
- @media screen and (min-width: 480px) {
1244
- .emotion-16 {
1245
- margin: -40px 8px 0 8px;
1246
- }
1247
- }
1248
-
1249
- @media screen and (min-width: 768px) {
1250
- .emotion-16 {
1251
- margin: -32px 8px 0 8px;
1252
- }
1253
- }
1254
-
1255
- @media screen and (min-width: 1024px) {
1256
- .emotion-16 {
1257
- margin: -32px 12px 0 12px;
1258
- }
1259
- }
1260
-
1261
- @media screen and (min-width: 1440px) {
1262
- .emotion-16 {
1263
- margin: -0px 12px 0 12px;
1264
- }
1265
- }
1266
-
1267
- .emotion-17 {
1268
- box-sizing: border-box;
1269
- -webkit-background-clip: padding-box;
1270
- background-clip: padding-box;
1271
- -webkit-flex: 1 0 auto;
1272
- -ms-flex: 1 0 auto;
1273
- flex: 1 0 auto;
1274
- }
1275
-
1276
- @media screen {
1277
- .emotion-17 {
1278
- padding: 0 8px;
1279
- margin-top: 40px;
1280
- -webkit-flex-basis: 100%;
1281
- -ms-flex-preferred-size: 100%;
1282
- flex-basis: 100%;
1283
- max-width: 100%;
1284
- }
1285
- }
1286
-
1287
- @media screen and (min-width: 768px) {
1288
- .emotion-17 {
1289
- margin-top: 32px;
1290
- -webkit-flex-basis: 50%;
1291
- -ms-flex-preferred-size: 50%;
1292
- flex-basis: 50%;
1293
- max-width: 50%;
1294
- }
1295
- }
1296
-
1297
- @media screen and (min-width: 1024px) {
1298
- .emotion-17 {
1299
- padding: 0 12px;
1300
- }
1301
- }
1302
-
1303
- @media screen and (min-width: 1440px) {
1304
- .emotion-17 {
1305
- margin-top: 0;
1306
- -webkit-flex-basis: 25%;
1307
- -ms-flex-preferred-size: 25%;
1308
- flex-basis: 25%;
1309
- max-width: 25%;
1310
- }
1311
- }
1312
-
1313
- .emotion-18 {
1314
- box-sizing: border-box;
1315
- overflow: hidden;
1316
- color: #2E2E2E;
1317
- background-color: #FFFFFF;
1318
- position: relative;
1319
- display: -webkit-box;
1320
- display: -webkit-flex;
1321
- display: -ms-flexbox;
1322
- display: flex;
1323
- -webkit-flex-direction: column;
1324
- -ms-flex-direction: column;
1325
- flex-direction: column;
1326
- }
1327
-
1328
- .emotion-19 {
1329
- box-sizing: border-box;
1330
- display: block;
1331
- position: relative;
1332
- margin-bottom: 20px;
1333
- }
1334
-
1335
- .emotion-20 {
1336
- position: relative;
1337
- width: 100%;
1338
- display: block;
1339
- padding-top: 0;
1340
- height: 0;
1341
- width: 100%;
1342
- border-radius: 0;
1343
- background-color: #F4F4F4;
1344
- }
1345
-
1346
- .emotion-20 svg {
1347
- fill: #C0C0C0;
1348
- }
1349
-
1350
- .emotion-21 {
1351
- top: 0;
1352
- left: 0;
1353
- position: absolute;
1354
- display: -webkit-box;
1355
- display: -webkit-flex;
1356
- display: -ms-flexbox;
1357
- display: flex;
1358
- -webkit-flex-direction: column;
1359
- -ms-flex-direction: column;
1360
- flex-direction: column;
1361
- -webkit-box-pack: center;
1362
- -ms-flex-pack: center;
1363
- -webkit-justify-content: center;
1364
- justify-content: center;
1365
- width: 100%;
1366
- height: 100%;
1367
- margin: 0;
1368
- }
1369
-
1370
- .emotion-22 {
1371
- opacity: 0;
1372
- display: block;
1373
- border-radius: inherit;
1374
- height: auto;
1375
- width: 100%;
1376
- top: 0;
1377
- left: 0;
1378
- position: absolute;
1379
- }
1380
-
1381
- .emotion-23 {
1382
- box-sizing: border-box;
1383
- }
1384
-
1385
- .emotion-24 {
1386
- box-sizing: border-box;
1387
- padding: 0;
1388
- }
1389
-
1390
- .emotion-24 a:not(.nk-card-link) {
1391
- z-index: 2;
1392
- position: relative;
1393
- }
1394
-
1395
- .emotion-25 {
1396
- -webkit-text-decoration: none;
1397
- text-decoration: none;
1398
- border: none;
1399
- }
1400
-
1401
- .emotion-25 .nk-headline-kicker {
1402
- color: #3358CC;
1403
- }
1404
-
1405
- .emotion-25:hover:not(:disabled) .nk-headline-kicker {
1406
- color: #2B4AAB;
1407
- -webkit-text-decoration: underline;
1408
- text-decoration: underline;
1409
- }
1410
-
1411
- .emotion-25:active:not(:disabled) .nk-headline-kicker {
1412
- color: #213A82;
1413
- -webkit-text-decoration: underline;
1414
- text-decoration: underline;
1415
- }
1416
-
1417
- .emotion-25:visited:not(:disabled) .nk-headline-kicker {
1418
- color: #5E44E4;
1419
- }
1420
-
1421
- .emotion-25 .nk-headline-heading {
1422
- color: #2E2E2E;
1423
- }
1424
-
1425
- .emotion-25:hover:not(:disabled) .nk-headline-heading {
1426
- color: #2B4AAB;
1427
- -webkit-text-decoration: underline;
1428
- text-decoration: underline;
1429
- }
1430
-
1431
- .emotion-25:active:not(:disabled) .nk-headline-heading {
1432
- color: #213A82;
1433
- -webkit-text-decoration: underline;
1434
- text-decoration: underline;
1435
- }
1436
-
1437
- .emotion-25:visited:not(:disabled) .nk-headline-heading {
1438
- color: #5E44E4;
1439
- }
1440
-
1441
- .emotion-25:before {
1442
- content: '';
1443
- top: 0;
1444
- right: 0;
1445
- bottom: 0;
1446
- left: 0;
1447
- overflow: hidden;
1448
- position: absolute;
1449
- z-index: 1;
1450
- }
1451
-
1452
- .emotion-26 {
1453
- margin-bottom: 20px;
1454
- }
1455
-
1456
- .emotion-27 {
1457
- margin: 0;
1458
- color: #0A0A0A;
1459
- }
1460
-
1461
- .emotion-27 svg {
1462
- fill: #0A0A0A;
1463
- }
1464
-
1465
- @media screen and (max-width: 767px) {
1466
- .emotion-27 {
1467
- font-family: "Bitter",serif;
1468
- font-size: 20px;
1469
- line-height: 22.5px;
1470
- font-weight: 500;
1471
- letter-spacing: 0;
1472
- padding: 0.5px 0px;
1473
- }
1474
-
1475
- .emotion-27::before {
1476
- content: '';
1477
- margin-bottom: -0.2055em;
1478
- display: block;
1479
- }
1480
-
1481
- .emotion-27::after {
1482
- content: '';
1483
- margin-top: -0.2275em;
1484
- display: block;
1485
- }
1486
- }
1487
-
1488
- @media screen and (min-width: 768px) and (max-width: 1439px) {
1489
- .emotion-27 {
1490
- font-family: "Bitter",serif;
1491
- font-size: 22px;
1492
- line-height: 24.75px;
1493
- font-weight: 500;
1494
- letter-spacing: 0;
1495
- padding: 0.5px 0px;
1496
- }
1497
-
1498
- .emotion-27::before {
1499
- content: '';
1500
- margin-bottom: -0.2055em;
1501
- display: block;
1502
- }
1503
-
1504
- .emotion-27::after {
1505
- content: '';
1506
- margin-top: -0.2275em;
1507
- display: block;
1508
- }
1509
- }
1510
-
1511
- @media screen and (min-width: 1440px) {
1512
- .emotion-27 {
1513
- font-family: "Bitter",serif;
1514
- font-size: 24px;
1515
- line-height: 27px;
1516
- font-weight: 500;
1517
- letter-spacing: 0;
1518
- padding: 0.5px 0px;
1519
- }
1520
-
1521
- .emotion-27::before {
1522
- content: '';
1523
- margin-bottom: -0.2055em;
1524
- display: block;
1525
- }
1526
-
1527
- .emotion-27::after {
1528
- content: '';
1529
- margin-top: -0.2275em;
1530
- display: block;
1531
- }
1532
- }
1533
-
1534
- .emotion-28 {
1535
- margin-bottom: 12px;
1536
- }
1537
-
1538
- .emotion-29 {
1539
- margin: 0;
1540
- color: #0A0A0A;
1541
- }
1542
-
1543
- .emotion-29 svg {
1544
- fill: #0A0A0A;
1545
- }
1546
-
1547
- @media screen and (max-width: 767px) {
1548
- .emotion-29 {
1549
- font-family: "DM Sans",sans-serif;
1550
- font-size: 14px;
1551
- line-height: 21px;
1552
- font-weight: 400;
1553
- letter-spacing: 0;
1554
- padding: 0.5px 0px;
1555
- }
1556
-
1557
- .emotion-29::before {
1558
- content: '';
1559
- margin-bottom: -0.391em;
1560
- display: block;
1561
- }
1562
-
1563
- .emotion-29::after {
1564
- content: '';
1565
- margin-top: -0.409em;
1566
- display: block;
1567
- }
1568
- }
1569
-
1570
- @media screen and (min-width: 768px) {
1571
- .emotion-29 {
1572
- font-family: "DM Sans",sans-serif;
1573
- font-size: 16px;
1574
- line-height: 24px;
1575
- font-weight: 400;
1576
- letter-spacing: 0;
1577
- padding: 0.5px 0px;
1578
- }
1579
-
1580
- .emotion-29::before {
1581
- content: '';
1582
- margin-bottom: -0.391em;
1583
- display: block;
1584
- }
1585
-
1586
- .emotion-29::after {
1587
- content: '';
1588
- margin-top: -0.409em;
1589
- display: block;
1590
- }
1591
- }
1592
-
1593
- .emotion-46 {
1594
- position: relative;
1595
- width: 100%;
1596
- display: block;
1597
- padding-top: 0;
1598
- height: auto;
1599
- width: 100%;
1600
- border-radius: 0;
1601
- }
1602
-
1603
- .emotion-47 {
1604
- opacity: 1;
1605
- display: block;
1606
- border-radius: inherit;
1607
- height: auto;
1608
- width: 100%;
1609
- -webkit-animation: fadeIn 300ms;
1610
- animation: fadeIn 300ms;
1611
- }
1612
-
1613
- .emotion-68 {
1614
- border-style: solid;
1615
- border-color: #DEDEDE;
1616
- border-width: 1px;
1617
- border-width: 0px;
1618
- margin: 0;
1619
- border-top-width: 1px;
1620
- width: 100%;
1621
- background: transparent;
1622
- border-color: transparent;
1623
- }
1624
-
1625
- <div
1626
- class="emotion-0"
1627
- >
1628
- <div
1629
- class="emotion-1"
1630
- data-testid="SectionTitleBar"
1631
- >
1632
- <div
1633
- class="emotion-2"
1634
- >
1635
- <div
1636
- class="emotion-3"
1637
- >
1638
- <section
1639
- class="emotion-4"
1640
- >
1641
- <h3
1642
- class="nk-headline-heading emotion-5"
1643
- />
1644
- </section>
1645
- </div>
1646
- <div
1647
- class="emotion-6"
1648
- >
1649
- <a
1650
- class="emotion-7"
1651
- href="/section-one"
1652
- >
1653
- <span
1654
- class="emotion-8"
1655
- >
1656
- <span
1657
- class="emotion-9"
1658
- >
1659
- <span
1660
- class="emotion-10"
1661
- >
1662
- Link
1663
- </span>
1664
- </span>
1665
- <span
1666
- class="emotion-9"
1667
- >
1668
- <svg
1669
- aria-hidden="true"
1670
- class="emotion-12 emotion-13"
1671
- fill="currentColor"
1672
- focusable="false"
1673
- viewBox="0 0 24 24"
1674
- xmlns="http://www.w3.org/2000/svg"
1675
- >
1676
- <path
1677
- d="M0 0h24v24H0z"
1678
- fill="none"
1679
- />
1680
- <path
1681
- d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
1682
- />
1683
- </svg>
1684
- </span>
1685
- </span>
1686
- </a>
1687
- </div>
1688
- </div>
1689
- </div>
1690
- <div
1691
- class="emotion-14"
1692
- >
1693
- <div
1694
- class="emotion-15"
1695
- >
1696
- <div
1697
- class="emotion-16"
1698
- data-testid="SECONDARY_4-Grid"
1699
- >
1700
- <div
1701
- class="emotion-17"
1702
- data-testid="titleTeaserVertical-0"
1703
- >
1704
- <div
1705
- class="emotion-18"
1706
- >
1707
- <div
1708
- class="emotion-19"
1709
- >
1710
- <picture
1711
- class="emotion-20"
1712
- >
1713
- <div
1714
- class="emotion-21"
1715
- />
1716
- <img
1717
- alt="image alt"
1718
- class="emotion-22"
1719
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
1720
- />
1721
- </picture>
1722
- </div>
1723
- <div
1724
- class="emotion-23"
1725
- >
1726
- <div
1727
- class="emotion-24"
1728
- >
1729
- <a
1730
- class="nk-card-link emotion-25"
1731
- href="catagory-one/demo-1/test-headline"
1732
- >
1733
- <div
1734
- class="emotion-26"
1735
- >
1736
- <h3
1737
- class="emotion-27"
1738
- >
1739
- test headline
1740
- </h3>
1741
- </div>
1742
- <div
1743
- class="emotion-28"
1744
- >
1745
- <p
1746
- class="emotion-29"
1747
- >
1748
- teaser test text
1749
- </p>
1750
- </div>
1751
- </a>
1752
- </div>
1753
- </div>
1754
- </div>
1755
- </div>
1756
- <div
1757
- class="emotion-17"
1758
- data-testid="titleTeaserVertical-1"
1759
- >
1760
- <div
1761
- class="emotion-18"
1762
- >
1763
- <div
1764
- class="emotion-19"
1765
- >
1766
- <picture
1767
- class="emotion-20"
1768
- >
1769
- <div
1770
- class="emotion-21"
1771
- />
1772
- <img
1773
- alt="image alt 2"
1774
- class="emotion-22"
1775
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
1776
- />
1777
- </picture>
1778
- </div>
1779
- <div
1780
- class="emotion-23"
1781
- >
1782
- <div
1783
- class="emotion-24"
1784
- >
1785
- <a
1786
- class="nk-card-link emotion-25"
1787
- href="catagory-two/demo-2/test-headline-2"
1788
- >
1789
- <div
1790
- class="emotion-26"
1791
- >
1792
- <h3
1793
- class="emotion-27"
1794
- >
1795
- test headline 2
1796
- </h3>
1797
- </div>
1798
- <div
1799
- class="emotion-28"
1800
- >
1801
- <p
1802
- class="emotion-29"
1803
- >
1804
- teaser test text 2
1805
- </p>
1806
- </div>
1807
- </a>
1808
- </div>
1809
- </div>
1810
- </div>
1811
- </div>
1812
- <div
1813
- class="emotion-17"
1814
- data-testid="titleTeaserVertical-2"
1815
- >
1816
- <div
1817
- class="emotion-18"
1818
- >
1819
- <div
1820
- class="emotion-19"
1821
- >
1822
- <picture
1823
- class="emotion-46"
1824
- >
1825
- <img
1826
- alt=""
1827
- class="emotion-47"
1828
- src=""
1829
- />
1830
- </picture>
1831
- </div>
1832
- <div
1833
- class="emotion-23"
1834
- >
1835
- <div
1836
- class="emotion-24"
1837
- >
1838
- <a
1839
- class="nk-card-link emotion-25"
1840
- href="catagory-three/demo-3/test-headline-3"
1841
- >
1842
- <div
1843
- class="emotion-26"
1844
- >
1845
- <h3
1846
- class="emotion-27"
1847
- >
1848
- test headline 3
1849
- </h3>
1850
- </div>
1851
- <div
1852
- class="emotion-28"
1853
- >
1854
- <p
1855
- class="emotion-29"
1856
- >
1857
- teaser test text 3
1858
- </p>
1859
- </div>
1860
- </a>
1861
- </div>
1862
- </div>
1863
- </div>
1864
- </div>
1865
- <div
1866
- class="emotion-17"
1867
- data-testid="titleTeaserVertical-3"
1868
- >
1869
- <div
1870
- class="emotion-18"
1871
- >
1872
- <div
1873
- class="emotion-19"
1874
- >
1875
- <picture
1876
- class="emotion-20"
1877
- >
1878
- <div
1879
- class="emotion-21"
1880
- />
1881
- <img
1882
- alt="image alt 3"
1883
- class="emotion-22"
1884
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
1885
- />
1886
- </picture>
1887
- </div>
1888
- <div
1889
- class="emotion-23"
1890
- >
1891
- <div
1892
- class="emotion-24"
1893
- >
1894
- <a
1895
- class="nk-card-link emotion-25"
1896
- href="catagory-four/demo-4/test-headline-4"
1897
- >
1898
- <div
1899
- class="emotion-26"
1900
- >
1901
- <h3
1902
- class="emotion-27"
1903
- >
1904
- test headline 4
1905
- </h3>
1906
- </div>
1907
- <div
1908
- class="emotion-28"
1909
- >
1910
- <p
1911
- class="emotion-29"
1912
- >
1913
- teaser test text 4
1914
- </p>
1915
- </div>
1916
- </a>
1917
- </div>
1918
- </div>
1919
- </div>
1920
- </div>
1921
- </div>
1922
- </div>
1923
- </div>
1924
- <hr
1925
- aria-hidden="true"
1926
- class="emotion-68"
1927
- data-testid="divider"
1928
- />
1929
- </div>
1930
- </DocumentFragment>
1931
- `;
1932
-
1933
- exports[`SectionRow SectionRow with title 1`] = `
1934
- <DocumentFragment>
1935
- .emotion-0 {
1936
- background:color: transparent;
1937
- }
1938
-
1939
- .emotion-1 {
1940
- margin-bottom: 32px;
1941
- background: #3358CC;
1942
- }
1943
-
1944
- .emotion-2 {
1945
- display: -webkit-box;
1946
- display: -webkit-flex;
1947
- display: -ms-flexbox;
1948
- display: flex;
1949
- height: 100%;
1950
- -webkit-align-items: center;
1951
- -webkit-box-align: center;
1952
- -ms-flex-align: center;
1953
- align-items: center;
1954
- -webkit-flex-direction: row;
1955
- -ms-flex-direction: row;
1956
- flex-direction: row;
1957
- -webkit-box-pack: justify;
1958
- -webkit-justify-content: space-between;
1959
- justify-content: space-between;
1960
- background-color: transparent;
1961
- }
1962
-
1963
- @media screen and (max-width: 1023px) {
1964
- .emotion-2 {
1965
- padding: 12px 16px;
1966
- }
1967
- }
1968
-
1969
- @media screen and (min-width: 1024px) {
1970
- .emotion-2 {
1971
- padding: 16px 24px;
1972
- }
1973
- }
1974
-
1975
- .emotion-3 {
1976
- margin-right: 16px;
1977
- -webkit-box-flex: 1;
1978
- -webkit-flex-grow: 1;
1979
- -ms-flex-positive: 1;
1980
- flex-grow: 1;
1981
- }
1982
-
1983
- @media screen and (max-width: 767px) {
1984
- .emotion-4 {
1985
- font-family: "Bitter",serif;
1986
- font-size: 28px;
1987
- line-height: 31.5px;
1988
- font-weight: 500;
1989
- letter-spacing: 0;
1990
- padding: 0.5px 0px;
1991
- }
1992
-
1993
- .emotion-4::before {
1994
- content: '';
1995
- margin-bottom: -0.2055em;
1996
- display: block;
1997
- }
1998
-
1999
- .emotion-4::after {
2000
- content: '';
2001
- margin-top: -0.2275em;
2002
- display: block;
2003
- }
2004
- }
2005
-
2006
- @media screen and (min-width: 768px) and (max-width: 1439px) {
2007
- .emotion-4 {
2008
- font-family: "Bitter",serif;
2009
- font-size: 32px;
2010
- line-height: 36px;
2011
- font-weight: 500;
2012
- letter-spacing: 0;
2013
- padding: 0.5px 0px;
2014
- }
2015
-
2016
- .emotion-4::before {
2017
- content: '';
2018
- margin-bottom: -0.2055em;
2019
- display: block;
2020
- }
2021
-
2022
- .emotion-4::after {
2023
- content: '';
2024
- margin-top: -0.2275em;
2025
- display: block;
2026
- }
2027
- }
2028
-
2029
- @media screen and (min-width: 1440px) {
2030
- .emotion-4 {
2031
- font-family: "Bitter",serif;
2032
- font-size: 36px;
2033
- line-height: 40.5px;
2034
- font-weight: 500;
2035
- letter-spacing: 0;
2036
- padding: 0.5px 0px;
2037
- }
2038
-
2039
- .emotion-4::before {
2040
- content: '';
2041
- margin-bottom: -0.2055em;
2042
- display: block;
2043
- }
2044
-
2045
- .emotion-4::after {
2046
- content: '';
2047
- margin-top: -0.2275em;
2048
- display: block;
2049
- }
2050
- }
2051
-
2052
- .emotion-5 {
2053
- display: inline;
2054
- font: inherit;
2055
- margin: 0;
2056
- color: #FFFFFF;
2057
- }
2058
-
2059
- .emotion-5 svg {
2060
- fill: #FFFFFF;
2061
- }
2062
-
2063
- @media screen {
2064
- .emotion-6 {
2065
- display: none;
2066
- }
2067
- }
2068
-
2069
- @media screen and (min-width: 480px) {
2070
- .emotion-6 {
2071
- display: block;
2072
- }
2073
- }
2074
-
2075
- @media screen and (min-width: 768px) {
2076
- .emotion-6 {
2077
- display: block;
2078
- }
2079
- }
2080
-
2081
- @media screen and (min-width: 1024px) {
2082
- .emotion-6 {
2083
- display: block;
2084
- }
2085
- }
2086
-
2087
- @media screen and (min-width: 1440px) {
2088
- .emotion-6 {
2089
- display: block;
2090
- }
2091
- }
2092
-
2093
- .emotion-7 {
2094
- display: inline-block;
2095
- transition-property: color;
2096
- transition-duration: 200ms;
2097
- transition-timing-function: cubic-bezier(0, 0, .5, 1);
2098
- color: #FFFFFF;
2099
- }
2100
-
2101
- .emotion-7 svg {
2102
- fill: #FFFFFF;
2103
- }
2104
-
2105
- .emotion-8 {
2106
- display: -webkit-box;
2107
- display: -webkit-flex;
2108
- display: -ms-flexbox;
2109
- display: flex;
2110
- height: 100%;
2111
- -webkit-align-items: center;
2112
- -webkit-box-align: center;
2113
- -ms-flex-align: center;
2114
- align-items: center;
2115
- -webkit-flex-direction: row;
2116
- -ms-flex-direction: row;
2117
- flex-direction: row;
2118
- -webkit-box-pack: start;
2119
- -ms-flex-pack: start;
2120
- -webkit-justify-content: flex-start;
2121
- justify-content: flex-start;
2122
- margin-left: calc(-8px/2);
2123
- margin-right: calc(-8px/2);
2124
- }
2125
-
2126
- .emotion-9 {
2127
- display: -webkit-inline-box;
2128
- display: -webkit-inline-flex;
2129
- display: -ms-inline-flexbox;
2130
- display: inline-flex;
2131
- margin-left: calc(8px/2);
2132
- margin-right: calc(8px/2);
2133
- }
2134
-
2135
- .emotion-10 {
2136
- margin: 0;
2137
- font-family: "Poppins",sans-serif;
2138
- font-size: 14px;
2139
- line-height: 21px;
2140
- font-weight: 500;
2141
- letter-spacing: 0;
2142
- padding: 0.5px 0px;
2143
- display: inline-block;
2144
- display: block;
2145
- }
2146
-
2147
- .emotion-10::before {
2148
- content: '';
2149
- margin-bottom: -0.403em;
2150
- display: block;
2151
- }
2152
-
2153
- .emotion-10::after {
2154
- content: '';
2155
- margin-top: -0.4em;
2156
- display: block;
2157
- }
2158
-
2159
- .emotion-12 {
2160
- display: inline-block;
2161
- vertical-align: middle;
2162
- overflow: hidden;
2163
- fill: #2E2E2E;
2164
- vertical-align: unset;
2165
- display: inline-block;
2166
- top: 1px;
2167
- position: relative;
2168
- }
2169
-
2170
- .emotion-12.emotion-12 {
2171
- width: 24px;
2172
- height: 24px;
2173
- }
2174
-
2175
- .emotion-14 {
2176
- margin-bottom: 40px;
2177
- }
2178
-
2179
- .emotion-15 {
2180
- width: 100%;
2181
- max-width: 1920px;
2182
- margin: 0 auto;
2183
- }
2184
-
2185
- .emotion-16 {
2186
- box-sizing: border-box;
2187
- -webkit-background-clip: padding-box;
2188
- background-clip: padding-box;
2189
- display: -webkit-box;
2190
- display: -webkit-flex;
2191
- display: -ms-flexbox;
2192
- display: flex;
2193
- -webkit-box-flex-wrap: wrap;
2194
- -webkit-flex-wrap: wrap;
2195
- -ms-flex-wrap: wrap;
2196
- flex-wrap: wrap;
2197
- -webkit-flex-direction: row;
2198
- -ms-flex-direction: row;
2199
- flex-direction: row;
2200
- }
2201
-
2202
- @media screen {
2203
- .emotion-16 {
2204
- margin: -40px 8px 0 8px;
2205
- }
2206
- }
2207
-
2208
- @media screen and (min-width: 480px) {
2209
- .emotion-16 {
2210
- margin: -40px 8px 0 8px;
2211
- }
2212
- }
2213
-
2214
- @media screen and (min-width: 768px) {
2215
- .emotion-16 {
2216
- margin: -32px 8px 0 8px;
2217
- }
2218
- }
2219
-
2220
- @media screen and (min-width: 1024px) {
2221
- .emotion-16 {
2222
- margin: -32px 12px 0 12px;
2223
- }
2224
- }
2225
-
2226
- @media screen and (min-width: 1440px) {
2227
- .emotion-16 {
2228
- margin: -0px 12px 0 12px;
2229
- }
2230
- }
2231
-
2232
- .emotion-17 {
2233
- box-sizing: border-box;
2234
- -webkit-background-clip: padding-box;
2235
- background-clip: padding-box;
2236
- -webkit-flex: 1 0 auto;
2237
- -ms-flex: 1 0 auto;
2238
- flex: 1 0 auto;
2239
- }
2240
-
2241
- @media screen {
2242
- .emotion-17 {
2243
- padding: 0 8px;
2244
- margin-top: 40px;
2245
- -webkit-flex-basis: 100%;
2246
- -ms-flex-preferred-size: 100%;
2247
- flex-basis: 100%;
2248
- max-width: 100%;
2249
- }
2250
- }
2251
-
2252
- @media screen and (min-width: 768px) {
2253
- .emotion-17 {
2254
- margin-top: 32px;
2255
- -webkit-flex-basis: 50%;
2256
- -ms-flex-preferred-size: 50%;
2257
- flex-basis: 50%;
2258
- max-width: 50%;
2259
- }
2260
- }
2261
-
2262
- @media screen and (min-width: 1024px) {
2263
- .emotion-17 {
2264
- padding: 0 12px;
2265
- }
2266
- }
2267
-
2268
- @media screen and (min-width: 1440px) {
2269
- .emotion-17 {
2270
- margin-top: 0;
2271
- -webkit-flex-basis: 25%;
2272
- -ms-flex-preferred-size: 25%;
2273
- flex-basis: 25%;
2274
- max-width: 25%;
2275
- }
2276
- }
2277
-
2278
- .emotion-18 {
2279
- box-sizing: border-box;
2280
- overflow: hidden;
2281
- color: #2E2E2E;
2282
- background-color: #FFFFFF;
2283
- position: relative;
2284
- display: -webkit-box;
2285
- display: -webkit-flex;
2286
- display: -ms-flexbox;
2287
- display: flex;
2288
- -webkit-flex-direction: column;
2289
- -ms-flex-direction: column;
2290
- flex-direction: column;
2291
- }
2292
-
2293
- .emotion-19 {
2294
- box-sizing: border-box;
2295
- display: block;
2296
- position: relative;
2297
- margin-bottom: 20px;
2298
- }
2299
-
2300
- .emotion-20 {
2301
- position: relative;
2302
- width: 100%;
2303
- display: block;
2304
- padding-top: 0;
2305
- height: 0;
2306
- width: 100%;
2307
- border-radius: 0;
2308
- background-color: #F4F4F4;
2309
- }
2310
-
2311
- .emotion-20 svg {
2312
- fill: #C0C0C0;
2313
- }
2314
-
2315
- .emotion-21 {
2316
- top: 0;
2317
- left: 0;
2318
- position: absolute;
2319
- display: -webkit-box;
2320
- display: -webkit-flex;
2321
- display: -ms-flexbox;
2322
- display: flex;
2323
- -webkit-flex-direction: column;
2324
- -ms-flex-direction: column;
2325
- flex-direction: column;
2326
- -webkit-box-pack: center;
2327
- -ms-flex-pack: center;
2328
- -webkit-justify-content: center;
2329
- justify-content: center;
2330
- width: 100%;
2331
- height: 100%;
2332
- margin: 0;
2333
- }
2334
-
2335
- .emotion-22 {
2336
- opacity: 0;
2337
- display: block;
2338
- border-radius: inherit;
2339
- height: auto;
2340
- width: 100%;
2341
- top: 0;
2342
- left: 0;
2343
- position: absolute;
2344
- }
2345
-
2346
- .emotion-23 {
2347
- box-sizing: border-box;
2348
- }
2349
-
2350
- .emotion-24 {
2351
- box-sizing: border-box;
2352
- padding: 0;
2353
- }
2354
-
2355
- .emotion-24 a:not(.nk-card-link) {
2356
- z-index: 2;
2357
- position: relative;
2358
- }
2359
-
2360
- .emotion-25 {
2361
- -webkit-text-decoration: none;
2362
- text-decoration: none;
2363
- border: none;
2364
- }
2365
-
2366
- .emotion-25 .nk-headline-kicker {
2367
- color: #3358CC;
2368
- }
2369
-
2370
- .emotion-25:hover:not(:disabled) .nk-headline-kicker {
2371
- color: #2B4AAB;
2372
- -webkit-text-decoration: underline;
2373
- text-decoration: underline;
2374
- }
2375
-
2376
- .emotion-25:active:not(:disabled) .nk-headline-kicker {
2377
- color: #213A82;
2378
- -webkit-text-decoration: underline;
2379
- text-decoration: underline;
2380
- }
2381
-
2382
- .emotion-25:visited:not(:disabled) .nk-headline-kicker {
2383
- color: #5E44E4;
2384
- }
2385
-
2386
- .emotion-25 .nk-headline-heading {
2387
- color: #2E2E2E;
2388
- }
2389
-
2390
- .emotion-25:hover:not(:disabled) .nk-headline-heading {
2391
- color: #2B4AAB;
2392
- -webkit-text-decoration: underline;
2393
- text-decoration: underline;
2394
- }
2395
-
2396
- .emotion-25:active:not(:disabled) .nk-headline-heading {
2397
- color: #213A82;
2398
- -webkit-text-decoration: underline;
2399
- text-decoration: underline;
2400
- }
2401
-
2402
- .emotion-25:visited:not(:disabled) .nk-headline-heading {
2403
- color: #5E44E4;
2404
- }
2405
-
2406
- .emotion-25:before {
2407
- content: '';
2408
- top: 0;
2409
- right: 0;
2410
- bottom: 0;
2411
- left: 0;
2412
- overflow: hidden;
2413
- position: absolute;
2414
- z-index: 1;
2415
- }
2416
-
2417
- .emotion-26 {
2418
- margin-bottom: 20px;
2419
- }
2420
-
2421
- .emotion-27 {
2422
- margin: 0;
2423
- color: #0A0A0A;
2424
- }
2425
-
2426
- .emotion-27 svg {
2427
- fill: #0A0A0A;
2428
- }
2429
-
2430
- @media screen and (max-width: 767px) {
2431
- .emotion-27 {
2432
- font-family: "Bitter",serif;
2433
- font-size: 20px;
2434
- line-height: 22.5px;
2435
- font-weight: 500;
2436
- letter-spacing: 0;
2437
- padding: 0.5px 0px;
2438
- }
2439
-
2440
- .emotion-27::before {
2441
- content: '';
2442
- margin-bottom: -0.2055em;
2443
- display: block;
2444
- }
2445
-
2446
- .emotion-27::after {
2447
- content: '';
2448
- margin-top: -0.2275em;
2449
- display: block;
2450
- }
2451
- }
2452
-
2453
- @media screen and (min-width: 768px) and (max-width: 1439px) {
2454
- .emotion-27 {
2455
- font-family: "Bitter",serif;
2456
- font-size: 22px;
2457
- line-height: 24.75px;
2458
- font-weight: 500;
2459
- letter-spacing: 0;
2460
- padding: 0.5px 0px;
2461
- }
2462
-
2463
- .emotion-27::before {
2464
- content: '';
2465
- margin-bottom: -0.2055em;
2466
- display: block;
2467
- }
2468
-
2469
- .emotion-27::after {
2470
- content: '';
2471
- margin-top: -0.2275em;
2472
- display: block;
2473
- }
2474
- }
2475
-
2476
- @media screen and (min-width: 1440px) {
2477
- .emotion-27 {
2478
- font-family: "Bitter",serif;
2479
- font-size: 24px;
2480
- line-height: 27px;
2481
- font-weight: 500;
2482
- letter-spacing: 0;
2483
- padding: 0.5px 0px;
2484
- }
2485
-
2486
- .emotion-27::before {
2487
- content: '';
2488
- margin-bottom: -0.2055em;
2489
- display: block;
2490
- }
2491
-
2492
- .emotion-27::after {
2493
- content: '';
2494
- margin-top: -0.2275em;
2495
- display: block;
2496
- }
2497
- }
2498
-
2499
- .emotion-28 {
2500
- margin-bottom: 12px;
2501
- }
2502
-
2503
- .emotion-29 {
2504
- margin: 0;
2505
- color: #0A0A0A;
2506
- }
2507
-
2508
- .emotion-29 svg {
2509
- fill: #0A0A0A;
2510
- }
2511
-
2512
- @media screen and (max-width: 767px) {
2513
- .emotion-29 {
2514
- font-family: "DM Sans",sans-serif;
2515
- font-size: 14px;
2516
- line-height: 21px;
2517
- font-weight: 400;
2518
- letter-spacing: 0;
2519
- padding: 0.5px 0px;
2520
- }
2521
-
2522
- .emotion-29::before {
2523
- content: '';
2524
- margin-bottom: -0.391em;
2525
- display: block;
2526
- }
2527
-
2528
- .emotion-29::after {
2529
- content: '';
2530
- margin-top: -0.409em;
2531
- display: block;
2532
- }
2533
- }
2534
-
2535
- @media screen and (min-width: 768px) {
2536
- .emotion-29 {
2537
- font-family: "DM Sans",sans-serif;
2538
- font-size: 16px;
2539
- line-height: 24px;
2540
- font-weight: 400;
2541
- letter-spacing: 0;
2542
- padding: 0.5px 0px;
2543
- }
2544
-
2545
- .emotion-29::before {
2546
- content: '';
2547
- margin-bottom: -0.391em;
2548
- display: block;
2549
- }
2550
-
2551
- .emotion-29::after {
2552
- content: '';
2553
- margin-top: -0.409em;
2554
- display: block;
2555
- }
2556
- }
2557
-
2558
- .emotion-46 {
2559
- position: relative;
2560
- width: 100%;
2561
- display: block;
2562
- padding-top: 0;
2563
- height: auto;
2564
- width: 100%;
2565
- border-radius: 0;
2566
- }
2567
-
2568
- .emotion-47 {
2569
- opacity: 1;
2570
- display: block;
2571
- border-radius: inherit;
2572
- height: auto;
2573
- width: 100%;
2574
- -webkit-animation: fadeIn 300ms;
2575
- animation: fadeIn 300ms;
2576
- }
2577
-
2578
- .emotion-68 {
2579
- border-style: solid;
2580
- border-color: #DEDEDE;
2581
- border-width: 1px;
2582
- border-width: 0px;
2583
- margin: 0;
2584
- border-top-width: 1px;
2585
- width: 100%;
2586
- background: transparent;
2587
- border-color: transparent;
2588
- }
2589
-
2590
- <div
2591
- class="emotion-0"
2592
- >
2593
- <div
2594
- class="emotion-1"
2595
- data-testid="SectionTitleBar"
2596
- >
2597
- <div
2598
- class="emotion-2"
2599
- >
2600
- <div
2601
- class="emotion-3"
2602
- >
2603
- <section
2604
- class="emotion-4"
2605
- >
2606
- <h3
2607
- class="nk-headline-heading emotion-5"
2608
- />
2609
- </section>
2610
- </div>
2611
- <div
2612
- class="emotion-6"
2613
- >
2614
- <a
2615
- class="emotion-7"
2616
- href="/section-one"
2617
- >
2618
- <span
2619
- class="emotion-8"
2620
- >
2621
- <span
2622
- class="emotion-9"
2623
- >
2624
- <span
2625
- class="emotion-10"
2626
- >
2627
- Link
2628
- </span>
2629
- </span>
2630
- <span
2631
- class="emotion-9"
2632
- >
2633
- <svg
2634
- aria-hidden="true"
2635
- class="emotion-12 emotion-13"
2636
- fill="currentColor"
2637
- focusable="false"
2638
- viewBox="0 0 24 24"
2639
- xmlns="http://www.w3.org/2000/svg"
2640
- >
2641
- <path
2642
- d="M0 0h24v24H0z"
2643
- fill="none"
2644
- />
2645
- <path
2646
- d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
2647
- />
2648
- </svg>
2649
- </span>
2650
- </span>
2651
- </a>
2652
- </div>
2653
- </div>
2654
- </div>
2655
- <div
2656
- class="emotion-14"
2657
- >
2658
- <div
2659
- class="emotion-15"
2660
- >
2661
- <div
2662
- class="emotion-16"
2663
- data-testid="SECONDARY_4-Grid"
2664
- >
2665
- <div
2666
- class="emotion-17"
2667
- data-testid="titleTeaserVertical-0"
2668
- >
2669
- <div
2670
- class="emotion-18"
2671
- >
2672
- <div
2673
- class="emotion-19"
2674
- >
2675
- <picture
2676
- class="emotion-20"
2677
- >
2678
- <div
2679
- class="emotion-21"
2680
- />
2681
- <img
2682
- alt="image alt"
2683
- class="emotion-22"
2684
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
2685
- />
2686
- </picture>
2687
- </div>
2688
- <div
2689
- class="emotion-23"
2690
- >
2691
- <div
2692
- class="emotion-24"
2693
- >
2694
- <a
2695
- class="nk-card-link emotion-25"
2696
- href="catagory-one/demo-1/test-headline"
2697
- >
2698
- <div
2699
- class="emotion-26"
2700
- >
2701
- <h3
2702
- class="emotion-27"
2703
- >
2704
- test headline
2705
- </h3>
2706
- </div>
2707
- <div
2708
- class="emotion-28"
2709
- >
2710
- <p
2711
- class="emotion-29"
2712
- >
2713
- teaser test text
2714
- </p>
2715
- </div>
2716
- </a>
2717
- </div>
2718
- </div>
2719
- </div>
2720
- </div>
2721
- <div
2722
- class="emotion-17"
2723
- data-testid="titleTeaserVertical-1"
2724
- >
2725
- <div
2726
- class="emotion-18"
2727
- >
2728
- <div
2729
- class="emotion-19"
2730
- >
2731
- <picture
2732
- class="emotion-20"
2733
- >
2734
- <div
2735
- class="emotion-21"
2736
- />
2737
- <img
2738
- alt="image alt 2"
2739
- class="emotion-22"
2740
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
2741
- />
2742
- </picture>
2743
- </div>
2744
- <div
2745
- class="emotion-23"
2746
- >
2747
- <div
2748
- class="emotion-24"
2749
- >
2750
- <a
2751
- class="nk-card-link emotion-25"
2752
- href="catagory-two/demo-2/test-headline-2"
2753
- >
2754
- <div
2755
- class="emotion-26"
2756
- >
2757
- <h3
2758
- class="emotion-27"
2759
- >
2760
- test headline 2
2761
- </h3>
2762
- </div>
2763
- <div
2764
- class="emotion-28"
2765
- >
2766
- <p
2767
- class="emotion-29"
2768
- >
2769
- teaser test text 2
2770
- </p>
2771
- </div>
2772
- </a>
2773
- </div>
2774
- </div>
2775
- </div>
2776
- </div>
2777
- <div
2778
- class="emotion-17"
2779
- data-testid="titleTeaserVertical-2"
2780
- >
2781
- <div
2782
- class="emotion-18"
2783
- >
2784
- <div
2785
- class="emotion-19"
2786
- >
2787
- <picture
2788
- class="emotion-46"
2789
- >
2790
- <img
2791
- alt=""
2792
- class="emotion-47"
2793
- src=""
2794
- />
2795
- </picture>
2796
- </div>
2797
- <div
2798
- class="emotion-23"
2799
- >
2800
- <div
2801
- class="emotion-24"
2802
- >
2803
- <a
2804
- class="nk-card-link emotion-25"
2805
- href="catagory-three/demo-3/test-headline-3"
2806
- >
2807
- <div
2808
- class="emotion-26"
2809
- >
2810
- <h3
2811
- class="emotion-27"
2812
- >
2813
- test headline 3
2814
- </h3>
2815
- </div>
2816
- <div
2817
- class="emotion-28"
2818
- >
2819
- <p
2820
- class="emotion-29"
2821
- >
2822
- teaser test text 3
2823
- </p>
2824
- </div>
2825
- </a>
2826
- </div>
2827
- </div>
2828
- </div>
2829
- </div>
2830
- <div
2831
- class="emotion-17"
2832
- data-testid="titleTeaserVertical-3"
2833
- >
2834
- <div
2835
- class="emotion-18"
2836
- >
2837
- <div
2838
- class="emotion-19"
2839
- >
2840
- <picture
2841
- class="emotion-20"
2842
- >
2843
- <div
2844
- class="emotion-21"
2845
- />
2846
- <img
2847
- alt="image alt 3"
2848
- class="emotion-22"
2849
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
2850
- />
2851
- </picture>
2852
- </div>
2853
- <div
2854
- class="emotion-23"
2855
- >
2856
- <div
2857
- class="emotion-24"
2858
- >
2859
- <a
2860
- class="nk-card-link emotion-25"
2861
- href="catagory-four/demo-4/test-headline-4"
2862
- >
2863
- <div
2864
- class="emotion-26"
2865
- >
2866
- <h3
2867
- class="emotion-27"
2868
- >
2869
- test headline 4
2870
- </h3>
2871
- </div>
2872
- <div
2873
- class="emotion-28"
2874
- >
2875
- <p
2876
- class="emotion-29"
2877
- >
2878
- teaser test text 4
2879
- </p>
2880
- </div>
2881
- </a>
2882
- </div>
2883
- </div>
2884
- </div>
2885
- </div>
2886
- </div>
2887
- </div>
2888
- </div>
2889
- <hr
2890
- aria-hidden="true"
2891
- class="emotion-68"
2892
- data-testid="divider"
2893
- />
2894
- </div>
2895
- </DocumentFragment>
2896
- `;
2897
-
2898
- exports[`SectionRow SectionRow without extra space 1`] = `
2899
- <DocumentFragment>
2900
- .emotion-0 {
2901
- background:color: transparent;
2902
- }
2903
-
2904
- .emotion-1 {
2905
- margin-bottom: 32px;
2906
- }
2907
-
2908
- .emotion-2 {
2909
- border-style: solid;
2910
- border-color: #DEDEDE;
2911
- border-width: 1px;
2912
- border-width: 0px;
2913
- margin: 0;
2914
- border-top-width: 1px;
2915
- width: 100%;
2916
- background: transparent;
2917
- border-color: transparent;
2918
- }
2919
-
2920
- .emotion-3 {
2921
- margin-bottom: 32px;
2922
- background: #3358CC;
2923
- }
2924
-
2925
- .emotion-4 {
2926
- display: -webkit-box;
2927
- display: -webkit-flex;
2928
- display: -ms-flexbox;
2929
- display: flex;
2930
- height: 100%;
2931
- -webkit-align-items: center;
2932
- -webkit-box-align: center;
2933
- -ms-flex-align: center;
2934
- align-items: center;
2935
- -webkit-flex-direction: row;
2936
- -ms-flex-direction: row;
2937
- flex-direction: row;
2938
- -webkit-box-pack: justify;
2939
- -webkit-justify-content: space-between;
2940
- justify-content: space-between;
2941
- background-color: transparent;
2942
- }
2943
-
2944
- @media screen and (max-width: 1023px) {
2945
- .emotion-4 {
2946
- padding: 12px 16px;
2947
- }
2948
- }
2949
-
2950
- @media screen and (min-width: 1024px) {
2951
- .emotion-4 {
2952
- padding: 16px 24px;
2953
- }
2954
- }
2955
-
2956
- .emotion-5 {
2957
- margin-right: 16px;
2958
- -webkit-box-flex: 1;
2959
- -webkit-flex-grow: 1;
2960
- -ms-flex-positive: 1;
2961
- flex-grow: 1;
2962
- }
2963
-
2964
- @media screen and (max-width: 767px) {
2965
- .emotion-6 {
2966
- font-family: "Bitter",serif;
2967
- font-size: 28px;
2968
- line-height: 31.5px;
2969
- font-weight: 500;
2970
- letter-spacing: 0;
2971
- padding: 0.5px 0px;
2972
- }
2973
-
2974
- .emotion-6::before {
2975
- content: '';
2976
- margin-bottom: -0.2055em;
2977
- display: block;
2978
- }
2979
-
2980
- .emotion-6::after {
2981
- content: '';
2982
- margin-top: -0.2275em;
2983
- display: block;
2984
- }
2985
- }
2986
-
2987
- @media screen and (min-width: 768px) and (max-width: 1439px) {
2988
- .emotion-6 {
2989
- font-family: "Bitter",serif;
2990
- font-size: 32px;
2991
- line-height: 36px;
2992
- font-weight: 500;
2993
- letter-spacing: 0;
2994
- padding: 0.5px 0px;
2995
- }
2996
-
2997
- .emotion-6::before {
2998
- content: '';
2999
- margin-bottom: -0.2055em;
3000
- display: block;
3001
- }
3002
-
3003
- .emotion-6::after {
3004
- content: '';
3005
- margin-top: -0.2275em;
3006
- display: block;
3007
- }
3008
- }
3009
-
3010
- @media screen and (min-width: 1440px) {
3011
- .emotion-6 {
3012
- font-family: "Bitter",serif;
3013
- font-size: 36px;
3014
- line-height: 40.5px;
3015
- font-weight: 500;
3016
- letter-spacing: 0;
3017
- padding: 0.5px 0px;
3018
- }
3019
-
3020
- .emotion-6::before {
3021
- content: '';
3022
- margin-bottom: -0.2055em;
3023
- display: block;
3024
- }
3025
-
3026
- .emotion-6::after {
3027
- content: '';
3028
- margin-top: -0.2275em;
3029
- display: block;
3030
- }
3031
- }
3032
-
3033
- .emotion-7 {
3034
- display: inline;
3035
- font: inherit;
3036
- margin: 0;
3037
- color: #FFFFFF;
3038
- }
3039
-
3040
- .emotion-7 svg {
3041
- fill: #FFFFFF;
3042
- }
3043
-
3044
- @media screen {
3045
- .emotion-8 {
3046
- display: none;
3047
- }
3048
- }
3049
-
3050
- @media screen and (min-width: 480px) {
3051
- .emotion-8 {
3052
- display: block;
3053
- }
3054
- }
3055
-
3056
- @media screen and (min-width: 768px) {
3057
- .emotion-8 {
3058
- display: block;
3059
- }
3060
- }
3061
-
3062
- @media screen and (min-width: 1024px) {
3063
- .emotion-8 {
3064
- display: block;
3065
- }
3066
- }
3067
-
3068
- @media screen and (min-width: 1440px) {
3069
- .emotion-8 {
3070
- display: block;
3071
- }
3072
- }
3073
-
3074
- .emotion-9 {
3075
- display: inline-block;
3076
- transition-property: color;
3077
- transition-duration: 200ms;
3078
- transition-timing-function: cubic-bezier(0, 0, .5, 1);
3079
- color: #FFFFFF;
3080
- }
3081
-
3082
- .emotion-9 svg {
3083
- fill: #FFFFFF;
3084
- }
3085
-
3086
- .emotion-10 {
3087
- display: -webkit-box;
3088
- display: -webkit-flex;
3089
- display: -ms-flexbox;
3090
- display: flex;
3091
- height: 100%;
3092
- -webkit-align-items: center;
3093
- -webkit-box-align: center;
3094
- -ms-flex-align: center;
3095
- align-items: center;
3096
- -webkit-flex-direction: row;
3097
- -ms-flex-direction: row;
3098
- flex-direction: row;
3099
- -webkit-box-pack: start;
3100
- -ms-flex-pack: start;
3101
- -webkit-justify-content: flex-start;
3102
- justify-content: flex-start;
3103
- margin-left: calc(-8px/2);
3104
- margin-right: calc(-8px/2);
3105
- }
3106
-
3107
- .emotion-11 {
3108
- display: -webkit-inline-box;
3109
- display: -webkit-inline-flex;
3110
- display: -ms-inline-flexbox;
3111
- display: inline-flex;
3112
- margin-left: calc(8px/2);
3113
- margin-right: calc(8px/2);
3114
- }
3115
-
3116
- .emotion-12 {
3117
- margin: 0;
3118
- font-family: "Poppins",sans-serif;
3119
- font-size: 14px;
3120
- line-height: 21px;
3121
- font-weight: 500;
3122
- letter-spacing: 0;
3123
- padding: 0.5px 0px;
3124
- display: inline-block;
3125
- display: block;
3126
- }
3127
-
3128
- .emotion-12::before {
3129
- content: '';
3130
- margin-bottom: -0.403em;
3131
- display: block;
3132
- }
3133
-
3134
- .emotion-12::after {
3135
- content: '';
3136
- margin-top: -0.4em;
3137
- display: block;
3138
- }
3139
-
3140
- .emotion-14 {
3141
- display: inline-block;
3142
- vertical-align: middle;
3143
- overflow: hidden;
3144
- fill: #2E2E2E;
3145
- vertical-align: unset;
3146
- display: inline-block;
3147
- top: 1px;
3148
- position: relative;
3149
- }
3150
-
3151
- .emotion-14.emotion-14 {
3152
- width: 24px;
3153
- height: 24px;
3154
- }
3155
-
3156
- .emotion-16 {
3157
- margin-bottom: 40px;
3158
- }
3159
-
3160
- .emotion-17 {
3161
- width: 100%;
3162
- max-width: 1920px;
3163
- margin: 0 auto;
3164
- }
3165
-
3166
- .emotion-18 {
3167
- box-sizing: border-box;
3168
- -webkit-background-clip: padding-box;
3169
- background-clip: padding-box;
3170
- display: -webkit-box;
3171
- display: -webkit-flex;
3172
- display: -ms-flexbox;
3173
- display: flex;
3174
- -webkit-box-flex-wrap: wrap;
3175
- -webkit-flex-wrap: wrap;
3176
- -ms-flex-wrap: wrap;
3177
- flex-wrap: wrap;
3178
- -webkit-flex-direction: row;
3179
- -ms-flex-direction: row;
3180
- flex-direction: row;
3181
- }
3182
-
3183
- @media screen {
3184
- .emotion-18 {
3185
- margin: -40px 8px 0 8px;
3186
- }
3187
- }
3188
-
3189
- @media screen and (min-width: 480px) {
3190
- .emotion-18 {
3191
- margin: -40px 8px 0 8px;
3192
- }
3193
- }
3194
-
3195
- @media screen and (min-width: 768px) {
3196
- .emotion-18 {
3197
- margin: -32px 8px 0 8px;
3198
- }
3199
- }
3200
-
3201
- @media screen and (min-width: 1024px) {
3202
- .emotion-18 {
3203
- margin: -32px 12px 0 12px;
3204
- }
3205
- }
3206
-
3207
- @media screen and (min-width: 1440px) {
3208
- .emotion-18 {
3209
- margin: -0px 12px 0 12px;
3210
- }
3211
- }
3212
-
3213
- .emotion-19 {
3214
- box-sizing: border-box;
3215
- -webkit-background-clip: padding-box;
3216
- background-clip: padding-box;
3217
- -webkit-flex: 1 0 auto;
3218
- -ms-flex: 1 0 auto;
3219
- flex: 1 0 auto;
3220
- }
3221
-
3222
- @media screen {
3223
- .emotion-19 {
3224
- padding: 0 8px;
3225
- margin-top: 40px;
3226
- -webkit-flex-basis: 100%;
3227
- -ms-flex-preferred-size: 100%;
3228
- flex-basis: 100%;
3229
- max-width: 100%;
3230
- }
3231
- }
3232
-
3233
- @media screen and (min-width: 768px) {
3234
- .emotion-19 {
3235
- margin-top: 32px;
3236
- -webkit-flex-basis: 50%;
3237
- -ms-flex-preferred-size: 50%;
3238
- flex-basis: 50%;
3239
- max-width: 50%;
3240
- }
3241
- }
3242
-
3243
- @media screen and (min-width: 1024px) {
3244
- .emotion-19 {
3245
- padding: 0 12px;
3246
- }
3247
- }
3248
-
3249
- @media screen and (min-width: 1440px) {
3250
- .emotion-19 {
3251
- margin-top: 0;
3252
- -webkit-flex-basis: 25%;
3253
- -ms-flex-preferred-size: 25%;
3254
- flex-basis: 25%;
3255
- max-width: 25%;
3256
- }
3257
- }
3258
-
3259
- .emotion-20 {
3260
- box-sizing: border-box;
3261
- overflow: hidden;
3262
- color: #2E2E2E;
3263
- background-color: #FFFFFF;
3264
- position: relative;
3265
- display: -webkit-box;
3266
- display: -webkit-flex;
3267
- display: -ms-flexbox;
3268
- display: flex;
3269
- -webkit-flex-direction: column;
3270
- -ms-flex-direction: column;
3271
- flex-direction: column;
3272
- }
3273
-
3274
- .emotion-21 {
3275
- box-sizing: border-box;
3276
- display: block;
3277
- position: relative;
3278
- margin-bottom: 20px;
3279
- }
3280
-
3281
- .emotion-22 {
3282
- position: relative;
3283
- width: 100%;
3284
- display: block;
3285
- padding-top: 0;
3286
- height: 0;
3287
- width: 100%;
3288
- border-radius: 0;
3289
- background-color: #F4F4F4;
3290
- }
3291
-
3292
- .emotion-22 svg {
3293
- fill: #C0C0C0;
3294
- }
3295
-
3296
- .emotion-23 {
3297
- top: 0;
3298
- left: 0;
3299
- position: absolute;
3300
- display: -webkit-box;
3301
- display: -webkit-flex;
3302
- display: -ms-flexbox;
3303
- display: flex;
3304
- -webkit-flex-direction: column;
3305
- -ms-flex-direction: column;
3306
- flex-direction: column;
3307
- -webkit-box-pack: center;
3308
- -ms-flex-pack: center;
3309
- -webkit-justify-content: center;
3310
- justify-content: center;
3311
- width: 100%;
3312
- height: 100%;
3313
- margin: 0;
3314
- }
3315
-
3316
- .emotion-24 {
3317
- opacity: 0;
3318
- display: block;
3319
- border-radius: inherit;
3320
- height: auto;
3321
- width: 100%;
3322
- top: 0;
3323
- left: 0;
3324
- position: absolute;
3325
- }
3326
-
3327
- .emotion-25 {
3328
- box-sizing: border-box;
3329
- }
3330
-
3331
- .emotion-26 {
3332
- box-sizing: border-box;
3333
- padding: 0;
3334
- }
3335
-
3336
- .emotion-26 a:not(.nk-card-link) {
3337
- z-index: 2;
3338
- position: relative;
3339
- }
3340
-
3341
- .emotion-27 {
3342
- -webkit-text-decoration: none;
3343
- text-decoration: none;
3344
- border: none;
3345
- }
3346
-
3347
- .emotion-27 .nk-headline-kicker {
3348
- color: #3358CC;
3349
- }
3350
-
3351
- .emotion-27:hover:not(:disabled) .nk-headline-kicker {
3352
- color: #2B4AAB;
3353
- -webkit-text-decoration: underline;
3354
- text-decoration: underline;
3355
- }
3356
-
3357
- .emotion-27:active:not(:disabled) .nk-headline-kicker {
3358
- color: #213A82;
3359
- -webkit-text-decoration: underline;
3360
- text-decoration: underline;
3361
- }
3362
-
3363
- .emotion-27:visited:not(:disabled) .nk-headline-kicker {
3364
- color: #5E44E4;
3365
- }
3366
-
3367
- .emotion-27 .nk-headline-heading {
3368
- color: #2E2E2E;
3369
- }
3370
-
3371
- .emotion-27:hover:not(:disabled) .nk-headline-heading {
3372
- color: #2B4AAB;
3373
- -webkit-text-decoration: underline;
3374
- text-decoration: underline;
3375
- }
3376
-
3377
- .emotion-27:active:not(:disabled) .nk-headline-heading {
3378
- color: #213A82;
3379
- -webkit-text-decoration: underline;
3380
- text-decoration: underline;
3381
- }
3382
-
3383
- .emotion-27:visited:not(:disabled) .nk-headline-heading {
3384
- color: #5E44E4;
3385
- }
3386
-
3387
- .emotion-27:before {
3388
- content: '';
3389
- top: 0;
3390
- right: 0;
3391
- bottom: 0;
3392
- left: 0;
3393
- overflow: hidden;
3394
- position: absolute;
3395
- z-index: 1;
3396
- }
3397
-
3398
- .emotion-28 {
3399
- margin-bottom: 20px;
3400
- }
3401
-
3402
- .emotion-29 {
3403
- margin: 0;
3404
- color: #0A0A0A;
3405
- }
3406
-
3407
- .emotion-29 svg {
3408
- fill: #0A0A0A;
3409
- }
3410
-
3411
- @media screen and (max-width: 767px) {
3412
- .emotion-29 {
3413
- font-family: "Bitter",serif;
3414
- font-size: 20px;
3415
- line-height: 22.5px;
3416
- font-weight: 500;
3417
- letter-spacing: 0;
3418
- padding: 0.5px 0px;
3419
- }
3420
-
3421
- .emotion-29::before {
3422
- content: '';
3423
- margin-bottom: -0.2055em;
3424
- display: block;
3425
- }
3426
-
3427
- .emotion-29::after {
3428
- content: '';
3429
- margin-top: -0.2275em;
3430
- display: block;
3431
- }
3432
- }
3433
-
3434
- @media screen and (min-width: 768px) and (max-width: 1439px) {
3435
- .emotion-29 {
3436
- font-family: "Bitter",serif;
3437
- font-size: 22px;
3438
- line-height: 24.75px;
3439
- font-weight: 500;
3440
- letter-spacing: 0;
3441
- padding: 0.5px 0px;
3442
- }
3443
-
3444
- .emotion-29::before {
3445
- content: '';
3446
- margin-bottom: -0.2055em;
3447
- display: block;
3448
- }
3449
-
3450
- .emotion-29::after {
3451
- content: '';
3452
- margin-top: -0.2275em;
3453
- display: block;
3454
- }
3455
- }
3456
-
3457
- @media screen and (min-width: 1440px) {
3458
- .emotion-29 {
3459
- font-family: "Bitter",serif;
3460
- font-size: 24px;
3461
- line-height: 27px;
3462
- font-weight: 500;
3463
- letter-spacing: 0;
3464
- padding: 0.5px 0px;
3465
- }
3466
-
3467
- .emotion-29::before {
3468
- content: '';
3469
- margin-bottom: -0.2055em;
3470
- display: block;
3471
- }
3472
-
3473
- .emotion-29::after {
3474
- content: '';
3475
- margin-top: -0.2275em;
3476
- display: block;
3477
- }
3478
- }
3479
-
3480
- .emotion-30 {
3481
- margin-bottom: 12px;
3482
- }
3483
-
3484
- .emotion-31 {
3485
- margin: 0;
3486
- color: #0A0A0A;
3487
- }
3488
-
3489
- .emotion-31 svg {
3490
- fill: #0A0A0A;
3491
- }
3492
-
3493
- @media screen and (max-width: 767px) {
3494
- .emotion-31 {
3495
- font-family: "DM Sans",sans-serif;
3496
- font-size: 14px;
3497
- line-height: 21px;
3498
- font-weight: 400;
3499
- letter-spacing: 0;
3500
- padding: 0.5px 0px;
3501
- }
3502
-
3503
- .emotion-31::before {
3504
- content: '';
3505
- margin-bottom: -0.391em;
3506
- display: block;
3507
- }
3508
-
3509
- .emotion-31::after {
3510
- content: '';
3511
- margin-top: -0.409em;
3512
- display: block;
3513
- }
3514
- }
3515
-
3516
- @media screen and (min-width: 768px) {
3517
- .emotion-31 {
3518
- font-family: "DM Sans",sans-serif;
3519
- font-size: 16px;
3520
- line-height: 24px;
3521
- font-weight: 400;
3522
- letter-spacing: 0;
3523
- padding: 0.5px 0px;
3524
- }
3525
-
3526
- .emotion-31::before {
3527
- content: '';
3528
- margin-bottom: -0.391em;
3529
- display: block;
3530
- }
3531
-
3532
- .emotion-31::after {
3533
- content: '';
3534
- margin-top: -0.409em;
3535
- display: block;
3536
- }
3537
- }
3538
-
3539
- .emotion-48 {
3540
- position: relative;
3541
- width: 100%;
3542
- display: block;
3543
- padding-top: 0;
3544
- height: auto;
3545
- width: 100%;
3546
- border-radius: 0;
3547
- }
3548
-
3549
- .emotion-49 {
3550
- opacity: 1;
3551
- display: block;
3552
- border-radius: inherit;
3553
- height: auto;
3554
- width: 100%;
3555
- -webkit-animation: fadeIn 300ms;
3556
- animation: fadeIn 300ms;
3557
- }
3558
-
3559
- <div
3560
- class="emotion-0"
3561
- >
3562
- <div
3563
- class="emotion-1"
3564
- data-testid="addTopSpace"
3565
- >
3566
- <hr
3567
- aria-hidden="true"
3568
- class="emotion-2"
3569
- data-testid="divider"
3570
- />
3571
- </div>
3572
- <div
3573
- class="emotion-3"
3574
- data-testid="SectionTitleBar"
3575
- >
3576
- <div
3577
- class="emotion-4"
3578
- >
3579
- <div
3580
- class="emotion-5"
3581
- >
3582
- <section
3583
- class="emotion-6"
3584
- >
3585
- <h3
3586
- class="nk-headline-heading emotion-7"
3587
- />
3588
- </section>
3589
- </div>
3590
- <div
3591
- class="emotion-8"
3592
- >
3593
- <a
3594
- class="emotion-9"
3595
- href="/section-one"
3596
- >
3597
- <span
3598
- class="emotion-10"
3599
- >
3600
- <span
3601
- class="emotion-11"
3602
- >
3603
- <span
3604
- class="emotion-12"
3605
- >
3606
- Link
3607
- </span>
3608
- </span>
3609
- <span
3610
- class="emotion-11"
3611
- >
3612
- <svg
3613
- aria-hidden="true"
3614
- class="emotion-14 emotion-15"
3615
- fill="currentColor"
3616
- focusable="false"
3617
- viewBox="0 0 24 24"
3618
- xmlns="http://www.w3.org/2000/svg"
3619
- >
3620
- <path
3621
- d="M0 0h24v24H0z"
3622
- fill="none"
3623
- />
3624
- <path
3625
- d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
3626
- />
3627
- </svg>
3628
- </span>
3629
- </span>
3630
- </a>
3631
- </div>
3632
- </div>
3633
- </div>
3634
- <div
3635
- class="emotion-16"
3636
- >
3637
- <div
3638
- class="emotion-17"
3639
- >
3640
- <div
3641
- class="emotion-18"
3642
- data-testid="SECONDARY_4-Grid"
3643
- >
3644
- <div
3645
- class="emotion-19"
3646
- data-testid="titleTeaserVertical-0"
3647
- >
3648
- <div
3649
- class="emotion-20"
3650
- >
3651
- <div
3652
- class="emotion-21"
3653
- >
3654
- <picture
3655
- class="emotion-22"
3656
- >
3657
- <div
3658
- class="emotion-23"
3659
- />
3660
- <img
3661
- alt="image alt"
3662
- class="emotion-24"
3663
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
3664
- />
3665
- </picture>
3666
- </div>
3667
- <div
3668
- class="emotion-25"
3669
- >
3670
- <div
3671
- class="emotion-26"
3672
- >
3673
- <a
3674
- class="nk-card-link emotion-27"
3675
- href="catagory-one/demo-1/test-headline"
3676
- >
3677
- <div
3678
- class="emotion-28"
3679
- >
3680
- <h3
3681
- class="emotion-29"
3682
- >
3683
- test headline
3684
- </h3>
3685
- </div>
3686
- <div
3687
- class="emotion-30"
3688
- >
3689
- <p
3690
- class="emotion-31"
3691
- >
3692
- teaser test text
3693
- </p>
3694
- </div>
3695
- </a>
3696
- </div>
3697
- </div>
3698
- </div>
3699
- </div>
3700
- <div
3701
- class="emotion-19"
3702
- data-testid="titleTeaserVertical-1"
3703
- >
3704
- <div
3705
- class="emotion-20"
3706
- >
3707
- <div
3708
- class="emotion-21"
3709
- >
3710
- <picture
3711
- class="emotion-22"
3712
- >
3713
- <div
3714
- class="emotion-23"
3715
- />
3716
- <img
3717
- alt="image alt 2"
3718
- class="emotion-24"
3719
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
3720
- />
3721
- </picture>
3722
- </div>
3723
- <div
3724
- class="emotion-25"
3725
- >
3726
- <div
3727
- class="emotion-26"
3728
- >
3729
- <a
3730
- class="nk-card-link emotion-27"
3731
- href="catagory-two/demo-2/test-headline-2"
3732
- >
3733
- <div
3734
- class="emotion-28"
3735
- >
3736
- <h3
3737
- class="emotion-29"
3738
- >
3739
- test headline 2
3740
- </h3>
3741
- </div>
3742
- <div
3743
- class="emotion-30"
3744
- >
3745
- <p
3746
- class="emotion-31"
3747
- >
3748
- teaser test text 2
3749
- </p>
3750
- </div>
3751
- </a>
3752
- </div>
3753
- </div>
3754
- </div>
3755
- </div>
3756
- <div
3757
- class="emotion-19"
3758
- data-testid="titleTeaserVertical-2"
3759
- >
3760
- <div
3761
- class="emotion-20"
3762
- >
3763
- <div
3764
- class="emotion-21"
3765
- >
3766
- <picture
3767
- class="emotion-48"
3768
- >
3769
- <img
3770
- alt=""
3771
- class="emotion-49"
3772
- src=""
3773
- />
3774
- </picture>
3775
- </div>
3776
- <div
3777
- class="emotion-25"
3778
- >
3779
- <div
3780
- class="emotion-26"
3781
- >
3782
- <a
3783
- class="nk-card-link emotion-27"
3784
- href="catagory-three/demo-3/test-headline-3"
3785
- >
3786
- <div
3787
- class="emotion-28"
3788
- >
3789
- <h3
3790
- class="emotion-29"
3791
- >
3792
- test headline 3
3793
- </h3>
3794
- </div>
3795
- <div
3796
- class="emotion-30"
3797
- >
3798
- <p
3799
- class="emotion-31"
3800
- >
3801
- teaser test text 3
3802
- </p>
3803
- </div>
3804
- </a>
3805
- </div>
3806
- </div>
3807
- </div>
3808
- </div>
3809
- <div
3810
- class="emotion-19"
3811
- data-testid="titleTeaserVertical-3"
3812
- >
3813
- <div
3814
- class="emotion-20"
3815
- >
3816
- <div
3817
- class="emotion-21"
3818
- >
3819
- <picture
3820
- class="emotion-22"
3821
- >
3822
- <div
3823
- class="emotion-23"
3824
- />
3825
- <img
3826
- alt="image alt 3"
3827
- class="emotion-24"
3828
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
3829
- />
3830
- </picture>
3831
- </div>
3832
- <div
3833
- class="emotion-25"
3834
- >
3835
- <div
3836
- class="emotion-26"
3837
- >
3838
- <a
3839
- class="nk-card-link emotion-27"
3840
- href="catagory-four/demo-4/test-headline-4"
3841
- >
3842
- <div
3843
- class="emotion-28"
3844
- >
3845
- <h3
3846
- class="emotion-29"
3847
- >
3848
- test headline 4
3849
- </h3>
3850
- </div>
3851
- <div
3852
- class="emotion-30"
3853
- >
3854
- <p
3855
- class="emotion-31"
3856
- >
3857
- teaser test text 4
3858
- </p>
3859
- </div>
3860
- </a>
3861
- </div>
3862
- </div>
3863
- </div>
3864
- </div>
3865
- </div>
3866
- </div>
3867
- </div>
3868
- <hr
3869
- aria-hidden="true"
3870
- class="emotion-2"
3871
- data-testid="divider"
3872
- />
3873
- </div>
3874
- </DocumentFragment>
3875
- `;
3876
-
3877
- exports[`SectionRow SectionRow without title 1`] = `
3878
- <DocumentFragment>
3879
- .emotion-0 {
3880
- background:color: transparent;
3881
- }
3882
-
3883
- .emotion-1 {
3884
- margin-bottom: 0;
3885
- }
3886
-
3887
- .emotion-2 {
3888
- width: 100%;
3889
- max-width: 1920px;
3890
- margin: 0 auto;
3891
- }
3892
-
3893
- .emotion-3 {
3894
- box-sizing: border-box;
3895
- -webkit-background-clip: padding-box;
3896
- background-clip: padding-box;
3897
- display: -webkit-box;
3898
- display: -webkit-flex;
3899
- display: -ms-flexbox;
3900
- display: flex;
3901
- -webkit-box-flex-wrap: wrap;
3902
- -webkit-flex-wrap: wrap;
3903
- -ms-flex-wrap: wrap;
3904
- flex-wrap: wrap;
3905
- -webkit-flex-direction: row;
3906
- -ms-flex-direction: row;
3907
- flex-direction: row;
3908
- }
3909
-
3910
- @media screen {
3911
- .emotion-3 {
3912
- margin: -40px 8px 0 8px;
3913
- }
3914
- }
3915
-
3916
- @media screen and (min-width: 480px) {
3917
- .emotion-3 {
3918
- margin: -40px 8px 0 8px;
3919
- }
3920
- }
3921
-
3922
- @media screen and (min-width: 768px) {
3923
- .emotion-3 {
3924
- margin: -32px 8px 0 8px;
3925
- }
3926
- }
3927
-
3928
- @media screen and (min-width: 1024px) {
3929
- .emotion-3 {
3930
- margin: -32px 12px 0 12px;
3931
- }
3932
- }
3933
-
3934
- @media screen and (min-width: 1440px) {
3935
- .emotion-3 {
3936
- margin: -0px 12px 0 12px;
3937
- }
3938
- }
3939
-
3940
- .emotion-4 {
3941
- box-sizing: border-box;
3942
- -webkit-background-clip: padding-box;
3943
- background-clip: padding-box;
3944
- -webkit-flex: 1 0 auto;
3945
- -ms-flex: 1 0 auto;
3946
- flex: 1 0 auto;
3947
- }
3948
-
3949
- @media screen {
3950
- .emotion-4 {
3951
- padding: 0 8px;
3952
- margin-top: 40px;
3953
- -webkit-flex-basis: 100%;
3954
- -ms-flex-preferred-size: 100%;
3955
- flex-basis: 100%;
3956
- max-width: 100%;
3957
- }
3958
- }
3959
-
3960
- @media screen and (min-width: 768px) {
3961
- .emotion-4 {
3962
- margin-top: 32px;
3963
- -webkit-flex-basis: 50%;
3964
- -ms-flex-preferred-size: 50%;
3965
- flex-basis: 50%;
3966
- max-width: 50%;
3967
- }
3968
- }
3969
-
3970
- @media screen and (min-width: 1024px) {
3971
- .emotion-4 {
3972
- padding: 0 12px;
3973
- }
3974
- }
3975
-
3976
- @media screen and (min-width: 1440px) {
3977
- .emotion-4 {
3978
- margin-top: 0;
3979
- -webkit-flex-basis: 25%;
3980
- -ms-flex-preferred-size: 25%;
3981
- flex-basis: 25%;
3982
- max-width: 25%;
3983
- }
3984
- }
3985
-
3986
- .emotion-5 {
3987
- box-sizing: border-box;
3988
- overflow: hidden;
3989
- color: #2E2E2E;
3990
- background-color: #FFFFFF;
3991
- position: relative;
3992
- display: -webkit-box;
3993
- display: -webkit-flex;
3994
- display: -ms-flexbox;
3995
- display: flex;
3996
- -webkit-flex-direction: column;
3997
- -ms-flex-direction: column;
3998
- flex-direction: column;
3999
- }
4000
-
4001
- .emotion-6 {
4002
- box-sizing: border-box;
4003
- display: block;
4004
- position: relative;
4005
- margin-bottom: 20px;
4006
- }
4007
-
4008
- .emotion-7 {
4009
- position: relative;
4010
- width: 100%;
4011
- display: block;
4012
- padding-top: 0;
4013
- height: 0;
4014
- width: 100%;
4015
- border-radius: 0;
4016
- background-color: #F4F4F4;
4017
- }
4018
-
4019
- .emotion-7 svg {
4020
- fill: #C0C0C0;
4021
- }
4022
-
4023
- .emotion-8 {
4024
- top: 0;
4025
- left: 0;
4026
- position: absolute;
4027
- display: -webkit-box;
4028
- display: -webkit-flex;
4029
- display: -ms-flexbox;
4030
- display: flex;
4031
- -webkit-flex-direction: column;
4032
- -ms-flex-direction: column;
4033
- flex-direction: column;
4034
- -webkit-box-pack: center;
4035
- -ms-flex-pack: center;
4036
- -webkit-justify-content: center;
4037
- justify-content: center;
4038
- width: 100%;
4039
- height: 100%;
4040
- margin: 0;
4041
- }
4042
-
4043
- .emotion-9 {
4044
- opacity: 0;
4045
- display: block;
4046
- border-radius: inherit;
4047
- height: auto;
4048
- width: 100%;
4049
- top: 0;
4050
- left: 0;
4051
- position: absolute;
4052
- }
4053
-
4054
- .emotion-10 {
4055
- box-sizing: border-box;
4056
- }
4057
-
4058
- .emotion-11 {
4059
- box-sizing: border-box;
4060
- padding: 0;
4061
- }
4062
-
4063
- .emotion-11 a:not(.nk-card-link) {
4064
- z-index: 2;
4065
- position: relative;
4066
- }
4067
-
4068
- .emotion-12 {
4069
- -webkit-text-decoration: none;
4070
- text-decoration: none;
4071
- border: none;
4072
- }
4073
-
4074
- .emotion-12 .nk-headline-kicker {
4075
- color: #3358CC;
4076
- }
4077
-
4078
- .emotion-12:hover:not(:disabled) .nk-headline-kicker {
4079
- color: #2B4AAB;
4080
- -webkit-text-decoration: underline;
4081
- text-decoration: underline;
4082
- }
4083
-
4084
- .emotion-12:active:not(:disabled) .nk-headline-kicker {
4085
- color: #213A82;
4086
- -webkit-text-decoration: underline;
4087
- text-decoration: underline;
4088
- }
4089
-
4090
- .emotion-12:visited:not(:disabled) .nk-headline-kicker {
4091
- color: #5E44E4;
4092
- }
4093
-
4094
- .emotion-12 .nk-headline-heading {
4095
- color: #2E2E2E;
4096
- }
4097
-
4098
- .emotion-12:hover:not(:disabled) .nk-headline-heading {
4099
- color: #2B4AAB;
4100
- -webkit-text-decoration: underline;
4101
- text-decoration: underline;
4102
- }
4103
-
4104
- .emotion-12:active:not(:disabled) .nk-headline-heading {
4105
- color: #213A82;
4106
- -webkit-text-decoration: underline;
4107
- text-decoration: underline;
4108
- }
4109
-
4110
- .emotion-12:visited:not(:disabled) .nk-headline-heading {
4111
- color: #5E44E4;
4112
- }
4113
-
4114
- .emotion-12:before {
4115
- content: '';
4116
- top: 0;
4117
- right: 0;
4118
- bottom: 0;
4119
- left: 0;
4120
- overflow: hidden;
4121
- position: absolute;
4122
- z-index: 1;
4123
- }
4124
-
4125
- .emotion-13 {
4126
- margin-bottom: 20px;
4127
- }
4128
-
4129
- .emotion-14 {
4130
- margin: 0;
4131
- color: #0A0A0A;
4132
- }
4133
-
4134
- .emotion-14 svg {
4135
- fill: #0A0A0A;
4136
- }
4137
-
4138
- @media screen and (max-width: 767px) {
4139
- .emotion-14 {
4140
- font-family: "Bitter",serif;
4141
- font-size: 20px;
4142
- line-height: 22.5px;
4143
- font-weight: 500;
4144
- letter-spacing: 0;
4145
- padding: 0.5px 0px;
4146
- }
4147
-
4148
- .emotion-14::before {
4149
- content: '';
4150
- margin-bottom: -0.2055em;
4151
- display: block;
4152
- }
4153
-
4154
- .emotion-14::after {
4155
- content: '';
4156
- margin-top: -0.2275em;
4157
- display: block;
4158
- }
4159
- }
4160
-
4161
- @media screen and (min-width: 768px) and (max-width: 1439px) {
4162
- .emotion-14 {
4163
- font-family: "Bitter",serif;
4164
- font-size: 22px;
4165
- line-height: 24.75px;
4166
- font-weight: 500;
4167
- letter-spacing: 0;
4168
- padding: 0.5px 0px;
4169
- }
4170
-
4171
- .emotion-14::before {
4172
- content: '';
4173
- margin-bottom: -0.2055em;
4174
- display: block;
4175
- }
4176
-
4177
- .emotion-14::after {
4178
- content: '';
4179
- margin-top: -0.2275em;
4180
- display: block;
4181
- }
4182
- }
4183
-
4184
- @media screen and (min-width: 1440px) {
4185
- .emotion-14 {
4186
- font-family: "Bitter",serif;
4187
- font-size: 24px;
4188
- line-height: 27px;
4189
- font-weight: 500;
4190
- letter-spacing: 0;
4191
- padding: 0.5px 0px;
4192
- }
4193
-
4194
- .emotion-14::before {
4195
- content: '';
4196
- margin-bottom: -0.2055em;
4197
- display: block;
4198
- }
4199
-
4200
- .emotion-14::after {
4201
- content: '';
4202
- margin-top: -0.2275em;
4203
- display: block;
4204
- }
4205
- }
4206
-
4207
- .emotion-15 {
4208
- margin-bottom: 12px;
4209
- }
4210
-
4211
- .emotion-16 {
4212
- margin: 0;
4213
- color: #0A0A0A;
4214
- }
4215
-
4216
- .emotion-16 svg {
4217
- fill: #0A0A0A;
4218
- }
4219
-
4220
- @media screen and (max-width: 767px) {
4221
- .emotion-16 {
4222
- font-family: "DM Sans",sans-serif;
4223
- font-size: 14px;
4224
- line-height: 21px;
4225
- font-weight: 400;
4226
- letter-spacing: 0;
4227
- padding: 0.5px 0px;
4228
- }
4229
-
4230
- .emotion-16::before {
4231
- content: '';
4232
- margin-bottom: -0.391em;
4233
- display: block;
4234
- }
4235
-
4236
- .emotion-16::after {
4237
- content: '';
4238
- margin-top: -0.409em;
4239
- display: block;
4240
- }
4241
- }
4242
-
4243
- @media screen and (min-width: 768px) {
4244
- .emotion-16 {
4245
- font-family: "DM Sans",sans-serif;
4246
- font-size: 16px;
4247
- line-height: 24px;
4248
- font-weight: 400;
4249
- letter-spacing: 0;
4250
- padding: 0.5px 0px;
4251
- }
4252
-
4253
- .emotion-16::before {
4254
- content: '';
4255
- margin-bottom: -0.391em;
4256
- display: block;
4257
- }
4258
-
4259
- .emotion-16::after {
4260
- content: '';
4261
- margin-top: -0.409em;
4262
- display: block;
4263
- }
4264
- }
4265
-
4266
- .emotion-33 {
4267
- position: relative;
4268
- width: 100%;
4269
- display: block;
4270
- padding-top: 0;
4271
- height: auto;
4272
- width: 100%;
4273
- border-radius: 0;
4274
- }
4275
-
4276
- .emotion-34 {
4277
- opacity: 1;
4278
- display: block;
4279
- border-radius: inherit;
4280
- height: auto;
4281
- width: 100%;
4282
- -webkit-animation: fadeIn 300ms;
4283
- animation: fadeIn 300ms;
4284
- }
4285
-
4286
- .emotion-55 {
4287
- border-style: solid;
4288
- border-color: #DEDEDE;
4289
- border-width: 1px;
4290
- border-width: 0px;
4291
- margin: 0;
4292
- border-top-width: 1px;
4293
- width: 100%;
4294
- background: transparent;
4295
- border-color: transparent;
4296
- }
4297
-
4298
- <div
4299
- class="emotion-0"
4300
- >
4301
- <div
4302
- class="emotion-1"
4303
- >
4304
- <div
4305
- class="emotion-2"
4306
- >
4307
- <div
4308
- class="emotion-3"
4309
- data-testid="SECONDARY_4-Grid"
4310
- >
4311
- <div
4312
- class="emotion-4"
4313
- data-testid="titleTeaserVertical-0"
4314
- >
4315
- <div
4316
- class="emotion-5"
4317
- >
4318
- <div
4319
- class="emotion-6"
4320
- >
4321
- <picture
4322
- class="emotion-7"
4323
- >
4324
- <div
4325
- class="emotion-8"
4326
- />
4327
- <img
4328
- alt="image alt"
4329
- class="emotion-9"
4330
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
4331
- />
4332
- </picture>
4333
- </div>
4334
- <div
4335
- class="emotion-10"
4336
- >
4337
- <div
4338
- class="emotion-11"
4339
- >
4340
- <a
4341
- class="nk-card-link emotion-12"
4342
- href="catagory-one/demo-1/test-headline"
4343
- >
4344
- <div
4345
- class="emotion-13"
4346
- >
4347
- <h3
4348
- class="emotion-14"
4349
- >
4350
- test headline
4351
- </h3>
4352
- </div>
4353
- <div
4354
- class="emotion-15"
4355
- >
4356
- <p
4357
- class="emotion-16"
4358
- >
4359
- teaser test text
4360
- </p>
4361
- </div>
4362
- </a>
4363
- </div>
4364
- </div>
4365
- </div>
4366
- </div>
4367
- <div
4368
- class="emotion-4"
4369
- data-testid="titleTeaserVertical-1"
4370
- >
4371
- <div
4372
- class="emotion-5"
4373
- >
4374
- <div
4375
- class="emotion-6"
4376
- >
4377
- <picture
4378
- class="emotion-7"
4379
- >
4380
- <div
4381
- class="emotion-8"
4382
- />
4383
- <img
4384
- alt="image alt 2"
4385
- class="emotion-9"
4386
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
4387
- />
4388
- </picture>
4389
- </div>
4390
- <div
4391
- class="emotion-10"
4392
- >
4393
- <div
4394
- class="emotion-11"
4395
- >
4396
- <a
4397
- class="nk-card-link emotion-12"
4398
- href="catagory-two/demo-2/test-headline-2"
4399
- >
4400
- <div
4401
- class="emotion-13"
4402
- >
4403
- <h3
4404
- class="emotion-14"
4405
- >
4406
- test headline 2
4407
- </h3>
4408
- </div>
4409
- <div
4410
- class="emotion-15"
4411
- >
4412
- <p
4413
- class="emotion-16"
4414
- >
4415
- teaser test text 2
4416
- </p>
4417
- </div>
4418
- </a>
4419
- </div>
4420
- </div>
4421
- </div>
4422
- </div>
4423
- <div
4424
- class="emotion-4"
4425
- data-testid="titleTeaserVertical-2"
4426
- >
4427
- <div
4428
- class="emotion-5"
4429
- >
4430
- <div
4431
- class="emotion-6"
4432
- >
4433
- <picture
4434
- class="emotion-33"
4435
- >
4436
- <img
4437
- alt=""
4438
- class="emotion-34"
4439
- src=""
4440
- />
4441
- </picture>
4442
- </div>
4443
- <div
4444
- class="emotion-10"
4445
- >
4446
- <div
4447
- class="emotion-11"
4448
- >
4449
- <a
4450
- class="nk-card-link emotion-12"
4451
- href="catagory-three/demo-3/test-headline-3"
4452
- >
4453
- <div
4454
- class="emotion-13"
4455
- >
4456
- <h3
4457
- class="emotion-14"
4458
- >
4459
- test headline 3
4460
- </h3>
4461
- </div>
4462
- <div
4463
- class="emotion-15"
4464
- >
4465
- <p
4466
- class="emotion-16"
4467
- >
4468
- teaser test text 3
4469
- </p>
4470
- </div>
4471
- </a>
4472
- </div>
4473
- </div>
4474
- </div>
4475
- </div>
4476
- <div
4477
- class="emotion-4"
4478
- data-testid="titleTeaserVertical-3"
4479
- >
4480
- <div
4481
- class="emotion-5"
4482
- >
4483
- <div
4484
- class="emotion-6"
4485
- >
4486
- <picture
4487
- class="emotion-7"
4488
- >
4489
- <div
4490
- class="emotion-8"
4491
- />
4492
- <img
4493
- alt="image alt 3"
4494
- class="emotion-9"
4495
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
4496
- />
4497
- </picture>
4498
- </div>
4499
- <div
4500
- class="emotion-10"
4501
- >
4502
- <div
4503
- class="emotion-11"
4504
- >
4505
- <a
4506
- class="nk-card-link emotion-12"
4507
- href="catagory-four/demo-4/test-headline-4"
4508
- >
4509
- <div
4510
- class="emotion-13"
4511
- >
4512
- <h3
4513
- class="emotion-14"
4514
- >
4515
- test headline 4
4516
- </h3>
4517
- </div>
4518
- <div
4519
- class="emotion-15"
4520
- >
4521
- <p
4522
- class="emotion-16"
4523
- >
4524
- teaser test text 4
4525
- </p>
4526
- </div>
4527
- </a>
4528
- </div>
4529
- </div>
4530
- </div>
4531
- </div>
4532
- </div>
4533
- </div>
4534
- </div>
4535
- <hr
4536
- aria-hidden="true"
4537
- class="emotion-55"
4538
- data-testid="divider"
4539
- />
4540
- </div>
4541
- </DocumentFragment>
4542
- `;