mp-design-system 1.2.25 → 1.2.27
Sign up to get free protection for your applications and to get access to all the features.
- 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
|