mp-design-system 1.2.64 → 1.2.65

package/src/patterns/mp-form.njk

@@ -1,111 +0,0 @@
----
-title: New Style Form
-layout: patterns-page
----
-
-<div class="o-grid o-grid--8/3 o-grid--float o-grid--layout">
-   <form class="mp-dynamicform c-form">
-      <header class="c-form__header">
-         <h1 class="c-form__heading">You're almost done...</h1>
-         <p class="c-form__lede">Just one more step and our sales team will have everything they need to contact you. Complete the form below and our team will aim to be in touch within 1 business day.</p>
-      </header>
-      <fieldset class="c-form__section">
-         <legend class="c-form__section-title">Your enquiry</legend>
-         <div class="c-form__group">
-            <div class="c-form__field Product">
-               <div class="c-form__input-wrap">
-                  <label class="c-form__label" for="Product">Product</label>
-                  <select class="c-form__input c-form__input--select Product" name="Product" id="Product">
-                     <option value=""></option>
-                     <option value="option-1">Option 1</option>
-                     <option value="option-2">Option 2</option>
-                     <option value="option-3">Option 3</option>
-                  </select>
-               </div>
-            </div>
-         </div>
-         <div class="c-form__group o-grid o-grid--of-two">
-            <div class="c-form__field FirstName required">
-               <div class="c-form__input-wrap">
-                  <label class="c-form__label c-form__label--required" for="FirstName">First name</label>
-                  <input type="text" class="c-form__input" name="FirstName" value="" placeholder="" id="FirstName" required="" />
-               </div>
-            </div>
-            <div class="c-form__field LastName required">
-               <div class="c-form__input-wrap">
-                  <label class="c-form__label c-form__label--required" for="LastName">Last name</label>
-                  <input type="text" class="c-form__input" name="LastName" value="" placeholder="" id="LastName" required="" />
-               </div>
-            </div>
-         </div>
-         <div class="c-form__group">
-            <div class="c-form__field EmailAddress required">
-               <div class="c-form__input-wrap">
-                  <label class="c-form__label c-form__label--required" for="EmailAddress">Email address</label>
-                  <input type="email" class="c-form__input" name="EmailAddress" value="" placeholder="" id="EmailAddress" required="" />
-               </div>
-            </div>
-         </div>
-         <div class="c-form__group">
-            <div class="c-form__field Telephone required">
-               <div class="c-form__input-wrap">
-                  <label class="c-form__label c-form__label--required" for="Telephone">Telephone</label>
-                  <input type="tel" class="c-form__input" name="Telephone" value="" placeholder="" id="Telephone" required="" />
-               </div>
-            </div>
-         </div>
-      </fieldset>
-      <fieldset class="c-form__section">
-         <legend class="c-form__section-title">
-            About your company or institution
-         </legend>
-         <div class="c-form__group">
-            <div class="c-form__field CompanyName required">
-               <div class="c-form__input-wrap">
-                  <label class="c-form__label c-form__label--required" for="CompanyName">Company / institution</label>
-                  <input type="text" class="c-form__input" name="CompanyName" value="" placeholder="" id="CompanyName" required="" />
-               </div>
-            </div>
-         </div>
-         <div class="c-form__group o-grid o-grid--of-two">
-            <div class="c-form__field City required">
-               <div class="c-form__input-wrap">
-                  <label class="c-form__label c-form__label--required" for="City">City</label>
-                  <input type="text" class="c-form__input" name="City" value="" placeholder="" id="City" required="" />
-               </div>
-            </div>
-            <div class="c-form__field Country required">
-               <div class="c-form__input-wrap">
-                  <label class="c-form__label c-form__label--required" for="Country">Country</label>
-                  <select class="c-form__input c-form__input--select Country" name="Country" id="Country" required="">
-                     <option value=""></option>
-                     <option value="option-1">Option 1</option>
-                     <option value="option-2">Option 2</option>
-                     <option value="option-3">Option 3</option>
-                  </select>
-               </div>
-            </div>
-         </div>
-      </fieldset>
-      <fieldset class="c-form__section">
-         <legend class="c-form__section-title">More details</legend>
-         <div class="c-form__group">
-            <div class="c-form__field ApplicationDetails">
-               <div class="c-form__input-wrap">
-                  <label class="c-form__label u-flex-1" for="ApplicationDetails">Please give more details about your requirements / application (optional)</label>
-                  <textarea class="c-form__input c-form__input--textarea ApplicationDetails" cols="20" id="ApplicationDetails" name="ApplicationDetails" rows="2"></textarea>
-               </div>
-            </div>
-         </div>
-         <div class="c-form__group">
-            <div class="c-form__field emailOptIn">
-               <input class="c-form__input c-form__input--checkbox" id="emailOptIn" name="emailOptIn" type="checkbox" value="true" /><input name="emailOptIn" type="hidden" value="false" />
-               <label for="emailOptIn">I wish to receive emails tailored to my personal preferences (you can unsubscribe at any time)<br />For more information please read our <a class="u-link" href="">Privacy Policy</a></label>
-            </div>
-         </div>
-      </fieldset>
-      <div class="c-form__section c-form__section--submit">
-        <button id="btnSubmit" class="mp c-button c-button--inline">Contact sales</button>
-      </div>
-   </form>
-</div>

