mp-design-system 1.2.15 → 1.2.17

package/src/prototype/product-finder.njk

@@ -0,0 +1,61 @@
+---
+title: Mastersizer range
+tags: prototype
+---
+
+{% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
+
+{% extends "page.njk" %}
+
+{% block content %}
+
+  <div class="mp u-wrap u-pad-y-l-2xl">
+    <nav class="c-breadcrumb " aria-label="Breadcrumb">
+      <ol class="c-breadcrumb__list" role="list">
+        <li class="c-breadcrumb__item" role="listitem">
+          <a href="/en/products" class="c-breadcrumb__link">Products</a>
+        </li>
+        <li class="c-breadcrumb__item" role="listitem">
+          <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--chevron-down">
+            <use xlink:href="/static/svg/sprite.svg#chevron-down"></use>
+          </svg>
+          <a href="/en/products/product-range" class="c-breadcrumb__link">Product range </a>
+        </li>
+        <li class="c-breadcrumb__item" role="listitem">
+          <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--chevron-down">
+            <use xlink:href="/static/svg/sprite.svg#chevron-down"></use>
+          </svg>
+          <a href="/en/products/product-range/zetasizer-range" class="c-breadcrumb__link">Zetasizer range</a>
+        </li>
+        <li class="c-breadcrumb__item" role="listitem">
+          <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--chevron-down">
+            <use xlink:href="/static/svg/sprite.svg#chevron-down"></use>
+          </svg>
+          <a href="/en/products/product-range/zetasizer-range/zetasizer-advance-range" class="c-breadcrumb__link">Zetasizer Advance Range</a>
+        </li>
+        <li class="c-breadcrumb__item" role="listitem">
+          <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--chevron-down">
+            <use xlink:href="/static/svg/sprite.svg#chevron-down"></use>
+          </svg>
+          <span class="c-breadcrumb__current" aria-current="Zetasizer Advance: Which system ...">Zetasizer Advance: Which system ...</span>
+        </li>
+      </ol>
+    </nav>
+    <header class="u-wrap--content u-flow--xs">
+      <h1 class="c-h c-h--page-title">Zetasizer Advance: Which system is right for me?</h1>
+    </header>
+  </div>
+  <div class="u-wrap u-flow--xl">
+    <div>
+      <div class="o-prose u-flow--prose">
+        <p>Get your personalized recommendation for your perfect new system, as well as seeing which Zetasizer is the closest equivalent to your existing instrument, in just a few minutes!</p>
+        <p>With 6 models to choose from, our new tool will help you find the perfect <a title="Zetasizer Advance Range" href="/en/products/product-range/zetasizer-range/zetasizer-advance-range">Zetasizer Advance system</a> for your measurement needs. To find out which instrument is best suited to your requirements, or is the best match for your current Zetasizer, please answer the questions below&nbsp;and click the ‘Find your Zetasizer’ button.</p>
+      </div>
+    </div>
+    <div id="product-finder"></div>
+  </div>
+
+  <script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>
+  <script src="/build/js/product-finder.js" defer></script>
+
+{% endblock %}