updates to include link list with ayaml

components/vf-link-list/vf-link-list--has-images.njk

-<div class="vf-links">
-  <h3 class="vf-links__heading">Services</h3>
-  <ul class="vf-links__list vf-links__list--has-image | vf-list">
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="http://www.biomedbridges.eu">
-        <svg class="vf-list__image" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M30.184 21.298c-1.416-1.411-3.467-1.959-5.388-1.663l-9.179-9.181c.083-.244.141-.49.141-.702V5.306c0-.545-.4-1.193-.889-1.433L8.072.471C7.583.23 6.871.344 6.484.73l-.741.74a.992.992 0 0 0 0 1.402l3.956 3.956a.995.995 0 0 1 0 1.402l-1.813 1.814a.994.994 0 0 1-1.401 0L2.528 6.088a.999.999 0 0 0-1.402 0l-.739.739C0 7.211-.116 7.929.128 8.413l3.399 6.8c.247.485.892.885 1.437.885l4.446.002c.213 0 .46-.059.706-.142l9.49 9.491c-.067 1.676.519 3.373 1.792 4.652a6.185 6.185 0 0 0 4.395 1.816 6.197 6.197 0 0 0 4.398-1.82c2.413-2.424 2.413-6.37-.007-8.799zm-2.514 6.279c-1.007 1.004-2.757.993-3.753.006a2.673 2.673 0 0 1-.004-3.761 2.645 2.645 0 0 1 1.879-.776 2.64 2.64 0 0 1 1.872.771 2.672 2.672 0 0 1 .006 3.76z"/></svg>
-        BioMedBridges
-      </a>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="//www.ebi.ac.uk/biosamples/">
-        <img class="vf-list__image" src="https://www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/icon/public/resource/thumbnail/biosamples_serviceicon.jpg">
-        BioSamples
-      </a>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="//www.ebi.ac.uk/efo">
-        <svg class="vf-list__image" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M30.184 21.298c-1.416-1.411-3.467-1.959-5.388-1.663l-9.179-9.181c.083-.244.141-.49.141-.702V5.306c0-.545-.4-1.193-.889-1.433L8.072.471C7.583.23 6.871.344 6.484.73l-.741.74a.992.992 0 0 0 0 1.402l3.956 3.956a.995.995 0 0 1 0 1.402l-1.813 1.814a.994.994 0 0 1-1.401 0L2.528 6.088a.999.999 0 0 0-1.402 0l-.739.739C0 7.211-.116 7.929.128 8.413l3.399 6.8c.247.485.892.885 1.437.885l4.446.002c.213 0 .46-.059.706-.142l9.49 9.491c-.067 1.676.519 3.373 1.792 4.652a6.185 6.185 0 0 0 4.395 1.816 6.197 6.197 0 0 0 4.398-1.82c2.413-2.424 2.413-6.37-.007-8.799zm-2.514 6.279c-1.007 1.004-2.757.993-3.753.006a2.673 2.673 0 0 1-.004-3.761 2.645 2.645 0 0 1 1.879-.776 2.64 2.64 0 0 1 1.872.771 2.672 2.672 0 0 1 .006 3.76z"/></svg>
-        EFO
-      </a>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="//www.ebi.ac.uk/ega/">
-        <svg class="vf-list__image" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M30.184 21.298c-1.416-1.411-3.467-1.959-5.388-1.663l-9.179-9.181c.083-.244.141-.49.141-.702V5.306c0-.545-.4-1.193-.889-1.433L8.072.471C7.583.23 6.871.344 6.484.73l-.741.74a.992.992 0 0 0 0 1.402l3.956 3.956a.995.995 0 0 1 0 1.402l-1.813 1.814a.994.994 0 0 1-1.401 0L2.528 6.088a.999.999 0 0 0-1.402 0l-.739.739C0 7.211-.116 7.929.128 8.413l3.399 6.8c.247.485.892.885 1.437.885l4.446.002c.213 0 .46-.059.706-.142l9.49 9.491c-.067 1.676.519 3.373 1.792 4.652a6.185 6.185 0 0 0 4.395 1.816 6.197 6.197 0 0 0 4.398-1.82c2.413-2.424 2.413-6.37-.007-8.799zm-2.514 6.279c-1.007 1.004-2.757.993-3.753.006a2.673 2.673 0 0 1-.004-3.761 2.645 2.645 0 0 1 1.879-.776 2.64 2.64 0 0 1 1.872.771 2.672 2.672 0 0 1 .006 3.76z"/></svg>
-        EGA
-      </a>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="https://www.infrafrontier.eu/resources-and-services/access-emma-mouse-resources">
-        <svg class="vf-list__image" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M30.184 21.298c-1.416-1.411-3.467-1.959-5.388-1.663l-9.179-9.181c.083-.244.141-.49.141-.702V5.306c0-.545-.4-1.193-.889-1.433L8.072.471C7.583.23 6.871.344 6.484.73l-.741.74a.992.992 0 0 0 0 1.402l3.956 3.956a.995.995 0 0 1 0 1.402l-1.813 1.814a.994.994 0 0 1-1.401 0L2.528 6.088a.999.999 0 0 0-1.402 0l-.739.739C0 7.211-.116 7.929.128 8.413l3.399 6.8c.247.485.892.885 1.437.885l4.446.002c.213 0 .46-.059.706-.142l9.49 9.491c-.067 1.676.519 3.373 1.792 4.652a6.185 6.185 0 0 0 4.395 1.816 6.197 6.197 0 0 0 4.398-1.82c2.413-2.424 2.413-6.37-.007-8.799zm-2.514 6.279c-1.007 1.004-2.757.993-3.753.006a2.673 2.673 0 0 1-.004-3.761 2.645 2.645 0 0 1 1.879-.776 2.64 2.64 0 0 1 1.872.771 2.672 2.672 0 0 1 .006 3.76z"/></svg>
-        EMMA
-      </a>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="//www.ebi.ac.uk/ena/">
-        <svg class="vf-list__image" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M30.184 21.298c-1.416-1.411-3.467-1.959-5.388-1.663l-9.179-9.181c.083-.244.141-.49.141-.702V5.306c0-.545-.4-1.193-.889-1.433L8.072.471C7.583.23 6.871.344 6.484.73l-.741.74a.992.992 0 0 0 0 1.402l3.956 3.956a.995.995 0 0 1 0 1.402l-1.813 1.814a.994.994 0 0 1-1.401 0L2.528 6.088a.999.999 0 0 0-1.402 0l-.739.739C0 7.211-.116 7.929.128 8.413l3.399 6.8c.247.485.892.885 1.437.885l4.446.002c.213 0 .46-.059.706-.142l9.49 9.491c-.067 1.676.519 3.373 1.792 4.652a6.185 6.185 0 0 0 4.395 1.816 6.197 6.197 0 0 0 4.398-1.82c2.413-2.424 2.413-6.37-.007-8.799zm-2.514 6.279c-1.007 1.004-2.757.993-3.753.006a2.673 2.673 0 0 1-.004-3.761 2.645 2.645 0 0 1 1.879-.776 2.64 2.64 0 0 1 1.872.771 2.672 2.672 0 0 1 .006 3.76z"/></svg>
-        ENA
-      </a>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="http://www.geneontology.org">
-        <img class="vf-list__image" src="https://www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/icon/public/resource/thumbnail/go-logo-cropped-2013.jpg">
-        GO
-      </a>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="//www.ebi.ac.uk/gwas/">
-        <span><!-- no image --></span>
-        Entry without image
-      </a>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="//www.ebi.ac.uk/gwas/">
-        <img class="vf-list__image" src="https://www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/icon/public/resource/thumbnail/gwas_catalog_logo_73x73.png">
-        GWAS Catalog
-      </a>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="http://www.mousephenotype.org/">
-        <img class="vf-list__image" src="https://www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/icon/public/resource/thumbnail/impc_logo_icon.png">
-        IMPC Portal
-      </a>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="//www.ebi.ac.uk/ontology-lookup">
-        <svg class="vf-list__image" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M30.184 21.298c-1.416-1.411-3.467-1.959-5.388-1.663l-9.179-9.181c.083-.244.141-.49.141-.702V5.306c0-.545-.4-1.193-.889-1.433L8.072.471C7.583.23 6.871.344 6.484.73l-.741.74a.992.992 0 0 0 0 1.402l3.956 3.956a.995.995 0 0 1 0 1.402l-1.813 1.814a.994.994 0 0 1-1.401 0L2.528 6.088a.999.999 0 0 0-1.402 0l-.739.739C0 7.211-.116 7.929.128 8.413l3.399 6.8c.247.485.892.885 1.437.885l4.446.002c.213 0 .46-.059.706-.142l9.49 9.491c-.067 1.676.519 3.373 1.792 4.652a6.185 6.185 0 0 0 4.395 1.816 6.197 6.197 0 0 0 4.398-1.82c2.413-2.424 2.413-6.37-.007-8.799zm-2.514 6.279c-1.007 1.004-2.757.993-3.753.006a2.673 2.673 0 0 1-.004-3.761 2.645 2.645 0 0 1 1.879-.776 2.64 2.64 0 0 1 1.872.771 2.672 2.672 0 0 1 .006 3.76z"/></svg>
-        OLS
-      </a>
-    </li>
-  </ul>
-</div>