package/src/patterns/usps.njk

@@ -1,149 +0,0 @@
----
-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: {
-                    url: 'https://p3.aprimocdn.net/malvernpanalytical/9448808a-1a92-4eef-a49b-b11401122d59/icon-forj_Original%20file.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: {
-                    url: 'https://p3.aprimocdn.net/malvernpanalytical/5d376f9f-9dbf-4d00-94b0-b11401122887/icon-clipboard_Original%20file.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: {
-                    url: 'https://p3.aprimocdn.net/malvernpanalytical/7da9e7e5-edca-4d49-bc7f-b11401123c52/icon-stopwatch_Original%20file.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: {
-                    url: 'https://p3.aprimocdn.net/malvernpanalytical/f900b665-8a81-47a5-8d59-b114011227bf/icon-click-fingers_Original%20file.svg'
-                }
-            }) }}
-        </div>
-    </div>
-
-    <div class="u-flow--s">
-        <div class="o-grid o-grid--of-four u-justify-center">
-            {{ usp({
-                title: "Reduced emissions",
-                classes: 'c-usp c-usp--center',
-                size: "c-h--step-1",
-                icon: {
-                    url: 'https://p3.aprimocdn.net/malvernpanalytical/6bf3f0b2-57ec-4e3e-a32c-b11401123933/icon-plant_Original%20file.svg'
-                }
-            }) }}
-            {{ usp({
-                title: "Compliance standards",
-                classes: 'c-usp c-usp--center',
-                size: "c-h--step-1",
-                icon: {
-                    url: 'https://p3.aprimocdn.net/malvernpanalytical/63b61c71-51e2-4ee6-b79e-b11401122bf5/icon-file-with-shield_Original%20file.svg'
-                }
-            }) }}
-            {{ usp({
-                title: "Instant monitoring",
-                classes: 'c-usp c-usp--center',
-                size: "c-h--step-1",
-                icon: {
-                    url: 'https://p3.aprimocdn.net/malvernpanalytical/198f871d-12a4-4523-8303-b114011237bf/icon-monitor-graph_Original%20file.svg'
-                }
-            }) }}
-            {{ usp({
-                title: "Peerless quality control",
-                classes: 'c-usp c-usp--center',
-                size: "c-h--step-1",
-                icon: {
-                    url: 'https://p3.aprimocdn.net/malvernpanalytical/c868ad42-c6d4-49e4-b4f4-b11401122492/icon-award_Original%20file.svg'
-                }
-            }) }}
-            {{ usp({
-                title: "Expert support on hand",
-                classes: 'c-usp c-usp--center',
-                size: "c-h--step-1",
-                icon: {
-                    url: 'https://p3.aprimocdn.net/malvernpanalytical/00a7cc05-1143-4d0b-bbc3-b11401123855/icon-phone-with-wrench_Original%20file.svg'
-                }
-            }) }}
-            {{ usp({
-                title: "Industry-leading solutions",
-                classes: 'c-usp c-usp--center',
-                size: "c-h--step-1",
-                icon: {
-                    url: 'https://p3.aprimocdn.net/malvernpanalytical/1b30c30f-9e0a-4a23-a512-b11401122a8f/icon-compass_Original%20file.svg'
-                }
-            }) }}
-            {{ usp({
-                title: "Training and consultancy",
-                classes: 'c-usp c-usp--center',
-                size: "c-h--step-1",
-                icon: {
-                    url: 'https://p3.aprimocdn.net/malvernpanalytical/df7e8b27-8e8f-494d-8a03-b11401122ff0/icon-graduation-cap_Original%20file.svg'
-                }
-            }) }}
-        </div>
-    </div>
-
-</div>

