mp-design-system 1.2.62 → 1.2.64

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 (47) hide show
  1. package/dist/build/js/app.js +22 -2
  2. package/dist/build/scss/library.css +1 -2
  3. package/dist/build/scss/main.css +1 -2
  4. package/package.json +12 -6
  5. package/src/_includes/components/card/card.scss +1 -0
  6. package/src/_includes/components/card/product-card.njk +8 -0
  7. package/src/_includes/components/card-new/card-new.config.js +95 -0
  8. package/src/_includes/components/card-new/card-new.md +0 -0
  9. package/src/_includes/components/card-new/card-new.njk +169 -0
  10. package/src/_includes/components/card-new/card-new.scss +156 -0
  11. package/src/_includes/components/card-new/macro.njk +5 -0
  12. package/src/_includes/components/event-card/event-card.config.js +108 -0
  13. package/src/_includes/components/event-card/event-card.njk +1 -0
  14. package/src/_includes/components/event-card/event-card.scss +49 -0
  15. package/src/_includes/components/event-card/macro.njk +5 -0
  16. package/src/_includes/components/product-card/macro.njk +5 -0
  17. package/src/_includes/components/product-card/product-card.config.js +84 -0
  18. package/src/_includes/components/product-card/product-card.njk +1 -0
  19. package/src/_includes/components/product-card/product-card.scss +36 -0
  20. package/src/_includes/components/resource-card/macro.njk +5 -0
  21. package/src/_includes/components/resource-card/resource-card.config.js +59 -0
  22. package/src/_includes/components/resource-card/resource-card.njk +1 -0
  23. package/src/_includes/components/resource-card/resource-card.scss +0 -0
  24. package/src/_includes/components/twi/twi.scss +14 -0
  25. package/src/_includes/includes/system-scripts.njk +13 -0
  26. package/src/_includes/layout.njk +1 -1
  27. package/src/_includes/system-home-page.njk +1 -1
  28. package/src/assets/scss/components/index.scss +3 -0
  29. package/src/assets/scss/library.scss +94 -67
  30. package/src/assets/scss/objects/button-wrap.scss +18 -0
  31. package/src/assets/scss/objects/clickable-parent.scss +3 -0
  32. package/src/assets/scss/objects/index.scss +2 -0
  33. package/src/assets/scss/objects/prose.scss +5 -0
  34. package/src/assets/scss/tools/index.scss +1 -0
  35. package/src/components-full-pages.njk +2 -3
  36. package/src/components-pages.njk +5 -4
  37. package/src/index.njk +1 -86
  38. package/src/prototype/events-hub.njk +10 -9
  39. package/src/prototype/index.njk +330 -201
  40. package/src/prototype/range.njk +23 -12
  41. package/dist/build/arc.abe174a6.svg +0 -1
  42. package/dist/build/concentric.465e6b4d.svg +0 -1
  43. package/dist/build/crystal.8300dbe3.svg +0 -1
  44. package/dist/build/dots-pattern.1bae0e23.svg +0 -1
  45. package/dist/build/js/app.js.map +0 -1
  46. package/dist/build/scss/library.css.map +0 -1
  47. package/dist/build/scss/main.css.map +0 -1
@@ -16,6 +16,11 @@ tags: prototype
16
16
  {% from "components/option-list/macro.njk" import optionList %}
17
17
  {% from "components/hero/macro.njk" import hero %}
18
18
 
19
+ {% from "components/card-new/macro.njk" import cardNew %}
20
+ {% from "components/event-card/macro.njk" import eventCardNew %}
21
+ {% from "components/product-card/macro.njk" import productCardNew %}
22
+ {% from "components/resource-card/macro.njk" import resourceCardNew %}
23
+
19
24
  {% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
20
25
 
21
26
  {% extends "page.njk" %}
@@ -62,60 +67,72 @@ tags: prototype
62
67
  }) }}
63
68
  </div>
64
69
  <div class="o-grid o-grid--of-four o-grid--swipeable">
