mp-design-system 1.2.21 → 1.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.2.21",
+  "version": "1.2.23",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",

package/src/_includes/components/slat/slat.njk

@@ -7,7 +7,8 @@
     <span></span>
     {{ usp({
       title: 'Example content',
-      content: '<p>This content is centered for effect, to show any graphics appearing on the right, or left of this slat.</p>'
+      content: '<p>This content is centered for effect, to show any graphics appearing on the right, or left of this slat.</p>',
+      classes: 'c-usp c-usp--bordered'
     }) }}
     <span></span>
   </div>

package/src/_includes/components/usp/usp.config.js

@@ -3,18 +3,49 @@ module.exports = {
   component: {
     name: 'usp',
   },
+  docs: true,
   figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=686%3A17868',
   preview: 'cards-three',
   context: {
     title: 'Superior speed. Peerless precision.',
     content: '<p>Class-leading particle sizing performance that generates the robust, reliable data you need</p>'
   },
+  variants: [
+    {
+      title: 'Bordered',
+      context: {
+        classes: 'c-usp c-usp--bordered'
+      }
+    },
+    {
+      title: 'With icon',
+      context: {
+        classes: 'c-usp c-usp--center',
+        content: false,
+        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>'
+      }
+    },
+    {
+      title: 'With eyebrow',
+      context: {
+        eyebrow: 'Improve efficiency'
+      }
+    },
+    {
+      title: 'With link',
+      context: {
+        link: 'https://www.brand.malvernpanalytical.com'
+      }
+    }
+  ],
   props: [
     {
       table: [
         ['title', 'string'],
         ['content', 'html', 'HTML passed to the prose field'],
-        ['link', 'string']
+        ['link', 'string (deprecated)'],
+        ['eyebrow', 'string'],
+        ['icon', 'svg', 'HTML/SVG which is output raw']
       ]
     }
   ]

package/src/_includes/components/usp/usp.md

@@ -0,0 +1,21 @@
+A USP can include a few elements:
+- Icon (optional)
+- Eyebrow (optional)
+- Title (required)
+- Body text (optional)
+
+When using USPs, please follow these guidelines:
+
+- Keep the same layout for all USPs within a group
+- Icon and eyebrow are mutually exclusive - you can have one or the other, not both
+- **Grid**
+  - Use a three- or four-column grid depending on the number of USPs
+  - 2, 3, 5, or 6 USPs: three columns
+  - 4, 7, or 7+ USPs: four columns
+- **Alignment**
+  - If body text or eyebrow is present, all elements in the USP are left-aligned
+  - If there's no body text or eyebrow, the USP may be centered
+- **Font size**
+  - Body text font size is always step -1
+  - Title text is step-2 when using a three-column grid
+  - or step-1 when using a four-column grid

package/src/_includes/components/usp/usp.njk

@@ -1,9 +1,36 @@
-<div class="mp c-usp">
-  <div class="u-flow">
-    <h3 class="c-h c-h--step-3 c-usp__title">{{ params.title }}</h3>
-    <div class="mp o-prose">
-      {{ params.content | safe }}
-    </div>
+{% set classNames = "c-usp" %}
+{%- if params.classes -%}
+  {% set classNames = classNames + " " + params.classes %}
+{%- endif -%}
+
+{% set align = "" %}
+{% if not params.content %}
+  {% set align = "u-text-center" %}
+{% endif %}
+
+{% set size = "c-h--step-2" %}
+{% if params.size %}
+  {% set size = params.size %}
+{% endif %}
+
+<div class="mp {{classNames}}">
+  <div class="u-flow {{align}}">
+    {% if params.eyebrow %}
+      <span class="c-usp__eyebrow">
+        {{ params.eyebrow }}
+      </span>
+    {% endif %}
+    {% if params.icon %}
+      <div class="c-usp__icon">{{params.icon | safe}}</div>
+    {% endif %}
+    <h3 class="c-h {{size}} c-usp__title">{{ params.title }}</h3>
+    {% if params.content %}
+      <div class="mp o-prose u-step--1">
+        {{ params.content | safe }}
+      </div>
+    {% endif %}
   </div>
-  {% if params.link %}<a href="{{ params.link }}" class="c-usp__link">{{ params.title }}</a>{% endif %}
+  {% if params.link %}
+    <a href="{{ params.link }}" class="c-usp__link">{{ params.title }}</a>
+  {% endif %}
 </div>

package/src/_includes/components/usp/usp.scss

@@ -1,9 +1,22 @@
 .c-usp {
-  @include padding('s-m');
-  border: 1px solid;
-  border-image-slice: 1;
-  border-image-source: linear-gradient(to right, rgba(color('blue'),0.5), rgba(color('green'),0.5));
+  @include padding-top('s-m');
+  @include padding-bottom('s-m');
   position: relative;
+  
+  &--bordered {
+    @include padding('s-m');
+    border: 1px solid;
+    border-image-slice: 1;
+    border-image-source: linear-gradient(to right, rgba(color('blue'),0.5), rgba(color('green'),0.5));
+  }
+
+  &--center {
+    .c-usp__icon,
+    .c-usp__title {
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
 
   &__title {
     max-width: 300px;
@@ -13,7 +26,7 @@
       background-image: linear-gradient(to right, color('petrol'), color('blue') );
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
-      display: inline-block;
+      // display: inline-block;
 
       &::selection {
         -webkit-background-clip: none;
@@ -25,4 +38,23 @@
     @extend .u-fill, .u-fill--link;
     margin-top: 0;
   }
+
+  &__icon {
+    @include space('height','l');
+    @include space('width','l');
+
+    .c-usp--center & {
+      @include space('height','2xl');
+      @include space('width','2xl');
+    }
+  }
+
+  &__eyebrow {
+    @include padding('3xs', 'xs');
+    @include step(-1);
+    border-radius: 2em;
+    background: #c2e9f0;
+    color: #005461;
+    display: inline-block;
+  }
 }

package/src/assets/scss/objects/grid.scss

@@ -28,6 +28,7 @@ $grid-gutter-width: 36;
   & > * {
     width: calc(($width - (($columns - 1) * space-unit() / $columns)) - 0.1px);
     width: calc(($width - (($columns - 1) * var(--gutter) / $columns)) - 0.1px);
+    @include margin-bottom("gutter");
     
     & + * {
       @include margin-left("gutter");
@@ -37,6 +38,22 @@ $grid-gutter-width: 36;
       margin-left: 0;
     }
   }
+
+  &.o-grid--s {
+    & > * {
+      width: calc(($width - (($columns - 1) * space-unit() / $columns)) - 0.1px);
+      width: calc(($width - (($columns - 1) * var(--space-s) / $columns)) - 0.1px);
+      @include margin-bottom("s");
+      
+      & + * {
+        @include margin-left("s");
+      }
+
+      &:nth-child(#{$columns}n + 1) {
+        margin-left: 0;
+      }
+    }
+  }
 }
 
 .o-grid {
@@ -63,7 +80,6 @@ $grid-gutter-width: 36;
 
   & > * {
     width: 100%;
-    @include margin-bottom("gutter");
   }
 
   &--of-two {

package/src/brand/requirements.md

@@ -10,7 +10,7 @@ date: 2023-06-23
 
 {% alert 'warning' %}
 #### Branding, the hard way
-We **strongly** recommend following the two-step [quick start guide](/quickstart) to ensure your website is on brand. 
+If you're designing a website, we **strongly** recommend following the two-step [quick start guide](/quickstart) to ensure it's on brand. 
 
 If you're unable to follow those steps, then you must be able to meet all of the requirements on this page. Any designs produced this way must be approved by the Malvern Panalytical marketing department.
 {% endalert %}

package/src/components/index.njk

@@ -28,17 +28,20 @@ In order to maintain the integrity of the system it's important we all understan
 <div class="o-grid o-grid--of-three-late">
   {{ usp({
     title: 'A living resource',
-    content: '<p>A system that will constantly evolve to meet our needs.</p>'
+    content: '<p>A system that will constantly evolve to meet our needs.</p>',
+    classes: 'c-usp c-usp--bordered'
   }) }}
 
   {{ usp({
     title: 'Centrally managed',
-    content: '<p>It will be managed and maintained by a central Design System Team, who will be on hand for questions and feedback.</p>'
+    content: '<p>It will be managed and maintained by a central Design System Team, who will be on hand for questions and feedback.</p>',
+    classes: 'c-usp c-usp--bordered'
   }) }}
 
   {{ usp({
     title: 'Reuse and follow',
-    content: '<p>Always start by using/following what exists and then speaking to the Design System Team if there are additional requirements.</p>'
+    content: '<p>Always start by using/following what exists and then speaking to the Design System Team if there are additional requirements.</p>',
+    classes: 'c-usp c-usp--bordered'
   }) }}
 </div>
 

package/src/patterns/usps.njk

@@ -0,0 +1,127 @@
+---
+title: USPs
+layout: patterns-page
+tags: 'patterns'
+---
+
+{% from "components/usp/macro.njk" import usp %}
+
+<div class="u-flow--l-2xl u-flow--lined">
+
+    <div class="u-flow--s">
+        <div class="o-grid o-grid--of-three">
+            {{ usp({
+                title: "Superior speed. Peerless precision.",
+                classes: "c-usp--bordered",
+                content: "<p>Class-leading particle sizing performance that generates the robust, reliable data you need</p>"
+            }) }}
+            {{ usp({
+                title: "Flexible reporting: Data your way.",
+                classes: "c-usp--bordered",
+                content: "<p>Display your data exactly as you want it, customizable directly to your needs</p>"
+            }) }}
+            {{ usp({
+                title: "Intuitive software. Built-in expertise.",
+                classes: "c-usp--bordered",
+                content: "<p>Mastersizer 3000 eases your analytical workload, enabling you to develop and run a variety of methods efficiently</p>"
+            }) }}
+        </div>
+    </div>
+
+    <div class="u-flow--s">
+        <div class="o-grid o-grid--of-three">
+            {{ usp({
+                title: "Impressive particle sizing performance",
+                eyebrow: "Greater flexibility",
+                content: "<p>High sample throughput and a measurement size range from 10nm to 3.5mm</p>"
+            }) }}
+            {{ usp({
+                title: "Automatic alignment and cell location",
+                eyebrow: "Reliable and repeatable",
+                content: "<p>Correct optical alignment is ensured before every measurement by an auto alignment procedure</p>"
+            }) }}
+            {{ usp({
+                title: "Software that eases your workload",
+                eyebrow: "Improve efficiency",
+                content: "<p>Software which delivers a modern intuitive interface and streamlined method development</p>"
+            }) }}
+        </div>
+    </div>
+
+    <div class="u-flow--s">
+        <div class="o-grid o-grid--of-four">
+            {{ usp({
+                title: "Handles the toughest conditions",
+                content: "<p>FORJ is designed for less thermal stress and reduced risk of contamination - which means low maintenance and high productivity.</p>",
+                size: "c-h--step-1",
+                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>'
+            }) }}
+            {{ usp({
+                title: "Results you can count on",
+                content: "<p>Consistent heating between positions, homogeneous melt, and contamination-free heating - ensuring superior, repeatable results.</p>",
+                size: "c-h--step-1",
+                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>'
+            }) }}
+            {{ usp({
+                title: "World-leading speed",
+                content: "<p>The fastest fusion sample-prep on the market. Boost your productivity by up to 25% with the same compact footprint.</p>",
+                size: "c-h--step-1",
+                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>'
+            }) }}
+            {{ usp({
+                title: "Hassle-free handling",
+                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>",
+                size: "c-h--step-1",
+                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>'
+            }) }}
+        </div>
+    </div>
+
+    <div class="u-flow--s">
+        <div class="o-grid o-grid--of-four u-justify-center">
+            {{ usp({
+                title: "Handles the toughest conditions",
+                classes: 'c-usp c-usp--center',
+                size: "c-h--step-1",
+                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>'
+            }) }}
+            {{ usp({
+                title: "Compliance standards",
+                classes: 'c-usp c-usp--center',
+                size: "c-h--step-1",
+                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>'
+            }) }}
+            {{ usp({
+                title: "Instant monitoring",
+                classes: 'c-usp c-usp--center',
+                size: "c-h--step-1",
+                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>'
+            }) }}
+            {{ usp({
+                title: "Peerless quality control",
+                classes: 'c-usp c-usp--center',
+                size: "c-h--step-1",
+                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>'
+            }) }}
+            {{ usp({
+                title: "Expert support on hand",
+                classes: 'c-usp c-usp--center',
+                size: "c-h--step-1",
+                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>'
+            }) }}
+            {{ usp({
+                title: "Industry-leading solutions",
+                classes: 'c-usp c-usp--center',
+                size: "c-h--step-1",
+                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>'
+            }) }}
+            {{ usp({
+                title: "Training and consultancy",
+                classes: 'c-usp c-usp--center',
+                size: "c-h--step-1",
+                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>'
+            }) }}
+        </div>
+    </div>
+
+</div>

package/src/prototype/product.njk

@@ -73,14 +73,17 @@ tagTitle: Product
     <div class="o-grid o-grid--of-three u-pad-top-m-l">
       {{ usp({
         title: 'Superior speed. Peerless precision.',
+        classes: 'c-usp c-usp--bordered',
         content: '<p>Class-leading particle sizing performance that generates the robust, reliable data you need</p>'
       }) }}
       {{ usp({
         title: 'Flexible reporting: Data your way.',
+        classes: 'c-usp c-usp--bordered',
         content: '<p>Display your data exactly as you want it, customizable directly to your needs</p>'
       }) }}
       {{ usp({
         title: 'Intuitive software. Built-in expertise.',
+        classes: 'c-usp c-usp--bordered',
         content: '<p>Mastersizer 3000 eases your analytical workload, enabling you to develop and run a variety of methods efficiently</p>'
       }) }}
     </div>

package/src/prototype/range.njk

@@ -76,14 +76,17 @@ tagTitle: Range
     <div class="o-grid o-grid--of-three u-pad-top-m-l">
       {{ usp({
         title: 'Superior speed. Peerless precision.',
+        classes: 'c-usp c-usp--bordered',
         content: '<p>Class-leading particle sizing performance that generates the robust, reliable data you need</p>'
       }) }}
       {{ usp({
         title: 'Flexible reporting: Data your way.',
+        classes: 'c-usp c-usp--bordered',
         content: '<p>Display your data exactly as you want it, customizable directly to your needs</p>'
       }) }}
       {{ usp({
         title: 'Intuitive software. Built-in expertise.',
+        classes: 'c-usp c-usp--bordered',
         content: '<p>Mastersizer 3000 eases your analytical workload, enabling you to develop and run a variety of methods efficiently</p>'
       }) }}
     </div>