mp-design-system 1.2.52 → 1.2.55

package/package.json

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

package/src/_headers

@@ -1,5 +1,5 @@
 /*
-  Content-Security-Policy: default-src 'self'; base-uri 'self'; block-all-mixed-content; font-src 'self' https://fonts.gstatic.com; form-action 'self'; frame-src 'self' https://brand.malvernpanalytical.com https://www.youtube.com https://challenges.cloudflare.com https://newassets.hcaptcha.com; frame-ancestors 'self' https://brand.malvernpanalytical.com; img-src 'self' data: https://p3.aprimocdn.net https://img.youtube.com; object-src 'none'; picture-in-picture 'self'; sandbox allow-forms allow-same-origin allow-scripts allow-downloads; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://polyfill.io https://eu.altcha.org https://challenges.cloudflare.com https://js.hcaptcha.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; upgrade-insecure-requests;
+  Content-Security-Policy: default-src 'self'; base-uri 'self'; block-all-mixed-content; font-src 'self' https://fonts.gstatic.com; form-action 'self'; frame-src 'self' https://brand.malvernpanalytical.com https://www.youtube.com https://challenges.cloudflare.com https://newassets.hcaptcha.com; frame-ancestors 'self' https://brand.malvernpanalytical.com; img-src 'self' data: https://dam.malvernpanalytical.com https://p3.aprimocdn.net https://img.youtube.com; object-src 'none'; picture-in-picture 'self'; sandbox allow-forms allow-same-origin allow-scripts allow-downloads; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://polyfill.io https://eu.altcha.org https://challenges.cloudflare.com https://js.hcaptcha.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; upgrade-insecure-requests;
   X-Content-Type-Options: nosniff
   X-Frame-Options: SAMEORIGIN
   X-XSS-Protection: 1; mode=block

package/src/_includes/components/back-to-top/back-to-top.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  title: 'Back to top',
+  component: {
+    name: 'back-to-top',
+  },
+  context: {
+    text: 'Back to top',
+  },
+  variants: [],
+};

package/src/_includes/components/back-to-top/back-to-top.njk

@@ -0,0 +1,7 @@
+{%- from "components/icon/macro.njk" import icon -%}
+
+{%- set classNames = "mp c-back-to-top" -%}
+
+<a href="#header" class="{{ classNames }}" title="{{ params.text }}">
+  {{ icon({ id: 'chevron-up', class: 'c-back-to-top__icon' }) }}
+</a>

package/src/_includes/components/back-to-top/back-to-top.scss

@@ -0,0 +1,22 @@
+.c-back-to-top {
+  position: fixed;
+  background: color('blue');
+  color: color('white') !important;
+  height: 2.6rem;
+  width: 2.6rem;
+  right: var(--space-xs);
+  bottom: var(--space-xs);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4rem;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 20%);
+  transition: 300ms background-color, 300ms color;
+
+  &:where(:hover, :focus) {
+    background: color('blue', 'step--1');
+  }
+
+  &__icon {
+  }
+}

package/src/_includes/components/back-to-top/macro.njk

@@ -0,0 +1,5 @@
+{%- from "components/component/component.njk" import c -%}
+
+{%- macro backToTop(params) -%}
+  {{ c({ name: 'back-to-top' }, params) }}
+{%- endmacro -%}

package/src/_includes/components/footer/footer.njk

@@ -1,4 +1,5 @@
 {% from "components/icon/macro.njk" import icon %}
+{% from "components/back-to-top/macro.njk" import backToTop %}
 
 <footer class="mp c-footer" role="contentinfo">
   <nav class="c-footer__primary u-wrap" aria-label="Footer">
@@ -76,3 +77,5 @@
     </div>
   </div>
 </footer>
+
+{{ backToTop({}) }}

package/src/_includes/components/hotspot-image/hotspot-image.config.js

@@ -0,0 +1,55 @@
+module.exports = {
+  title: 'Hotspot image',
+  component: {
+    name: 'hotspot-image',
+  },
+  context: {
+    image: {
+      src: 'https://dam.malvernpanalytical.com/3f407d1c-a153-4806-ab9e-b1bf00d41bc5/2524009%20MALV%20Infographic%20Analycial%20process_WITHOUT_TEXT_ModAW_Original%20file.jpg',
+      alt: 'Description of the image',
+    },
+    heading: {
+      position: 'top: 2.75%; left: 2.75%;',
+      content: 'All the elements of an integrated analytical workflow',
+    },
+    hotspots: [
+      {
+        position: 'top: 46%; left: 29%;',
+        button: {
+          label: 'Preparing your sample',
+        },
+        tooltip: {
+          content:
+            '<ul class="o-grid o-grid--of-two"><li class="u-bg-white u-pad-2xs">Sample preparation methods & advice</li><li class="u-bg-white u-pad-2xs">Labware and accessories</li><li class="u-bg-white u-pad-2xs">Instruments for flux dosing and fusion</li><li class="u-bg-white u-pad-2xs">Methods and advice</li></ul>',
+        },
+      },
+      {
+        position: 'top: 28.75%; left: 70%;',
+        button: {
+          label: 'Analysis with XRF',
+        },
+        tooltip: {
+          content:
+            '<ul class="o-grid o-grid--of-two"><span class="u-margin-0"></span><li class="o-grid o-grid--of-two u-align-items-start u-margin-0" style="flex-basis: 100%;"><span class="u-bg-white u-pad-2xs">XRF application methods</span><ul class="u-flow--2xs"><li class="u-bg-petrol u-petrol-step-3 u-pad-2xs">Templates in i.e., Wroxi</li><li class="u-bg-petrol u-petrol-step-3 u-pad-2xs">Application Support</li></ul></li><span class="u-margin-0"></span><li class="o-grid o-grid--of-two u-align-items-start u-margin-0" style="flex-basis: 100%;"><span class="u-bg-white u-pad-2xs">Certified reference materials</span><ul><li class="u-bg-petrol u-petrol-step-3 u-pad-2xs">Off-the-shelf and customized</li></ul></li><li class="u-bg-white u-pad-2xs">Expertise support</li><li class="u-bg-white u-pad-2xs">Pre-calibration</li><li class="u-bg-white u-pad-2xs">XRF instruments and maintenance</li></ul>',
+        },
+      },
+      {
+        position: 'top: 67.75%; left: 76%;',
+        button: {
+          label: 'Reporting results',
+        },
+        tooltip: {
+          content:
+            '<ul class="o-grid o-grid--of-two"><li class="u-bg-white u-pad-2xs">Seamless connection to LIMS</li><li class="u-bg-white u-pad-2xs">Training Instrument operation training</li><li class="u-bg-white u-pad-2xs">Data interpretation</li><li class="u-bg-white u-pad-2xs">XRF Application training</li><li class="u-bg-white u-pad-2xs">Sample preparation training</li></ul>',
+        },
+      },
+      {
+        position: 'top: 85%; left: 48.5%;',
+        button: {
+          label: 'Training',
+        },
+      },
+    ],
+  },
+  variants: [],
+};

package/src/_includes/components/hotspot-image/hotspot-image.njk

@@ -0,0 +1,41 @@
+{% set classNames = "mp c-hotspot-image" %}
+
+<div class="{{ classNames }}" role="img" aria-label="Interactive image with hotspots">
+  {% if params.image %}
+    <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" role="presentation">
+  {% endif %}
+  
+  {% if params.heading %}
+    <p class="{{ classNames }}__heading" style="{{ params.heading.position }}" aria-labelledby="image-heading">
+      {{ params.heading.content }}
+    </p>
+  {% endif %}
+
+  {% if params.hotspots | length %}
+    {% for hotspot in params.hotspots %}
+      <div class="{{ classNames }}__hotspot" style="{{ hotspot.position }}" aria-live="polite">
+        {% if hotspot.button and hotspot.tooltip %}
+          <button class="{{ classNames }}__button"
+                  role="button"
+                  aria-expanded="false"
+                  aria-controls="tooltip-{{ loop.index }}"
+                  aria-label="{{ hotspot.button.label }}">
+            {{ hotspot.button.label }}
+          </button>
+          <div id="tooltip-{{ loop.index }}"
+               class="c-hotspot-image__tooltip"
+               role="tooltip"
+               aria-hidden="true">
+            {{ hotspot.tooltip.content | safe }}
+          </div>
+        {% elseif hotspot.button %}
+          <span class="{{ classNames }}__button c-hotspot-image__button--no-tooltip"
+                role="button"
+                aria-label="{{ hotspot.button.label }}">
+            {{ hotspot.button.label }}
+          </span>
+        {% endif %}
+      </div>
+    {% endfor %}
+  {% endif %}
+</div>

package/src/_includes/components/hotspot-image/hotspot-image.scss

@@ -0,0 +1,103 @@
+.c-hotspot-image {
+  position: relative;
+  counter-reset: hotspot-counter;
+
+  &__heading,
+  &__hotspot {
+    position: absolute;
+  }
+
+  &__heading {
+    background: color('petrol', 'step--1');
+    color: color('petrol', 'step-3');
+    @include padding('s', 'm');
+    border-radius: 1em;
+    font-size: var(--step-1);
+  }
+
+  &__hotspot {
+    isolation: isolate;
+
+    &:has([aria-expanded='true']) {
+      z-index: 1;
+    }
+  }
+
+  &__button {
+    position: relative;
+    background: color('petrol');
+    color: color('petrol', 'step-3');
+    @include padding('2xs');
+    display: flex;
+    gap: var(--space-2xs);
+    align-items: center;
+    border: none;
+    border-radius: 1em;
+    font-size: var(--step--1);
+
+    &:not(&--no-tooltip) {
+      cursor: pointer;
+      transition: 300ms background-color;
+
+      &:where(:hover, :focus) {
+        background: color('petrol', 'step--1');
+      }
+    }
+
+    &::before,
+    &::after {
+      --number-size: calc(var(--step-1) * 1.5);
+      height: var(--number-size);
+      width: var(--number-size);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 2em;
+      font-size: var(--step-1);
+      font-weight: 600;
+    }
+
+    &::before {
+      counter-increment: hotspot-counter;
+      content: counter(hotspot-counter);
+      background: color('red');
+      color: color('white');
+    }
+
+    &::after {
+      content: '+';
+      background: color('petrol', 'step--1');
+      color: color('white');
+      @include padding('3xs');
+    }
+
+    &--no-tooltip::after {
+      display: none;
+    }
+  }
+
+  &__tooltip {
+    --gutter: var(--space-2xs);
+    display: none;
+    position: absolute;
+    background: color('petrol', 'step-1');
+    margin-top: -1em;
+    padding-top: calc(var(--space-2xs) + 1em);
+    @include padding-right('2xs');
+    @include padding-bottom('2xs');
+    @include padding-left('2xs');
+    border-bottom-right-radius: 1em;
+    border-bottom-left-radius: 1em;
+    z-index: -1;
+    font-size: var(--step--2);
+
+    .u-bg-white,
+    .u-bg-petrol {
+      border-radius: calc(1em / 2);
+    }
+
+    &--open {
+      display: block;
+    }
+  }
+}

package/src/_includes/components/hotspot-image/macro.njk

@@ -0,0 +1,5 @@
+{%- from "components/component/component.njk" import c -%}
+
+{%- macro hotspotImage(params) -%}
+  {{ c({ name: 'hotspot-image' }, params) }}
+{%- endmacro -%}

package/src/_includes/components/icon/icon.njk

@@ -1,3 +1,13 @@
-<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--{{ params.id }}">
+{%- set classNames = "mp c-icon c-icon" -%}
+
+{%- if params.id -%}
+  {% set classNames = classNames + " c-icon--" + params.id %}
+{% endif -%}
+
+{%- if params.class -%}
+  {% set classNames = classNames + " " + params.class %}
+{% endif -%}
+
+<svg role="img" aria-hidden="true" focusable="false" class="{{ classNames }}">
   <use xlink:href="/static/svg/sprite.svg#{{ params.id }}"></use>
 </svg>

package/src/assets/js/app.js

@@ -6,6 +6,7 @@ import Facet from './imports/facet';
 import Gallery from './imports/gallery';
 import HeroPattern from './imports/hero-pattern';
 import HeroVideo from './imports/hero-video';
+import HotspotImage from './imports/hotspot-image';
 import InternalNav from './imports/internal-nav';
 import OffCanvas from './imports/off-canvas';
 import ResponsiveTable from './imports/responsive-table';
@@ -14,13 +15,13 @@ import ScrollSpy from './imports/scroll-spy';
 import Tabs from './imports/tabs';
 
 (() => {
-  if(window.NodeList && !NodeList.prototype.forEach) {
+  if (window.NodeList && !NodeList.prototype.forEach) {
     NodeList.prototype.forEach = Array.prototype.forEach;
   }
-  if(window.HTMLCollection && !HTMLCollection.prototype.forEach) {
+  if (window.HTMLCollection && !HTMLCollection.prototype.forEach) {
     HTMLCollection.prototype.forEach = Array.prototype.forEach;
   }
-  
+
   Accordion();
   Carousel();
   ClearForm();
@@ -29,10 +30,11 @@ import Tabs from './imports/tabs';
   Gallery();
   HeroPattern();
   HeroVideo();
+  HotspotImage();
   InternalNav();
   OffCanvas();
   ResponsiveTable();
   ScrollbarWidth();
   ScrollSpy();
   Tabs();
-})();
+})();

package/src/assets/js/imports/hotspot-image.js

@@ -0,0 +1,91 @@
+// Function to initialize tooltip behavior
+function HotspotImage() {
+  // Add delay for Tridion JavaScript created hotspot images
+  setTimeout(function () {
+    // Select all elements that trigger tooltips
+    const tooltips = document.querySelectorAll('.c-hotspot-image__button');
+
+    // Add event listeners for each tooltip button
+    tooltips.forEach((button) => {
+      button.addEventListener('click', handleTooltipToggle);
+    });
+
+    // Add event listener for Escape key press
+    document.addEventListener('keydown', handleKeyDown);
+
+    // Add event listener for click outside tooltip
+    document.addEventListener('click', handleClickOutside);
+  }, 2000);
+}
+
+// Function to handle the tooltip toggle
+function handleTooltipToggle(event) {
+  // Prevent default action if needed
+  event.preventDefault();
+
+  const button = event.currentTarget;
+  const tooltipId = button.getAttribute('aria-controls');
+  const tooltip = document.getElementById(tooltipId);
+
+  if (tooltip.classList.contains('c-hotspot-image__tooltip--open')) {
+    closeTooltip(button, tooltip);
+  } else {
+    openTooltip(button, tooltip);
+  }
+}
+
+// Function to open a tooltip
+function openTooltip(button, tooltip) {
+  // Add active class and make tooltip visible
+  tooltip.classList.add('c-hotspot-image__tooltip--open');
+  tooltip.setAttribute('aria-hidden', 'false');
+  button.setAttribute('aria-expanded', 'true');
+
+  // Add event listener for click outside
+  document.addEventListener('click', handleClickOutside);
+}
+
+// Function to close a tooltip
+function closeTooltip(button, tooltip) {
+  // Remove active class and hide tooltip
+  tooltip.classList.remove('c-hotspot-image__tooltip--open');
+  tooltip.setAttribute('aria-hidden', 'true');
+  button.setAttribute('aria-expanded', 'false');
+
+  // Remove event listener for click outside
+  document.removeEventListener('click', handleClickOutside);
+}
+
+// Function to handle Escape key press
+function handleKeyDown(event) {
+  if (event.key === 'Escape') {
+    const activeTooltip = document.querySelector(
+      '.c-hotspot-image__tooltip--open'
+    );
+    if (activeTooltip) {
+      const button = document.querySelector(
+        `[aria-controls="${activeTooltip.id}"]`
+      );
+      closeTooltip(button, activeTooltip);
+    }
+  }
+}
+
+// Function to handle click outside the tooltip
+function handleClickOutside(event) {
+  const activeTooltip = document.querySelector(
+    '.c-hotspot-image__tooltip--open'
+  );
+  if (
+    activeTooltip &&
+    !activeTooltip.contains(event.target) &&
+    !event.target.closest('.c-hotspot-image__button')
+  ) {
+    const button = document.querySelector(
+      `[aria-controls="${activeTooltip.id}"]`
+    );
+    closeTooltip(button, activeTooltip);
+  }
+}
+
+export default HotspotImage;

package/src/assets/scss/components/form.scss

@@ -188,6 +188,12 @@
           @include margin(0);
         }
       }
+
+      & > .o-grid,
+      & > .o-grid > * {
+        @include margin(0);
+        @include padding(0);
+      }
     }
 
     &__section + .c-form__section:not(.c-form__section--submit) {

package/src/assets/scss/components/index.scss

@@ -1,5 +1,6 @@
 @import '~comp/accordion/accordion.scss';
 @import '~comp/alert/alert.scss';
+@import '~comp/back-to-top/back-to-top.scss';
 @import '~comp/breadcrumb/breadcrumb.scss';
 @import '~comp/button/button.scss';
 @import '~comp/campaign/campaign.scss';
@@ -21,6 +22,7 @@
 @import '~comp/gallery/gallery.scss';
 @import '~comp/header/header.scss';
 @import '~comp/hero/hero.scss';
+@import '~comp/hotspot-image/hotspot-image.scss';
 @import '~comp/icon/icon.scss';
 @import '~comp/input/input.scss';
 @import '~comp/input/radio.scss';

package/src/assets/scss/objects/prose.scss

@@ -2,15 +2,15 @@
   color: inherit;
 
   h2 {
-    @extend .c-h,.c-h--step-3;
+    @extend .c-h, .c-h--step-3;
   }
 
   h3 {
-    @extend .c-h,.c-h--step-2;
+    @extend .c-h, .c-h--step-2;
   }
 
   h4 {
-    @extend .c-h,.c-h--step-1;
+    @extend .c-h, .c-h--step-1;
   }
 
   p,
@@ -25,14 +25,15 @@
     color: color('utility-blue');
     text-decoration: underline;
     text-underline-offset: 3px;
-  
+
     &:hover {
       text-decoration: none;
     }
   }
 
   ul li {
-    list-style: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="20" viewBox="0 0 10 20"><circle cx="5" cy="14" r="3.5" fill="%2313AA13" fill-rule="evenodd"/></svg>') outside;    
+    list-style: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="20" viewBox="0 0 10 20"><circle cx="5" cy="14" r="3.5" fill="%2313AA13" fill-rule="evenodd"/></svg>')
+      outside;
     margin-left: 1em;
     padding-left: 0.5rem;
 
@@ -152,6 +153,10 @@
   table {
     @extend .c-table;
   }
+
+  video {
+    max-width: 100%;
+  }
 }
 
 .o-featured-image {

package/src/assets/scss/utilities/flex.scss

@@ -10,6 +10,10 @@
   align-items: center;
 }
 
+.u-align-items-start {
+  align-items: flex-start;
+}
+
 .u-justify-center {
   justify-content: center;
 }

package/src/assets/scss/utilities/space.scss

@@ -87,6 +87,9 @@
 .u-pad-3xs {
   @include padding('3xs');
 }
+.u-pad-2xs {
+  @include padding('2xs');
+}
 .u-pad-s {
   @include padding('s');
 }
@@ -173,7 +176,7 @@
   margin-top: auto;
 }
 .u-margin-top-negative-2xl {
-  margin-top: calc(-1 * #{var(--space-2xl)})
+  margin-top: calc(-1 * #{var(--space-2xl)});
 }
 .u-margin-top-2xs {
   @include margin-top('2xs');

package/src/brand/typography.md

@@ -9,15 +9,15 @@ status: 'Ready'
 
 ## Inter
 
-Our brand font is [Inter](https://rsms.me/inter). This typeface has been selected for its;
+Our brand font is **Inter**. This typeface has been selected for its;
 - Excellent clarity and legibility
 - Extensive character set
 - Comprehensive weight and style options
 - Understated authority
 
-Find more information about Inter at [https://rsms.me/inter](https://rsms.me/inter)
+**We use Inter version 3**. Inter recently received a new v4 update, which changes the spacing and overall look of the font. To maintain consistent branding for Malvern Panalytical materials, we recommend avoiding any version later than v3.19.
 
-{% button 'Download Inter font' 'https://github.com/rsms/inter/releases/download/v3.19/Inter-3.19.zip' %}
+{% button 'Download Inter font (v3.19)' 'https://github.com/rsms/inter/releases/download/v3.19/Inter-3.19.zip' %}
 
 Inter is also available from [Google Fonts](https://fonts.google.com/specimen/Inter).
 

package/src/content/boilerplate.md

@@ -3,25 +3,31 @@ title: Boilerplate
 layout: content-page
 sidebar: content
 status: 'Ready'
-version: 1.0.2
+version: 1.0.3
 tags: content
 date: 2020-01-03
 ---
 
-{% alert %}
-This is our **boilerplate**: the default text we use to describe ourselves in press releases and other publications.
-{% endalert %}
+<div class="u-pad-l u-bg-petrol-step-3 o-prose u-flow--prose">
 
 ### About Malvern Panalytical
 
-We draw on the power of our analytical instruments and services to make the invisible visible and the impossible possible. 
+Malvern Panalytical is a global leader in the analytics of material and life sciences. We unleash the power of small things to make big things happen for our customers.
 
-Through the chemical, physical and structural analysis of materials, our high precision analytical systems and top-notch services support our customers in creating a better world. We help them improve everything from the energies that power us and the materials we build with, to the medicines that cure us and the foods we enjoy. 
+Our vision is to make the world cleaner, healthier, and more productive. 
 
-We partner with many of the world’s biggest companies, universities and research organizations. They value us not only for the power of our solutions, but also for the depth of our expertise, collaboration and integrity. 
+We partner with our customers to make their solutions possible through the power of precision measurements, our expertise, trusted data, and insights. 
 
-We are committed to Net Zero in our own operations by 2030 and in our total value chain by 2040. This is woven into the fabric of our business, and we help our employees and customers think about their part in creating a healthier, cleaner, and more productive world. 
+Our people are partners in discovery. We collaborate with our customers and with each other to discover new possibilities and achieve breakthroughs. 
 
-With over 2300 employees, we serve the world, and we are part of Spectris plc, the world-leading precision measurement group.
+Our culture is a healthy, high-performance culture shaped by our values:  Own it, Aim High and Be True.
 
-**Malvern Panalytical. We’re BIG on small.™**
+We’re committed to Net Zero in our own operations by 2030 and in our total value chain by 2040.
+
+With over 2300 employees across the globe, we are part of Spectris plc, the world-leading precision measurement group.
+
+**Malvern Panalytical. We’re BIG on small.™**
+
+</div>
+
+This is our **boilerplate**: the default text we use to describe ourselves in press releases and other publications.

package/src/content/elevator-pitch.md

@@ -1,21 +1,26 @@
 ---
-title: We're BIG on small
+title: Elevator pitch
 layout: content-page
 sidebar: content
 tags: content
+version: 1.0.3
+status: 'Ready'
 date: 2020-01-02
 ---
 
-**We are Malvern Panalytical.** We are here to unleash the
-power of very small things, to make big things happen.
+<div class="u-pad-l u-bg-petrol-step-3 o-prose u-flow--prose">
 
-**Our technologies enable our customers to create a better world.** Improving everything from the energies that power us and the materials we build with, to the medicines that cure us and the foods we enjoy.
+Malvern Panalytical is a global leader in the analytics of material and life sciences. We exist to unleash the power of small things to make big things happen for our customers (we’re big on small). 
 
-**We partner with many of the world’s biggest companies, universities and research organizations.** They value us not only for the power of our solutions, but also for the depth of our expertise, collaboration and integrity.
+Every day we work in pursuit of a clear vision: to make the world cleaner, healthier, and more productive. To achieve our vision, we partner with our customers to make their solutions possible through the power of precision measurements, our expertise, trusted data, and insights.  
 
-**We are a globally diverse mix of visionary thinkers, creative problem-solvers, and detail-loving geeks.** United by knowing that when you can make the invisible visible, you make the impossible possible.
+Customers are at the heart of our company and core to our success: acting as partners in discovery, we collaborate every day with our customers and with each other to discover new possibilities and achieve breakthroughs.
 
-{% alert %}
+Supported by a healthy, high-performance culture shaped by our values we collaborate to improve how we work together, how we create value, and how we remain relevant as an organization in the future.
+
+**Malvern Panalytical. We’re BIG on small.™**
+
+</div>
 
 ### This is our official ‘elevator pitch’.
 
@@ -26,5 +31,3 @@ We use it as the starting point whenever we’re talking about ourselves. (You
 Use it whenever you need to describe Malvern Panalytical.
 
 (Note that ‘We're BIG on small’ is trademarked.)
-
-{% endalert %}