Links List github location npm version

The Links List component is a robust list group that can be used in a variety of grid layouts.

Usage

The Links List can have a title <h3 class="vf-links__heading">Example Title</h3>.

In each list item you can have:

A link <a class="vf-links__link" href="">Example Link</a>.

Except for a Links List that is using the the design variant of vf-links__list--easy you can also use:

It can make use of the vf-badge component <span class="vf-badge">Example Tag</span>.

It can include meta information <p class="vf-links__meta">Example Meta</p>.

Contextual Based Link Lists

"On this page"

If you want to provide a set of links that will anchor to sections on the page you should use:

note: You will need to add a corresponding id to the section you are linking to for the anchor to work.

Link List
<div class="vf-links vf-links__list--easy">
  <h3 class="vf-links__heading">On this page</h3>
  <ul class="vf-links__list | vf-list">
    <li class="vf-list__item">
      <a class="vf-list__link" href="#Anchor-Text">
        Anchor Text
        <svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
      </a>
    </li>
  </ul>
</div>
Linked Section In Page
<section class="vf-component" id="Anchor-Text">
  ...
</section>

"In this section"

If you want to include quick links as part of a section of content you can use:

Link List
<div class="vf-links vf-links--tight vf-links__list--s vf-links__list--very-easy">
  <h3 class="vf-links__heading">In this section</h3>
  <ul class="vf-links__list vf-links__list--secondary | vf-list">
    <li class="vf-list__item">
      <a class="vf-list__link" href="#Anchor-Text">
        Anchor Text
      </a>
    </li>
  </ul>
</div>
Linked Text In Section
<section class="vf-component">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores dolore eveniet sed totam deleniti, ipsum dolorum cupiditate, aut error quae beatae nemo esse pariatur repellendus illo dicta doloribus alias ipsa.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, ut aut eveniet consectetur rem. Sapiente quis optio cupiditate molestias debitis quisquam ab in. Voluptates, expedita modi aliquam, sint tempore magnam.</p>
  <p id="Anchor-Text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quo magnam accusamus vel porro, ullam tempora illo atque vitae voluptatum ratione temporibus, est, itaque quasi eum cupiditate mollitia adipisci. Suscipit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur fuga eveniet ducimus, dolorem sit itaque sequi nisi praesentium consequatur, temporibus tempore rem illo laboriosam libero repudiandae neque labore suscipit expedita.</p>
</section>
Installation info

This component is distributed with npm. After installing npm, you can install the vf-link-list with this command.

$ yarn add --dev @visual-framework/vf-link-list

Sass/CSS

The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-link-list/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Variants

Variant example: Default

Latest Posts

Nunjucks syntax 
{% render '@vf-link-list', {
  "component-type": "block",
  "title": "Latest Posts",
  "list": [
    {
      "text": "VF’s top social media posts of 2017 and what we learned from them",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "The VF Imaging Centre all about visibility",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "Press office sprint 1 journalist personas",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "A colour scheme for VF",
      "link_list_href": "JavaScript:Void(0);",
      "badge": {
        "theme": "secondary",
        "text": "alpha"
      },
      "meta": "Updated 14th February 2018"
    },
    {
      "text": "New team members",
      "link_list_href": "JavaScript:Void(0);"
    }
  ]
} %}
HTML 
<div class="vf-links">
  <h3 class="vf-links__heading">Latest Posts</h3>
  <ul class="vf-links__list | vf-list">
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        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="JavaScript:Void(0);">
        The VF Imaging Centre all about visibility
      </a>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        Press office sprint 1 journalist personas
      </a>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        A colour scheme for VF
      </a>


      <span class="vf-badge vf-badge--secondary">alpha</span>
      <p class="vf-links__meta">Updated 14th February 2018</p>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        New team members
      </a>

    </li>
  </ul>
</div>
Variant example: No Heading
Nunjucks syntax 
{% render '@vf-link-list', {
  "component-type": "block",
  "list": [
    {
      "text": "VF’s top social media posts of 2017 and what we learned from them",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "The VF Imaging Centre all about visibility",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "Press office sprint 1 journalist personas",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "A colour scheme for VF",
      "link_list_href": "JavaScript:Void(0);",
      "badge": {
        "theme": "secondary",
        "text": "alpha"
      },
      "meta": "Updated 14th February 2018"
    },
    {
      "text": "New team members",
      "link_list_href": "JavaScript:Void(0);"
    }
  ]
} %}
HTML 
<div class="vf-links">
  <ul class="vf-links__list | vf-list">
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        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="JavaScript:Void(0);">
        The VF Imaging Centre all about visibility
      </a>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        Press office sprint 1 journalist personas
      </a>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        A colour scheme for VF
      </a>


      <span class="vf-badge vf-badge--secondary">alpha</span>
      <p class="vf-links__meta">Updated 14th February 2018</p>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        New team members
      </a>

    </li>
  </ul>
