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",
"type" : "inline",
"scrollToId" : "top",
"example" : true,
 }
%}
{% include "../path_to/vf-back-to-top/vf-back-to-top.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-back-to-top', {
  "exampleMultiColumns" : "false",
  "component-type" : "block",
  "type" : "inline",
  "scrollToId" : "top",
  "example" : true,}
%}
                

import { VfBackToTop } from "@visual-framework/vf-back-to-top/vf-back-to-top.react.js";
// or
import { VfBackToTop } from "@visual-framework/vf-back-to-top/vf-back-to-top.jsx";
<VfBackToTop parameter="value" />
                  

For individual parameter names and options, see the Nunjucks syntax example. Also follow the React setup guide. Note: React support is in its early pre-alpha stage and not all component are yet supported.

<!-- this HTML is for example use only -->
<div class="" style="position: relative;" id="top">
  <div class="vf-content">
    <h1 id="embl-communications-strategy-2018-2020">EMBL communications strategy 2018-2020</h1>


    <p class="vf-content__standfirst">This <a href="#">communications strategy</a> outlines EMBL’s vision, mission and goals. It is intended to support everyone who communicates on behalf of EMBL, within and outside of the organisation, in order to provide aligned messaging and help EMBL to achieve its goals. The strategy is supported by an operational plan for the Strategy and Communications team.</p>
    <p class="vf-content__standfirst">The plan reflects the priorities defined in the communications strategy and translates them into a set of deliverables and projects managed by the Strategy and Communications team. This documentation will be regularly reviewed and revised. Your feedback is welcome at any time: please contact EMBL’s Strategy and Communications team.</p>
    <small><i>This document was last revised 7 March 2018</i></small>

    <h2 id="section-1-embls-vision-and-mission">Section 1: EMBL’s vision and mission</h2>
    <h3 id="embls-vision">EMBL’s vision</h3>
    <p>Enabling scientists worldwide to discover the secrets of life</p>
    <h3 id="embls-mission">EMBL’s mission</h3>
    <ol>
      <li>Uncovering the molecular basis of life through research</li>
      <li>Providing research infrastructure and services</li>
      <li>Training and inspiring the next generation of scientists</li>
      <li>Driving research, innovation and progress through technology development</li>
      <li>Interactions with industry and technology transfer</li>
      <li>Playing a leading role in the integration of life science research</li>
    </ol>
    <h3 id="further-examples-of-bullets">Further examples of bullets</h3>
    <ul>
      <li>A bulleted item</li>
      <li>A nested bulleted item</li>
      <li>A nested bulleted item</li>
      <li>A bulleted item</li>
      <li>A bulleted item</li>
      <li>A bulleted item</li>
      <li>A bulleted item</li>
    </ul>
    <h3 id="definition-lists">Definition lists</h3>
    <dl>
      <dt>Beast of Bodmin</dt>
      <dd>A large feline inhabiting Bodmin Moor.</dd>

      <dt>Morgawr</dt>
      <dd>A sea serpent.</dd>

      <dt>Owlman</dt>
      <dd>A giant owl-like creature.</dd>
    </dl>


    <table>
      <thead>
        <tr>
          <th scope="col">Event</th>
          <th scope="col">Date</th>
          <th scope="col">Type</th>
          <th scope="col">Location</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>dave</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores.</td>
          <td>roger</td>
          <td>London, U.K.</td>
        </tr>
        <tr>
          <td>dave</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet.</td>
          <td>roger</td>
          <td>London, U.K.</td>
        </tr>
        <tr>
          <td>dave</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
          <td>roger</td>
          <td>London, U.K.</td>
        </tr>
      </tbody>
    </table>

    <h3>What is EMBL?</h3>
    <p>EMBL is Europe’s flagship laboratory for the life sciences. We are an intergovernmental organisation established in 1974 and are supported by over 20 member states.</p>
    <p>EMBL performs fundamental research in molecular biology, studying the story of life. We offer services to the scientific community; train the next generation of scientists and strive to integrate the life sciences across Europe.</p>

    <figure>
      <img src="../../assets/vf-figure/assets/figure-example.png" alt="An example figure image" loading="lazy">
      <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quasi dolorem eos ratione voluptatum omnis, voluptates adipisci, soluta beatae quo, excepturi, quas id libero rem suscipit! Numquam repellendus consectetur, velit.</figcaption>
    </figure>

    <figure>
      <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/20201202_hero_emblorg_homepage-zoom-out.jpg" alt="An example figure image" loading="lazy">
      <figcaption>A very wide image.</figcaption>
    </figure>

    <p>We are international, innovative and interdisciplinary. We are more than 1600 people, from over 80 countries, operating across six sites in Barcelona (Spain), Cambridge (UK), Grenoble (France), Hamburg (Germany), Heidelberg (Germany), and Rome (Italy). Our scientists work in independent groups and conduct research and offer services in all areas of molecular biology.</p>
    <p>Our research drives the development of new technology and methods in the life sciences. We work to transfer this knowledge for the benefit of society.</p>

    <h2>Section 2: EMBL’s goals</h2>

    <h3>Goal 1: Advancing society</h3>
    <p>The fundamental knowledge that we create, enable and share is immensely valuable to society. Life-science research and services help to address society’s grand challenges, from human health, agriculture, to the environment and beyond.</p>

    <h4>Communications goals:</h4>
    <p>Show the impact of our work in tackling society’s big challenges</p>

    <h3>Goal 2: Enable excellent science to advance our understanding of life</h3>
    <p>We support scientists worldwide with infrastructure, services, technologies, training and platforms for exchange to carry out the best possible research. We are driven by curiosity about life, the most exciting story in the universe. We believe that advancing humankind’s understanding of life is a noble goal in itself.</p>

    <h4>Communications goals:</h4>
    <ul>
      <li>Develop and sustain support for EMBL from important stakeholders</li>
      <li>Attract the best scientists, engineers, technicians and support staff</li>
      <li>Inform scientists about training opportunities and services</li>
    </ul>

    <blockquote>
      <p>We are a group of user experience specialists in an international scientific organisation</p>
      <p>Our aim is to help teams design services to meet the needs of their users</p>
      <p>We believe in openness , transparency, working collaboratively and iteratively, continuously learning and sharing knowledge throughout the organisation</p>
      <p><cite>EMBl-EBI Web Development UX Team Mission</cite></p>
    </blockquote>

    <figure>
      <img src="https://news.embl.de/wp-content/uploads/2019/11/Anastasia-Vlasiuk.jpg" alt="Anastasia Vlasiuk in the lab" loading="lazy">
      <figcaption>Anastasiia Vlasiuk, PhD student in the Asari group, recording the visual responses of an isolated retina. PHOTO: Marietta Schupp/EMBL</figcaption>
    </figure>

  </div>

  <div class="vf-back-to-top vf-back-top--inline" data-vf-js-back-to-top>
    <a href="#top" data-scroll-to-id="top" class="vf-button vf-button--secondary vf-button--sm" aria-label="Back to top">
      <svg class="vf-icon vf-icon--search-btn | vf-button__icon" viewBox="0 0 140 140" width="16" height="16">
        <g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)">
          <path d="M23.421,11.765,13.768.8A2.641,2.641,0,0,0,12,0a2.645,2.645,0,0,0-1.768.8L.579,11.765A1.413,1.413,0,1,0,2.7,13.632l7.45-8.466a.25.25,0,0,1,.437.166V22.587a1.413,1.413,0,1,0,2.826,0V5.332a.25.25,0,0,1,.438-.165L21.3,13.632a1.413,1.413,0,1,0,2.121-1.867Z" fill="#3b6fb6" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
        </g>
      </svg>
      Back to top
    </a>
  </div>

  <!-- this HTML is for example use only -->
