mp-design-system 1.2.26 → 1.2.27

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. package/dist/build/js/app.js.map +1 -1
  2. package/dist/build/scss/library.css +1 -1
  3. package/dist/build/scss/library.css.map +1 -1
  4. package/dist/build/scss/main.css +1 -1
  5. package/dist/build/scss/main.css.map +1 -1
  6. package/package.json +1 -1
  7. package/src/_includes/components/card/macro.njk +4 -0
  8. package/src/_includes/components/card/search-result-card.config.js +29 -0
  9. package/src/_includes/components/card/search-result-card.njk +24 -0
  10. package/src/_includes/components/card/search-result-card.scss +48 -0
  11. package/src/_includes/components/eyebrow/eyebrow.config.js +47 -0
  12. package/src/_includes/components/eyebrow/eyebrow.njk +7 -0
  13. package/src/_includes/components/eyebrow/eyebrow.scss +29 -0
  14. package/src/_includes/components/eyebrow/macro.njk +5 -0
  15. package/src/_includes/components/usp/usp.config.js +5 -2
  16. package/src/_includes/components/usp/usp.md +82 -2
  17. package/src/_includes/components/usp/usp.njk +7 -1
  18. package/src/_includes/components/usp/usp.scss +2 -2
  19. package/src/assets/scss/components/index.scss +2 -0
  20. package/src/assets/scss/foundations/typography.scss +6 -6
  21. package/src/assets/scss/tools/index.scss +12 -0
  22. package/src/assets/scss/utilities/divider.scss +6 -0
  23. package/src/assets/scss/utilities/index.scss +1 -0
  24. package/src/patterns/usps.njk +34 -12
  25. package/src/assets/fonts/Inter-Bold.woff +0 -0
  26. package/src/assets/fonts/Inter-Bold.woff2 +0 -0
  27. package/src/assets/fonts/Inter-Regular.woff +0 -0
  28. package/src/assets/fonts/Inter-Regular.woff2 +0 -0
  29. package/src/assets/fonts/Inter-SemiBold.woff +0 -0
  30. package/src/assets/fonts/Inter-SemiBold.woff2 +0 -0
  31. /package/{dist/build/Inter-Bold.419e8c71.woff → src/assets/fonts/inter-bold.woff} +0 -0
  32. /package/{dist/build/Inter-Bold.af5441a3.woff2 → src/assets/fonts/inter-bold.woff2} +0 -0
  33. /package/{dist/build/Inter-Regular.ca6858d7.woff → src/assets/fonts/inter-regular.woff} +0 -0
  34. /package/{dist/build/Inter-Regular.ed77b881.woff2 → src/assets/fonts/inter-regular.woff2} +0 -0
  35. /package/{dist/build/Inter-SemiBold.cc1168df.woff → src/assets/fonts/inter-semibold.woff} +0 -0
  36. /package/{dist/build/Inter-SemiBold.dd034768.woff2 → src/assets/fonts/inter-semibold.woff2} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mp-design-system",
3
- "version": "1.2.26",
3
+ "version": "1.2.27",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "dev": "npm-run-all --parallel bundle:*",
@@ -10,4 +10,8 @@
10
10
 
11
11
  {% macro productComparisonCard(params) %}
12
12
  {{ c({ name: 'product-comparison-card', folder: 'card' }, params) }}
13
+ {% endmacro %}
14
+
15
+ {% macro searchResultCard(params) %}
16
+ {{ c({ name: 'search-result-card', folder: 'card' }, params) }}
13
17
  {% endmacro %}
