Visual Framework
Visual Framework
The vf-footer is a flexible footer component that allows websites to configure different modules based on their specific needs whilst maintaining consistent branding.
The vf-footer provides a flexible and structured approach to footer configuration. It allows configuration of specific sections and adjustment of text content as needed, while maintaining consistent layout, accessibility compliance, and brand identity.
Modular in the context of the vf-footer refers to the ability to enable or disable sections and customise text within them. It does not mean you can change the order of sections. The visual sequence is fixed to maintain consistency and meet accessibility requirements. If your service requires a different section order, please contact the Visual Framework team to discuss your use case.
| Element | Usage | Notes |
|---|---|---|
| Collaborations | Display partner, funder or collaborator logos | Optional |
| Custom logo | Highlight the specific branding | Optional |
| Mission statement | Provide context about the service or organisation | Optional |
| Custom links | Use website specific navigation organised by category. If custom navigation is not required, it is recommended to use the Minimal footer component instead | Required |
| Contact details | Contact details are flexible and can accommodate short or long text formats. All contact methods can be linked as needed, with the option to direct users to a dedicated contact page. | Optional |
| Social media | Link to relevant social channels | Optional |
| Utility | The bottom section contains links such as Terms of use, copyright and other utility links | Optional |
Use the VF-Modular footer when your website requires:
The Visual Framework offers other footer variants that may better suit other use cases:
| Variant | Examples | Description |
|---|---|---|
| Modular | VF-footer | Use when footer sections need to be customised |
| EMBL-EBI Corporate Variant | EMBL_EBI header-footer | Use the EMBL-EBI corporate variant for organisational or self-contained experiences |
| Minimal | Use when only essential brand and legal information is needed |
The collaborations section provides standardised patterns for displaying varying levels of partnerships and collaborations. The display format adapts based on the number of collaborators.
The Collaborations section renders its own top green border. Remove the footer's default top margin line to prevent duplication.
When you have between 1 and 6 partners, display their logos horizontally across the section.
When you have between 1 and 9 partners, you need to display their names as text links.
When you have 10 or more partners, synthesise them into categories with summary numbers and a "See all collaborators" link.
| Variant | Nº of partners | Usage |
|---|---|---|
| Logo display | 1 - 6 | Provides strong visual recognition for each partner |
| Text links in columns | 1 - 9 | Maintains readability whilst accommodating more partners |
| Categorised summary | 10+ | Prevents footer from becoming overwhelming; directs users to dedicated page |
Guidelines for domains requiring both Organisation-wide and Service-specific Terms
When a domain requires both organisation-wide Terms of Use and service-specific Terms of Use, teams should create a single dedicated page that clearly presents both sets of terms together. This consolidated approach ensures users can easily understand which terms apply to their specific use case while maintaining a single, clear ToU link in the footer. This prevents confusion from multiple links with similar names and provides a better user experience.
Avoid including ToU in cookie banners. Terms of Use should remain permanently visible in the footer rather than in a dismissible cookie consent banner. Cookie banners are temporary and can be dismissed by users, removing access to critical legal information. By keeping ToU in the footer, users can always access this information whenever needed, regardless of their cookie consent choices.
The footer is available in two colour schemes: light and dark, to establish clear visual distinction from page content.
Apply the light scheme when the page background uses colour or tone, and the dark scheme when the background is white or near-white. This intentional contrast ensures users can clearly identify where the main content concludes and the footer begins.
The component is designed to adapt seamlessly across different screen sizes. The layout of the custom links section wraps 2 column grids on tablet (Breaking point 768px) and 1 column on mobile (breaking point 600px). Spacing, readability, and target touch size are optimised for accessibility and ease of use.
This component targets WCAG 2.1 AA accessibility standard.
Links provide direct location description [Manual testing required]: Ensure link text is descriptive and not ambiguous. WCAG A 2.4.4 Link purpose (in context)
Keyboard navigation: All links and interactive elements are keyboard accessible
Focus indicators: Clear visual focus states meet 3:1 contrast requirements
Touch targets: All clickable elements meet the minimum 44×44 pixel touch target size on mobile and tablet
Colour contrast: Text and link colours have been tested against both light and dark backgrounds
Screen readers: Semantic HTML and ARIA labels ensure footer content is properly announced
Responsive design: Footer adapts appropriately across mobile (600px), tablet (768px) and desktop (1154px) breakpoints
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.
includeYou'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 = {
"footer__theme" : "dark",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : ,
}
%}
{% include "../path_to/vf-footer/vf-footer.njk" %}
renderThis 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-footer', {
"footer__theme" : "dark",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : ,}
%}
<footer class="vf-footer | vf-u-background-color-ui--dark-grey">
<div class="vf-footer__inner">
<div class="vf-grid vf-grid__col-2">
<!-- ROW 1: Logo + Mission (4) | Category Links (8) -->
<!-- Logo -->
<div class="vf-footer__logo-wrapper">
<a href="https://www.ebi.ac.uk" class="vf-logo">
<img class="vf-logo__image" src="../../assets/vf-minimal-footer/assets/embl-ebi-rgb-all-white.png" alt="EMBL-EBI Logo" loading="eager" />
</a>
<div class="vf-grid vf-grid__col-2">
<!-- Mission Statement -->
<p class="vf-u-type__text-body--3 vf-footer__notice vf-footer__text-secondary ">
Mission statement, a description of a site or organisation and what its goals are. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</p>
<p>
</p>
</div>
</div>
<div>
<!-- Category Links -->
<div class="vf-grid vf-grid__col-3 ">
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ROW 2: Contact Details (4) | Social Icons (8) -->
<div class="vf-grid vf-grid__col-2">
<!-- Contact Details -->
<div class="vf-footer__contact">
<p class="vf-u-type__text-body--5 vf-u-text-color--grey--lightest">Tel: +49 00 000 000.</p>
<p class="vf-u-type__text-body--5 vf-u-text-color--grey--lightest">Maybe an address too, 5555, Somewhere, Earth.</p>
<a href="JavaScript:Void(0);" class="vf-footer__link vf-u-text-color--white">Full contact details</a>
</div>
<div>
<!-- Social Icons -->
<div class="vf-footer__social vf-u-display--flex vf-u-float__right">
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.166 1.791.166v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Bluesky">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 576 512">
<path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.7-.9 10-1.3c-3.4 .4-6.7 .9-10 1.3C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.7-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.486-.275.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="X">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 15 0 14.487 0 13.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
</a>
</div>
</div>
</div>
<!-- ROW 3: Copyright (12) -->
<section class="vf-footer__legal vf-grid__col--span-all | vf-grid vf-grid__col-1">
<span class="vf-footer__link vf-u-text-color--grey--lightest">Copyright © Your Organisation</span>
<a class="vf-footer__link vf-u-text-color--white" href="JavaScript:Void(0);">Terms of use</a>
<a class="vf-footer__link vf-u-text-color--grey--lightest" href="JavaScript:Void(0);">Another entry</a>
</section>
</div>
</footer>
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.
includeYou'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 = {
"footer__theme" : "dark",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : ,
}
%}
{% include "../path_to/vf-footer/vf-footer.njk" %}
renderThis 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-footer', {
"footer__theme" : "dark",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : ,}
%}
<footer class="vf-footer | vf-u-background-color-ui--dark-grey">
<div class="vf-footer__inner">
<div class="vf-grid vf-grid__col-2">
<!-- ROW 1: Logo + Mission (4) | Category Links (8) -->
<!-- Logo -->
<div class="vf-footer__logo-wrapper">
<a href="https://www.ebi.ac.uk" class="vf-logo">
<img class="vf-logo__image" src="../../assets/vf-minimal-footer/assets/embl-ebi-rgb-all-white.png" alt="EMBL-EBI Logo" loading="eager" />
</a>
<div class="vf-grid vf-grid__col-2">
<!-- Mission Statement -->
<p class="vf-u-type__text-body--3 vf-footer__notice vf-footer__text-secondary ">
Mission statement, a description of a site or organisation and what its goals are. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</p>
<p>
</p>
</div>
</div>
<div>
<!-- Category Links -->
<div class="vf-grid vf-grid__col-3 ">
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ROW 2: Contact Details (4) | Social Icons (8) -->
<div class="vf-grid vf-grid__col-2">
<!-- Contact Details -->
<div class="vf-footer__contact">
<p class="vf-u-type__text-body--5 vf-u-text-color--grey--lightest">Tel: +49 00 000 000.</p>
<p class="vf-u-type__text-body--5 vf-u-text-color--grey--lightest">Maybe an address too, 5555, Somewhere, Earth.</p>
<a href="JavaScript:Void(0);" class="vf-footer__link vf-u-text-color--white">Full contact details</a>
</div>
<div>
<!-- Social Icons -->
<div class="vf-footer__social vf-u-display--flex vf-u-float__right">
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.166 1.791.166v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Bluesky">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 576 512">
<path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.7-.9 10-1.3c-3.4 .4-6.7 .9-10 1.3C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.7-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.486-.275.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="X">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 15 0 14.487 0 13.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
</a>
</div>
</div>
</div>
<!-- ROW 3: Copyright (12) -->
<section class="vf-footer__legal vf-grid__col--span-all | vf-grid vf-grid__col-1">
<span class="vf-footer__link vf-u-text-color--grey--lightest">Copyright © Your Organisation</span>
<a class="vf-footer__link vf-u-text-color--white" href="JavaScript:Void(0);">Terms of use</a>
<a class="vf-footer__link vf-u-text-color--grey--lightest" href="JavaScript:Void(0);">Another entry</a>
</section>
</div>
</footer>
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.
includeYou'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 = {
"footer__theme" : "light",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : ,
}
%}
{% include "../path_to/vf-footer/vf-footer.njk" %}
renderThis 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-footer', {
"footer__theme" : "light",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : ,}
%}
<footer class="vf-footer vf-footer--light | vf-u-background-color-ui--white">
<div class="vf-footer__inner">
<div class="vf-grid vf-grid__col-2">
<!-- ROW 1: Logo + Mission (4) | Category Links (8) -->
<!-- Logo -->
<div class="vf-footer__logo-wrapper">
<a href="https://www.ebi.ac.uk" class="vf-logo">
<img class="vf-logo__image" src="../../assets/vf-minimal-footer/assets/embl-ebi-rgb-full-colour.svg" alt="EMBL-EBI Logo" loading="eager" />
</a>
<div class="vf-grid vf-grid__col-2">
<!-- Mission Statement -->
<p class="vf-u-type__text-body--3 vf-footer__notice vf-footer__text-secondary ">
Mission statement, a description of a site or organisation and what its goals are. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</p>
<p>
</p>
</div>
</div>
<div>
<!-- Category Links -->
<div class="vf-grid vf-grid__col-3 ">
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ROW 2: Contact Details (4) | Social Icons (8) -->
<div class="vf-grid vf-grid__col-2">
<!-- Contact Details -->
<div class="vf-footer__contact">
<p class="vf-u-type__text-body--5 vf-u-text-color--grey--lightest">Tel: +49 00 000 000.</p>
<p class="vf-u-type__text-body--5 vf-u-text-color--grey--lightest">Maybe an address too, 5555, Somewhere, Earth.</p>
<a href="JavaScript:Void(0);" class="vf-footer__link vf-u-text-color--white">Full contact details</a>
</div>
<div>
<!-- Social Icons -->
<div class="vf-footer__social vf-u-display--flex vf-u-float__right">
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.166 1.791.166v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Bluesky">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 576 512">
<path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.7-.9 10-1.3c-3.4 .4-6.7 .9-10 1.3C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.7-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.486-.275.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="X">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 15 0 14.487 0 13.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
</a>
</div>
</div>
</div>
<!-- ROW 3: Copyright (12) -->
<section class="vf-footer__legal vf-grid__col--span-all | vf-grid vf-grid__col-1">
<span class="vf-footer__link vf-u-text-color--grey--lightest">Copyright © Your Organisation</span>
<a class="vf-footer__link vf-u-text-color--white" href="JavaScript:Void(0);">Terms of use</a>
<a class="vf-footer__link vf-u-text-color--grey--lightest" href="JavaScript:Void(0);">Another entry</a>
</section>
</div>
</footer>
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.
includeYou'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 = {
"footer__theme" : "dark",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : "logos",
}
%}
{% include "../path_to/vf-footer/vf-footer.njk" %}
renderThis 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-footer', {
"footer__theme" : "dark",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : "logos",}
%}
<div class="vf-footer vf-u-background-color-ui--white vf-footer__partners">
<div class="vf-footer__inner">
<h4 class="vf-u-type__text-body--4 vf-u-text-color--grey--dark">Our partners/collaborators</h4>
<ul class="vf-grid vf-grid__col-6 vf-list">
<li class="vf-list__item">
<a href="JavaScript:Void(0);" class="vf-list__link">
<img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
</a>
</li>
<li class="vf-list__item">
<a href="JavaScript:Void(0);" class="vf-list__link">
<img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
</a>
</li>
<li class="vf-list__item">
<a href="JavaScript:Void(0);" class="vf-list__link">
<img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
</a>
</li>
<li class="vf-list__item">
<a href="JavaScript:Void(0);" class="vf-list__link">
<img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
</a>
</li>
<li class="vf-list__item">
<a href="JavaScript:Void(0);" class="vf-list__link">
<img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
</a>
</li>
<li class="vf-list__item">
<a href="JavaScript:Void(0);" class="vf-list__link">
<img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
</a>
</li>
</ul>
</div>
</div>
<footer class="vf-footer vf-footer--without-rule | vf-u-background-color-ui--dark-grey">
<div class="vf-footer__inner">
<div class="vf-grid vf-grid__col-2">
<!-- ROW 1: Logo + Mission (4) | Category Links (8) -->
<!-- Logo -->
<div class="vf-footer__logo-wrapper">
<a href="https://www.ebi.ac.uk" class="vf-logo">
<img class="vf-logo__image" src="../../assets/vf-minimal-footer/assets/embl-ebi-rgb-all-white.png" alt="EMBL-EBI Logo" loading="eager" />
</a>
<div class="vf-grid vf-grid__col-2">
<!-- Mission Statement -->
<p class="vf-u-type__text-body--3 vf-footer__notice vf-footer__text-secondary ">
Mission statement, a description of a site or organisation and what its goals are. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</p>
<p>
</p>
</div>
</div>
<div>
<!-- Category Links -->
<div class="vf-grid vf-grid__col-3 ">
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ROW 2: Contact Details (4) | Social Icons (8) -->
<div class="vf-grid vf-grid__col-2">
<!-- Contact Details -->
<div class="vf-footer__contact">
<p class="vf-u-type__text-body--5 vf-u-text-color--grey--lightest">Tel: +49 00 000 000.</p>
<p class="vf-u-type__text-body--5 vf-u-text-color--grey--lightest">Maybe an address too, 5555, Somewhere, Earth.</p>
<a href="JavaScript:Void(0);" class="vf-footer__link vf-u-text-color--white">Full contact details</a>
</div>
<div>
<!-- Social Icons -->
<div class="vf-footer__social vf-u-display--flex vf-u-float__right">
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.166 1.791.166v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Bluesky">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 576 512">
<path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.7-.9 10-1.3c-3.4 .4-6.7 .9-10 1.3C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.7-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.486-.275.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="X">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 15 0 14.487 0 13.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
</a>
</div>
</div>
</div>
<!-- ROW 3: Copyright (12) -->
<section class="vf-footer__legal vf-grid__col--span-all | vf-grid vf-grid__col-1">
<span class="vf-footer__link vf-u-text-color--grey--lightest">Copyright © Your Organisation</span>
<a class="vf-footer__link vf-u-text-color--white" href="JavaScript:Void(0);">Terms of use</a>
<a class="vf-footer__link vf-u-text-color--grey--lightest" href="JavaScript:Void(0);">Another entry</a>
</section>
</div>
</footer>
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.
includeYou'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 = {
"footer__theme" : "dark",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : "columns",
}
%}
{% include "../path_to/vf-footer/vf-footer.njk" %}
renderThis 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-footer', {
"footer__theme" : "dark",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : "columns",}
%}
<div class="vf-footer vf-u-background-color-ui--white vf-footer__partners">
<div class="vf-footer__inner">
<h4 class="vf-u-type__text-body--4 vf-u-text-color--grey--dark">Our partners/collaborators</h4>
<div>
<ul class="vf-grid vf-grid__col-3 vf-list">
<li class="vf-list__item">
<a href="JavaScript:Void(0);" class="vf-list__link">Partner 1</a>
</li>
<li class="vf-list__item">
<a href="JavaScript:Void(0);" class="vf-list__link">Partner 2</a>
</li>
<li class="vf-list__item">
<a href="JavaScript:Void(0);" class="vf-list__link">Partner 3</a>
</li>
<li class="vf-list__item">
<a href="JavaScript:Void(0);" class="vf-list__link">Partner 4</a>
</li>
<li class="vf-list__item">
<a href="JavaScript:Void(0);" class="vf-list__link">Partner 5</a>
</li>
<li class="vf-list__item">
<a href="JavaScript:Void(0);" class="vf-list__link">Partner 6</a>
</li>
<li class="vf-list__item">
<a href="JavaScript:Void(0);" class="vf-list__link">Partner 7</a>
</li>
<li class="vf-list__item">
<a href="JavaScript:Void(0);" class="vf-list__link">Partner 8</a>
</li>
<li class="vf-list__item">
<a href="JavaScript:Void(0);" class="vf-list__link">Partner 9</a>
</li>
</ul>
</div>
</div>
</div>
<footer class="vf-footer vf-footer--without-rule | vf-u-background-color-ui--dark-grey">
<div class="vf-footer__inner">
<div class="vf-grid vf-grid__col-2">
<!-- ROW 1: Logo + Mission (4) | Category Links (8) -->
<!-- Logo -->
<div class="vf-footer__logo-wrapper">
<a href="https://www.ebi.ac.uk" class="vf-logo">
<img class="vf-logo__image" src="../../assets/vf-minimal-footer/assets/embl-ebi-rgb-all-white.png" alt="EMBL-EBI Logo" loading="eager" />
</a>
<div class="vf-grid vf-grid__col-2">
<!-- Mission Statement -->
<p class="vf-u-type__text-body--3 vf-footer__notice vf-footer__text-secondary ">
Mission statement, a description of a site or organisation and what its goals are. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</p>
<p>
</p>
</div>
</div>
<div>
<!-- Category Links -->
<div class="vf-grid vf-grid__col-3 ">
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ROW 2: Contact Details (4) | Social Icons (8) -->
<div class="vf-grid vf-grid__col-2">
<!-- Contact Details -->
<div class="vf-footer__contact">
<p class="vf-u-type__text-body--5 vf-u-text-color--grey--lightest">Tel: +49 00 000 000.</p>
<p class="vf-u-type__text-body--5 vf-u-text-color--grey--lightest">Maybe an address too, 5555, Somewhere, Earth.</p>
<a href="JavaScript:Void(0);" class="vf-footer__link vf-u-text-color--white">Full contact details</a>
</div>
<div>
<!-- Social Icons -->
<div class="vf-footer__social vf-u-display--flex vf-u-float__right">
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.166 1.791.166v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Bluesky">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 576 512">
<path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.7-.9 10-1.3c-3.4 .4-6.7 .9-10 1.3C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.7-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.486-.275.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="X">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 15 0 14.487 0 13.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
</a>
</div>
</div>
</div>
<!-- ROW 3: Copyright (12) -->
<section class="vf-footer__legal vf-grid__col--span-all | vf-grid vf-grid__col-1">
<span class="vf-footer__link vf-u-text-color--grey--lightest">Copyright © Your Organisation</span>
<a class="vf-footer__link vf-u-text-color--white" href="JavaScript:Void(0);">Terms of use</a>
<a class="vf-footer__link vf-u-text-color--grey--lightest" href="JavaScript:Void(0);">Another entry</a>
</section>
</div>
</footer>
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.
includeYou'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 = {
"footer__theme" : "dark",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : "summary",
}
%}
{% include "../path_to/vf-footer/vf-footer.njk" %}
renderThis 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-footer', {
"footer__theme" : "dark",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : "summary",}
%}
<div class="vf-footer vf-u-background-color-ui--white vf-footer__partners">
<div class="vf-footer__inner">
<h4 class="vf-u-type__text-body--4 vf-u-text-color--grey--dark">Our partners/collaborators</h4>
<div class="vf-grid vf-grid__col-4">
<div>
<p class="vf-u-type__text-body--3 vf-u-text-color--grey--dark">Partnership statement. A short description of the partnerships, collaborations or consortium.</p>
<a href="JavaScript:Void(0);" class="vf-u-type__text-body--4 vf-u-text-color--grey--dark">See all collaborators</a>
</div>
<div class="vf-footer__stat vf-table__label">
<p class="vf-u-type__text-heading--2">35</p>
<p class="vf-u-type__text-body--4 vf-u-text-color--grey--dark">Data partners</p>
</div>
<div class="vf-footer__stat vf-table__label">
<p class="vf-u-type__text-heading--2">4</p>
<p class="vf-u-type__text-body--4 vf-u-text-color--grey--dark">Supporting funders</p>
</div>
<div class="vf-footer__stat vf-table__label">
<p class="vf-u-type__text-heading--2">35</p>
<p class="vf-u-type__text-body--4 vf-u-text-color--grey--dark">Research institutions</p>
</div>
</div>
</div>
</div>
<footer class="vf-footer vf-footer--without-rule | vf-u-background-color-ui--dark-grey">
<div class="vf-footer__inner">
<div class="vf-grid vf-grid__col-2">
<!-- ROW 1: Logo + Mission (4) | Category Links (8) -->
<!-- Logo -->
<div class="vf-footer__logo-wrapper">
<a href="https://www.ebi.ac.uk" class="vf-logo">
<img class="vf-logo__image" src="../../assets/vf-minimal-footer/assets/embl-ebi-rgb-all-white.png" alt="EMBL-EBI Logo" loading="eager" />
</a>
<div class="vf-grid vf-grid__col-2">
<!-- Mission Statement -->
<p class="vf-u-type__text-body--3 vf-footer__notice vf-footer__text-secondary ">
Mission statement, a description of a site or organisation and what its goals are. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</p>
<p>
</p>
</div>
</div>
<div>
<!-- Category Links -->
<div class="vf-grid vf-grid__col-3 ">
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading vf-u-text-color--grey--lightest">
CATEGORY
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
Entry
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ROW 2: Contact Details (4) | Social Icons (8) -->
<div class="vf-grid vf-grid__col-2">
<!-- Contact Details -->
<div class="vf-footer__contact">
<p class="vf-u-type__text-body--5 vf-u-text-color--grey--lightest">Tel: +49 00 000 000.</p>
<p class="vf-u-type__text-body--5 vf-u-text-color--grey--lightest">Maybe an address too, 5555, Somewhere, Earth.</p>
<a href="JavaScript:Void(0);" class="vf-footer__link vf-u-text-color--white">Full contact details</a>
</div>
<div>
<!-- Social Icons -->
<div class="vf-footer__social vf-u-display--flex vf-u-float__right">
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.166 1.791.166v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Bluesky">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 576 512">
<path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.7-.9 10-1.3c-3.4 .4-6.7 .9-10 1.3C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.7-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.486-.275.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="X">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 15 0 14.487 0 13.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
</svg>
</a>
<a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
</a>
</div>
</div>
</div>
<!-- ROW 3: Copyright (12) -->
<section class="vf-footer__legal vf-grid__col--span-all | vf-grid vf-grid__col-1">
<span class="vf-footer__link vf-u-text-color--grey--lightest">Copyright © Your Organisation</span>
<a class="vf-footer__link vf-u-text-color--white" href="JavaScript:Void(0);">Terms of use</a>
<a class="vf-footer__link vf-u-text-color--grey--lightest" href="JavaScript:Void(0);">Another entry</a>
</section>
</div>
</footer>
This component is distributed with npm. After installing npm, you can install the vf-footer with this command.
$ yarn add --dev @visual-framework/vf-footer
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-footer/index.scss";
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter
EMBL-EBI Intranet implementation findings Tracking issue@visual-framework@vf-sass-config@2.6.1.set- style functions to cleaner versionvf-body component.vf-body on .vf-footer
File system location: components/vf-footer
Find an issue on this page? Propose a change or discuss it.
Are you sure you want to close the chat?
Your current conversation history will be permanently deleted.