components/vf-link-list/vf-link-list--tight.njk

-<div class="vf-links vf-links--tight vf-links__list--s">
-  <h3 class="vf-links__heading">Latest Posts</h3>
-  <ul class="vf-links__list vf-links__list--secondary | vf-list">
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="">All</a>
-      <span class="vf-list__meta">39</span>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="">Administration</a>
-      <span class="vf-list__meta">39</span>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="">Bioninformatics</a>
-      <span class="vf-list__meta">39</span>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="">Communication</a>
-      <span class="vf-list__meta">39</span>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="">Data Curation</a>
-      <span class="vf-list__meta">39</span>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="">General Support Services</a>
-      <span class="vf-list__meta">39</span>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="">IT and Infrastructure</a>
-      <span class="vf-list__meta">39</span>
-    </li>
-  </ul>
-</div>

components/vf-link-list/vf-link-list.config.yml

@@ -3,3 +3,70 @@ label: Links List
 preview: '@preview--blocks'
 context:
   component-type: block
+
+
+variants:
+  - name: default
+    context:
+      title: Latest Posts
+      list:
+        - text: VF’s top social media posts of 2017 and what we learned from them
+          url: JavaScript:Void(0);
+        - text: The VF Imaging Centre all about visibility
+          url: JavaScript:Void(0);
+        - text: Press office sprint 1 journalist personas
+          url: JavaScript:Void(0);
+        - text: A colour scheme for VF
+          url: JavaScript:Void(0);
+          badge: alpha
+          meta: Updated 14th February 2018
+        - text: New team members
+          url: JavaScript:Void(0);
+  - name: tight
+    context:
+      component_modifier: vf-links--tight vf-links__list--s
+      title: Latest Posts
+      list_modifier: secondary
+      list:
+        - text: All
+          meta: 39
+        - text: Administration
+          meta: 39
+        - text: Bioninformatics
+          meta: 39
+        - text: Communication
+          meta: 39
+        - text: Data Curation
+          meta: 39
+        - text: General Support Services
+          meta: 39
+        - text: IT and Infrastructure
+          meta: 39
+
+  - name: has images
+    context:
+      title: Services
+      list_modifier: has-image
+      list:
+        - text: BioMedBridges
+          image: <svg class="vf-list__image" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M30.184 21.298c-1.416-1.411-3.467-1.959-5.388-1.663l-9.179-9.181c.083-.244.141-.49.141-.702V5.306c0-.545-.4-1.193-.889-1.433L8.072.471C7.583.23 6.871.344 6.484.73l-.741.74a.992.992 0 0 0 0 1.402l3.956 3.956a.995.995 0 0 1 0 1.402l-1.813 1.814a.994.994 0 0 1-1.401 0L2.528 6.088a.999.999 0 0 0-1.402 0l-.739.739C0 7.211-.116 7.929.128 8.413l3.399 6.8c.247.485.892.885 1.437.885l4.446.002c.213 0 .46-.059.706-.142l9.49 9.491c-.067 1.676.519 3.373 1.792 4.652a6.185 6.185 0 0 0 4.395 1.816 6.197 6.197 0 0 0 4.398-1.82c2.413-2.424 2.413-6.37-.007-8.799zm-2.514 6.279c-1.007 1.004-2.757.993-3.753.006a2.673 2.673 0 0 1-.004-3.761 2.645 2.645 0 0 1 1.879-.776 2.64 2.64 0 0 1 1.872.771 2.672 2.672 0 0 1 .006 3.76z"/></svg>
+        - text: BioSamples
+          image: <img class="vf-list__image" src="https://www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/icon/public/resource/thumbnail/biosamples_serviceicon.jpg">
+        - text: EFO
+          image: <svg class="vf-list__image" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M30.184 21.298c-1.416-1.411-3.467-1.959-5.388-1.663l-9.179-9.181c.083-.244.141-.49.141-.702V5.306c0-.545-.4-1.193-.889-1.433L8.072.471C7.583.23 6.871.344 6.484.73l-.741.74a.992.992 0 0 0 0 1.402l3.956 3.956a.995.995 0 0 1 0 1.402l-1.813 1.814a.994.994 0 0 1-1.401 0L2.528 6.088a.999.999 0 0 0-1.402 0l-.739.739C0 7.211-.116 7.929.128 8.413l3.399 6.8c.247.485.892.885 1.437.885l4.446.002c.213 0 .46-.059.706-.142l9.49 9.491c-.067 1.676.519 3.373 1.792 4.652a6.185 6.185 0 0 0 4.395 1.816 6.197 6.197 0 0 0 4.398-1.82c2.413-2.424 2.413-6.37-.007-8.799zm-2.514 6.279c-1.007 1.004-2.757.993-3.753.006a2.673 2.673 0 0 1-.004-3.761 2.645 2.645 0 0 1 1.879-.776 2.64 2.64 0 0 1 1.872.771 2.672 2.672 0 0 1 .006 3.76z"/></svg>
+        - text: EGA
+          image: <svg class="vf-list__image" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M30.184 21.298c-1.416-1.411-3.467-1.959-5.388-1.663l-9.179-9.181c.083-.244.141-.49.141-.702V5.306c0-.545-.4-1.193-.889-1.433L8.072.471C7.583.23 6.871.344 6.484.73l-.741.74a.992.992 0 0 0 0 1.402l3.956 3.956a.995.995 0 0 1 0 1.402l-1.813 1.814a.994.994 0 0 1-1.401 0L2.528 6.088a.999.999 0 0 0-1.402 0l-.739.739C0 7.211-.116 7.929.128 8.413l3.399 6.8c.247.485.892.885 1.437.885l4.446.002c.213 0 .46-.059.706-.142l9.49 9.491c-.067 1.676.519 3.373 1.792 4.652a6.185 6.185 0 0 0 4.395 1.816 6.197 6.197 0 0 0 4.398-1.82c2.413-2.424 2.413-6.37-.007-8.799zm-2.514 6.279c-1.007 1.004-2.757.993-3.753.006a2.673 2.673 0 0 1-.004-3.761 2.645 2.645 0 0 1 1.879-.776 2.64 2.64 0 0 1 1.872.771 2.672 2.672 0 0 1 .006 3.76z"/></svg>
+        - text: EMMA
+          image: <svg class="vf-list__image" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M30.184 21.298c-1.416-1.411-3.467-1.959-5.388-1.663l-9.179-9.181c.083-.244.141-.49.141-.702V5.306c0-.545-.4-1.193-.889-1.433L8.072.471C7.583.23 6.871.344 6.484.73l-.741.74a.992.992 0 0 0 0 1.402l3.956 3.956a.995.995 0 0 1 0 1.402l-1.813 1.814a.994.994 0 0 1-1.401 0L2.528 6.088a.999.999 0 0 0-1.402 0l-.739.739C0 7.211-.116 7.929.128 8.413l3.399 6.8c.247.485.892.885 1.437.885l4.446.002c.213 0 .46-.059.706-.142l9.49 9.491c-.067 1.676.519 3.373 1.792 4.652a6.185 6.185 0 0 0 4.395 1.816 6.197 6.197 0 0 0 4.398-1.82c2.413-2.424 2.413-6.37-.007-8.799zm-2.514 6.279c-1.007 1.004-2.757.993-3.753.006a2.673 2.673 0 0 1-.004-3.761 2.645 2.645 0 0 1 1.879-.776 2.64 2.64 0 0 1 1.872.771 2.672 2.672 0 0 1 .006 3.76z"/></svg>
+        - text: ENA
+          image: <svg class="vf-list__image" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M30.184 21.298c-1.416-1.411-3.467-1.959-5.388-1.663l-9.179-9.181c.083-.244.141-.49.141-.702V5.306c0-.545-.4-1.193-.889-1.433L8.072.471C7.583.23 6.871.344 6.484.73l-.741.74a.992.992 0 0 0 0 1.402l3.956 3.956a.995.995 0 0 1 0 1.402l-1.813 1.814a.994.994 0 0 1-1.401 0L2.528 6.088a.999.999 0 0 0-1.402 0l-.739.739C0 7.211-.116 7.929.128 8.413l3.399 6.8c.247.485.892.885 1.437.885l4.446.002c.213 0 .46-.059.706-.142l9.49 9.491c-.067 1.676.519 3.373 1.792 4.652a6.185 6.185 0 0 0 4.395 1.816 6.197 6.197 0 0 0 4.398-1.82c2.413-2.424 2.413-6.37-.007-8.799zm-2.514 6.279c-1.007 1.004-2.757.993-3.753.006a2.673 2.673 0 0 1-.004-3.761 2.645 2.645 0 0 1 1.879-.776 2.64 2.64 0 0 1 1.872.771 2.672 2.672 0 0 1 .006 3.76z"/></svg>
+        - text: GO
+          image: <img class="vf-list__image" src="https://www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/icon/public/resource/thumbnail/go-logo-cropped-2013.jpg">
+        - text: no image
+          image: blank
+        - text: GWAS Catalog
+          image: <img class="vf-list__image" src="https://www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/icon/public/resource/thumbnail/gwas_catalog_logo_73x73.png">
+        - text: IMPC Portal
+          image: <img class="vf-list__image" src="https://www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/icon/public/resource/thumbnail/impc_logo_icon.png">
+        - text: OLS
+          image: <svg class="vf-list__image" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M30.184 21.298c-1.416-1.411-3.467-1.959-5.388-1.663l-9.179-9.181c.083-.244.141-.49.141-.702V5.306c0-.545-.4-1.193-.889-1.433L8.072.471C7.583.23 6.871.344 6.484.73l-.741.74a.992.992 0 0 0 0 1.402l3.956 3.956a.995.995 0 0 1 0 1.402l-1.813 1.814a.994.994 0 0 1-1.401 0L2.528 6.088a.999.999 0 0 0-1.402 0l-.739.739C0 7.211-.116 7.929.128 8.413l3.399 6.8c.247.485.892.885 1.437.885l4.446.002c.213 0 .46-.059.706-.142l9.49 9.491c-.067 1.676.519 3.373 1.792 4.652a6.185 6.185 0 0 0 4.395 1.816 6.197 6.197 0 0 0 4.398-1.82c2.413-2.424 2.413-6.37-.007-8.799zm-2.514 6.279c-1.007 1.004-2.757.993-3.753.006a2.673 2.673 0 0 1-.004-3.761 2.645 2.645 0 0 1 1.879-.776 2.64 2.64 0 0 1 1.872.771 2.672 2.672 0 0 1 .006 3.76z"/></svg>