@@ -0,0 +1,29 @@
1
+ const categories = require('../component/categories');
2
+
3
+ module.exports = {
4
+ title: 'Search result card',
5
+ category: categories.card,
6
+ component: {
7
+ name: 'search-result-card',
8
+ folder: 'card'
9
+ },
10
+ preview: 'content-width',
11
+ context: {
12
+ title: 'Mastersizer range',
13
+ description: 'The Mastersizer range of laser diffraction particle size analyzers set the standard for delivering rapid, accurate particle size distributions for both wet and dry dispersions.',
14
+ url: '/en/products/product-range/mastersizer-range',
15
+ tag: 'Product range'
16
+ },
17
+ variants: [
18
+ ],
19
+ props: [
20
+ {
21
+ table: [
22
+ ['title', 'string'],
23
+ ['description', 'string'],
24
+ ['url', 'string'],
25
+ ['tag', 'string'],
26
+ ]
27
+ }
28
+ ]
29
+ }
@@ -0,0 +1,24 @@
1
+ {%- from "components/eyebrow/macro.njk" import eyebrow -%}
2
+
3
+
4
+ <article class="mp c-search-result-card">
5
+ <header class="c-search-result-card__header">
6
+ <h2 class="c-search-result-card__title">
7
+ <a href="{{ params.url }}">
8
+ {{ params.title }}
9
+ </a>
10
+ </h2>
11
+ {% if params.tag | length %}
12
+ <div class="c-search-result-card__tag">
13
+ {{ eyebrow({
14
+ text: params.tag,
15
+ colour: 'blue'
16
+ }) }}
17
+ </div>
18
+ {% endif %}
19
+ </header>
20
+ <div class="c-search-result-card__body">
21
+ <p class="c-search-result-card__description">{{ params.description }}</p>
22
+ <span class="c-search-result-card__url">{{ params.url }}</span>
23
+ </div>
24
+ </article>
@@ -0,0 +1,48 @@
1
+ .c-search-result-card {
2
+ @extend .u-flow--xs;
3
+ @include padding-top('m');
4
+ @include padding-bottom('m');
5
+ position: relative;
6
+
7
+ &:focus-within {
8
+ outline: 2px solid color('petrol');
9
+ }
10
+
11
+ &:where(:hover, :focus-within) .c-search-result-card__title {
12
+ text-decoration: underline;
13
+ text-underline-offset: 0.1em;
14
+ }
15
+
16
+ &__header,
17
+ &__body {
18
+ display: flex;
19
+ flex-direction: column;
20
+ }
21
+
22
+ &__title {
23
+ @include step(1);
24
+
25
+ a {
26
+ @include clickable-parent;
27
+
28
+ &:focus {
29
+ outline: 0;
30
+ }
31
+ }
32
+ }
33
+
34
+ &__tag,
35
+ &__description + &__url {
36
+ @include margin-bottom('2xs');
37
+ order: -1;
38
+ }
39
+
40
+ &__body {
41
+ @extend .o-prose;
42
+ @include step(-1);
43
+ }
44
+
45
+ &__url {
46
+ color: color('utility-blue');
47
+ }
48
+ }
@@ -0,0 +1,47 @@
1
+ module.exports = {
2
+ title: 'Eyebrow',
3
+ component: {
4
+ name: 'eyebrow',
5
+ },
6
+ context: {
7
+ text: 'Product range',
8
+ colour: ''
9
+ },
10
+ variants: [
11
+ {
12
+ title: 'Blue',
13
+ context: {
14
+ text: 'Product range',
15
+ colour: 'blue'
16
+ }
17
+ },
18
+ {
19
+ title: 'Petrol',
20
+ context: {
21
+ text: 'Product range',
22
+ colour: 'petrol'
23
+ }
24
+ },
25
+ {
26
+ title: 'Red',
27
+ context: {
28
+ text: 'Product range',
29
+ colour: 'red'
30
+ }
31
+ },
32
+ {
33
+ title: 'Utility blue',
34
+ context: {
35
+ text: 'Product range',
36
+ colour: 'utility-blue'
37
+ }
38
+ },
39
+ {
40
+ title: 'Utility orange',
41
+ context: {
42
+ text: 'Product range',
43
+ colour: 'utility-orange'
44
+ }
45
+ }
46
+ ]
47
+ }
@@ -0,0 +1,7 @@
1
+ {%- set classNames = "mp c-eyebrow" -%}
2
+
3
+ {%- if params.colour -%}
4
+ {% set classNames = classNames + " c-eyebrow--" + params.colour %}
5
+ {% endif -%}
6
+
7
+ <span class="{{ classNames }}">{{ params.text }}</span>
@@ -0,0 +1,29 @@
1
+ .c-eyebrow {
2
+ background-color: color('green');
3
+ color: color('white');
4
+ @include padding('3xs', 'xs');
5
+ border-radius: 2em;
6
+ display: inline-block;
7
+ @include step(-1);
8
+ letter-spacing: -.01em;
9
+
10
+ &--blue {
11
+ background-color: color('blue');
12
+ }
13
+
14
+ &--petrol {
15
+ background-color: color('petrol');
16
+ }
17
+
18
+ &--red {
19
+ background-color: color('red');
20
+ }
21
+
22
+ &--utility-blue {
23
+ background-color: color('utility-blue');
24
+ }
25
+
26
+ &--utility-orange {
27
+ background-color: color('utility-orange');
28
+ }
29
+ }
@@ -0,0 +1,5 @@
1
+ {%- from "components/component/component.njk" import c -%}
2
+
3
+ {%- macro eyebrow(params) -%}
4
+ {{ c({ name: 'eyebrow' }, params) }}
5
+ {%- endmacro -%}
@@ -22,7 +22,9 @@ module.exports = {
22
22
  context: {
23
23
  classes: 'c-usp c-usp--center',
24
24
  content: false,
25
- icon: '<svg width="73" height="73" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.1035 27.9854C24.1035 34.6127 29.4761 39.9854 36.1035 39.9854C42.7308 39.9854 48.1035 34.6127 48.1035 27.9854C48.1035 21.3579 42.7308 15.9854 36.1035 15.9854C29.4761 15.9854 24.1035 21.3579 24.1035 27.9854Z" fill="#00A2C2"/><circle cx="36.1035" cy="27.9854" r="22" stroke="#333333" stroke-width="4"/><path d="M22.3356 45.4453V67.5621C22.3356 67.5726 22.3471 67.579 22.356 67.5735L35.1829 59.5477C35.6155 59.277 36.1647 59.277 36.5974 59.5477L49.4243 67.5735C49.4331 67.579 49.4447 67.5726 49.4447 67.5621V45.4453" stroke="#333333" stroke-width="4"/></svg>'
25
+ icon: {
26
+ url: 'https://p3.aprimocdn.net/malvernpanalytical/7da9e7e5-edca-4d49-bc7f-b11401123c52/icon-stopwatch_Original%20file.svg'
27
+ }
26
28
  }
27
29
  },