package/src/prototype/blog-post.njk

@@ -1,123 +0,0 @@
----
-title: Value of the Mastersizer 3000 for pharmaceutical development
-tags: prototype
-tagTitle: Blog post
----
-
-{% from "components/breadcrumb/macro.njk" import breadcrumb %}
-{% from "components/button/macro.njk" import button %}
-{% from "components/post-meta/macro.njk" import postMeta %}
-{% from "components/card/macro.njk" import card %}
-
-{% set bodyClass = 'body--blog' %}
-{% set siteNav %}{% include "navigation/blog.njk" %}{% endset %}
-
-{% extends "page.njk" %}
-
-{% block content %}
-<div class="c-slat--white">
-  <div class="mp u-wrap o-grid o-grid--layout o-grid--8/3 o-grid--push u-pad-bottom-l u-pad-top-l-xl">
-    <div class="u-flow--m">
-      <header class="u-flow--m">
-        <h1 class="c-h c-h--page-title">Value of the Mastersizer 3000 for pharmaceutical development</h1>
-
-        {{ postMeta({
-          content: '<p>By Malvern Panalytical, Wednesday 6 January 2021</p>'
-        }) }}
-      </header>
-
-      <div>
-
-        <p class="u-lede">In our previous blog, we looked at why particle size analysis is important in the pharmaceutical industry. Here, we will focus on why the Mastersizer 3000, in particular, is considered “an invaluable equipment for supporting drug development” and the “first choice platform for laser diffraction particle size analysis” by our customers.</p>
-
-        <figure class="o-featured-image u-margin-y-l">
-          <img src="/static/img/blog-image-1.jpg" alt="" />
-        </figure>
-        
-        <div class="mp o-prose o-prose--blog u-flow--prose">
-          <p>The time and cost associated with pharmaceutical development can be significant, so any means by which this can be reduced is advantageous.  Within <a href="">formulation development</a>, the need to characterize a variety of different samples with a wide range of properties is of importance, as is the need to establish robust and reliable methods which will be latterly rolled out downstream.  The more reliable and robust the method, the smoother the transition from development to manufacturing, and the quicker the drug product can get to market.</p>
-          <h2>The Mastersizer 3000 offers the following value to save both time and money:</h2>
-          <h4>Increased lab productivity</h4>
-          <p>The Mastersizer 3000 is simple to use with little or no training, guiding the user through every stage of the measurement. Enjoy reliable, stress-free operations and easy, low-cost routine maintenance.</p>
-          <h4>Versatility of measurement</h4>
-          <p><a href="/prototype/product#accessories">Extensive range of accessories</a> to meet all sample type and volume requirements, including a small volume disperser (6 mL) option for early-stage product development.</p>
-          <h4>Improved data</h4>
-          <p>In-built intelligence guides the user through method development, with a Data Quality tool providing expert advice and helpful feedback to the operator on possible ways to improve their measurement technique, and an optical properties optimizer tool to assist in establishing suitable analysis settings.</p>
-          <h4>Expert support</h4>
-          <p>Vast experience in providing support for method development, transfer and validation for those working in the pharmaceutical industry.</p>
-          <p>For more information, access our recent webinars on how to develop methods and analysis for the pharmaceutical industry:</p>
-          <ul>
-            <li><a href="/prototype/webinar">Focus on Pharma: Particle sizing – Managing Method Development</a></li>
-            <li><a href="/prototype/webinar">Focus on Pharma: Particle sizing – Advance your Analysis</a></li>
-            <li><a href="/prototype/webinar">Focus on Pharma – Elemental Analysis: Simplify your workflow</a></li>
-          </ul>
-          <p>In our final blog, we will consider the value the Mastersizer 3000 offers in manufacturing and quality control in pharmaceutical environments.</p>
-        </div>
-
-        <hr class="u-hr" />
-
-        <footer class="u-margin-bottom-m-l u-flow--xl">
-          <h2 class="c-h c-h--step-3">Featured product</h2>
-
-          {{ card({
-            theme: {
-              layout: 'multi',
-              size: 'large'
-            },
-            image: {
-              src: '/static/img/range-product-1.jpg',
-              alt: 'Product image alt'
-            },
-            header: {
-              title: 'Mastersizer 3000',
-              subtitle: 'Delivering the data you need for outcomes you can trust'
-            },
-            body: {
-              content: '<p>From pharma to food, manufacturing to environmental monitoring, organizations the world over trust the Mastersizer 3000 laser diffraction particle size analyzer for fast, accurate and reliable analysis.</p>'
-            },
-            footer: {
-              buttons: [
-                {
-                  link: '/prototype/product',
-                  label: 'View full details'
-                }
-              ]
-            }
-          }) }}
-
-        </footer>
-      </div>
-      
-    </div>
-
-    <aside class="u-flow">
-      <h3 class="c-h c-h--upper">Featured event</h3>
-      {{ card({
-        theme: {
-          layout: 'single',
-          size: 'medium',
-          name: 'featured'
-        },
-        header: {
-          title: 'Zetium ED X-ray fluorescence SuperQ application course',
-          meta: ['English'],
-          date: {
-            date: '2021-02-09' | createDate,
-            time: '11:00 – 1200',
-            timezone: 'EST'
-          }
-        },
-        footer: {
-          buttons: [
-            {
-              label: 'Book your place',
-              link: '/prototype/webinar'
-            }
-          ]
-        },
-        tag: 'Training course'
-      }) }}
-    </aside>
-  </div>
-</div>
-{% endblock %}

