Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.

{% set context fromYourYamlFile %}
- or -
{% set context = { 
"exampleMultiColumns" : "false",
"component-type" : "block",
"footer__url" : "JavaScript:Void(0);",
 }
%}
{% include "../path_to/vf-minimal-footer/vf-minimal-footer.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-minimal-footer', {
  "exampleMultiColumns" : "false",
  "component-type" : "block",
  "footer__url" : "JavaScript:Void(0);",}
%}
                

<footer class="vf-minimal-footer vf-footer vf-u-padding__top--600 vf-u-padding__bottom--800">
  <div class="vf-footer__inner">
    <div class="vf-footer__logo-mission | vf-grid vf-grid__col-4 vf-u-grid-gap--600 vf-u-margin__bottom--200">
      <a href="https://www.ebi.ac.uk" class="vf-logo vf-u-grid__col--span-1--md vf-u-grid__col--span-1--lg">
        <img class="vf-logo__image" src="../../assets/vf-minimal-footer/assets/embl-ebi-rgb-all-white.png" alt="EMBL-EBI" loading="eager">
      </a>
      <div class="vf-footer__mission vf-u-padding__top--200 vf-u-grid__col--span-3--md vf-u-grid__col--span-3--lg">
        <p class="vf-footer__notice vf-u-margin__bottom--0">[Name of resource] is developed and maintained by EMBL-EBI, a world leader in biological data resources.</p>
      </div>
    </div>

    <section class="vf-footer__legal | vf-grid vf-grid__col-1 | vf-u-padding__top--600 ">
      <a class="vf-footer__link" href="JavaScript:Void(0);">Copyright © EMBL 2026</a>
      <a class="vf-footer__link" href="JavaScript:Void(0);">EMBL-EBI contact</a>
      <a class="vf-footer__link" href="JavaScript:Void(0);">Terms of Use</a>
    </section>
  </div>
</footer>
</br>
</br>
<footer class="vf-minimal-footer vf-footer vf-footer--light vf-u-background-color-ui--white vf-u-padding__top--600 vf-u-padding__bottom--800">
  <div class="vf-footer__inner">
    <div class="vf-footer__logo-mission | vf-grid vf-grid__col-4 | vf-u-grid-gap--600 | vf-u-margin__bottom--200">
      <a href="https://www.ebi.ac.uk" class="vf-logo | vf-u-grid__col--span-1--md | vf-u-grid__col--span-1--lg">
        <img class="vf-logo__image" src="../../assets/vf-minimal-footer/assets/embl-ebi-rgb-full-colour.png" alt="EMBL-EBI" loading="eager">
      </a>
      <div class="vf-footer__mission |vf-u-padding__top--200 | vf-u-grid__col--span-3--md |vf-u-grid__col--span-3--lg">
        <p class="vf-footer__notice vf-u-margin__bottom--0 vf-u-text-color--ui--black">[Name of resource] is developed and maintained by EMBL-EBI, a world leader in biological data resources.</p>
      </div>
    </div>

    <section class="vf-footer__legal | vf-grid vf-grid__col-1 | vf-u-padding__top--600">
      <a class="vf-footer__link | vf-u-text-color--ui--black" href="JavaScript:Void(0);">Copyright © EMBL 2026</a>
      <a class="vf-footer__link | vf-u-text-color--ui--black" href="JavaScript:Void(0);">EMBL-EBI contact</a>
      <a class="vf-footer__link | vf-u-text-color--ui--black" href="JavaScript:Void(0);">Terms of Use</a>
    </section>
  </div>
</footer>