28
30
  {
@@ -45,7 +47,8 @@ module.exports = {
45
47
  ['content', 'html', 'HTML passed to the prose field'],
46
48
  ['link', 'string (deprecated)'],
47
49
  ['eyebrow', 'string'],
48
- ['icon', 'svg', 'HTML/SVG which is output raw']
50
+ ['icon.svg', 'svg', 'HTML/SVG which is output raw'],
51
+ ['icon.url', 'string', 'image url']
49
52
  ]
50
53
  }
51
54
  ]
@@ -1,3 +1,81 @@
1
+ # Blank HTML templates
2
+
3
+ {% accordion %}
4
+
5
+ {% accordionItem "Grid of four, icon & text, left-aligned" %}
6
+
7
+ ```html
8
+ <div class="o-grid o-grid--of-four">
9
+
10
+ <!-- First USP block: duplicate this -->
11
+ <div class="mp c-usp">
12
+ <div class="u-flow">
13
+ <div class="c-usp__icon">
14
+ <img src="https://p3.aprimocdn.net/malvernpanalytical/etc" />
15
+ </div>
16
+ <h3 class="c-h c-h--step-1 c-usp__title">Handles the toughest conditions</h3>
17
+ <div class="mp o-prose u-step--1">
18
+ <p>FORJ is designed for less thermal stress and reduced risk of contamination - which means low maintenance and high productivity.</p>
19
+ </div>
20
+ </div>
21
+ </div>
22
+
23
+ <!-- etc. -->
24
+
25
+ </div>
26
+ ```
27
+
28
+ {% endaccordionItem %}
29
+
30
+ {% accordionItem "Grid of three, eyebrow & text, left-aligned" %}
31
+
32
+ ```html
33
+ <div class="o-grid o-grid--of-three">
34
+
35
+ <!-- First USP block: duplicate this -->
36
+ <div class="mp c-usp">
37
+ <div class="u-flow ">
38
+ <span class="c-usp__eyebrow">Greater flexibility</span>
39
+ <h3 class="c-h c-h--step-2 c-usp__title">Impressive particle sizing performance</h3>
40
+ <div class="mp o-prose u-step--1">
41
+ <p>High sample throughput and a measurement size range from 10nm to 3.5mm</p>
42
+ </div>
43
+ </div>
44
+ </div>
45
+
46
+ <!-- etc. -->
47
+
48
+ </div>
49
+ ```
50
+
51
+ {% endaccordionItem %}
52
+
53
+ {% accordionItem "Grid of seven (or more), icons only, centered" %}
54
+
55
+ ```html
56
+ <div class="o-grid o-grid--of-three u-justify-center">
57
+
58
+ <!-- First USP block: duplicate this -->
59
+ <div class="mp c-usp c-usp c-usp--center">
60
+ <div class="u-flow u-text-center">
61
+ <div class="c-usp__icon">
62
+ <img src="https://p3.aprimocdn.net/malvernpanalytical/etc" />
63
+ </div>
64
+ <h3 class="c-h c-h--step-1 c-usp__title">Handles the toughest conditions</h3>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- etc. -->
69
+
70
+ </div>
71
+ ```
72
+
73
+ {% endaccordionItem %}
74
+
75
+ {% endaccordion %}
76
+
77
+ ---
78
+
1
79
  A USP can include a few elements:
2
80
  - Icon (optional)
3
81
  - Eyebrow (optional)
@@ -17,5 +95,7 @@ When using USPs, please follow these guidelines:
17
95
  - If there's no body text or eyebrow, the USP may be centered
18
96
  - **Font size**
19
97
  - Body text font size is always step -1
