mp-design-system 0.6.3 → 0.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "",
   "main": "app.js",
   "scripts": {

package/src/_includes/components/card/card.scss

@@ -418,3 +418,7 @@
     @include gap("s-l");
   }
 }
+
+// IE11 fix
+// This forces IE11 to use display:block instead of flex for single-column cards
+_:-ms-fullscreen, :root .c-card, :root .c-card--layout-single .c-card__wrapper { display:block; }

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

@@ -26,7 +26,6 @@ $grid-gutter-width: 36;
   display: flex;
   flex-wrap: wrap;
   justify-content: stretch;
-  align-items: flex-start;
   margin-bottom: calc(-1 * #{space-unit()});
   margin-bottom: calc(-1 * var(--gutter));
   width: 100%;

package/src/patterns/grid-of-cards.njk

@@ -6,25 +6,61 @@ layout: patterns-page
 {% from "components/card/macro.njk" import card %}
 
 <div class="o-grid o-grid--of-three o-grid--swipeable">
-  {% for _ in [0, 1, 2] %}
-    {{ 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'
-    }) }}
-  {% endfor %}
+  {{ 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-1.jpg',
+      alt: ''
+    },
+    header: {
+      title: 'GPC/SEC standards: making them last'
+    },
+    body: {
+      content: '<p>Earlier this year I highlighted the different types of GPC/SEC standards available and where to find them on our eStore. In this post, I’m going to share some tips and tricks about preparing your standards and making them last. But first, what standard should you be using? In my previous post, I discussed how the […]</p>'
+    },
+    link: '/prototype/blog-post',
+    tag: 'News'
+  }) }}
+  {{ card({
+    theme: {
+      layout: 'single',
+      size: 'medium',
+      name: 'alt'
+    },
+    image: {
+      src: '/static/img/blog-page-image-1.jpg',
+      alt: ''
+    },
+    header: {
+      title: 'Viral Vector Vaccines: A Borrowed Technology from Gene Therapy Advancements'
+    },
+    body: {
+      content: '<p>Advances in recombinant DNA technology, genomics, and immunology have greatly influenced the vaccine development process. The genetic manipulation of viruses makes them suitable as vectors for gene delivery, providing a novel and unique opportunity for vaccine design. Viruses survive and replicate by invading their host’s cells and hijacking their protein-making machinery. These virus particles contain […]</p>'
+    },
+    link: '/prototype/blog-post',
+    tag: 'News'
+  }) }}
 </div>