mp-design-system 1.2.30 → 1.2.35

package/src/prototype/index.njk

@@ -53,7 +53,7 @@ tags: prototype
     }) }}
   </section>
 
-  <section class="mp c-slat c-slat--padded c-slat--dots u-bg-blue-step-3 u-margin-top-l">
+  <section class="mp c-slat c-slat--padded c-slat--dots u-bg-blue-step-3">
     <div class="u-wrap u-flow--s-l">
       <div class="u-wrap--content o-prose u-flow--prose u-flow--l">
         <h2 class="c-h c-h--step-3">Groundbreaking solutions for every industry</h2>
@@ -119,7 +119,8 @@ tags: prototype
           }
         }) }}
       </div>
-      <div class="u-margin-top-l">
+      <div class="u-split u-margin-top-l">
+        <h3 class="c-h c-h--step-1">Explore our full range of industry applications</h3>
         {{ button({
           link: '#',
           label: 'View all industries',
@@ -138,9 +139,9 @@ tags: prototype
         <div class="mp c-tabs c-tabs--anchor">
           <nav class="c-tabs__controls">
             <ul class="c-tabs__controls-list">
-              <li><a class="c-tabs__control c-tabs__control--active" href="#tab-product-1" role="tab">Range</a></li>
-              <li><a class="c-tabs__control" href="#tab-product-2" role="tab">Technology</a></li>
-              <li><a class="c-tabs__control" href="#tab-product-3" role="tab">Measurement type</a></li>
+              <li><a class="c-tabs__control c-tabs__control--active" href="#tab-product-1" role="tab">Product ranges</a></li>
+              <li><a class="c-tabs__control" href="#tab-product-2" role="tab">Technologies</a></li>
+              <li><a class="c-tabs__control" href="#tab-product-3" role="tab">Measurement types</a></li>
             </ul>
           </nav>
           <div class="c-tabs__content">
@@ -235,6 +236,13 @@ tags: prototype
                   }
                 }) }}
               </div>
+              <div class="u-bg-blue-step-3 u-pad-s-m u-split u-margin-top-l">
+                <h3 class="c-h c-h--step-1">Explore our full product range</h3>
+                {{ button({
+                  link: '#',
+                  label: 'View all ranges'
+                }) }}
+              </div>
             </div>
             <div id="tab-product-2" class="c-tab">
               <div class="o-grid o-grid--of-four o-grid--swipeable">
@@ -295,6 +303,13 @@ tags: prototype
                   }
                 }) }}
               </div>
+              <div class="u-bg-blue-step-3 u-pad-s-m u-split u-margin-top-l">
+                <h3 class="c-h c-h--step-1">Explore our full range of technologies</h3>
+                {{ button({
+                  link: '#',
+                  label: 'View all technologies'
+                }) }}
+              </div>
             </div>
             <div id="tab-product-3" class="c-tab">
               <div class="o-grid o-grid--of-four o-grid--swipeable">
@@ -355,15 +370,15 @@ tags: prototype
                   }
                 }) }}
               </div>
+              <div class="u-bg-blue-step-3 u-pad-s-m u-split u-margin-top-l">
+                <h3 class="c-h c-h--step-1">Explore our full range of measurements</h3>
+                {{ button({
+                  link: '#',
+                  label: 'View all measurement types'
+                }) }}
+              </div>
             </div>
         </div>
-        <div class="u-bg-blue-step-3 u-pad-s-m u-split u-margin-top-l">
-        	<h3>Explore our full range of technologies</h3>
-          {{ button({
-            link: '#',
-            label: 'View all measurement types'
-          }) }}
-    	  </div>
       </div>
     </div>
   </section>

package/src/prototype/range.njk