20
- - Title text is step-2 when using a three-column grid
21
- - or step-1 when using a four-column grid
98
+ - Title text is step 2 when using a three-column grid
99
+ - or step 1 when using a four-column grid
100
+
101
+ ---
@@ -21,7 +21,13 @@
21
21
  </span>
22
22
  {% endif %}
23
23
  {% if params.icon %}
24
- <div class="c-usp__icon">{{params.icon | safe}}</div>
24
+ <div class="c-usp__icon">
25
+ {% if params.icon.svg %}
26
+ {{params.icon.svg | safe}}
27
+ {% elseif params.icon.url %}
28
+ <img src="{{params.icon.url}}"/>
29
+ {% endif %}
30
+ </div>
25
31
  {% endif %}
26
32
  <h3 class="c-h {{size}} c-usp__title">{{ params.title }}</h3>
27
33
  {% if params.content %}
@@ -44,8 +44,8 @@
44
44
  @include space('width','l');
45
45
 
46
46
  .c-usp--center & {
47
- @include space('height','2xl');
48
- @include space('width','2xl');
47
+ @include space('height','xl');
48
+ @include space('width','xl');
49
49
  }
50
50
  }
51
51
 
@@ -6,8 +6,10 @@
6
6
  @import '~comp/card/card.scss';
7
7
  @import '~comp/card/industry-card.scss';
8
8
  @import '~comp/card/product-comparison-card.scss';
9
+ @import '~comp/card/search-result-card.scss';
9
10
  @import '~comp/comparison-table/comparison-table.scss';
10
11
  @import '~comp/embed/embed.scss';
12
+ @import '~comp/eyebrow/eyebrow.scss';
11
13
  @import '~comp/featured-article-card/featured-article-card.scss';
12
14
  @import '~comp/features-table/features-table.scss';
13
15
  @import '~comp/filter-search/filter-search.scss';
@@ -136,8 +136,8 @@ $f-max-width: 1332;
136
136
  font-style: normal;
137
137
  font-weight: 400;
138
138
  font-display: swap;
139
- src: url("../fonts/Inter-Regular.woff2") format("woff2"),
140
- url("../fonts/Inter-Regular.woff") format("woff");
139
+ src: #{'../fonts/inter-regular.woff2'} format("woff2"),
140
+ #{'../fonts/inter-regular.woff'} format("woff");
141
141
  }
142
142
 
143
143
  @font-face {
@@ -145,8 +145,8 @@ $f-max-width: 1332;
145
145
  font-style: normal;
146
146
  font-weight: 600;
147
147
  font-display: swap;
148
- src: url('../fonts/Inter-SemiBold.woff2') format("woff2"),
149
- url('../fonts/Inter-SemiBold.woff') format("woff");
148
+ src: #{'../fonts/inter-semibold.woff2'} format("woff2"),
149
+ #{'../fonts/inter-semibold.woff'} format("woff");
150
150
  }
151
151
 
152
152
  @font-face {
@@ -154,6 +154,6 @@ $f-max-width: 1332;
154
154
  font-style: normal;
155
155
  font-weight: 700;
156
156
  font-display: swap;
157
- src: url('../fonts/Inter-Bold.woff2') format("woff2"),
158
- url('../fonts/Inter-Bold.woff') format("woff");
157
+ src: #{'../fonts/inter-bold.woff2'} format("woff2"),
158
+ #{'../fonts/inter-bold.woff'} format("woff");
159
159
  }
@@ -152,4 +152,16 @@
152
152
  hyphens: auto;
153
153
  }
154
154
  }
155
+ }
156
+
157
+ @mixin clickable-parent {
158
+ position: static;
159
+
160
+ &::after {
161
+ content: '';
162
+ position: absolute;
163
+ inset: 0;
164
+ cursor: pointer !important;
165
+ display: flex;
166
+ }
155
167
  }
