mp-design-system 1.2.25 → 1.2.27
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.
- package/dist/build/scss/library.css +1 -1
- package/dist/build/scss/library.css.map +1 -1
- package/dist/build/scss/main.css +1 -1
- package/dist/build/scss/main.css.map +1 -1
- package/package.json +1 -1
- package/src/_includes/components/card/macro.njk +4 -0
- package/src/_includes/components/card/search-result-card.config.js +29 -0
- package/src/_includes/components/card/search-result-card.njk +24 -0
- package/src/_includes/components/card/search-result-card.scss +48 -0
- package/src/_includes/components/eyebrow/eyebrow.config.js +47 -0
- package/src/_includes/components/eyebrow/eyebrow.njk +7 -0
- package/src/_includes/components/eyebrow/eyebrow.scss +29 -0
- package/src/_includes/components/eyebrow/macro.njk +5 -0
- package/src/_includes/components/meta-box/meta-box.scss +0 -24
- package/src/_includes/components/usp/usp.config.js +5 -2
- package/src/_includes/components/usp/usp.md +82 -2
- package/src/_includes/components/usp/usp.njk +7 -1
- package/src/_includes/components/usp/usp.scss +2 -2
- package/src/assets/scss/components/index.scss +2 -0
- package/src/assets/scss/foundations/typography.scss +6 -6
- package/src/assets/scss/objects/grid.scss +10 -0
- package/src/assets/scss/tools/index.scss +12 -0
- package/src/assets/scss/utilities/divider.scss +6 -0
- package/src/assets/scss/utilities/index.scss +1 -0
- package/src/brand/typography.md +1 -1
- package/src/patterns/usps.njk +34 -12
- package/src/assets/fonts/Inter-Bold.woff +0 -0
- package/src/assets/fonts/Inter-Bold.woff2 +0 -0
- package/src/assets/fonts/Inter-Regular.woff +0 -0
- package/src/assets/fonts/Inter-Regular.woff2 +0 -0
- package/src/assets/fonts/Inter-SemiBold.woff +0 -0
- package/src/assets/fonts/Inter-SemiBold.woff2 +0 -0
- /package/{dist/build/Inter-Bold.419e8c71.woff → src/assets/fonts/inter-bold.woff} +0 -0
- /package/{dist/build/Inter-Bold.af5441a3.woff2 → src/assets/fonts/inter-bold.woff2} +0 -0
- /package/{dist/build/Inter-Regular.ca6858d7.woff → src/assets/fonts/inter-regular.woff} +0 -0
- /package/{dist/build/Inter-Regular.ed77b881.woff2 → src/assets/fonts/inter-regular.woff2} +0 -0
- /package/{dist/build/Inter-SemiBold.cc1168df.woff → src/assets/fonts/inter-semibold.woff} +0 -0
- /package/{dist/build/Inter-SemiBold.dd034768.woff2 → src/assets/fonts/inter-semibold.woff2} +0 -0
package/package.json
CHANGED
|
@@ -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,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
|
+
}
|
|
@@ -7,28 +7,4 @@
|
|
|
7
7
|
.u-wrap--fields {
|
|
8
8
|
@include padding-right(0)
|
|
9
9
|
}
|
|
10
|
-
|
|
11
|
-
@media only screen and (min-width: 35em) and (max-width: 54.95em) {
|
|
12
|
-
column-width: 18em;
|
|
13
|
-
display: grid;
|
|
14
|
-
grid-template-columns: 1fr 1fr;
|
|
15
|
-
grid-gap: 0 var(--gutter);
|
|
16
|
-
grid-template-rows: auto max-content auto;
|
|
17
|
-
|
|
18
|
-
h2 {
|
|
19
|
-
grid-column: 1/3;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
li {
|
|
23
|
-
break-inside: avoid;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.u-grey-step-1 {
|
|
27
|
-
grid-row: 2/4;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.c-button {
|
|
31
|
-
align-self: start;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
10
|
}
|
|
@@ -22,7 +22,9 @@ module.exports = {
|
|
|
22
22
|
context: {
|
|
23
23
|
classes: 'c-usp c-usp--center',
|
|
24
24
|
content: false,
|
|
25
|
-
icon:
|
|
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
|
|
21
|
-
- or step
|
|
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">
|
|
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 %}
|
|
@@ -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:
|
|
140
|
-
|
|
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:
|
|
149
|
-
|
|
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:
|
|
158
|
-
|
|
157
|
+
src: #{'../fonts/inter-bold.woff2'} format("woff2"),
|
|
158
|
+
#{'../fonts/inter-bold.woff'} format("woff");
|
|
159
159
|
}
|
|
@@ -185,6 +185,16 @@ $grid-gutter-width: 36;
|
|
|
185
185
|
}
|
|
186
186
|
}
|
|
187
187
|
|
|
188
|
+
// Prevents overlap on floated sticky elements when stacked
|
|
189
|
+
@media (max-width: 55em) {
|
|
190
|
+
&--float:not([class*="switch"]) > :nth-child(2n + 1),
|
|
191
|
+
&--float[class*="switch"] > :nth-child(2n + 2),
|
|
192
|
+
&--float:not([class*="switch"]) > :nth-child(2n + 2),
|
|
193
|
+
&--float[class*="switch"] > :nth-child(2n + 1) {
|
|
194
|
+
position: static;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
188
198
|
@media (min-width: 55em) {
|
|
189
199
|
&--4\/7 > :nth-child(2n + 2),
|
|
190
200
|
&--4\/7-switch > :nth-child(2n + 2) {
|
package/src/brand/typography.md
CHANGED
|
@@ -38,7 +38,7 @@ abcdefghijklmnopqrstuvwxyz @ $ € £ ¥ & © ® ™ μ ± °
|
|
|
38
38
|
|
|
39
39
|
- Inter Light for printed materials
|
|
40
40
|
- Inter Regular for web/software
|
|
41
|
-
-
|
|
41
|
+
- Calibri for office (e.g. Powerpoint)
|
|
42
42
|
- Color: 100% black for printed materials, [MP21Charcoal](/brand/visual/colors) for digital
|
|
43
43
|
- <span class="c-library__semi">Inter Semi Bold</span> for emphasis
|
|
44
44
|
- Recommended font sizes for body text:
|
package/src/patterns/usps.njk
CHANGED
|
@@ -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:
|
|
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:
|
|
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:
|
|
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:
|
|
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: "
|
|
91
|
+
title: "Reduced emissions",
|
|
84
92
|
classes: 'c-usp c-usp--center',
|
|
85
93
|
size: "c-h--step-1",
|
|
86
|
-
icon:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|