Merge pull request #368 from visual-framework/component/vf-summar-has-image

tweak: vf-summary--has-image

components/vf-summary/vf-summary--has-image.njk

@@ -11,3 +11,15 @@
     A database describing biological samples and providing links to associated experimental data.
   </p>
 </article>
+
+<article class="vf-summary vf-summary--has-image">
+  <!-- for cases when there is no image -->
+  <h3 class="vf-summary__title">
+    <a href="//www.ebi.ac.uk/biosamples/" class="vf-summary__link">
+      Imageless sample
+    </a>
+  </h3>
+  <p class="vf-summary__text">
+    Not all lists with images have an image for every item.
+  </p>
+</article>

components/vf-summary/vf-summary--has-image.scss

 .vf-summary--has-image {
 
   grid-column-gap: 18px;
-  grid-template-columns: minmax(0, auto) 1fr;
+  grid-template-columns: minmax($vf-summary--has-image-width, auto) 1fr;
   grid-template-rows: auto;
   @include margin--block(bottom, 48px);
 
@@ -12,7 +12,7 @@
   }
 
   .vf-summary__image--thumbnail {
-    width: 50px;
+    width: $vf-summary--has-image-width;
   }
 
   .vf-summary__title {

components/vf-summary/vf-summary.variables.scss

@@ -53,3 +53,5 @@ $vf-summary--article__date-margin-right: .75rem;
 
 
 $vf-summary--news__category-margin-right: 1rem;
+
+$vf-summary--has-image-width: 50px;