@@ -40,7 +40,7 @@ tagTitle: Range
 }) }}
 
 {{ internalNav({
-  classes: 'u-sticky',
+  classes: 'c-internal-nav--sticky',
   title: 'Mastersizer range',
   links: [
     { link: '#overview', label: 'Overview' },

package/src/static/svg/icon-globe-alt--white.svg

@@ -0,0 +1,4 @@
+<svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M105.184 91.433C87.3087 109.308 58.3278 109.308 40.453 91.433C22.5782 73.5582 22.5782 44.5774 40.453 26.7025M65.5912 112.066H80.0453M72.8182 112.066V104.839" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M72.8177 95.2043C92.7747 95.2043 108.953 79.026 108.953 59.069C108.953 39.112 92.7747 22.9337 72.8177 22.9337M72.8177 95.2043C52.8607 95.2043 36.6824 79.026 36.6824 59.069C36.6824 39.112 52.8607 22.9337 72.8177 22.9337M72.8177 95.2043C84.7919 95.2043 94.4989 79.026 94.4989 59.069C94.4989 39.112 84.7919 22.9337 72.8177 22.9337M72.8177 95.2043C60.8435 95.2043 51.1365 79.026 51.1365 59.069C51.1365 39.112 60.8435 22.9337 72.8177 22.9337M72.8177 95.2043V22.9337M43.9094 78.3412L101.726 78.3412M43.9094 39.7969L101.726 39.7969" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/static/svg/icon-globe-alt.svg

@@ -1,4 +1,4 @@
 <svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M105.184 91.433C87.3087 109.308 58.3278 109.308 40.453 91.433C22.5782 73.5582 22.5782 44.5774 40.453 26.7025M65.5912 112.066H80.0453M72.8182 112.066V104.839" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M72.8177 95.2043C92.7747 95.2043 108.953 79.026 108.953 59.069C108.953 39.112 92.7747 22.9337 72.8177 22.9337M72.8177 95.2043C52.8607 95.2043 36.6824 79.026 36.6824 59.069C36.6824 39.112 52.8607 22.9337 72.8177 22.9337M72.8177 95.2043C84.7919 95.2043 94.4989 79.026 94.4989 59.069C94.4989 39.112 84.7919 22.9337 72.8177 22.9337M72.8177 95.2043C60.8435 95.2043 51.1365 79.026 51.1365 59.069C51.1365 39.112 60.8435 22.9337 72.8177 22.9337M72.8177 95.2043V22.9337M43.9094 78.3412L101.726 78.3412M43.9094 39.7969L101.726 39.7969" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M72.8177 95.2043C92.7747 95.2043 108.953 79.026 108.953 59.069C108.953 39.112 92.7747 22.9337 72.8177 22.9337M72.8177 95.2043C52.8607 95.2043 36.6824 79.026 36.6824 59.069C36.6824 39.112 52.8607 22.9337 72.8177 22.9337M72.8177 95.2043C84.7919 95.2043 94.4989 79.026 94.4989 59.069C94.4989 39.112 84.7919 22.9337 72.8177 22.9337M72.8177 95.2043C60.8435 95.2043 51.1365 79.026 51.1365 59.069C51.1365 39.112 60.8435 22.9337 72.8177 22.9337M72.8177 95.2043V22.9337M43.9094 78.3412L101.726 78.3412M43.9094 39.7969L101.726 39.7969" stroke="#00a2c2" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/static/svg/icon-live-webinars--white.svg

@@ -0,0 +1,6 @@
+<svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.4115 48.6266V51.6598C51.4115 57.9736 55.5794 63.1657 60.5871 63.1657C65.5947 63.1657 69.7626 57.9736 69.7626 51.6598V48.6266C69.7626 46.3077 67.3068 40.8458 60.5871 40.8458C53.8674 40.8458 51.4115 45.6839 51.4115 48.6266Z" stroke="#ffffff" fill="#ffffff" stroke-width="5" stroke-linejoin="round"/>
+<path d="M48.3775 73.5705C51.0626 72.0467 54.7914 71.0796 57.661 70.5797C59.5984 70.2422 61.5762 70.2422 63.5136 70.5797C66.3869 71.0803 70.1216 72.0492 72.8075 73.5763C73.4043 73.9157 73.8556 74.4516 74.1151 75.0873C74.8557 76.9018 76.3168 81.0938 76.3168 85.9265V93.9354H44.8578V85.9265C44.8578 81.1517 46.318 76.933 47.0589 75.0999C47.319 74.4563 47.7738 73.9131 48.3775 73.5705Z" stroke="#ffffff" fill="#ffffff" stroke-width="5"/>
+<path d="M114.493 39.0267C114.493 33.5039 110.016 29.0267 104.493 29.0267H24.6372C19.1143 29.0267 14.6372 33.5039 14.6372 39.0267V83.9332C14.6372 89.4561 19.1143 93.9332 24.6372 93.9332H73.4237C76.042 93.9332 78.5559 94.9601 80.4253 96.7933L91.7137 107.863C93.6119 109.725 96.8142 108.38 96.8142 105.721V98.9332C96.8142 96.1718 99.0528 93.9332 101.814 93.9332H104.493C110.016 93.9332 114.493 89.456 114.493 83.9332V39.0267Z" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M104.416 56.0295C113.775 56.0295 121.363 48.442 121.363 39.0823C121.363 29.7226 113.775 22.1351 104.416 22.1351C95.0559 22.1351 87.4684 29.7226 87.4684 39.0823C87.4684 48.442 95.0559 56.0295 104.416 56.0295ZM99.1436 44.8025V33.4526C99.1436 31.8792 100.876 30.9219 102.208 31.7596L111.45 37.5717C112.713 38.366 112.693 40.2135 111.413 40.9803L102.172 46.518C100.838 47.3168 99.1436 46.3565 99.1436 44.8025Z" fill="#ffffff"/>
+</svg>

package/src/static/svg/icon-live-webinars.svg

@@ -1,6 +1,6 @@
 <svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M51.4115 48.6266V51.6598C51.4115 57.9736 55.5794 63.1657 60.5871 63.1657C65.5947 63.1657 69.7626 57.9736 69.7626 51.6598V48.6266C69.7626 46.3077 67.3068 40.8458 60.5871 40.8458C53.8674 40.8458 51.4115 45.6839 51.4115 48.6266Z" stroke="white" stroke-width="5" stroke-linejoin="round"/>
-<path d="M48.3775 73.5705C51.0626 72.0467 54.7914 71.0796 57.661 70.5797C59.5984 70.2422 61.5762 70.2422 63.5136 70.5797C66.3869 71.0803 70.1216 72.0492 72.8075 73.5763C73.4043 73.9157 73.8556 74.4516 74.1151 75.0873C74.8557 76.9018 76.3168 81.0938 76.3168 85.9265V93.9354H44.8578V85.9265C44.8578 81.1517 46.318 76.933 47.0589 75.0999C47.319 74.4563 47.7738 73.9131 48.3775 73.5705Z" stroke="white" stroke-width="5"/>
+<path d="M51.4115 48.6266V51.6598C51.4115 57.9736 55.5794 63.1657 60.5871 63.1657C65.5947 63.1657 69.7626 57.9736 69.7626 51.6598V48.6266C69.7626 46.3077 67.3068 40.8458 60.5871 40.8458C53.8674 40.8458 51.4115 45.6839 51.4115 48.6266Z" stroke="#00a2c2" fill="#00a2c2" stroke-width="5" stroke-linejoin="round"/>
+<path d="M48.3775 73.5705C51.0626 72.0467 54.7914 71.0796 57.661 70.5797C59.5984 70.2422 61.5762 70.2422 63.5136 70.5797C66.3869 71.0803 70.1216 72.0492 72.8075 73.5763C73.4043 73.9157 73.8556 74.4516 74.1151 75.0873C74.8557 76.9018 76.3168 81.0938 76.3168 85.9265V93.9354H44.8578V85.9265C44.8578 81.1517 46.318 76.933 47.0589 75.0999C47.319 74.4563 47.7738 73.9131 48.3775 73.5705Z" stroke="#00a2c2" fill="#00a2c2" stroke-width="5"/>
 <path d="M114.493 39.0267C114.493 33.5039 110.016 29.0267 104.493 29.0267H24.6372C19.1143 29.0267 14.6372 33.5039 14.6372 39.0267V83.9332C14.6372 89.4561 19.1143 93.9332 24.6372 93.9332H73.4237C76.042 93.9332 78.5559 94.9601 80.4253 96.7933L91.7137 107.863C93.6119 109.725 96.8142 108.38 96.8142 105.721V98.9332C96.8142 96.1718 99.0528 93.9332 101.814 93.9332H104.493C110.016 93.9332 114.493 89.456 114.493 83.9332V39.0267Z" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M104.416 56.0295C113.775 56.0295 121.363 48.442 121.363 39.0823C121.363 29.7226 113.775 22.1351 104.416 22.1351C95.0559 22.1351 87.4684 29.7226 87.4684 39.0823C87.4684 48.442 95.0559 56.0295 104.416 56.0295ZM99.1436 44.8025V33.4526C99.1436 31.8792 100.876 30.9219 102.208 31.7596L111.45 37.5717C112.713 38.366 112.693 40.2135 111.413 40.9803L102.172 46.518C100.838 47.3168 99.1436 46.3565 99.1436 44.8025Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M104.416 56.0295C113.775 56.0295 121.363 48.442 121.363 39.0823C121.363 29.7226 113.775 22.1351 104.416 22.1351C95.0559 22.1351 87.4684 29.7226 87.4684 39.0823C87.4684 48.442 95.0559 56.0295 104.416 56.0295ZM99.1436 44.8025V33.4526C99.1436 31.8792 100.876 30.9219 102.208 31.7596L111.45 37.5717C112.713 38.366 112.693 40.2135 111.413 40.9803L102.172 46.518C100.838 47.3168 99.1436 46.3565 99.1436 44.8025Z" fill="#00a2c2"/>
 </svg>

package/src/static/svg/icon-recorded-webinars--white.svg

@@ -0,0 +1,4 @@
+<svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57.3667 93.3653H23C17.4771 93.3653 13 88.8882 13 83.3653V31.8654C13 26.3425 17.4772 21.8654 23 21.8654H113C118.523 21.8654 123 26.3425 123 31.8654V83.3653C123 88.8882 118.523 93.3653 113 93.3653H78.6333M57.3667 93.3653H78.6333M57.3667 93.3653V103.135C57.3667 108.658 52.8895 113.135 47.3667 113.135H46.3667M78.6333 93.3653V103.135C78.6333 108.658 83.1105 113.135 88.6333 113.135H89.6333" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M55.7759 45.2015V70.1403C55.7759 72.4714 58.3183 73.9118 60.3179 72.7136L80.6246 60.5458C82.5443 59.3955 82.5742 56.6242 80.6798 55.4329L60.373 42.662C58.3752 41.4056 55.7759 42.8414 55.7759 45.2015Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
+</svg>

package/src/static/svg/icon-recorded-webinars.svg

@@ -1,4 +1,4 @@
 <svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M57.3667 93.3653H23C17.4771 93.3653 13 88.8882 13 83.3653V31.8654C13 26.3425 17.4772 21.8654 23 21.8654H113C118.523 21.8654 123 26.3425 123 31.8654V83.3653C123 88.8882 118.523 93.3653 113 93.3653H78.6333M57.3667 93.3653H78.6333M57.3667 93.3653V103.135C57.3667 108.658 52.8895 113.135 47.3667 113.135H46.3667M78.6333 93.3653V103.135C78.6333 108.658 83.1105 113.135 88.6333 113.135H89.6333" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M55.7759 45.2015V70.1403C55.7759 72.4714 58.3183 73.9118 60.3179 72.7136L80.6246 60.5458C82.5443 59.3955 82.5742 56.6242 80.6798 55.4329L60.373 42.662C58.3752 41.4056 55.7759 42.8414 55.7759 45.2015Z" fill="white" stroke="white" stroke-width="4"/>
+<path d="M55.7759 45.2015V70.1403C55.7759 72.4714 58.3183 73.9118 60.3179 72.7136L80.6246 60.5458C82.5443 59.3955 82.5742 56.6242 80.6798 55.4329L60.373 42.662C58.3752 41.4056 55.7759 42.8414 55.7759 45.2015Z" fill="#00a2c2" stroke="#00a2c2" stroke-width="4"/>
 </svg>

package/src/static/svg/{icon-user-trainings.svg → icon-user-training--white.svg}

@@ -1,5 +1,5 @@
 <svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.0029 36.6926V39.4762C21.0029 45.2704 24.8279 50.0353 29.4234 50.0353C34.019 50.0353 37.844 45.2704 37.844 39.4762V36.6926C37.844 34.5645 35.5902 29.5521 29.4234 29.5521C23.2567 29.5521 21.0029 33.9921 21.0029 36.6926Z" stroke="white" stroke-width="5" stroke-linejoin="round"/>
-<path d="M17.3803 89.2418L15.6821 103.658C15.3572 106.441 12.5901 108.616 9.9273 108.137C6.66157 107.551 5.2466 104.675 5.537 102.048L9.01124 72.9348C9.85435 66.3845 11.9733 63.438 14.7185 62.0392C17.7112 60.5142 23.1538 59.6442 26.1869 59.1496C28.1619 58.8275 30.1711 58.8347 32.1518 59.1196C35.9515 59.6661 41.4506 60.8331 44.6134 62.755C44.8465 62.8967 45.0565 63.0709 45.2504 63.2628L57.7999 75.6753C58.7481 76.5538 60.1363 76.7648 61.3027 76.2079L72.5893 70.8188C75.1964 69.574 78.3224 70.5363 79.7782 73.0318C81.4173 75.8417 80.3008 79.4524 77.3616 80.8466L59.6635 89.2418C58.5131 89.7875 57.1475 89.588 56.2012 88.7361L44.5587 78.255V100.852C44.5587 104.166 41.8724 106.852 38.5587 106.852H22.6478" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.0029 36.6926V39.4762C21.0029 45.2704 24.8279 50.0353 29.4234 50.0353C34.019 50.0353 37.844 45.2704 37.844 39.4762V36.6926C37.844 34.5645 35.5902 29.5521 29.4234 29.5521C23.2567 29.5521 21.0029 33.9921 21.0029 36.6926Z" stroke="#ffffff" stroke-width="5" stroke-linejoin="round"/>
+<path d="M17.3803 89.2418L15.6821 103.658C15.3572 106.441 12.5901 108.616 9.9273 108.137C6.66157 107.551 5.2466 104.675 5.537 102.048L9.01124 72.9348C9.85435 66.3845 11.9733 63.438 14.7185 62.0392C17.7112 60.5142 23.1538 59.6442 26.1869 59.1496C28.1619 58.8275 30.1711 58.8347 32.1518 59.1196C35.9515 59.6661 41.4506 60.8331 44.6134 62.755C44.8465 62.8967 45.0565 63.0709 45.2504 63.2628L57.7999 75.6753C58.7481 76.5538 60.1363 76.7648 61.3027 76.2079L72.5893 70.8188C75.1964 69.574 78.3224 70.5363 79.7782 73.0318C81.4173 75.8417 80.3008 79.4524 77.3616 80.8466L59.6635 89.2418C58.5131 89.7875 57.1475 89.588 56.2012 88.7361L44.5587 78.255V100.852C44.5587 104.166 41.8724 106.852 38.5587 106.852H22.6478" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M49.2756 53.9583V34.7963C49.2756 30.378 52.8574 26.7963 57.2756 26.7963H122.5C126.918 26.7963 130.5 30.378 130.5 34.7963V75.5442C130.5 79.9624 126.918 83.5442 122.5 83.5442H88.4409" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/static/svg/icon-user-training.svg

@@ -0,0 +1,5 @@
+<svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0029 36.6926V39.4762C21.0029 45.2704 24.8279 50.0353 29.4234 50.0353C34.019 50.0353 37.844 45.2704 37.844 39.4762V36.6926C37.844 34.5645 35.5902 29.5521 29.4234 29.5521C23.2567 29.5521 21.0029 33.9921 21.0029 36.6926Z" stroke="#00a2c2" stroke-width="5" stroke-linejoin="round"/>
+<path d="M17.3803 89.2418L15.6821 103.658C15.3572 106.441 12.5901 108.616 9.9273 108.137C6.66157 107.551 5.2466 104.675 5.537 102.048L9.01124 72.9348C9.85435 66.3845 11.9733 63.438 14.7185 62.0392C17.7112 60.5142 23.1538 59.6442 26.1869 59.1496C28.1619 58.8275 30.1711 58.8347 32.1518 59.1196C35.9515 59.6661 41.4506 60.8331 44.6134 62.755C44.8465 62.8967 45.0565 63.0709 45.2504 63.2628L57.7999 75.6753C58.7481 76.5538 60.1363 76.7648 61.3027 76.2079L72.5893 70.8188C75.1964 69.574 78.3224 70.5363 79.7782 73.0318C81.4173 75.8417 80.3008 79.4524 77.3616 80.8466L59.6635 89.2418C58.5131 89.7875 57.1475 89.588 56.2012 88.7361L44.5587 78.255V100.852C44.5587 104.166 41.8724 106.852 38.5587 106.852H22.6478" stroke="#00a2c2" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M49.2756 53.9583V34.7963C49.2756 30.378 52.8574 26.7963 57.2756 26.7963H122.5C126.918 26.7963 130.5 30.378 130.5 34.7963V75.5442C130.5 79.9624 126.918 83.5442 122.5 83.5442H88.4409" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>