@@ -0,0 +1,6 @@
1
+ .u-divider {
2
+ & > * + * {
3
+ border-top: 1px solid;
4
+ border-top-color: color('grey', 'step-2');
5
+ }
6
+ }
@@ -4,6 +4,7 @@ html body {
4
4
  @import './link.scss';
5
5
  @import './colour.scss';
6
6
  @import './disabled.scss';
7
+ @import './divider.scss';
7
8
  @import './wrap.scss';
8
9
  @import './flex.scss';
9
10
  @import './display.scss';
@@ -54,25 +54,33 @@ tags: 'patterns'
54
54
  title: "Handles the toughest conditions",
55
55
  content: "<p>FORJ is designed for less thermal stress and reduced risk of contamination - which means low maintenance and high productivity.</p>",
56
56
  size: "c-h--step-1",
57
- icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 67 55"><path stroke="#333" stroke-width="3" d="M2.16 22.49a2.5 2.5 0 0 1 2.5-2.5h41.27a2.5 2.5 0 0 1 2.5 2.5v28.15a2.5 2.5 0 0 1-2.5 2.5H44c-.44 0-.86-.19-1.15-.51a4.54 4.54 0 0 0-3.37-1.5H11.14c-1.28 0-2.51.54-3.38 1.5l1.08.97-1.08-.98c-.3.33-.71.52-1.16.52H4.66a2.5 2.5 0 0 1-2.5-2.5V22.49Z"/><path stroke="#333" stroke-linecap="round" stroke-width="4" d="M2.82 49.7h44.84"/><path stroke="#333" stroke-linejoin="round" stroke-width="3" d="M11.66 20H34.1v18.88a2 2 0 0 1-2 2H13.66a2 2 0 0 1-2-2V20Z"/><path fill="#333" stroke="#333" stroke-linejoin="round" stroke-width="3" d="M38.99 24.88h4.56v3.05h-4.56z"/><path stroke="#00A2C2" stroke-linecap="round" stroke-width="3" d="M43.87 11.88V3.31M56.87 24.88h8.58M54.51 18.85l8.03-4.78M49.93 14.21l4.79-8.02"/></svg>'
57
+ icon: {
58
+ url: 'https://p3.aprimocdn.net/malvernpanalytical/9448808a-1a92-4eef-a49b-b11401122d59/icon-forj_Original%20file.svg'
59
+ }
58
60
  }) }}
59
61
  {{ usp({
60
62
  title: "Results you can count on",
61
63
  content: "<p>Consistent heating between positions, homogeneous melt, and contamination-free heating - ensuring superior, repeatable results.</p>",
62
64
  size: "c-h--step-1",
63
- icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 55 56"><path stroke="#333" stroke-linecap="round" stroke-width="3" d="M20.1 9.6h17.7m6 0h9"/><path fill="#333" d="M13.2 3.5a4 4 0 0 0-2.5-.9h-6a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4v-3l-3 3c0 .6-.5 1-1 1h-6a1 1 0 0 1-1-1v-6c0-.5.4-1 1-1H11l2.2-2Z"/><path stroke="#00A2C2" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 8.1 3.2 3.2L17 3.5"/><path stroke="#333" stroke-linecap="round" stroke-width="3" d="M20.1 29.1h7.6m6.1 0h19"/><path fill="#333" d="M13.2 23a4 4 0 0 0-2.5-.9h-6a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4v-3l-3 3c0 .6-.5 1-1 1h-6a1 1 0 0 1-1-1v-6c0-.5.4-1 1-1h6l.3.1 2.2-2.2Z"/><path stroke="#00A2C2" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 27.7 3.2 3.1L17 23"/><path stroke="#333" stroke-linecap="round" stroke-width="3" d="M20.1 48.6H31m17.6 0h4.2m-10.2 0h-5.7"/><path fill="#333" d="M13.2 42.5a4 4 0 0 0-2.5-.9h-6a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4v-3l-3 3c0 .6-.5 1-1 1h-6a1 1 0 0 1-1-1v-6c0-.5.4-1 1-1H11l2.2-2Z"/><path stroke="#00A2C2" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 47.1 3.2 3.2 7.8-7.8"/></svg>'
65
+ icon: {
66
+ url: 'https://p3.aprimocdn.net/malvernpanalytical/5d376f9f-9dbf-4d00-94b0-b11401122887/icon-clipboard_Original%20file.svg'
67
+ }
64
68
  }) }}
65
69
  {{ usp({
66
70
  title: "World-leading speed",
67
71
  content: "<p>The fastest fusion sample-prep on the market. Boost your productivity by up to 25% with the same compact footprint.</p>",
68
72
  size: "c-h--step-1",
69
- icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 55 55"><circle cx="27.7" cy="30.6" r="22.5" stroke="#333" stroke-width="3"/><path stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M21.7 2.6h6m6 0h-6m0 0V7"/><path fill="#00A2C2" d="m40.3 21-14.1 5a4.9 4.9 0 1 0 4.7 8.3l11.5-9.7a2 2 0 0 0-2-3.5Z"/><circle cx="27.7" cy="13.5" r="1.5" fill="#333"/><circle cx="27.7" cy="48.1" r="1.5" fill="#333"/><circle cx="45.2" cy="30.6" r="1.5" fill="#333"/><circle cx="10.2" cy="30.6" r="1.5" fill="#333"/><circle cx="19" cy="15.9" r="1.5" fill="#333" transform="rotate(-30 19 15.9)"/><circle cx="36.3" cy="45.8" r="1.5" fill="#333" transform="rotate(-30 36.3 45.8)"/><circle cx="12.4" cy="39.4" r="1.5" fill="#333" transform="rotate(-30 12.4 39.4)"/><circle cx="12.7" cy="22.2" r="1.5" fill="#333" transform="rotate(-60 12.7 22.2)"/><circle cx="42.6" cy="39.5" r="1.5" fill="#333" transform="rotate(-60 42.6 39.5)"/><circle cx="36.2" cy="15.6" r="1.5" fill="#333" transform="rotate(-60 36.2 15.6)"/><circle cx="18.7" cy="45.9" r="1.5" fill="#333" transform="rotate(-60 18.7 45.9)"/></svg>'
73
+ icon: {
74
+ url: 'https://p3.aprimocdn.net/malvernpanalytical/7da9e7e5-edca-4d49-bc7f-b11401123c52/icon-stopwatch_Original%20file.svg'
75
+ }
70
76
  }) }}