</div>
Variant example: Tight

Latest Posts

Nunjucks syntax 
{% render '@vf-link-list', {
  "component-type": "block",
  "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
    }
  ]
} %}
HTML 
<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>
      <p class="vf-links__meta">39</p>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="">
        Administration
      </a>
      <p class="vf-links__meta">39</p>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="">
        Bioninformatics
      </a>
      <p class="vf-links__meta">39</p>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="">
        Communication
      </a>
      <p class="vf-links__meta">39</p>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="">
        Data Curation
      </a>
      <p class="vf-links__meta">39</p>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="">
        General Support Services
      </a>
      <p class="vf-links__meta">39</p>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="">
        IT and Infrastructure
      </a>
      <p class="vf-links__meta">39</p>

    </li>
  </ul>
</div>
Variant example: Very Easy

In this section

Nunjucks syntax 
{% render '@vf-link-list', {
  "component-type": "block",
  "component_modifier": "vf-links--tight vf-links__list--s vf-links__list--very-easy",
  "title": "In this section",
  "list_modifier": "secondary",
  "list": [
    {
      "text": "All",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "Administration",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "Bioninformatics",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "Communication",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "Data Curation",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "General Support Services",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "IT and Infrastructure",
      "link_list_href": "JavaScript:Void(0);"
    }
  ]
} %}
HTML 
<div class="vf-links vf-links--tight vf-links__list--s vf-links__list--very-easy">
  <h3 class="vf-links__heading">In this section</h3>
  <ul class="vf-links__list vf-links__list--secondary | vf-list">
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        All
      </a>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        Administration
      </a>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        Bioninformatics
      </a>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        Communication
      </a>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        Data Curation
      </a>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        General Support Services
      </a>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        IT and Infrastructure
      </a>

    </li>
  </ul>
</div>
Variant example: Easy

On this page

Nunjucks syntax 
{% render '@vf-link-list', {
  "component-type": "block",
  "component_modifier": "vf-links__list--easy",
  "title": "On this page",
  "svg": true,
  "list": [
    {
      "text": "All",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "Administration",
      "link_list_href": "JavaScript:Void(0);",
      "meta": "Updated 14th February 2018"
    },
    {
      "text": "Bioninfomatics",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "Communication",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "Data Curation",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "General Support Services",
      "link_list_href": "JavaScript:Void(0);"
    },
    {
      "text": "IT and Infrastructure",
      "link_list_href": "JavaScript:Void(0);"
    }
  ]
} %}
HTML 
<div class="vf-links vf-links__list--easy">
  <h3 class="vf-links__heading">On this page</h3>
  <ul class="vf-links__list | vf-list">
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        All
        <svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <title>arrow-button-down</title>
          <path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z" />
        </svg>
      </a>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        Administration
        <svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <title>arrow-button-down</title>
          <path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z" />
        </svg>
      </a>
      <p class="vf-links__meta">Updated 14th February 2018</p>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        Bioninfomatics
        <svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <title>arrow-button-down</title>
          <path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z" />
        </svg>
      </a>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        Communication
        <svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <title>arrow-button-down</title>
          <path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z" />
        </svg>
      </a>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        Data Curation
        <svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <title>arrow-button-down</title>
          <path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z" />
        </svg>
      </a>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        General Support Services
        <svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <title>arrow-button-down</title>
          <path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z" />
        </svg>
      </a>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="JavaScript:Void(0);">
        IT and Infrastructure
        <svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <title>arrow-button-down</title>
          <path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z" />
        </svg>
      </a>

    </li>
  </ul>
</div>
Variant example: Has Images

Services

Nunjucks syntax 
{% render '@vf-link-list', {
  "component-type": "block",
  "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>"
    }
  ]
} %}
HTML 
<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="">
        <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="">
        <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="">
        <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="">
        <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="">
        <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="">
        <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="">
        <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="">
        <span>
          <!-- no image -->
        </span>
        no image
      </a>

    </li>
    <li class="vf-list__item">
      <a class="vf-list__link" href="">
        <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="">
        <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="">
        <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>

Assets


File system location: components/vf-link-list

Find an issue on this page? Propose a change or discuss it.