package/src/prototype/blog.njk

@@ -1,168 +0,0 @@
----
-title: Materials Talks blog
-tags: prototype
-tagTitle: Blog
----
-
-{% from "components/featured-article-card/macro.njk" import featuredArticleCard %}
-{% from "components/twi/macro.njk" import twi %}
-{% from "components/card/macro.njk" import card %}
-{% from "components/hero/macro.njk" import hero %}
-
-{% set bodyClass = 'body--blog' %}
-{% set siteNav %}{% include "navigation/blog.njk" %}{% endset %}
-
-{% extends "page.njk" %}
-
-{% block content %}
-{{ hero({
-  title: title,
-  subtitle: "Welcome to Malvern Panalytical's blog, in which we write about how our technologies are used in a wide range of industries and organizations.",
-  cover: true,
-  gradient: true,
-  inverse: true
-}) }}
-
-<div class="c-slat--white">
-  <div class="mp c-slat">
-    <div class="u-wrap u-flow--gutter u-pad-bottom-m">
-      {{ featuredArticleCard({
-        title: 'Low molecular weight analysis with OMNISEC',
-        description: '<p>When you think of gel permeation chromatography / size exclusion chromatography (GPC/SEC) you probably associate the technique with the analysis of macromolecules such as proteins and polymers. After all, that’s what it does best!</p>',
-        meta: '<p>By Malvern Panalytical, Wednesday 6 January 2021</p>',
-        image: {
-          src: '/static/img/featured-blog-post.jpg',
-          alt: ''
-        },
-        link: '/prototype/blog-post'
-      }) }}
-
-      <div class="o-grid o-grid--of-three">
-        {{ card({
-          theme: {
-            layout: 'single',
-            size: 'medium',
-            name: 'alt'
-          },
-          image: {
-            src: '/static/img/blog-page-image-1.jpg',
-            alt: ''
-          },
-          header: {
-            title: 'Mixing it with the Mastersizer!'
-          },
-          body: {
-            content: '<p>At a major leading manufacturer of mixing equipment, the Mastersizer particle size analyzer is one of the analytical instruments used by customers during process simulations.</p>'
-          },
-          link: '/prototype/blog-post',
-          tag: 'News'
-        }) }}
-
-        {{ card({
-          theme: {
-            layout: 'single',
-            size: 'medium',
-            name: 'alt'
-          },
-          image: {
-            src: '/static/img/blog-page-image-2.jpg',
-            alt: ''
-          },
-          header: {
-            title: 'Value of the Mastersizer 3000 for pharmaceutical development'
-          },
-          body: {
-            content: '<p>Find out how the Mastersizer range can help keep costs down in formulation development.</p>'
-          },
-          link: '/prototype/blog-post',
-          tag: 'News'
-        }) }}
-
-        {{ card({
-          theme: {
-            layout: 'single',
-            size: 'medium',
-            name: 'alt'
-          },
-          image: {
-            src: '/static/img/blog-page-image-3.jpg',
-            alt: ''
-          },
-          header: {
-            title: 'Mixing it with the Mastersizer!'
-          },
-          body: {
-            content: '<p>At a major leading manufacturer of mixing equipment, the Mastersizer particle size analyzer is one of the analytical instruments used by customers during process simulations.</p>'
-          },
-          link: '/prototype/blog-post',
-          tag: 'News'
-        }) }}
-
-        {{ card({
-          theme: {
-            layout: 'single',
-            size: 'medium',
-            name: 'alt'
-          },
-          image: {
-            src: '/static/img/blog-page-image-4.jpg',
-            alt: ''
-          },
-          header: {
-            title: 'Value of the Mastersizer 3000 for pharmaceutical development'
-          },
-          body: {
-            content: '<p>Find out how the Mastersizer range can help keep costs down in formulation development.</p>'
-          },
-          link: '/prototype/blog-post',
-          tag: 'News'
-        }) }}
-
-        {{ card({
-          theme: {
-            layout: 'single',
-            size: 'medium',
-            name: 'alt'
-          },
-          image: {
-            src: '/static/img/blog-page-image-5.jpg',
-            alt: ''
-          },
-          header: {
-            title: 'Mixing it with the Mastersizer!'
-          },
-          body: {
-            content: '<p>At a major leading manufacturer of mixing equipment, the Mastersizer particle size analyzer is one of the analytical instruments used by customers during process simulations.</p>'
-          },
-          link: '/prototype/blog-post',
-          tag: 'News'
-        }) }}
-
-        {{ card({
-          theme: {
-            layout: 'single',
-            size: 'medium',
-            name: 'alt'
-          },
-          image: {
-            src: '/static/img/blog-page-image-6.jpg',
-            alt: ''
-          },
-          header: {
-            title: 'Value of the Mastersizer 3000 for pharmaceutical development'
-          },
-          body: {
-            content: '<p>Find out how the Mastersizer range can help keep costs down in formulation development.</p>'
-          },
-          link: '/prototype/blog-post',
-          tag: 'News'
-        }) }}
-      </div>
-
-      <footer>
-        {{ twi({ link: '', label: 'Older articles', classes: 'u-link', icon: 'arrow-left' }) }}
-      </footer>
-    </div>
-  </div>
-</div>
-{% endblock %}