@openeuropa/bcl-subscription 0.20.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.
@@ -0,0 +1,1213 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`OE - Subscription renders correctly 1`] = `
4
+ <jest>
5
+ <header
6
+ class="bcl-header bcl-header--eu"
7
+ >
8
+ <!-- navbar_settings -->
9
+ <nav
10
+ aria-label="Top Navigation"
11
+ class="w-100 shadow-sm navbar navbar-expand-lg navbar-light"
12
+ >
13
+ <div
14
+ class="container"
15
+ >
16
+ <a
17
+ class="navbar-brand"
18
+ href=""
19
+ >
20
+ <img
21
+ alt="desktop european union logo"
22
+ class="d-none d-lg-block"
23
+ src="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/standard-version/positive/logo-eu--en.svg"
24
+ />
25
+ <img
26
+ alt="mobile european union logo"
27
+ class="d-lg-none"
28
+ src="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/condensed-version/positive/logo-eu--en.svg"
29
+ />
30
+ </a>
31
+ <ul
32
+ class="nav"
33
+ >
34
+ <li
35
+ class="nav-item"
36
+ >
37
+ <a
38
+ class="text-center nav-link"
39
+ data-bs-target="#languageModal"
40
+ data-bs-toggle="modal"
41
+ href="#"
42
+ >
43
+ <svg
44
+ class="me-lg-2-5 bi icon--xs"
45
+ >
46
+ <use
47
+ xlink:href="/icons.svg#chat-left-dots-fill"
48
+ />
49
+ </svg>
50
+ <span
51
+ class="d-block d-lg-inline-block"
52
+ >
53
+ English
54
+ </span>
55
+ </a>
56
+ </li>
57
+ <li
58
+ class="nav-item"
59
+ >
60
+ <a
61
+ class="text-center nav-link"
62
+ data-bs-target="#loginModal"
63
+ data-bs-toggle="modal"
64
+ href="#"
65
+ >
66
+ <svg
67
+ class="me-lg-2-5 bi icon--xs"
68
+ >
69
+ <use
70
+ xlink:href="/icons.svg#person-fill"
71
+ />
72
+ </svg>
73
+ <span
74
+ class="d-block d-lg-inline-block"
75
+ >
76
+ Log in
77
+ </span>
78
+ </a>
79
+ </li>
80
+ </ul>
81
+ </div>
82
+ </nav>
83
+ <!-- project name -->
84
+ <!-- navbar -->
85
+ <nav
86
+ aria-label="main-navigation"
87
+ class="bcl-header__navbar navbar navbar-expand-lg navbar-dark"
88
+ >
89
+ <div
90
+ class="container"
91
+ >
92
+ <button
93
+ aria-controls="navbarNavDropdown"
94
+ aria-expanded="false"
95
+ aria-label="Toggle navigation"
96
+ class="navbar-toggler"
97
+ data-bs-target="#navbarNavDropdown"
98
+ data-bs-toggle="collapse"
99
+ type="button"
100
+ >
101
+ <span
102
+ class="navbar-toggler-icon"
103
+ />
104
+ </button>
105
+ <div
106
+ class="collapse navbar-collapse"
107
+ id="navbarNavDropdown"
108
+ >
109
+ <ul
110
+ class="me-auto navbar-nav"
111
+ >
112
+ <li
113
+ class="nav-item"
114
+ >
115
+ <a
116
+ aria-current="page"
117
+ aria-label="homepage"
118
+ class="nav-link active"
119
+ href="/example"
120
+ >
121
+ Home
122
+ </a>
123
+ </li>
124
+ <li
125
+ class="nav-item"
126
+ >
127
+ <a
128
+ class="nav-link"
129
+ href="/example"
130
+ >
131
+ Item 01
132
+ </a>
133
+ </li>
134
+ <li
135
+ class="nav-item"
136
+ >
137
+ <a
138
+ class="nav-link"
139
+ href="/example"
140
+ >
141
+ Item 02
142
+ </a>
143
+ </li>
144
+ <li
145
+ class="nav-item dropdown"
146
+ >
147
+ <a
148
+ aria-expanded="false"
149
+ class="nav-link dropdown-toggle"
150
+ data-bs-toggle="dropdown"
151
+ href="#"
152
+ id="navbarDropdownMenuLink"
153
+ role="button"
154
+ >
155
+ Dropdown link
156
+ </a>
157
+ <ul
158
+ aria-labelledby="navbarDropdownMenuLink"
159
+ class="dropdown-menu"
160
+ >
161
+ <li>
162
+ <a
163
+ class="dropdown-item"
164
+ href="/example.html"
165
+ >
166
+ Action
167
+ </a>
168
+ </li>
169
+ <li>
170
+ <a
171
+ class="dropdown-item"
172
+ href="/example.html"
173
+ >
174
+ Another action
175
+ </a>
176
+ </li>
177
+ <li>
178
+ <a
179
+ class="dropdown-item"
180
+ href="/example.html"
181
+ >
182
+ Something else here
183
+ </a>
184
+ </li>
185
+ </ul>
186
+ </li>
187
+ </ul>
188
+ <form
189
+ class="d-flex mt-3 mt-lg-0"
190
+ >
191
+ <label
192
+ class="form-label visually-hidden"
193
+ for="inlineFormInputGroupSearch"
194
+ >
195
+ Search
196
+ </label>
197
+ <input
198
+ class="border-start-0 rounded-0 rounded-start form-control"
199
+ id="inlineFormInputGroupSearch"
200
+ placeholder="Search"
201
+ required="true"
202
+ type="text"
203
+ />
204
+ <button
205
+ class="border-start-0 rounded-0 rounded-end btn btn-light btn-md"
206
+ type="button"
207
+ >
208
+ <span
209
+ class="visually-hidden"
210
+ >
211
+ search
212
+ </span>
213
+ <svg
214
+ class="bi icon--fluid"
215
+ >
216
+ <use
217
+ xlink:href="/icons.svg#search"
218
+ />
219
+ </svg>
220
+ </button>
221
+ </form>
222
+ </div>
223
+ </div>
224
+ </nav>
225
+ <!-- breadcrumbs -->
226
+ <div
227
+ class="container"
228
+ >
229
+ <nav
230
+ aria-label="breadcrumb"
231
+ class="mt-3"
232
+ >
233
+ <ol
234
+ class="breadcrumb"
235
+ >
236
+ <li
237
+ class="breadcrumb-item d-none d-md-block"
238
+ >
239
+ <a
240
+ aria-label="homepage"
241
+ href="/example"
242
+ >
243
+ Home
244
+ </a>
245
+ </li>
246
+ <li
247
+ class="breadcrumb-item d-none d-md-block"
248
+ >
249
+ <a
250
+ href="/example"
251
+ >
252
+ European Union
253
+ </a>
254
+ </li>
255
+ <li
256
+ class="breadcrumb-item"
257
+ >
258
+ <a
259
+ href="/example"
260
+ >
261
+ <svg
262
+ class="d-md-none ms-0 me-2 me-2-5 bi icon--s"
263
+ >
264
+ <use
265
+ xlink:href="/icons.svg#arrow-left"
266
+ />
267
+ </svg>
268
+ About the European Union
269
+ </a>
270
+ </li>
271
+ <li
272
+ aria-current="page"
273
+ class="breadcrumb-item d-none d-md-block active"
274
+ >
275
+ News
276
+ </li>
277
+ </ol>
278
+ </nav>
279
+ </div>
280
+ </header>
281
+ <div
282
+ aria-hidden="true"
283
+ aria-label="loginModalLabel"
284
+ class="modal fade"
285
+ id="loginModal"
286
+ tabindex="-1"
287
+ >
288
+ <div
289
+ class="modal-dialog"
290
+ >
291
+ <div
292
+ class="modal-content"
293
+ >
294
+ <div
295
+ class="modal-header"
296
+ >
297
+ <h5
298
+ class="modal-title"
299
+ id="loginModalLabel"
300
+ >
301
+ Log in
302
+ </h5>
303
+ <button
304
+ aria-label="Close"
305
+ class="btn-close"
306
+ data-bs-dismiss="modal"
307
+ type="button"
308
+ />
309
+ </div>
310
+ <div
311
+ class="modal-body"
312
+ >
313
+ <h5>
314
+ Disclaimer 1
315
+ </h5>
316
+ <p>
317
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan eget orci eu aliquet. Suspendisse potenti. Integer volutpat, nisl et placerat tincidunt
318
+ </p>
319
+ <h5>
320
+ Disclaimer 2
321
+ </h5>
322
+ <p>
323
+ Duis bibendum tristique lobortis. Nam luctus nisi sit amet turpis faucibus, ut dapibus elit sollicitudin. Phasellus a massa magna. Nullam ac imperdiet leo.
324
+ </p>
325
+ </div>
326
+ <div
327
+ class="modal-footer"
328
+ >
329
+ <button
330
+ class="btn btn-secondary"
331
+ data-bs-dismiss="modal"
332
+ type="button"
333
+ >
334
+ Close
335
+ </button>
336
+ <button
337
+ class="btn btn-primary"
338
+ type="button"
339
+ >
340
+ Access EU login
341
+ </button>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ <div
347
+ aria-hidden="true"
348
+ aria-label="languageModalLabel"
349
+ class="bcl-language-list-modal bcl-language-list-modal--neutral modal fade"
350
+ id="languageModal"
351
+ tabindex="-1"
352
+ >
353
+ <div
354
+ class="modal-dialog modal-xl modal-fullscreen-md-down"
355
+ >
356
+ <div
357
+ class="modal-content"
358
+ >
359
+ <div
360
+ class="modal-header"
361
+ >
362
+ <div
363
+ class="d-flex align-items-center"
364
+ >
365
+ <svg
366
+ class="bi icon--s"
367
+ >
368
+ <use
369
+ xlink:href="/icons.svg#globe2"
370
+ />
371
+ </svg>
372
+ <h5
373
+ class="mb-0 ms-2"
374
+ >
375
+ Select your language
376
+ </h5>
377
+ </div>
378
+ <button
379
+ aria-label="Close"
380
+ class="btn-close"
381
+ data-bs-dismiss="modal"
382
+ type="button"
383
+ />
384
+ </div>
385
+ <div
386
+ class="modal-body"
387
+ >
388
+ <div
389
+ class="bcl-language-list bcl-language-list--neutral"
390
+ >
391
+ <div
392
+ class="main pt-4"
393
+ >
394
+ <div
395
+ class="pb-2"
396
+ >
397
+ <div
398
+ class="row"
399
+ >
400
+ <div
401
+ class="col-12 col-md"
402
+ >
403
+ <a
404
+ class="w-100 mb-2-5 btn justify-content-start"
405
+ href="#"
406
+ hreflang="bg"
407
+ lang="bg"
408
+ >
409
+ български
410
+ </a>
411
+ <a
412
+ class="w-100 mb-2-5 btn justify-content-start"
413
+ href="#"
414
+ hreflang="es"
415
+ lang="es"
416
+ >
417
+ español
418
+ </a>
419
+ <a
420
+ class="w-100 mb-2-5 btn justify-content-start"
421
+ href="#"
422
+ hreflang="cs"
423
+ lang="cs"
424
+ >
425
+ čeština
426
+ </a>
427
+ <a
428
+ class="w-100 mb-2-5 btn justify-content-start"
429
+ href="#"
430
+ hreflang="da"
431
+ lang="da"
432
+ >
433
+ dansk
434
+ </a>
435
+ <a
436
+ class="w-100 mb-2-5 btn justify-content-start"
437
+ href="#"
438
+ hreflang="de"
439
+ lang="de"
440
+ >
441
+ Deutsch
442
+ </a>
443
+ <a
444
+ class="w-100 mb-2-5 btn justify-content-start"
445
+ href="#"
446
+ hreflang="et"
447
+ lang="et"
448
+ >
449
+ eesti
450
+ </a>
451
+ <a
452
+ class="w-100 mb-2-5 btn justify-content-start"
453
+ href="#"
454
+ hreflang="el"
455
+ lang="el"
456
+ >
457
+ ελληνικά
458
+ </a>
459
+ <a
460
+ class="w-100 mb-2-5 btn selected justify-content-between"
461
+ href="#"
462
+ hreflang="en"
463
+ lang="en"
464
+ >
465
+ English
466
+ <svg
467
+ class="ms-2-5 bi icon--s"
468
+ >
469
+ <use
470
+ xlink:href="/icons.svg#check2"
471
+ />
472
+ </svg>
473
+ </a>
474
+ <a
475
+ class="w-100 mb-2-5 btn justify-content-start"
476
+ href="#"
477
+ hreflang="fr"
478
+ lang="fr"
479
+ >
480
+ français
481
+ </a>
482
+ <a
483
+ class="w-100 mb-2-5 btn justify-content-start"
484
+ href="#"
485
+ hreflang="ga"
486
+ lang="ga"
487
+ >
488
+ Gaeilge
489
+ </a>
490
+ <a
491
+ class="w-100 mb-2-5 btn justify-content-start"
492
+ href="#"
493
+ hreflang="hr"
494
+ lang="hr"
495
+ >
496
+ hrvatski
497
+ </a>
498
+ <a
499
+ class="w-100 mb-2-5 btn justify-content-start"
500
+ href="#"
501
+ hreflang="it"
502
+ lang="it"
503
+ >
504
+ italiano
505
+ </a>
506
+ </div>
507
+ <div
508
+ class="col-12 col-md"
509
+ >
510
+ <a
511
+ class="w-100 mb-2-5 btn justify-content-start"
512
+ href="#"
513
+ hreflang="lv"
514
+ lang="lv"
515
+ >
516
+ latviešu
517
+ </a>
518
+ <a
519
+ class="w-100 mb-2-5 btn justify-content-start"
520
+ href="#"
521
+ hreflang="lt"
522
+ lang="lt"
523
+ >
524
+ lietuvių
525
+ </a>
526
+ <a
527
+ class="w-100 mb-2-5 btn justify-content-start"
528
+ href="#"
529
+ hreflang="hu"
530
+ lang="hu"
531
+ >
532
+ magyar
533
+ </a>
534
+ <a
535
+ class="w-100 mb-2-5 btn justify-content-start"
536
+ href="#"
537
+ hreflang="mt"
538
+ lang="mt"
539
+ >
540
+ Malti
541
+ </a>
542
+ <a
543
+ class="w-100 mb-2-5 btn justify-content-start"
544
+ href="#"
545
+ hreflang="nl"
546
+ lang="nl"
547
+ >
548
+ Nederlands
549
+ </a>
550
+ <a
551
+ class="w-100 mb-2-5 btn justify-content-start"
552
+ href="#"
553
+ hreflang="pl"
554
+ lang="pl"
555
+ >
556
+ polski
557
+ </a>
558
+ <a
559
+ class="w-100 mb-2-5 btn justify-content-start"
560
+ href="#"
561
+ hreflang="pt"
562
+ lang="pt"
563
+ >
564
+ português
565
+ </a>
566
+ <a
567
+ class="w-100 mb-2-5 btn justify-content-start"
568
+ href="#"
569
+ hreflang="ro"
570
+ lang="ro"
571
+ >
572
+ română
573
+ </a>
574
+ <a
575
+ class="w-100 mb-2-5 btn justify-content-start"
576
+ href="#"
577
+ hreflang="sk"
578
+ lang="sk"
579
+ >
580
+ slovenčina
581
+ </a>
582
+ <a
583
+ class="w-100 mb-2-5 btn justify-content-start"
584
+ href="#"
585
+ hreflang="sl"
586
+ lang="sl"
587
+ >
588
+ slovenščina
589
+ </a>
590
+ <a
591
+ class="w-100 mb-2-5 btn justify-content-start"
592
+ href="#"
593
+ hreflang="fi"
594
+ lang="fi"
595
+ >
596
+ suomi
597
+ </a>
598
+ <a
599
+ class="w-100 mb-2-5 btn justify-content-start"
600
+ href="#"
601
+ hreflang="sv"
602
+ lang="sv"
603
+ >
604
+ svenska
605
+ </a>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ </div>
610
+ </div>
611
+ </div>
612
+ </div>
613
+ </div>
614
+ </div>
615
+ <main>
616
+ <div
617
+ class="bcl-content-banner pt-lg-4-75 pb-md-4-75 pb-4 pt-4 bg-lighter"
618
+ >
619
+ <div
620
+ class="container"
621
+ >
622
+ <div
623
+ class="row"
624
+ >
625
+ <div
626
+ class="bg-transparent border-0 card"
627
+ >
628
+ <div
629
+ class="row"
630
+ >
631
+ <div
632
+ class="col-md-4 col-lg-3"
633
+ >
634
+ <img
635
+ alt="alt img"
636
+ class="card-img-top rounded-1"
637
+ src="https://picsum.photos/255/255?random=6"
638
+ />
639
+ </div>
640
+ <div
641
+ class="col-md-8 col-lg-9 col-xxl-8"
642
+ >
643
+ <div
644
+ class="card-body pt-md-0 px-0 px-md-3 pb-0"
645
+ >
646
+ <h2
647
+ class="fw-bold card-title"
648
+ >
649
+ This is the title of this page
650
+ </h2>
651
+ <div
652
+ class="mb-4 mt-4"
653
+ >
654
+ <span
655
+ class="text-muted me-3"
656
+ >
657
+ 8 hours ago
658
+ </span>
659
+ </div>
660
+ <p>
661
+
662
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec.
663
+ Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet.
664
+ Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus.
665
+ Duis tristique fringilla magna, eu egestas dolor molestie non.
666
+
667
+ </p>
668
+ <div
669
+ class="mt-2-5"
670
+ >
671
+ <span
672
+ class="mb-2 me-2 badge rounded-pill badge-outline-primary"
673
+ >
674
+ Category 1
675
+ </span>
676
+ <span
677
+ class="mb-2 badge rounded-pill badge-outline-primary"
678
+ >
679
+ Category 2
680
+ </span>
681
+ </div>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ </div>
686
+ <div
687
+ class="d-flex justify-content-end"
688
+ >
689
+ <button
690
+ class="me-3 btn btn-outline-primary btn-md"
691
+ type="button"
692
+ >
693
+ <svg
694
+ class="me-2-5 bi icon--fluid"
695
+ >
696
+ <use
697
+ xlink:href="/icons.svg#printer-fill"
698
+ />
699
+ </svg>
700
+ Print
701
+ </button>
702
+ <button
703
+ class="btn btn-outline-primary btn-md"
704
+ data-bs-target="#subscribeModal"
705
+ data-bs-toggle="modal"
706
+ type="button"
707
+ >
708
+ <svg
709
+ class="me-2-5 bi icon--fluid"
710
+ >
711
+ <use
712
+ xlink:href="/icons.svg#envelope-fill"
713
+ />
714
+ </svg>
715
+ Subscribe
716
+ </button>
717
+ </div>
718
+ </div>
719
+ </div>
720
+ </div>
721
+ <div
722
+ class="container mt-md-4-75 mt-4"
723
+ >
724
+ <div
725
+ class="row"
726
+ >
727
+ <div
728
+ class="col-12 col-lg-3"
729
+ >
730
+ <nav
731
+ class="d-none d-lg-block bcl-inpage-navigation position-sticky"
732
+ id="bcl-inpage-navigation"
733
+ >
734
+ <h5>
735
+ Page content
736
+ </h5>
737
+ <ul
738
+ class="nav nav-pills flex-column"
739
+ >
740
+ <li
741
+ class="nav-item"
742
+ >
743
+ <a
744
+ class="nav-link"
745
+ href="#content"
746
+ >
747
+ Content
748
+ </a>
749
+ </li>
750
+ <li
751
+ class="nav-item"
752
+ >
753
+ <a
754
+ class="nav-link"
755
+ href="#subheading"
756
+ >
757
+ Subheading
758
+ </a>
759
+ </li>
760
+ </ul>
761
+ </nav>
762
+ </div>
763
+ <div
764
+ class="col-12 col-lg-9 col-xxl-8"
765
+ >
766
+ <p
767
+ id="content"
768
+ >
769
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper, a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet, posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel. Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
770
+ </p>
771
+ <p>
772
+ Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras facilisis enim non nisi hendrerit laoreet. Vestibulum id facilisis augue, vitae faucibus justo. Etiam congue malesuada urna vitae suscipit. Mauris a varius leo. Nulla vel facilisis lacus. Suspendisse semper velit sit amet purus egestas, sit amet ullamcorper enim egestas. Vestibulum at lacus at purus ornare auctor nec consequat velit. Pellentesque iaculis sit amet nulla at rutrum.
773
+ </p>
774
+ <ul>
775
+ <li>
776
+ Vestibulum ante ipsum primis in faucibus
777
+ </li>
778
+ <li>
779
+ Lorem ipsum dolor sit amet
780
+ </li>
781
+ <li>
782
+ Duis ac augue sed tortor elementum dignissim
783
+ </li>
784
+ </ul>
785
+ <h3
786
+ class="fw-bold my-4"
787
+ id="subheading"
788
+ >
789
+ Sub heading
790
+ </h3>
791
+ <p>
792
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper, a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet, posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel. Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
793
+ </p>
794
+ <p>
795
+ Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras facilisis enim non nisi hendrerit laoreet. Vestibulum id facilisis augue, vitae faucibus justo. Etiam congue malesuada urna vitae suscipit. Mauris a varius leo. Nulla vel facilisis lacus. Suspendisse semper velit sit amet purus egestas, sit amet ullamcorper enim egestas. Vestibulum at lacus at purus ornare auctor nec consequat velit. Pellentesque iaculis sit amet nulla at rutrum.
796
+ </p>
797
+ <div
798
+ class="bg-light px-4-5 pt-4 pb-4-5"
799
+ >
800
+ <div
801
+ class="fs-2 fw-normal"
802
+ >
803
+ Subscribe
804
+ </div>
805
+ <p
806
+ class="fw-bold"
807
+ >
808
+ Get notified lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
809
+ </p>
810
+ <div
811
+ class="pb-2"
812
+ >
813
+ <button
814
+ class="btn btn-secondary btn-lg"
815
+ data-bs-target="#subscribeModal"
816
+ data-bs-toggle="modal"
817
+ type="button"
818
+ >
819
+ Subscribe
820
+ <svg
821
+ class="ms-2-5 bi icon--fluid"
822
+ >
823
+ <use
824
+ xlink:href="/icons.svg#chevron-right"
825
+ />
826
+ </svg>
827
+ </button>
828
+ </div>
829
+ </div>
830
+ <div
831
+ aria-hidden="true"
832
+ aria-label="subscribeModalLabel"
833
+ class="modal fade"
834
+ id="subscribeModal"
835
+ tabindex="-1"
836
+ >
837
+ <div
838
+ class="modal-dialog"
839
+ >
840
+ <div
841
+ class="modal-content"
842
+ >
843
+ <div
844
+ class="modal-header"
845
+ >
846
+ <h5
847
+ class="modal-title"
848
+ >
849
+ Subscribe
850
+ </h5>
851
+ <button
852
+ aria-label="Close"
853
+ class="btn-close"
854
+ data-bs-dismiss="modal"
855
+ type="button"
856
+ />
857
+ </div>
858
+ <div
859
+ class="success-alert d-none mb-0 alert alert-success d-flex align-items-center fade show"
860
+ role="alert"
861
+ >
862
+ <svg
863
+ class="flex-shrink-0 me-3 mt-1 align-self-start bi icon--s"
864
+ >
865
+ <use
866
+ xlink:href="/icons.svg#check-circle-fill"
867
+ />
868
+ </svg>
869
+ <div
870
+ class="alert-content flex-grow-1"
871
+ >
872
+ <h4
873
+ class="alert-heading"
874
+ >
875
+ Thank you!
876
+ </h4>
877
+ Your subscription has been successfully registered. You can now close this dialog.
878
+ </div>
879
+ </div>
880
+ <div
881
+ class="error-alert d-none mb-0 alert alert-danger d-flex align-items-center fade show"
882
+ role="alert"
883
+ >
884
+ <svg
885
+ class="flex-shrink-0 me-3 mt-1 align-self-start bi icon--s"
886
+ >
887
+ <use
888
+ xlink:href="/icons.svg#dash-circle-fill"
889
+ />
890
+ </svg>
891
+ <div
892
+ class="alert-content flex-grow-1"
893
+ >
894
+ <h4
895
+ class="alert-heading"
896
+ >
897
+ Sorry!
898
+ </h4>
899
+ There was an error!
900
+ <hr
901
+ class="d-none d-md-block"
902
+ />
903
+ <p
904
+ class="d-none d-md-block mb-0"
905
+ >
906
+ Please verify your e-mail address and agree with the privacy statement.
907
+ </p>
908
+ </div>
909
+ </div>
910
+ <div
911
+ class="modal-body"
912
+ >
913
+ <form
914
+ class="needs-validation"
915
+ novalidate="true"
916
+ onsubmit="return false;"
917
+ >
918
+ <fieldset>
919
+ <legend
920
+ class="h6 fw-normal mb-0"
921
+ >
922
+ <p>
923
+ Please enter your information & preference to receive the wished information in your mailbox. Your email will not be shared with anyone.
924
+ </p>
925
+ </legend>
926
+ </fieldset>
927
+ <div
928
+ class="mb-3"
929
+ >
930
+ <label
931
+ class="form-label"
932
+ >
933
+ E-mail
934
+ </label>
935
+ <input
936
+ class="form-control"
937
+ placeholder="Type in your e-mail address"
938
+ required="true"
939
+ type="email"
940
+ />
941
+ <div
942
+ class="invalid-feedback"
943
+ >
944
+ Please enter a valid e-mail address
945
+ </div>
946
+ </div>
947
+ <div
948
+ class="mb-3"
949
+ >
950
+ <label
951
+ class="form-label"
952
+ for="language-select"
953
+ >
954
+ Languages
955
+ </label>
956
+ <select
957
+ class="form-select"
958
+ id="language-select"
959
+ required="true"
960
+ >
961
+ <option
962
+ disabled=""
963
+ hidden=""
964
+ selected=""
965
+ value=""
966
+ >
967
+ Please select a language
968
+ </option>
969
+ <option
970
+ value="1"
971
+ >
972
+ a select option
973
+ </option>
974
+ <option
975
+ value="2"
976
+ >
977
+ another select option
978
+ </option>
979
+ <option
980
+ value="3"
981
+ >
982
+ another option
983
+ </option>
984
+ <option
985
+ value="4"
986
+ >
987
+ last option
988
+ </option>
989
+ </select>
990
+ <div
991
+ class="invalid-feedback"
992
+ >
993
+ Please select a language
994
+ </div>
995
+ </div>
996
+ <div
997
+ class="mb-3"
998
+ >
999
+ <div
1000
+ class="form-check"
1001
+ >
1002
+ <input
1003
+ class="form-check-input"
1004
+ id="exampleInputCheck1"
1005
+ required="true"
1006
+ type="checkbox"
1007
+ />
1008
+ <label
1009
+ class="form-check-label"
1010
+ for="exampleInputCheck1"
1011
+ >
1012
+ By checking this box, I confirm that I want to register for this service, and I agree with the
1013
+ <a
1014
+ href="/example.html"
1015
+ >
1016
+ privacy statement
1017
+ </a>
1018
+ </label>
1019
+ <div
1020
+ class="invalid-feedback"
1021
+ >
1022
+ Please check the required checkbox.
1023
+ </div>
1024
+ </div>
1025
+ </div>
1026
+ </form>
1027
+ </div>
1028
+ <div
1029
+ class="modal-footer"
1030
+ >
1031
+ <div
1032
+ class="text-align-end"
1033
+ >
1034
+ <button
1035
+ class="btn btn-light"
1036
+ data-bs-dismiss="modal"
1037
+ >
1038
+ Close
1039
+ </button>
1040
+ <button
1041
+ class="btn btn-primary form-submit ms-4"
1042
+ >
1043
+ Subscribe now
1044
+ </button>
1045
+ </div>
1046
+ </div>
1047
+ </div>
1048
+ </div>
1049
+ </div>
1050
+ </div>
1051
+ </div>
1052
+ </div>
1053
+ </main>
1054
+ <footer
1055
+ class="mt-4 bcl-footer bcl-footer--neutral"
1056
+ >
1057
+ <div
1058
+ class="container"
1059
+ >
1060
+ <div
1061
+ class="pt-4 pt-lg-5 row"
1062
+ >
1063
+ <div
1064
+ class="col-12 col-lg-4"
1065
+ >
1066
+ <p
1067
+ class="fw-bold mb-2"
1068
+ >
1069
+ [Project name]
1070
+ </p>
1071
+ <p>
1072
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in sagittis dolor.
1073
+ </p>
1074
+ </div>
1075
+ <div
1076
+ class="col-12 col-lg-4 pb-4 pb-lg-0"
1077
+ >
1078
+ <p
1079
+ class="fw-bold border-bottom pb-2 mb-2"
1080
+ >
1081
+ Contact [project name]
1082
+ </p>
1083
+ <p>
1084
+ Contact information of the DG
1085
+ </p>
1086
+ <p
1087
+ class="fw-bold border-bottom pb-2 mt-3 mb-2"
1088
+ >
1089
+ Follow us on social media
1090
+ </p>
1091
+ <a
1092
+ class="d-block standalone mb-1"
1093
+ href="#"
1094
+ >
1095
+ <svg
1096
+ class="me-2 me-2-5 bi icon--xs"
1097
+ >
1098
+ <use
1099
+ xlink:href="/icons.svg#facebook"
1100
+ />
1101
+ </svg>
1102
+ Facebook
1103
+ </a>
1104
+ <a
1105
+ class="d-block standalone mb-1"
1106
+ href="#"
1107
+ >
1108
+ <svg
1109
+ class="me-2 me-2-5 bi icon--xs"
1110
+ >
1111
+ <use
1112
+ xlink:href="/icons.svg#twitter"
1113
+ />
1114
+ </svg>
1115
+ Twitter
1116
+ </a>
1117
+ <a
1118
+ class="d-block standalone mb-1"
1119
+ href="#"
1120
+ >
1121
+ <svg
1122
+ class="me-2 me-2-5 bi icon--xs"
1123
+ >
1124
+ <use
1125
+ xlink:href="/icons.svg#linkedin"
1126
+ />
1127
+ </svg>
1128
+ Linkedin
1129
+ </a>
1130
+ </div>
1131
+ <div
1132
+ class="col-12 col-lg-4"
1133
+ >
1134
+ <p
1135
+ class="fw-bold border-bottom pb-2 mb-2"
1136
+ >
1137
+ About us
1138
+ </p>
1139
+ <p>
1140
+ Information about the DG
1141
+ </p>
1142
+ <p
1143
+ class="fw-bold border-bottom pb-2 mb-2"
1144
+ >
1145
+ Optional links
1146
+ </p>
1147
+ <a
1148
+ class="d-block standalone mb-1"
1149
+ href="#"
1150
+ >
1151
+ Link
1152
+ </a>
1153
+ <a
1154
+ class="d-block standalone mb-1"
1155
+ href="#"
1156
+ >
1157
+ Link
1158
+ </a>
1159
+ <a
1160
+ class="d-block standalone mb-1"
1161
+ href="#"
1162
+ >
1163
+ Link
1164
+ </a>
1165
+ <a
1166
+ class="d-block standalone mb-1"
1167
+ href="#"
1168
+ >
1169
+ Link
1170
+ </a>
1171
+ </div>
1172
+ </div>
1173
+ <div
1174
+ class="pb-4 pb-lg-5 mt-4 mt-lg-5 bcl-footer__bordered-row row"
1175
+ >
1176
+ <div
1177
+ class="col-12 col-lg-4"
1178
+ >
1179
+ <p
1180
+ class="fw-bold pb-2 mb-2"
1181
+ >
1182
+ More information on:
1183
+ </p>
1184
+ <a
1185
+ class="d-block standalone mb-1"
1186
+ href="#"
1187
+ >
1188
+ Link
1189
+ </a>
1190
+ <a
1191
+ class="d-block standalone mb-1"
1192
+ href="#"
1193
+ >
1194
+ Link
1195
+ </a>
1196
+ <a
1197
+ class="d-block standalone mb-1"
1198
+ href="#"
1199
+ >
1200
+ Link
1201
+ </a>
1202
+ <a
1203
+ class="d-block standalone mb-1"
1204
+ href="#"
1205
+ >
1206
+ Link
1207
+ </a>
1208
+ </div>
1209
+ </div>
1210
+ </div>
1211
+ </footer>
1212
+ </jest>
1213
+ `;