</div>
              

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",
"type" : "floating",
"example" : true,
 }
%}
{% include "../path_to/vf-back-to-top/vf-back-to-top.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-back-to-top', {
  "exampleMultiColumns" : "false",
  "component-type" : "block",
  "type" : "floating",
  "example" : true,}
%}
                

import { VfBackToTop } from "@visual-framework/vf-back-to-top/vf-back-to-top.react.js";
// or
import { VfBackToTop } from "@visual-framework/vf-back-to-top/vf-back-to-top.jsx";
<VfBackToTop parameter="value" />
                  

For individual parameter names and options, see the Nunjucks syntax example. Also follow the React setup guide. Note: React support is in its early pre-alpha stage and not all component are yet supported.

<!-- this HTML is for example use only -->
<div class="" style="position: relative;" id="top">
  <div class="vf-content">
    <h1 id="embl-communications-strategy-2018-2020">EMBL communications strategy 2018-2020</h1>


    <p class="vf-content__standfirst">This <a href="#">communications strategy</a> outlines EMBL’s vision, mission and goals. It is intended to support everyone who communicates on behalf of EMBL, within and outside of the organisation, in order to provide aligned messaging and help EMBL to achieve its goals. The strategy is supported by an operational plan for the Strategy and Communications team.</p>
    <p class="vf-content__standfirst">The plan reflects the priorities defined in the communications strategy and translates them into a set of deliverables and projects managed by the Strategy and Communications team. This documentation will be regularly reviewed and revised. Your feedback is welcome at any time: please contact EMBL’s Strategy and Communications team.</p>
    <small><i>This document was last revised 7 March 2018</i></small>

    <h2 id="section-1-embls-vision-and-mission">Section 1: EMBL’s vision and mission</h2>
    <h3 id="embls-vision">EMBL’s vision</h3>
    <p>Enabling scientists worldwide to discover the secrets of life</p>
    <h3 id="embls-mission">EMBL’s mission</h3>
    <ol>
      <li>Uncovering the molecular basis of life through research</li>
      <li>Providing research infrastructure and services</li>
      <li>Training and inspiring the next generation of scientists</li>
      <li>Driving research, innovation and progress through technology development</li>
      <li>Interactions with industry and technology transfer</li>
      <li>Playing a leading role in the integration of life science research</li>
    </ol>
    <h3 id="further-examples-of-bullets">Further examples of bullets</h3>
    <ul>
      <li>A bulleted item</li>
      <li>A nested bulleted item</li>
      <li>A nested bulleted item</li>
      <li>A bulleted item</li>
      <li>A bulleted item</li>
      <li>A bulleted item</li>
      <li>A bulleted item</li>
    </ul>
    <h3 id="definition-lists">Definition lists</h3>
    <dl>
      <dt>Beast of Bodmin</dt>
      <dd>A large feline inhabiting Bodmin Moor.</dd>

      <dt>Morgawr</dt>
      <dd>A sea serpent.</dd>

      <dt>Owlman</dt>
      <dd>A giant owl-like creature.</dd>
    </dl>


    <table>
      <thead>
        <tr>
          <th scope="col">Event</th>
          <th scope="col">Date</th>
          <th scope="col">Type</th>
          <th scope="col">Location</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>dave</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores.</td>
          <td>roger</td>
          <td>London, U.K.</td>
        </tr>
        <tr>
          <td>dave</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet.</td>
          <td>roger</td>
          <td>London, U.K.</td>
        </tr>
        <tr>
          <td>dave</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
          <td>roger</td>
          <td>London, U.K.</td>
        </tr>
      </tbody>
    </table>

    <h3>What is EMBL?</h3>
    <p>EMBL is Europe’s flagship laboratory for the life sciences. We are an intergovernmental organisation established in 1974 and are supported by over 20 member states.</p>
    <p>EMBL performs fundamental research in molecular biology, studying the story of life. We offer services to the scientific community; train the next generation of scientists and strive to integrate the life sciences across Europe.</p>

    <figure>
      <img src="../../assets/vf-figure/assets/figure-example.png" alt="An example figure image" loading="lazy">
      <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quasi dolorem eos ratione voluptatum omnis, voluptates adipisci, soluta beatae quo, excepturi, quas id libero rem suscipit! Numquam repellendus consectetur, velit.</figcaption>
    </figure>

    <figure>
      <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/20201202_hero_emblorg_homepage-zoom-out.jpg" alt="An example figure image" loading="lazy">
      <figcaption>A very wide image.</figcaption>
    </figure>

    <p>We are international, innovative and interdisciplinary. We are more than 1600 people, from over 80 countries, operating across six sites in Barcelona (Spain), Cambridge (UK), Grenoble (France), Hamburg (Germany), Heidelberg (Germany), and Rome (Italy). Our scientists work in independent groups and conduct research and offer services in all areas of molecular biology.</p>
    <p>Our research drives the development of new technology and methods in the life sciences. We work to transfer this knowledge for the benefit of society.</p>

    <h2>Section 2: EMBL’s goals</h2>

    <h3>Goal 1: Advancing society</h3>
    <p>The fundamental knowledge that we create, enable and share is immensely valuable to society. Life-science research and services help to address society’s grand challenges, from human health, agriculture, to the environment and beyond.</p>

    <h4>Communications goals:</h4>
    <p>Show the impact of our work in tackling society’s big challenges</p>

    <h3>Goal 2: Enable excellent science to advance our understanding of life</h3>
    <p>We support scientists worldwide with infrastructure, services, technologies, training and platforms for exchange to carry out the best possible research. We are driven by curiosity about life, the most exciting story in the universe. We believe that advancing humankind’s understanding of life is a noble goal in itself.</p>

    <h4>Communications goals:</h4>
    <ul>
      <li>Develop and sustain support for EMBL from important stakeholders</li>
      <li>Attract the best scientists, engineers, technicians and support staff</li>
      <li>Inform scientists about training opportunities and services</li>
    </ul>

    <blockquote>
      <p>We are a group of user experience specialists in an international scientific organisation</p>
      <p>Our aim is to help teams design services to meet the needs of their users</p>
      <p>We believe in openness , transparency, working collaboratively and iteratively, continuously learning and sharing knowledge throughout the organisation</p>
      <p><cite>EMBl-EBI Web Development UX Team Mission</cite></p>
    </blockquote>

    <figure>
      <img src="https://news.embl.de/wp-content/uploads/2019/11/Anastasia-Vlasiuk.jpg" alt="Anastasia Vlasiuk in the lab" loading="lazy">
      <figcaption>Anastasiia Vlasiuk, PhD student in the Asari group, recording the visual responses of an isolated retina. PHOTO: Marietta Schupp/EMBL</figcaption>
    </figure>

  </div>

  <div class="vf-back-to-top vf-back-top--floating" data-vf-js-back-to-top data-vf-js-back-to-top-floating>
    <a class="vf-button vf-button--secondary vf-button--sm" aria-label="Back to top">
      <svg class="vf-icon vf-icon--search-btn | vf-button__icon" viewBox="0 0 140 140" width="16" height="16">
        <g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)">
          <path d="M23.421,11.765,13.768.8A2.641,2.641,0,0,0,12,0a2.645,2.645,0,0,0-1.768.8L.579,11.765A1.413,1.413,0,1,0,2.7,13.632l7.45-8.466a.25.25,0,0,1,.437.166V22.587a1.413,1.413,0,1,0,2.826,0V5.332a.25.25,0,0,1,.438-.165L21.3,13.632a1.413,1.413,0,1,0,2.121-1.867Z" fill="#3b6fb6" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
        </g>
      </svg>
      Back to top
    </a>
  </div>

  <!-- this HTML is for example use only -->
</div>