71
77
  {{ usp({
72
78
  title: "Hassle-free handling",
73
79
  content: "<p>Suitable for full-lab integration, FORJ is easy to install and provides a safe and user-friendly interface, so you can quickly get up and running.</p>",
74
80
  size: "c-h--step-1",
75
- icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 55 55"><path stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M43.3 5 20.6 27.3c-9-15-16.6-12.8-17.7-9.5-.2.5 0 1 .4 1.4l5.9 6.2c3.5 3.5 1.9 12.2 5.2 15.6l9.6 9.6c2.7 2.6 8.8 3.2 12 0L49.5 37c2.8-3-.6-7.4-4.9-4.8 5.3-3.6.9-10-3.4-6 4.4-4.6-.7-8.6-3.7-6.2L48.1 10c3-3.2-1.3-8.4-4.8-4.9Z"/><path stroke="#00A2C2" stroke-linecap="round" stroke-width="3" d="M15.2 10.4 11 6.2M28 10.4 32 6.2M23.8 8.6l1.6-6.3M19.3 8.6l-1.6-6.3"/></svg>'
81
+ icon: {
82
+ url: 'https://p3.aprimocdn.net/malvernpanalytical/f900b665-8a81-47a5-8d59-b114011227bf/icon-click-fingers_Original%20file.svg'
83
+ }
76
84
  }) }}
77
85
  </div>
78
86
  </div>
@@ -80,46 +88,60 @@ tags: 'patterns'
80
88
  <div class="u-flow--s">
81
89
  <div class="o-grid o-grid--of-four u-justify-center">
82
90
  {{ usp({
83
- title: "Handles the toughest conditions",
91
+ title: "Reduced emissions",
84
92
  classes: 'c-usp c-usp--center',
85
93
  size: "c-h--step-1",
86
- icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 67 55"><path stroke="#333" stroke-width="3" d="M2.16 22.49a2.5 2.5 0 0 1 2.5-2.5h41.27a2.5 2.5 0 0 1 2.5 2.5v28.15a2.5 2.5 0 0 1-2.5 2.5H44c-.44 0-.86-.19-1.15-.51a4.54 4.54 0 0 0-3.37-1.5H11.14c-1.28 0-2.51.54-3.38 1.5l1.08.97-1.08-.98c-.3.33-.71.52-1.16.52H4.66a2.5 2.5 0 0 1-2.5-2.5V22.49Z"/><path stroke="#333" stroke-linecap="round" stroke-width="4" d="M2.82 49.7h44.84"/><path stroke="#333" stroke-linejoin="round" stroke-width="3" d="M11.66 20H34.1v18.88a2 2 0 0 1-2 2H13.66a2 2 0 0 1-2-2V20Z"/><path fill="#333" stroke="#333" stroke-linejoin="round" stroke-width="3" d="M38.99 24.88h4.56v3.05h-4.56z"/><path stroke="#00A2C2" stroke-linecap="round" stroke-width="3" d="M43.87 11.88V3.31M56.87 24.88h8.58M54.51 18.85l8.03-4.78M49.93 14.21l4.79-8.02"/></svg>'
94
+ icon: {
95
+ url: 'https://p3.aprimocdn.net/malvernpanalytical/6bf3f0b2-57ec-4e3e-a32c-b11401123933/icon-plant_Original%20file.svg'
96
+ }
87
97
  }) }}