components/vf-link-list/vf-link-list.njk

-<div class="vf-links">
-  <h3 class="vf-links__heading">Latest Posts</h3>
-  <ul class="vf-links__list | vf-list">
+<div class="vf-links {%- if component_modifier %} {{ component_modifier }}{% endif %}">
+  <h3 class="vf-links__heading">{{ title }}</h3>
+  <ul class="vf-links__list {%- if list_modifier %} vf-links__list--{{ list_modifier}}{% endif %} | vf-list">
+    {% for item in list %}
     <li class="vf-list__item">
-      <a class="vf-list__link" href="#">VF’s top social media posts of 2017 and what we learned from them</a>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="#">The VF Imaging Centre: all about visibility</a>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="#">Press office sprint 1: journalist personas</a>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="#">A colour scheme for VF</a>{% render '@vf-badge' %}<p class="vf-links__meta">Updated 14th February 2018</p>
-    </li>
-    <li class="vf-list__item">
-      <a class="vf-list__link" href="#">New team members</a>
+      <a class="vf-list__link" href="{{ item.url }}">
+        {% if item.image %}
+          {% if item.image == "blank" %}
+            <span><!-- no image --></span>
+            {% else %}
+            {{ item.image }}
+          {% endif %}
+        {% endif %}
+        {{ item.text }}
+      </a>
+      {% if item.badge %}{% render '@vf-badge' %}{% endif %}
+      {% if item.meta %}
+        <p class="vf-links__meta">{{ item.meta }}</p>
+      {% endif %}
     </li>
+    {% endfor %}
   </ul>
 </div>