65
- {{ industryCard({
66
- title: 'Mining and minerals',
67
- link: '#',
68
- description: 'Explore the world of Iron, Base metals, Bauxite, Clay, Coal, Industrial Minerals and Precious Metals in 3D.',
70
+ {{ cardNew({
71
+ theme: 'bordered',
72
+ header: {
73
+ title: 'Mining and minerals'
74
+ },
75
+ body: {
76
+ content: '<p>Explore the world of Iron, Base metals, Bauxite, Clay, Coal, Industrial Minerals and Precious Metals in 3D.</p>'
77
+ },
69
78
  image: {
70
79
  src: '/static/img/sector-1.jpg',
71
80
  alt: ''
72
81
  },
73
- footer: {
74
- button: {
75
- label: 'View industry'
76
- }
82
+ link: {
83
+ label: 'View industry',
84
+ url: '#'
77
85
  }
78
86
  }) }}
79
- {{ industryCard({
80
- title: 'Pharmaceuticals',
81
- link: '#',
82
- description: 'We understand the role our technologies play in providing the physicochemical insight to speed product development.',
87
+ {{ cardNew({
88
+ theme: 'bordered',
89
+ header: {
90
+ title: 'Pharmaceuticals'
91
+ },
92
+ body: {
93
+ content: '<p>We understand the role our technologies play in providing the physicochemical insight to speed product development.</p>'
94
+ },
83
95
  image: {
84
96
  src: '/static/img/sector-2.jpg',
85
97
  alt: ''
86
98
  },
87
- footer: {
88
- button: {
89
- label: 'View industry'
90
- }
99
+ link: {
100
+ label: 'View industry',
101
+ url: '#'
91
102
  }
92
103
  }) }}
93
- {{ industryCard({
94
- title: 'Metal analysis',
95
- link: '#',
96
- description: 'We help you to meet demand, become more sustainable, and to make processes easier, cleaner and safer.',
104
+ {{ cardNew({
105
+ theme: 'bordered',
106
+ header: {
107
+ title: 'Metal analysis'
108
+ },
109
+ body: {
110
+ content: '<p>We help you to meet demand, become more sustainable, and to make processes easier, cleaner and safer.</p>'
111
+ },
97
112
  image: {
98
113
  src: '/static/img/sector-3.jpg',
99
114
  alt: ''
100
115
  },
101
- footer: {
102
- button: {
103
- label: 'View industry'
104
- }
116
+ link: {
117
+ label: 'View industry',
118
+ url: '#'
105
119
  }
106
120
  }) }}
107
- {{ industryCard({
108
- title: 'Battery and energy',
109
- link: '#',
110
- description: 'Battery and renewable energy storage: empower your research and production with the best analytical solutions.',
121
+ {{ cardNew({
122
+ theme: 'bordered',
123
+ header: {
124
+ title: 'Battery and energy'
125
+ },
126
+ body: {
127
+ content: '<p>Battery and renewable energy storage: empower your research and production with the best analytical solutions.</p>'
128
+ },
111
129
  image: {
112
130
  src: '/static/img/sector-4.jpg',
113
131
  alt: ''
114
132
  },
115
- footer: {
116
- button: {
117
- label: 'View industry'
118
- }
133
+ link: {
134
+ label: 'View industry',
135
+ url: '#'
119
136
  }
120
137
  }) }}
121
138
  </div>
@@ -147,9 +164,16 @@ tags: prototype
147
164
  <div class="c-tabs__content">
148
165
  <div id="tab-product-1" class="c-tab c-tab--active">
149
166
  <div class="o-grid o-grid--of-four o-grid--swipeable">
150
- {{ productCard({
151
- title: 'Zetasizer Advance range',
152
- description: 'Zetasizer Advance is the successor to the highly successful and market-leading Zetasizer Nano.',
167
+ {{ productCardNew({
168
+ type: 'product',
169
+ theme: 'bordered',
170
+ size: 'medium',
171
+ header: {
172
+ title: 'Zetasizer Advance range'
173
+ },
174
+ body: {
175
+ content: '<p>Zetasizer Advance is the successor to the highly successful and market-leading Zetasizer Nano.</p>'
176
+ },
153
177
  image: {
154
178
  src: '/static/img/products-1.jpg',
155
179
  alt: 'Zetasizer Advance range'
@@ -157,21 +181,30 @@ tags: prototype
157
181
  footer: {
158
182
  buttons: [
159
183
  {
160
- link: '#',
184
+ link: 'range',
161
185
  label: 'View range',
186
+ colour: 'outline-green',
162
187
  classes: 'c-button--small'
163
188
  },
164
189
  {
165
- link: '#',
190
+ link: 'request-a-quote',
166
191
  label: 'Request a quote',
192
+ colour: 'green',
167
193
  classes: 'c-button--small'
168
194
  }
169
195
  ]
170
196
  }
171
197
  }) }}
172
- {{ productCard({
173
- title: 'Mastersizer range',
174
- description: 'From assessing product uniformity and solubility, through to optimising packing density.',
198
+ {{ productCardNew({
199
+ type: 'product',
200
+ theme: 'bordered',
201
+ size: 'medium',
202
+ header: {
203
+ title: 'Mastersizer range'
204
+ },
205
+ body: {
206
+ content: '<p>From assessing product uniformity and solubility, through to optimising packing density.</p>'
207
+ },
175
208
  image: {
176
209
  src: '/static/img/products-2.jpg',
177
210
  alt: 'Zetasizer Advance range'
@@ -179,21 +212,29 @@ tags: prototype
179
212
  footer: {
180
213
  buttons: [
181
214
  {
182
- link: '#',
215
+ link: '/prototype/range',
183
216
  label: 'View range',
217
+ colour: 'outline-green',
184
218
  classes: 'c-button--small'
185
219
  },
186
220
  {
187
- link: '#',
221
+ link: '/prototype/request-a-quote',
188
222
  label: 'Request a quote',
189
223
  classes: 'c-button--small'
190
224
  }
191
225
  ]
192
226
  }
193
227
  }) }}
194
- {{ productCard({
195
- title: 'NanoSight range',
196
- description: 'The NanoSight range utilizes NTA to characterize nanoparticles from 10nm - 1000nm* in solution.',
228
+ {{ productCardNew({
229
+ type: 'product',
230
+ theme: 'bordered',
231
+ size: 'medium',
232
+ header: {
233
+ title: 'NanoSight range'
234
+ },
235
+ body: {
236
+ content: '<p>The NanoSight range utilizes NTA to characterize nanoparticles from 10nm - 1000nm* in solution.</p>'
237
+ },
197
238
  image: {
198
239
  src: '/static/img/products-3.jpg',
199
240
  alt: 'Zetasizer Advance range'
@@ -201,21 +242,29 @@ tags: prototype
201
242
  footer: {
202
243
  buttons: [
203
244
  {
204
- link: '#',
245
+ link: '/prototype/range',
205
246
  label: 'View range',
247
+ colour: 'outline-green',
206
248
  classes: 'c-button--small'
207
249
  },
208
250
  {
209
- link: '#',
251
+ link: '/prototype/request-a-quote',
210
252
  label: 'Request a quote',
211
253
  classes: 'c-button--small'
212
254
  }
213
255
  ]
214
256
  }
215
257
  }) }}
216
- {{ productCard({
217
- title: 'Epsilon range',
218
- description: 'The Epsilon 1 is powered by the latest advances in excitation and detection technology.',
258
+ {{ productCardNew({
259
+ type: 'product',
260
+ theme: 'bordered',
261
+ size: 'medium',
262
+ header: {
263
+ title: 'Epsilon range'
264
+ },
265
+ body: {
266
+ content: '<p>The Epsilon 1 is powered by the latest advances in excitation and detection technology.</p>'
267
+ },
219
268
  image: {
220
269
  src: '/static/img/products-4.jpg',
221
270
  alt: 'Zetasizer Advance range'
@@ -223,12 +272,13 @@ tags: prototype
223
272
  footer: {
224
273
  buttons: [
225
274
  {
226
- link: '#',
275
+ link: '/prototype/range',
227
276
  label: 'View range',
277
+ colour: 'outline-green',
228
278
  classes: 'c-button--small'
229
279
  },
230
280
  {
231
- link: '#',
281
+ link: '/prototype/request-a-quote',
232
282
  label: 'Request a quote',
233
283
  classes: 'c-button--small'
234
284
  }
@@ -239,67 +289,79 @@ tags: prototype
239
289
  <div class="u-bg-blue-step-3 u-pad-s-m u-split u-margin-top-l">
240
290
  <h3 class="c-h c-h--step-1">Explore our full product range</h3>
241
291
  {{ button({
242
- link: '#',
292
+ link: '/prototype/products',
243
293
  label: 'View all ranges'
244
294
  }) }}
245
295
  </div>
246
296
  </div>
247
297
  <div id="tab-product-2" class="c-tab">
248
298
  <div class="o-grid o-grid--of-four o-grid--swipeable">
249
- {{ technologyCard({
250
- title: 'X-ray Diffraction (XRD)',
251
- link: '#',
252
- description: 'XRD is the only laboratory technique that non-destructively and accurately obtains information such as chemical composition.',
299
+ {{ cardNew({
300
+ theme: 'bordered',
301
+ header: {
302
+ title: 'X-ray Diffraction (XRD)'
303
+ },
304
+ body: {
305
+ content: '<p>XRD is the only laboratory technique that non-destructively and accurately obtains information such as chemical composition.</p>'
306
+ },
253
307
  image: {
254
308
  src: '/static/img/sector-5.jpg',
255
309
  alt: ''
256
310
  },
257
- footer: {
258
- button: {
259
- label: 'View technology'
260
- }
311
+ link: {
312
+ label: 'View technology',
313
+ url: '#'
261
314
  }
262
315
  }) }}
263
- {{ technologyCard({
264
- title: 'Dynamic Light Scattering (DLS)',
265
- link: '#',
266
- description: 'Dynamic Light Scattering for size characterization of proteins, nanoparticles, polymers and colloidal dispersions.',
316
+ {{ cardNew({
317
+ theme: 'bordered',
318
+ header: {
319
+ title: 'Dynamic Light Scattering (DLS)'
320
+ },
321
+ body: {
322
+ content: '<p>Dynamic Light Scattering for size characterization of proteins, nanoparticles, polymers and colloidal dispersions.</p>'
323
+ },
267
324
  image: {
268
325
  src: '/static/img/sector-4.jpg',
269
326
  alt: ''
270
327
  },
271
- footer: {
272
- button: {
273
- label: 'View technology'
274
- }
328
+ link: {
329
+ label: 'View technology',
330
+ url: '#'
275
331
  }
276
332
  }) }}
277
- {{ technologyCard({
278
- title: 'X-ray fluorescence (XRF)',
279
- link: '#',
280
- description: 'X-ray fluorescence is an analytical technique that can be used to determine the chemical composition of a wide variety of sample types.',
333
+ {{ cardNew({
334
+ theme: 'bordered',
335
+ header: {
336
+ title: 'X-ray fluorescence (XRF)'
337
+ },
338
+ body: {
339
+ content: '<p>X-ray fluorescence is an analytical technique that can be used to determine the chemical composition of a wide variety of sample types.</p>'
340
+ },
281
341
  image: {
282
342
  src: '/static/img/sector-3.jpg',
283
343
  alt: ''
284
344
  },
285
- footer: {
286
- button: {
287
- label: 'View technology'
288
- }
345
+ link: {
346
+ label: 'View technology',
347
+ url: '#'
289
348
  }
290
349
  }) }}
291
- {{ technologyCard({
292
- title: 'Nanoparticle Tracking Analysis',
293
- link: '#',
294
- description: 'Utilizes the properties of both light scattering and Brownian motion in order to obtain the nanoparticle size distribution of samples in liquid suspension.',
350
+ {{ cardNew({
351
+ theme: 'bordered',
352
+ header: {
353
+ title: 'Nanoparticle Tracking Analysis'
354
+ },
355
+ body: {
356
+ content: '<p>Utilizes the properties of both light scattering and Brownian content in order to obtain the nanoparticle size distribution of samples in liquid suspension.</p>'
357
+ },
295
358
  image: {
296
359
  src: '/static/img/sector-2.jpg',
297
360
  alt: ''
298
361
  },
299
- footer: {
300
- button: {
301
- label: 'View technology'
302
- }
362
+ link: {
363
+ label: 'View technology',
364
+ url: '#'
303
365
  }
304
366
  }) }}
305
367
  </div>
@@ -313,60 +375,72 @@ tags: prototype
313
375
  </div>
314
376
  <div id="tab-product-3" class="c-tab">
315
377
  <div class="o-grid o-grid--of-four o-grid--swipeable">
316
- {{ measurementTypeCard({
317
- title: 'Particle size',
318
- link: '#',
319
- description: 'Measurement of particle size distributions is routinely carried out across a wide range of industries.',
378
+ {{ cardNew({
379
+ theme: 'bordered',
380
+ header: {
381
+ title: 'Particle size'
382
+ },
383
+ link: {
384
+ label: 'View measurement type',
385
+ url:'#'
386
+ },
387
+ body: {
388
+ content: '<p>Measurement of particle size distributions is routinely carried out across a wide range of industries.</p>'
389
+ },
320
390
  image: {
321
391
  src: '/static/img/sector-3.jpg',
322
392
  alt: ''
323
- },
324
- footer: {
325
- button: {
326
- label: 'View measurement type'
327
- }
328
393
  }
329
394
  }) }}
330
- {{ measurementTypeCard({
331
- title: 'Zeta potential',
332
- link: '#',
333
- description: 'Zeta potential measurements to improve formulation stability and shelf life and reduce formulation time and cost.',
395
+ {{ cardNew({
396
+ theme: 'bordered',
397
+ header: {
398
+ title: 'Zeta potential'
399
+ },
400
+ link: {
401
+ label: 'View measurement type',
402
+ url:'#'
403
+ },
404
+ body: {
405
+ content: '<p>Zeta potential measurements to improve formulation stability and shelf life and reduce formulation time and cost.</p>'
406
+ },
334
407
  image: {
335
408
  src: '/static/img/sector-2.jpg',
336
409
  alt: ''
337
- },
338
- footer: {
339
- button: {
340
- label: 'View measurement type'
341
- }
342
410
  }
343
411
  }) }}
344
- {{ measurementTypeCard({
345
- title: 'Binding affinity',
346
- link: '#',
347
- description: 'Understanding binding affinity is key to appreciation of the intermolecular interactions driving biological processes.',
412
+ {{ cardNew({
413
+ theme: 'bordered',
414
+ header: {
415
+ title: 'Binding affinity'
416
+ },
417
+ link: {
418
+ label: 'View measurement type',
419
+ url:'#'
420
+ },
421
+ body: {
422
+ content: '<p>Understanding binding affinity is key to appreciation of the intermolecular interactions driving biological processes.</p>'
423
+ },
348
424
  image: {
349
425
  src: '/static/img/sector-1.jpg',
350
426
  alt: ''
351
- },
352
- footer: {
353
- button: {
354
- label: 'View measurement type'
355
- }
356
427
  }
357
428
  }) }}
358
- {{ measurementTypeCard({
359
- title: 'Moisture content',
360
- link: '#',
361
- description: 'The determination of moisture is often a critical component in manufacturing processes and quality assurance.',
429
+ {{ cardNew({
430
+ theme: 'bordered',
431
+ header: {
432
+ title: 'Moisture content'
433
+ },
434
+ link: {
435
+ label: 'View measurement type',
436
+ url:'#'
437
+ },
438
+ body: {
439
+ content: '<p>The determination of moisture is often a critical component in manufacturing processes and quality assurance.</p>'
440
+ },
362
441
  image: {
363
442
  src: '/static/img/sector-5.jpg',
364
443
  alt: ''
365
- },
366
- footer: {
367
- button: {
368
- label: 'View measurement type'
369
- }
370
444
  }
371
445
  }) }}
372
446
  </div>
@@ -402,30 +476,28 @@ tags: prototype
402
476
  <ul class="c-tabs__controls-list">
403
477
  <li><a class="c-tabs__control c-tabs__control--active" href="#tab-webinars">Webinars</a></li>
404
478
  <li><a class="c-tabs__control" href="#tab-events">Events</a></li>
405
- <li><a class="c-tabs__control" href="#tab-webinars">Training</a></li>
479
+ <li><a class="c-tabs__control" href="#tab-training">Training</a></li>
406
480
  </ul>
407
481
  </nav>
408
482
 
409
483
  <div class="c-tabs__content">
410
484
  <div id="tab-webinars" class="c-tab c-tab--active">
411
485
  <div class="o-grid o-grid--of-three o-grid--swipeable">
412
- {{ card({
413
- theme: {
414
- layout: 'single',
415
- size: 'medium',
416
- name: 'featured'
417
- },
486
+ {{ eventCardNew({
487
+ type: 'event',
488
+ theme: 'dark',
489
+ size: 'medium',
418
490
  image: {
419
491
  src: '/static/img/featured-event-1.jpg',
420
492
  alt: 'Alt'
421
493
  },
422
494
  header: {
423
495
  title: 'Achieving method transfer from Mastersizer 2000 to Mastersizer 3000',
424
- meta: ['English'],
496
+ language: 'English',
425
497
  date: {
426
- date: '2020-08-01' | createDate,
427
- duration: '36:01'
428
- }
498
+ date: '2020-08-01' | createDate
499
+ },
500
+ duration: '36:01'
429
501
  },
430
502
  body: {
431
503
  keySpecs: [
@@ -451,24 +523,23 @@ tags: prototype
451
523
  tag: 'Recorded webinar'
452
524
  }) }}
453
525
 
454
- {{ card({
455
- theme: {
456
- layout: 'single',
457
- size: 'medium',
458
- name: 'featured'
459
- },
526
+ {{ eventCardNew({
527
+ type: 'event',
528
+ theme: 'dark',
529
+ size: 'medium',
460
530
  image: {
461
531
  src: '/static/img/featured-event-2.jpg',
462
532
  alt: 'Alt'
463
533
  },
464
534
  header: {
465
535
  title: 'Zetium ED X-ray fluorescence SuperQ application course',
466
- meta: ['English'],
536
+ language: 'English',
467
537
  date: {
468
- date: '2021-02-09' | createDate,
469
- time: '11:00 1200',
538
+ date: '2024-09-09' | createDate,
539
+ time: '11:00 - 12:00',
470
540
  timezone: 'EST'
471
- }
541
+ },
542
+ location: 'Almelo, The Netherlands'
472
543
  },
473
544
  body: {
474
545
  keySpecs: [
@@ -493,24 +564,23 @@ tags: prototype
493
564
  tag: 'Training course'
494
565
  }) }}
495
566
 
496
- {{ card({
497
- theme: {
498
- layout: 'single',
499
- size: 'medium',
500
- name: 'featured'
501
- },
567
+ {{ eventCardNew({
568
+ type: 'event',
569
+ theme: 'dark',
570
+ size: 'medium',
502
571
  image: {
503
572
  src: '/static/img/featured-event-3.jpg',
504
573
  alt: 'Alt'
505
574
  },
506
575
  header: {
507
576
  title: 'Ask us Anything: The API Edition - API Characterization & Developability',
508
- meta: ['English'],
577
+ language: 'English',
509
578
  date: {
510
- date: '2021-02-16' | createDate,
511
- time: '11:00 – 1200',
512
- timezone: 'EST'
513
- }
579
+ date: '2024-10-16' | createDate,
580
+ timezone: 'EST',
581
+ time: '11:30 - 13:30'
582
+ },
583
+ location: 'Virtual'
514
584
  },
515
585
  body: {
516
586
  content: '<p>Find out how the Mastersizer range can help keep costs down in formulation development.</p>'
@@ -530,23 +600,21 @@ tags: prototype
530
600
 
531
601
  <div id="tab-events" class="c-tab">
532
602
  <div class="o-grid o-grid--of-three o-grid--swipeable">
533
- {{ card({
534
- theme: {
535
- layout: 'single',
536
- size: 'medium',
537
- name: 'featured'
538
- },
603
+ {{ eventCardNew({
604
+ type: 'event',
605
+ theme: 'dark',
606
+ size: 'medium',
539
607
  image: {
540
608
  src: '/static/img/featured-event-2.jpg',
541
609
  alt: 'Alt'
542
610
  },
543
611
  header: {
544
612
  title: 'Ask us Anything: The API Edition - API Characterization & Developability',
545
- meta: ['English'],
613
+ language: 'English',
546
614
  date: {
547
- date: '2020-11-01' | createDate,
548
- duration: '36:01'
549
- }
615
+ date: '2020-11-01' | createDate
616
+ },
617
+ duration: '36:01'
550
618
  },
551
619
  body: {
552
620
  keySpecs: [
@@ -567,25 +635,62 @@ tags: prototype
567
635
  },
568
636
  tag: 'Recorded webinar'
569
637
  }) }}
570
-
571
- {{ card({
572
- theme: {
573
- layout: 'single',
574
- size: 'medium',
575
- name: 'featured'
638
+
639
+ {{ eventCardNew({
640
+ type: 'event',
641
+ theme: 'dark',
642
+ size: 'medium',
643
+ image: {
644
+ src: '/static/img/featured-event-1.jpg',
645
+ alt: 'Alt'
646
+ },
647
+ header: {
648
+ title: 'Zetium ED X-ray fluorescence SuperQ application course',
649
+ language: 'English',
650
+ date: {
651
+ date: '2025-02-24' | createDate,
652
+ timezone: 'EST',
653
+ time: '13:00 - 14:00'
654
+ },
655
+ location: 'Worcester MA'
656
+ },
657
+ body: {
658
+ content: '<p>Find out how the Mastersizer range can help keep costs down in formulation development.</p>'
659
+ },
660
+ footer: {
661
+ buttons: [
662
+ {
663
+ label: 'Book your place',
664
+ link: '/prototype/webinar'
665
+ }
666
+ ]
576
667
  },
668
+ tag: 'Training course'
669
+ }) }}
670
+ </div>
671
+ </div>
672
+
673
+ <div id="tab-training" class="c-tab">
674
+ <div class="o-grid o-grid--of-three o-grid--swipeable">
675
+
676
+
677
+ {{ eventCardNew({
678
+ type: 'event',
679
+ theme: 'dark',
680
+ size: 'medium',
577
681
  image: {
578
682
  src: '/static/img/featured-event-3.jpg',
579
683
  alt: 'Alt'
580
684
  },
581
685
  header: {
582
686
  title: 'Achieving method transfer from Mastersizer 2000 to Mastersizer 3000',
583
- meta: ['English'],
687
+ language: 'English',
584
688
  date: {
585
- date: '2021-02-15' | createDate,
586
- time: '11:00 – 1200',
587
- timezone: 'EST'
588
- }
689
+ date: '2025-02-15' | createDate,
690
+ timezone: 'EST',
691
+ time: '10:00 - 11:00'
692
+ },
693
+ location: 'Virtual'
589
694
  },
590
695
  body: {
591
696
  keySpecs: [
@@ -610,24 +715,23 @@ tags: prototype
610
715
  tag: 'Training course'
611
716
  }) }}
612
717
 
613
- {{ card({
614
- theme: {
615
- layout: 'single',
616
- size: 'medium',
617
- name: 'featured'
618
- },
718
+ {{ eventCardNew({
719
+ type: 'event',
720
+ theme: 'dark',
721
+ size: 'medium',
619
722
  image: {
620
723
  src: '/static/img/featured-event-1.jpg',
621
724
  alt: 'Alt'
622
725
  },
623
726
  header: {
624
727
  title: 'Zetium ED X-ray fluorescence SuperQ application course',
625
- meta: ['English'],
728
+ language: 'English',
626
729
  date: {
627
- date: '2021-02-24' | createDate,
628
- time: '11:00 – 1200',
629
- timezone: 'EST'
630
- }
730
+ date: '2025-02-24' | createDate,
731
+ timezone: 'EST',
732
+ time: '13:00 - 14:00'
733
+ },
734
+ location: 'Worcester MA'
631
735
  },
632
736
  body: {
633
737
  content: '<p>Find out how the Mastersizer range can help keep costs down in formulation development.</p>'
@@ -642,8 +746,39 @@ tags: prototype
642
746
  },
643
747
  tag: 'Training course'
644
748
  }) }}
749
+
750
+ {{ eventCardNew({
751
+ type: 'event',
752
+ theme: 'dark',
753
+ image: {
754
+ src: '/static/img/article-1.jpg',
755
+ alt: 'Alt'
756
+ },
757
+ header: {
758
+ title: 'SuperQ version 6 for Zetium XRF users',
759
+ language: 'English',
760
+ date: {
761
+ date: '2025-04-15' | createDate,
762
+ timezone: 'AES',
763
+ time: '11:00 - 14:00'
764
+ },
765
+ location: 'Sydney'
766
+ },
767
+ body: {
768
+ content: '<p>During this training, our application specialist provides step-by-step guidance towards using the software, including how to set up programmes and how to analyse and interpret the data.</p>'
769
+ },
770
+ footer: {
771
+ buttons: [
772
+ {
773
+ label: 'Book your place',
774
+ link: '/prototype/oma'
775
+ }
776
+ ]
777
+ }
778
+ }) }}
645
779
  </div>
646
780
  </div>
781
+
647
782
  </div>
648
783
  </div>
649
784
  </div>
@@ -687,14 +822,12 @@ tags: prototype
687
822
  <p>Find out more about how our scientific instruments help users better understand and shape everything from proteins, metals and polymers to the soil and air around us.</p>
688
823
  <p>From hot topics to customer stories, industry insights, and technical training - our blog is here to help you stay up to date.</p>
689
824
  </div>
690
- {{ twi({ link: '', classes: 'u-link', label: 'Visit the blog', icon: 'arrow-right' }) }}
825
+ {{ twi({ link: '/prototype/blog', classes: 'u-link', label: 'Visit the blog', icon: 'arrow-right' }) }}
691
826
  </header>
692
827
 
693
828
  <div class="u-flow--l">
694
- {{ card({
695
- theme: {
696
- layout: 'multi c-card--layout-multi-30-70'
697
- },
829
+ {{ cardNew({
830
+ theme: 'switch',
698
831
  image: {
699
832
  src: '/static/img/case-study-1.jpg',
700
833
  alt: 'Product image alt'
@@ -709,14 +842,12 @@ tags: prototype
709
842
  body: {
710
843
  content: '<p>Discover how orthogonal analytical technologies help characterize and generate a multi-parametral stability profile of AAV samples.</p>'
711
844
  },
712
- link: '#',
845
+ link: {url:'/prototype/blog-post'},
713
846
  tag: 'Blog post'
714
847
  })}}
715
848
 
716
- {{ card({
717
- theme: {
718
- layout: 'multi c-card--layout-multi-30-70'
719
- },
849
+ {{ cardNew({
850
+ theme: 'switch',
720
851
  image: {
721
852
  src: '/static/img/case-study-2.jpg',
722
853
  alt: 'Product image alt'
@@ -731,14 +862,12 @@ tags: prototype
731
862
  body: {
732
863
  content: '<p>Be more confident in the results you are using in your papers and theses, and get more from your Mastersizer. Get advice from the expert.</p>'
733
864
  },
734
- link: '#',
865
+ link: {url:'/prototype/blog-post'},
735
866
  tag: 'Blog post'
736
867
  })}}
737
868
 
738
- {{ card({
739
- theme: {
740
- layout: 'multi c-card--layout-multi-30-70'
741
- },
869
+ {{ cardNew({
870
+ theme: 'switch',
742
871
  image: {
743
872
  src: '/static/img/case-study-3.jpg',
744
873
  alt: 'Product image alt'
@@ -753,7 +882,7 @@ tags: prototype
753
882
  body: {
754
883
  content: '<p>When it comes to sampling preparation, the #1 thing to be considered is sample concentration, or oftentimes, dilution.</p>'
755
884
  },
756
- link: '#',
885
+ link: {url:'/prototype/blog-post'},
757
886
  tag: 'Blog post'
758
887
  })}}
759
888
  </div>