88
98
  {{ usp({
89
99
  title: "Compliance standards",
90
100
  classes: 'c-usp c-usp--center',
91
101
  size: "c-h--step-1",
92
- icon: '<svg viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.2321 61.8166V12.3395H42.0331V24.978C42.0331 26.819 43.5255 28.3114 45.3664 28.3114H58.0049V32.4505H62.0049V26.3114C62.0049 25.7809 61.7942 25.2722 61.4191 24.8971L45.4473 8.9253C45.0722 8.55023 44.5635 8.33952 44.0331 8.33952H13.5654C11.7245 8.33952 10.2321 9.8319 10.2321 11.6729V62.4833C10.2321 64.3243 11.7245 65.8166 13.5654 65.8166H37.3049C36.0491 64.6232 34.7219 63.1755 33.9949 61.8166H14.2321ZM55.1765 24.3114L46.0331 15.1679V24.3114H55.1765Z" fill="#333333"/><path d="M60.6725 39.4727H42.0449C41.3085 39.4727 40.7116 40.0661 40.7116 40.8024V57.3984C40.7116 61.9447 51.3587 66.6757 51.3587 66.6757C51.3587 66.6757 62.0059 61.9447 62.0059 57.3984V40.8024C62.0059 40.0661 61.4089 39.4727 60.6725 39.4727Z" fill="#00A2C2" stroke="#00A2C2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>'
102
+ icon: {
103
+ url: 'https://p3.aprimocdn.net/malvernpanalytical/63b61c71-51e2-4ee6-b79e-b11401122bf5/icon-file-with-shield_Original%20file.svg'
104
+ }
93
105
  }) }}
94
106
  {{ usp({
95
107
  title: "Instant monitoring",
96
108
  classes: 'c-usp c-usp--center',
97
109
  size: "c-h--step-1",
98
- icon: '<svg viewBox="0 0 72 73" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.99997 16.1327C5.99997 14.66 7.19388 13.4661 8.66664 13.4661H63.3333C64.8061 13.4661 66 14.66 66 16.1327V50.7994C66 52.2722 64.8061 53.4661 63.3333 53.4661H8.66664C7.19388 53.4661 5.99997 52.2722 5.99997 50.7994V16.1327Z" stroke="#333333" stroke-width="4" stroke-linejoin="round"/><path d="M10.3844 37.3932H20.5234L22.1246 43.1309L26.6614 28.3195L31.732 47.0004L39.3378 20.3134L45.209 41.9299L48.5239 32.0863L50.2785 37.3932H61.757" stroke="#00A2C2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><rect x="30.3997" y="53.4661" width="11.2086" height="11.0145" fill="#333333" stroke="#333333" stroke-width="4" stroke-linejoin="round"/><path d="M25.7255 64.4806H46.2745" stroke="#333333" stroke-width="4" stroke-linecap="round"/></svg>'
110
+ icon: {
111
+ url: 'https://p3.aprimocdn.net/malvernpanalytical/198f871d-12a4-4523-8303-b114011237bf/icon-monitor-graph_Original%20file.svg'
112
+ }
99
113
  }) }}
100
114
  {{ usp({
101
115
  title: "Peerless quality control",
102
116
  classes: 'c-usp c-usp--center',
103
117
  size: "c-h--step-1",
104
- icon: '<svg viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.1035 27.9854C24.1035 34.6127 29.4761 39.9854 36.1035 39.9854C42.7308 39.9854 48.1035 34.6127 48.1035 27.9854C48.1035 21.3579 42.7308 15.9854 36.1035 15.9854C29.4761 15.9854 24.1035 21.3579 24.1035 27.9854Z" fill="#00A2C2"/><circle cx="36.1035" cy="27.9854" r="22" stroke="#333333" stroke-width="4"/><path d="M22.3356 45.4453V67.5621C22.3356 67.5726 22.3471 67.579 22.356 67.5735L35.1829 59.5477C35.6155 59.277 36.1647 59.277 36.5974 59.5477L49.4243 67.5735C49.4331 67.579 49.4447 67.5726 49.4447 67.5621V45.4453" stroke="#333333" stroke-width="4"/></svg>'
118
+ icon: {
119
+ url: 'https://p3.aprimocdn.net/malvernpanalytical/c868ad42-c6d4-49e4-b4f4-b11401122492/icon-award_Original%20file.svg'
120
+ }
105
121
  }) }}
106
122
  {{ usp({
107
123
  title: "Expert support on hand",
108
124
  classes: 'c-usp c-usp--center',
109
125
  size: "c-h--step-1",
110
- icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 55 55"><path fill="#333" fill-rule="evenodd" d="M16.49 6.6a3.03 3.03 0 0 1 3.02 2.59c.3 2.28.86 4.52 1.66 6.68a3.03 3.03 0 0 1-.67 3.19l-2.87 2.87a1.5 1.5 0 0 0-.25 1.8c.58 1 1.19 1.98 1.85 2.92l2.16-2.15c-.29-.42-.56-.84-.82-1.27l2.05-2.05a6.02 6.02 0 0 0 1.36-6.36 27.55 27.55 0 0 1-1.5-6.03v-.02a6.03 6.03 0 0 0-6.02-5.18H9.68a6.03 6.03 0 0 0-6 6.57v.02a46.28 46.28 0 0 0 7.18 20.27c.6.93 1.21 1.83 1.86 2.7l2.15-2.14c-.51-.7-1-1.43-1.48-2.17v-.01c-3.7-5.7-6-12.2-6.72-18.95a3.03 3.03 0 0 1 3.01-3.29h6.8Zm7.5 8.22-1.41.52 1.4-.52Z" clip-rule="evenodd"/><path fill="#333" d="m24.18 40.37-2.14 2.14c.92.7 1.87 1.35 2.85 1.97a46.28 46.28 0 0 0 20.18 7.17h.02a6.03 6.03 0 0 0 6.57-6.01v-6.77a6.03 6.03 0 0 0-5.18-6.1h-.01a27.55 27.55 0 0 1-6.03-1.5 6.03 6.03 0 0 0-6.36 1.36l-2.05 2.05c-.45-.27-.89-.55-1.32-.84l-2.16 2.15c.96.67 1.95 1.3 2.97 1.88a1.5 1.5 0 0 0 1.8-.24l2.87-2.87a3.03 3.03 0 0 1 3.2-.68c2.15.8 4.4 1.36 6.68 1.66a3.03 3.03 0 0 1 2.6 3.11v6.79a3.03 3.03 0 0 1-3.3 3.03 43.28 43.28 0 0 1-18.85-6.71h-.01c-.8-.51-1.57-1.04-2.33-1.6Z"/><path fill="#00A2C2" d="M36.5 14.88a2.7 2.7 0 0 0 3.81 3.82l5.8-5.8a8.94 8.94 0 0 1-11.24 12.53L12.5 47.82a3.6 3.6 0 0 1-5.1-5.1l22.47-22.46A8.94 8.94 0 0 1 42.23 9.14l-5.74 5.74Z"/></svg>'
126
+ icon: {
127
+ url: 'https://p3.aprimocdn.net/malvernpanalytical/00a7cc05-1143-4d0b-bbc3-b11401123855/icon-phone-with-wrench_Original%20file.svg'
128
+ }
111
129
  }) }}
112
130
  {{ usp({
113
131
  title: "Industry-leading solutions",
114
132
  classes: 'c-usp c-usp--center',
115
133
  size: "c-h--step-1",
116
- icon: '<svg viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="36.1035" cy="36.9854" r="27.3333" stroke="#333333" stroke-width="4"/><path d="M42.0824 42.4073L48.8164 25.5725C49.1429 24.7561 48.3328 23.9461 47.5165 24.2726L30.6817 31.0065C30.4276 31.1082 30.2262 31.3095 30.1246 31.5636L23.3907 48.3984C23.0641 49.2147 23.8742 50.0248 24.6905 49.6983L41.5253 42.9644C41.7794 42.8627 41.9808 42.6614 42.0824 42.4073Z" fill="#00A2C2"/></svg>'
134
+ icon: {
135
+ url: 'https://p3.aprimocdn.net/malvernpanalytical/1b30c30f-9e0a-4a23-a512-b11401122a8f/icon-compass_Original%20file.svg'
136
+ }
117
137
  }) }}
118
138
  {{ usp({
119
139
  title: "Training and consultancy",
120
140
  classes: 'c-usp c-usp--center',
121
141
  size: "c-h--step-1",
122
- icon: '<svg viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M63.1102 56.0754L66.3828 47.1023L69.6554 56.0754H63.1102Z" fill="#00A2C2" stroke="#00A2C2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/> <path d="M63.3137 27.7098L34.7403 10.9539C34.3238 10.7096 33.8079 10.7096 33.3914 10.9539L6.77935 26.5597C5.90087 27.0748 5.90087 28.3448 6.77935 28.86L12.2957 32.0949M63.3137 27.7098L55.4893 32.4095M63.3137 27.7098L65.7256 29.1286C66.1329 29.3682 66.3829 29.8054 66.3829 30.2778V46.097M12.2957 32.0949L33.3944 44.4675C33.8093 44.7108 34.323 44.7118 34.7389 44.4701L55.4893 32.4095M12.2957 32.0949V52.871C12.2957 53.2848 12.4942 53.6807 12.8237 53.9311C29.4027 66.5294 39.8245 66.7397 55.0152 53.93C55.3131 53.6788 55.4893 53.3029 55.4893 52.9132V32.4095" stroke="#333333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
142
+ icon: {
143
+ url: 'https://p3.aprimocdn.net/malvernpanalytical/df7e8b27-8e8f-494d-8a03-b11401122ff0/icon-graduation-cap_Original%20file.svg'
144
+ }
123
145
  }) }}
124
146
  </div>
125
147
  </div>
Binary file
Binary file
Binary file