Modular VF Footer container

The vf-footer is a flexible footer component that allows websites to configure different modules based on their specific needs whilst maintaining consistent branding.

github location npm version

Usage

Description

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.

What does 'modular' mean?

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.


Configurable sections

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. Uses the same legal section structure as the modular footer pattern for consistency.

When to use

Use the VF-Modular footer when your website requires:

  • To display social media channels
  • Service-specific navigation or utility links
  • Needs to display its own logo and mission statement
  • Requires a flexible footer structure that can evolve
  • Where there is a need to show collaboration with multiple partners

When not to use

The Visual Framework offers other footer variants that may better suit other use cases:

  • If your site only needs basic branding, essential links, and legal information without service-specific navigation or social media, use Minimal footer instead
  • If your site requires full EMBL-EBI institutional presence with parent navigation across all major organisational sections it is recommended to use the EMBL_EBI header-footer

Deciding what to use

Variant Description
Modular Use when footer sections need to be customised
Minimal Use when only essential brand and legal information is needed
EMBL_EBI header-footer Use the EMBL-EBI corporate variant for organisational or self-contained experiences

Collaboration section variants

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.

Logos display (1 - 6 partners)

When you have between 1 and 6 partners, display their logos horizontally across the section.

  • Uses a 6-column grid at desktop breakpoint (1154px+)
  • One logo per column
  • Maximum logo dimensions: 174px width and 64x height
  • Logos centred within their column
  • Scale down logos proportionally if they exceed maximum dimensions
  • For best image resolution, svg usage is recommended

Partners links in columns (1 - 9 partners)

When you have between 1 and 9 partners, you need to display their names as text links.

  • 3-column layout on desktop
  • Partner names displayed as clickable links
  • Text aligned left within each column

Categorised summary (10+ partners)

When you have 10 or more partners, synthesise them into categories with summary numbers and a "See all collaborators" link.

  • Optional partnership statement describing the nature of collaborations
  • Summary categories displayed as numbers with labels (e.g., "35 Data partners", "4 Supporting funders")
  • "See all collaborators" link that directs to a dedicated page listing all partners
  • Placeholder text can be customisable

Choosing the right collaboration variant

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

Terms of Use (ToU)

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.

Cookie banner pattern

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.

Themes

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.

Responsiveness

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.

Accessibility

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

Legacy footer support

The modular footer was introduced to address the limitations of the older footer. The legacy version is still listed here; however, we recommend reviewing your current implementation and upgrading to the newer version.

Variants

Default variant

Nunjucks syntax

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 = { 
"footer__theme" : "dark",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : ,
"footer__show_logo" : true,
"footer__show_mission" : true,
"footer__show_social" : true,
"footer__show_contact" : true,
"footer__show_sublinks" : false,
"footer__show_intro_notice" : false,
 }
%}
{% include "../path_to/vf-footer/vf-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-footer', {
  "footer__theme" : "dark",
  "component-type" : "container",
  "hide-from-sitemenu" : true,
  "partner__variant" : ,
  "footer__show_logo" : true,
  "footer__show_mission" : true,
  "footer__show_social" : true,
  "footer__show_contact" : true,
  "footer__show_sublinks" : false,
  "footer__show_intro_notice" : false,}
%}
HTML 
<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-footer/assets/site-logo-dark-bg.png" alt="EMBL-EBI Logo" loading="eager" />
        </a>
        <div class="vf-grid vf-grid__col-1">
          <!-- Mission Statement -->
          <p class="vf-u-type__text-body--3 vf-footer__notice">
            A description of a site or organisation and what its goals are.
          </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--dark">
              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--dark">
              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--dark">
              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" viewBox="0 0 44 44" fill="currentColor">
              <path d="M38 22.0588C38 13.1898 30.8365 6 22 6C13.1635 6 6 13.1898 6 22.0588C6 29.5901 11.1658 35.9093 18.1348 37.6447V26.9661H14.8355V22.0588H18.1348V19.9442C18.1348 14.4783 20.5993 11.9449 25.9459 11.9449C26.9595 11.9449 28.7085 12.1444 29.4241 12.3439V16.7924C29.0464 16.7525 28.3905 16.7326 27.5756 16.7326C24.9521 16.7326 23.9384 17.73 23.9384 20.3233V22.0588H29.1645L28.2668 26.9661H23.9384V38C31.8607 37.0396 38 30.2692 38 22.0588Z" />
            </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" viewBox="0 0 44 44" fill="currentColor">
              <path d="M12.9364 9.80896C16.6051 12.5632 20.5513 18.1477 22.0001 21.1446C23.449 18.1479 27.3949 12.5632 31.0638 9.80896C33.7109 7.82161 38 6.2839 38 11.177C38 12.1542 37.4397 19.386 37.1111 20.5601C35.9689 24.6419 31.8067 25.683 28.1043 25.0529C34.576 26.1544 36.2223 29.8028 32.6668 33.4512C25.9143 40.3803 22.9615 31.7127 22.2046 29.4917C22.0659 29.0846 22.001 28.8941 22 29.0561C21.999 28.8941 21.9341 29.0846 21.7954 29.4917C21.0388 31.7127 18.0861 40.3805 11.3332 33.4512C7.77764 29.8028 9.42392 26.1541 15.8957 25.0529C12.1932 25.683 8.03094 24.6419 6.88888 20.5601C6.56026 19.3859 6 12.154 6 11.177C6 6.2839 10.2892 7.82161 12.9362 9.80896H12.9364Z" />
            </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" viewBox="0 0 44 44" fill="currentColor">
              <g clip-path="url(#clip0_970_224)">
                <path d="M22 8.88125C26.275 8.88125 26.7812 8.9 28.4625 8.975C30.025 9.04375 30.8687 9.30625 31.4312 9.525C32.175 9.8125 32.7125 10.1625 33.2687 10.7188C33.8312 11.2812 34.175 11.8125 34.4625 12.5563C34.6812 13.1188 34.9438 13.9688 35.0125 15.525C35.0875 17.2125 35.1063 17.7188 35.1063 21.9875C35.1063 26.2625 35.0875 26.7688 35.0125 28.45C34.9438 30.0125 34.6812 30.8563 34.4625 31.4188C34.175 32.1625 33.825 32.7 33.2687 33.2563C32.7062 33.8188 32.175 34.1625 31.4312 34.45C30.8687 34.6688 30.0187 34.9313 28.4625 35C26.775 35.075 26.2688 35.0938 22 35.0938C17.725 35.0938 17.2188 35.075 15.5375 35C13.975 34.9313 13.1312 34.6688 12.5687 34.45C11.825 34.1625 11.2875 33.8125 10.7312 33.2563C10.1687 32.6938 9.825 32.1625 9.5375 31.4188C9.31875 30.8563 9.05625 30.0063 8.9875 28.45C8.9125 26.7625 8.89375 26.2563 8.89375 21.9875C8.89375 17.7125 8.9125 17.2063 8.9875 15.525C9.05625 13.9625 9.31875 13.1188 9.5375 12.5563C9.825 11.8125 10.175 11.275 10.7312 10.7188C11.2937 10.1562 11.825 9.8125 12.5687 9.525C13.1312 9.30625 13.9813 9.04375 15.5375 8.975C17.2188 8.9 17.725 8.88125 22 8.88125ZM22 6C17.6562 6 17.1125 6.01875 15.4062 6.09375C13.7063 6.16875 12.5375 6.44375 11.525 6.8375C10.4688 7.25 9.575 7.79375 8.6875 8.6875C7.79375 9.575 7.25 10.4688 6.8375 11.5188C6.44375 12.5375 6.16875 13.7 6.09375 15.4C6.01875 17.1125 6 17.6562 6 22C6 26.3438 6.01875 26.8875 6.09375 28.5938C6.16875 30.2938 6.44375 31.4625 6.8375 32.475C7.25 33.5313 7.79375 34.425 8.6875 35.3125C9.575 36.2 10.4688 36.75 11.5188 37.1562C12.5375 37.55 13.7 37.825 15.4 37.9C17.1062 37.975 17.65 37.9937 21.9937 37.9937C26.3375 37.9937 26.8813 37.975 28.5875 37.9C30.2875 37.825 31.4563 37.55 32.4688 37.1562C33.5188 36.75 34.4125 36.2 35.3 35.3125C36.1875 34.425 36.7375 33.5313 37.1437 32.4813C37.5375 31.4625 37.8125 30.3 37.8875 28.6C37.9625 26.8938 37.9813 26.35 37.9813 22.0063C37.9813 17.6625 37.9625 17.1188 37.8875 15.4125C37.8125 13.7125 37.5375 12.5438 37.1437 11.5312C36.75 10.4688 36.2063 9.575 35.3125 8.6875C34.425 7.8 33.5312 7.25 32.4813 6.84375C31.4625 6.45 30.3 6.175 28.6 6.1C26.8875 6.01875 26.3438 6 22 6Z" />
                <path d="M22 13.7812C17.4625 13.7812 13.7812 17.4625 13.7812 22C13.7812 26.5375 17.4625 30.2188 22 30.2188C26.5375 30.2188 30.2188 26.5375 30.2188 22C30.2188 17.4625 26.5375 13.7812 22 13.7812ZM22 27.3312C19.0563 27.3312 16.6687 24.9438 16.6687 22C16.6687 19.0563 19.0563 16.6687 22 16.6687C24.9438 16.6687 27.3312 19.0563 27.3312 22C27.3312 24.9438 24.9438 27.3312 22 27.3312Z" />
                <path d="M32.4625 13.4564C32.4625 14.5189 31.6 15.3752 30.5438 15.3752C29.4813 15.3752 28.625 14.5126 28.625 13.4564C28.625 12.3939 29.4875 11.5376 30.5438 11.5376C31.6 11.5376 32.4625 12.4001 32.4625 13.4564Z" />
              </g>
              <defs>
                <clipPath id="clip0_970_224">
                  <rect width="32" height="32" transform="translate(6 6)" />
                </clipPath>
              </defs>
            </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" viewBox="0 0 44 44" fill="currentColor">
              <path d="M30.4351 8.53841H34.933L25.1063 19.7697L36.6667 35.053H27.615L20.5254 25.7838L12.4133 35.053H7.91258L18.4232 23.0399L7.33333 8.53841H16.6148L23.0232 17.0108L30.4351 8.53841ZM28.8564 32.3608H31.3488L15.2605 11.0892H12.5859L28.8564 32.3608Z" />
            </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" viewBox="0 0 44 44" fill="currentColor">
              <g clip-path="url(#clip0_970_229)">
                <path d="M35.6313 6H8.3625C7.05625 6 6 7.03125 6 8.30625V35.6875C6 36.9625 7.05625 38 8.3625 38H35.6313C36.9375 38 38 36.9625 38 35.6938V8.30625C38 7.03125 36.9375 6 35.6313 6ZM15.4937 33.2687H10.7438V17.9937H15.4937V33.2687ZM13.1188 15.9125C11.5938 15.9125 10.3625 14.6812 10.3625 13.1625C10.3625 11.6438 11.5938 10.4125 13.1188 10.4125C14.6375 10.4125 15.8687 11.6438 15.8687 13.1625C15.8687 14.675 14.6375 15.9125 13.1188 15.9125ZM33.2687 33.2687H28.525V25.8438C28.525 24.075 28.4937 21.7937 26.0562 21.7937C23.5875 21.7937 23.2125 23.725 23.2125 25.7188V33.2687H18.475V17.9937H23.025V20.0813H23.0875C23.7188 18.8813 25.2688 17.6125 27.575 17.6125C32.3813 17.6125 33.2687 20.775 33.2687 24.8875V33.2687Z" />
              </g>
              <defs>
                <clipPath id="clip0_970_229">
                  <rect width="32" height="32" transform="translate(6 6)" />
                </clipPath>
              </defs>
            </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" viewBox="0 0 44 44" fill="currentColor">
              <g clip-path="url(#clip0_990_510)">
                <mask id="mask0_990_510" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="6" y="6" width="32" height="32">
                  <path d="M38 6.32654H6V37.6735H38V6.32654Z" />
                </mask>
                <g mask="url(#mask0_990_510)">
                  <path d="M19.5313 28.9828C15.4062 28.4828 12.5 25.514 12.5 21.6703C12.5 20.1078 13.0625 18.4203 14 17.2953C13.5938 16.264 13.6563 14.0765 14.125 13.1703C15.375 13.014 17.0625 13.6703 18.0625 14.5765C19.25 14.2015 20.5 14.014 22.0312 14.014C23.5625 14.014 24.8125 14.2015 25.9375 14.5453C26.9063 13.6703 28.625 13.014 29.875 13.1703C30.3125 14.014 30.375 16.2015 29.9688 17.264C30.9688 18.4515 31.5 20.0453 31.5 21.6703C31.5 25.514 28.5938 28.4203 24.4062 28.9515C25.4687 29.639 26.1875 31.139 26.1875 32.8578V36.1078C26.1875 37.0453 26.9688 37.5765 27.9063 37.2015C33.5625 35.0453 38 29.389 38 22.389C38 13.5453 30.8125 6.32654 21.9688 6.32654C13.125 6.32654 6 13.5453 6 22.389C6 29.3265 10.4062 35.0765 16.3437 37.2328C17.1875 37.5453 18 36.9828 18 36.139V33.639C17.5625 33.8266 17 33.9515 16.5 33.9515C14.4375 33.9515 13.2187 32.8266 12.3437 30.7328C12 29.8891 11.625 29.389 10.9063 29.2953C10.5313 29.264 10.4062 29.1078 10.4062 28.9203C10.4062 28.5453 11.0312 28.264 11.6563 28.264C12.5625 28.264 13.3437 28.8266 14.1562 29.9828C14.7813 30.8891 15.4375 31.2953 16.2187 31.2953C17 31.2953 17.5 31.014 18.2187 30.2953C18.75 29.764 19.1562 29.2953 19.5313 28.9828Z" />
                </g>
              </g>
              <defs>
                <clipPath id="clip0_990_510">
                  <rect width="32" height="31.3469" transform="translate(6 6.32654)" />
                </clipPath>
              </defs>
            </svg>
          </a>
          <a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="mail">
            <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="currentColor">
              <path d="M33.4453 10.9042C35.9619 10.9042 38.0029 12.9452 38.0029 15.4618V28.539C38.0028 31.0555 35.9618 33.0956 33.4453 33.0956H10.5596C8.04318 33.0954 6.00307 31.0554 6.00293 28.539V15.4618C6.00293 12.9453 8.0431 10.9044 10.5596 10.9042H33.4453ZM8.5957 15.203C8.58467 15.2877 8.57812 15.3741 8.57812 15.4618V28.539C8.57826 29.6334 9.46513 30.5212 10.5596 30.5214H33.4453C34.5399 30.5214 35.4276 29.6335 35.4277 28.539V15.4618C35.4277 15.4245 35.4229 15.3873 35.4209 15.3505L25.7168 25.2519C23.9764 27.0275 21.1331 27.0809 19.3281 25.371L8.5957 15.203ZM10.5225 13.4804L21.0996 23.5009C21.8847 24.2447 23.1209 24.2224 23.8779 23.4501L33.6396 13.4892C33.5758 13.483 33.5108 13.4794 33.4453 13.4794H10.5596C10.5472 13.4794 10.5348 13.4801 10.5225 13.4804Z" />
            </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>

Light Modular Footer variant

Nunjucks syntax

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 = { 
"footer__theme" : "light",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : ,
"footer__show_logo" : true,
"footer__show_mission" : true,
"footer__show_social" : true,
"footer__show_contact" : true,
"footer__show_sublinks" : false,
"footer__show_intro_notice" : false,
 }
%}
{% include "../path_to/vf-footer/vf-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-footer', {
  "footer__theme" : "light",
  "component-type" : "container",
  "hide-from-sitemenu" : true,
  "partner__variant" : ,
  "footer__show_logo" : true,
  "footer__show_mission" : true,
  "footer__show_social" : true,
  "footer__show_contact" : true,
  "footer__show_sublinks" : false,
  "footer__show_intro_notice" : false,}
%}
HTML 
<footer class="vf-footer  vf-footer--light | vf-u-background-color-ui--grey--light">
  <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-footer/assets/site-logo-white-bg.png" alt="EMBL-EBI Logo" loading="eager" />
        </a>
        <div class="vf-grid vf-grid__col-1">
          <!-- Mission Statement -->
          <p class="vf-u-type__text-body--3 vf-footer__notice">
            A description of a site or organisation and what its goals are.
          </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--dark">
              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--dark">
              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--dark">
              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" viewBox="0 0 44 44" fill="currentColor">
              <path d="M38 22.0588C38 13.1898 30.8365 6 22 6C13.1635 6 6 13.1898 6 22.0588C6 29.5901 11.1658 35.9093 18.1348 37.6447V26.9661H14.8355V22.0588H18.1348V19.9442C18.1348 14.4783 20.5993 11.9449 25.9459 11.9449C26.9595 11.9449 28.7085 12.1444 29.4241 12.3439V16.7924C29.0464 16.7525 28.3905 16.7326 27.5756 16.7326C24.9521 16.7326 23.9384 17.73 23.9384 20.3233V22.0588H29.1645L28.2668 26.9661H23.9384V38C31.8607 37.0396 38 30.2692 38 22.0588Z" />
            </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" viewBox="0 0 44 44" fill="currentColor">
              <path d="M12.9364 9.80896C16.6051 12.5632 20.5513 18.1477 22.0001 21.1446C23.449 18.1479 27.3949 12.5632 31.0638 9.80896C33.7109 7.82161 38 6.2839 38 11.177C38 12.1542 37.4397 19.386 37.1111 20.5601C35.9689 24.6419 31.8067 25.683 28.1043 25.0529C34.576 26.1544 36.2223 29.8028 32.6668 33.4512C25.9143 40.3803 22.9615 31.7127 22.2046 29.4917C22.0659 29.0846 22.001 28.8941 22 29.0561C21.999 28.8941 21.9341 29.0846 21.7954 29.4917C21.0388 31.7127 18.0861 40.3805 11.3332 33.4512C7.77764 29.8028 9.42392 26.1541 15.8957 25.0529C12.1932 25.683 8.03094 24.6419 6.88888 20.5601C6.56026 19.3859 6 12.154 6 11.177C6 6.2839 10.2892 7.82161 12.9362 9.80896H12.9364Z" />
            </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" viewBox="0 0 44 44" fill="currentColor">
              <g clip-path="url(#clip0_970_224)">
                <path d="M22 8.88125C26.275 8.88125 26.7812 8.9 28.4625 8.975C30.025 9.04375 30.8687 9.30625 31.4312 9.525C32.175 9.8125 32.7125 10.1625 33.2687 10.7188C33.8312 11.2812 34.175 11.8125 34.4625 12.5563C34.6812 13.1188 34.9438 13.9688 35.0125 15.525C35.0875 17.2125 35.1063 17.7188 35.1063 21.9875C35.1063 26.2625 35.0875 26.7688 35.0125 28.45C34.9438 30.0125 34.6812 30.8563 34.4625 31.4188C34.175 32.1625 33.825 32.7 33.2687 33.2563C32.7062 33.8188 32.175 34.1625 31.4312 34.45C30.8687 34.6688 30.0187 34.9313 28.4625 35C26.775 35.075 26.2688 35.0938 22 35.0938C17.725 35.0938 17.2188 35.075 15.5375 35C13.975 34.9313 13.1312 34.6688 12.5687 34.45C11.825 34.1625 11.2875 33.8125 10.7312 33.2563C10.1687 32.6938 9.825 32.1625 9.5375 31.4188C9.31875 30.8563 9.05625 30.0063 8.9875 28.45C8.9125 26.7625 8.89375 26.2563 8.89375 21.9875C8.89375 17.7125 8.9125 17.2063 8.9875 15.525C9.05625 13.9625 9.31875 13.1188 9.5375 12.5563C9.825 11.8125 10.175 11.275 10.7312 10.7188C11.2937 10.1562 11.825 9.8125 12.5687 9.525C13.1312 9.30625 13.9813 9.04375 15.5375 8.975C17.2188 8.9 17.725 8.88125 22 8.88125ZM22 6C17.6562 6 17.1125 6.01875 15.4062 6.09375C13.7063 6.16875 12.5375 6.44375 11.525 6.8375C10.4688 7.25 9.575 7.79375 8.6875 8.6875C7.79375 9.575 7.25 10.4688 6.8375 11.5188C6.44375 12.5375 6.16875 13.7 6.09375 15.4C6.01875 17.1125 6 17.6562 6 22C6 26.3438 6.01875 26.8875 6.09375 28.5938C6.16875 30.2938 6.44375 31.4625 6.8375 32.475C7.25 33.5313 7.79375 34.425 8.6875 35.3125C9.575 36.2 10.4688 36.75 11.5188 37.1562C12.5375 37.55 13.7 37.825 15.4 37.9C17.1062 37.975 17.65 37.9937 21.9937 37.9937C26.3375 37.9937 26.8813 37.975 28.5875 37.9C30.2875 37.825 31.4563 37.55 32.4688 37.1562C33.5188 36.75 34.4125 36.2 35.3 35.3125C36.1875 34.425 36.7375 33.5313 37.1437 32.4813C37.5375 31.4625 37.8125 30.3 37.8875 28.6C37.9625 26.8938 37.9813 26.35 37.9813 22.0063C37.9813 17.6625 37.9625 17.1188 37.8875 15.4125C37.8125 13.7125 37.5375 12.5438 37.1437 11.5312C36.75 10.4688 36.2063 9.575 35.3125 8.6875C34.425 7.8 33.5312 7.25 32.4813 6.84375C31.4625 6.45 30.3 6.175 28.6 6.1C26.8875 6.01875 26.3438 6 22 6Z" />
                <path d="M22 13.7812C17.4625 13.7812 13.7812 17.4625 13.7812 22C13.7812 26.5375 17.4625 30.2188 22 30.2188C26.5375 30.2188 30.2188 26.5375 30.2188 22C30.2188 17.4625 26.5375 13.7812 22 13.7812ZM22 27.3312C19.0563 27.3312 16.6687 24.9438 16.6687 22C16.6687 19.0563 19.0563 16.6687 22 16.6687C24.9438 16.6687 27.3312 19.0563 27.3312 22C27.3312 24.9438 24.9438 27.3312 22 27.3312Z" />
                <path d="M32.4625 13.4564C32.4625 14.5189 31.6 15.3752 30.5438 15.3752C29.4813 15.3752 28.625 14.5126 28.625 13.4564C28.625 12.3939 29.4875 11.5376 30.5438 11.5376C31.6 11.5376 32.4625 12.4001 32.4625 13.4564Z" />
              </g>
              <defs>
                <clipPath id="clip0_970_224">
                  <rect width="32" height="32" transform="translate(6 6)" />
                </clipPath>
              </defs>
            </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" viewBox="0 0 44 44" fill="currentColor">
              <path d="M30.4351 8.53841H34.933L25.1063 19.7697L36.6667 35.053H27.615L20.5254 25.7838L12.4133 35.053H7.91258L18.4232 23.0399L7.33333 8.53841H16.6148L23.0232 17.0108L30.4351 8.53841ZM28.8564 32.3608H31.3488L15.2605 11.0892H12.5859L28.8564 32.3608Z" />
            </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" viewBox="0 0 44 44" fill="currentColor">
              <g clip-path="url(#clip0_970_229)">
                <path d="M35.6313 6H8.3625C7.05625 6 6 7.03125 6 8.30625V35.6875C6 36.9625 7.05625 38 8.3625 38H35.6313C36.9375 38 38 36.9625 38 35.6938V8.30625C38 7.03125 36.9375 6 35.6313 6ZM15.4937 33.2687H10.7438V17.9937H15.4937V33.2687ZM13.1188 15.9125C11.5938 15.9125 10.3625 14.6812 10.3625 13.1625C10.3625 11.6438 11.5938 10.4125 13.1188 10.4125C14.6375 10.4125 15.8687 11.6438 15.8687 13.1625C15.8687 14.675 14.6375 15.9125 13.1188 15.9125ZM33.2687 33.2687H28.525V25.8438C28.525 24.075 28.4937 21.7937 26.0562 21.7937C23.5875 21.7937 23.2125 23.725 23.2125 25.7188V33.2687H18.475V17.9937H23.025V20.0813H23.0875C23.7188 18.8813 25.2688 17.6125 27.575 17.6125C32.3813 17.6125 33.2687 20.775 33.2687 24.8875V33.2687Z" />
              </g>
              <defs>
                <clipPath id="clip0_970_229">
                  <rect width="32" height="32" transform="translate(6 6)" />
                </clipPath>
              </defs>
            </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" viewBox="0 0 44 44" fill="currentColor">
              <g clip-path="url(#clip0_990_510)">
                <mask id="mask0_990_510" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="6" y="6" width="32" height="32">
                  <path d="M38 6.32654H6V37.6735H38V6.32654Z" />
                </mask>
                <g mask="url(#mask0_990_510)">
                  <path d="M19.5313 28.9828C15.4062 28.4828 12.5 25.514 12.5 21.6703C12.5 20.1078 13.0625 18.4203 14 17.2953C13.5938 16.264 13.6563 14.0765 14.125 13.1703C15.375 13.014 17.0625 13.6703 18.0625 14.5765C19.25 14.2015 20.5 14.014 22.0312 14.014C23.5625 14.014 24.8125 14.2015 25.9375 14.5453C26.9063 13.6703 28.625 13.014 29.875 13.1703C30.3125 14.014 30.375 16.2015 29.9688 17.264C30.9688 18.4515 31.5 20.0453 31.5 21.6703C31.5 25.514 28.5938 28.4203 24.4062 28.9515C25.4687 29.639 26.1875 31.139 26.1875 32.8578V36.1078C26.1875 37.0453 26.9688 37.5765 27.9063 37.2015C33.5625 35.0453 38 29.389 38 22.389C38 13.5453 30.8125 6.32654 21.9688 6.32654C13.125 6.32654 6 13.5453 6 22.389C6 29.3265 10.4062 35.0765 16.3437 37.2328C17.1875 37.5453 18 36.9828 18 36.139V33.639C17.5625 33.8266 17 33.9515 16.5 33.9515C14.4375 33.9515 13.2187 32.8266 12.3437 30.7328C12 29.8891 11.625 29.389 10.9063 29.2953C10.5313 29.264 10.4062 29.1078 10.4062 28.9203C10.4062 28.5453 11.0312 28.264 11.6563 28.264C12.5625 28.264 13.3437 28.8266 14.1562 29.9828C14.7813 30.8891 15.4375 31.2953 16.2187 31.2953C17 31.2953 17.5 31.014 18.2187 30.2953C18.75 29.764 19.1562 29.2953 19.5313 28.9828Z" />
                </g>
              </g>
              <defs>
                <clipPath id="clip0_990_510">
                  <rect width="32" height="31.3469" transform="translate(6 6.32654)" />
                </clipPath>
              </defs>
            </svg>
          </a>
          <a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="mail">
            <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="currentColor">
              <path d="M33.4453 10.9042C35.9619 10.9042 38.0029 12.9452 38.0029 15.4618V28.539C38.0028 31.0555 35.9618 33.0956 33.4453 33.0956H10.5596C8.04318 33.0954 6.00307 31.0554 6.00293 28.539V15.4618C6.00293 12.9453 8.0431 10.9044 10.5596 10.9042H33.4453ZM8.5957 15.203C8.58467 15.2877 8.57812 15.3741 8.57812 15.4618V28.539C8.57826 29.6334 9.46513 30.5212 10.5596 30.5214H33.4453C34.5399 30.5214 35.4276 29.6335 35.4277 28.539V15.4618C35.4277 15.4245 35.4229 15.3873 35.4209 15.3505L25.7168 25.2519C23.9764 27.0275 21.1331 27.0809 19.3281 25.371L8.5957 15.203ZM10.5225 13.4804L21.0996 23.5009C21.8847 24.2447 23.1209 24.2224 23.8779 23.4501L33.6396 13.4892C33.5758 13.483 33.5108 13.4794 33.4453 13.4794H10.5596C10.5472 13.4794 10.5348 13.4801 10.5225 13.4804Z" />
            </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>

Partner Logos variant

OUR PARTNERS/COLLABORATORS

Nunjucks syntax

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 = { 
"footer__theme" : "dark",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : "logos",
"footer__show_logo" : true,
"footer__show_mission" : true,
"footer__show_social" : true,
"footer__show_contact" : true,
"footer__show_sublinks" : false,
"footer__show_intro_notice" : false,
 }
%}
{% include "../path_to/vf-footer/vf-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-footer', {
  "footer__theme" : "dark",
  "component-type" : "container",
  "hide-from-sitemenu" : true,
  "partner__variant" : "logos",
  "footer__show_logo" : true,
  "footer__show_mission" : true,
  "footer__show_social" : true,
  "footer__show_contact" : true,
  "footer__show_sublinks" : false,
  "footer__show_intro_notice" : false,}
%}
HTML 
<div class="vf-footer vf-u-background-color-ui--white vf-footer__partners">
  <div class="vf-footer__inner">

    <div>
      <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 logos-variant">
        <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>
</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-footer/assets/site-logo-dark-bg.png" alt="EMBL-EBI Logo" loading="eager" />
        </a>
        <div class="vf-grid vf-grid__col-1">
          <!-- Mission Statement -->
          <p class="vf-u-type__text-body--3 vf-footer__notice">
            A description of a site or organisation and what its goals are.
          </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--dark">
              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--dark">
              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--dark">
              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" viewBox="0 0 44 44" fill="currentColor">
              <path d="M38 22.0588C38 13.1898 30.8365 6 22 6C13.1635 6 6 13.1898 6 22.0588C6 29.5901 11.1658 35.9093 18.1348 37.6447V26.9661H14.8355V22.0588H18.1348V19.9442C18.1348 14.4783 20.5993 11.9449 25.9459 11.9449C26.9595 11.9449 28.7085 12.1444 29.4241 12.3439V16.7924C29.0464 16.7525 28.3905 16.7326 27.5756 16.7326C24.9521 16.7326 23.9384 17.73 23.9384 20.3233V22.0588H29.1645L28.2668 26.9661H23.9384V38C31.8607 37.0396 38 30.2692 38 22.0588Z" />
            </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" viewBox="0 0 44 44" fill="currentColor">
              <path d="M12.9364 9.80896C16.6051 12.5632 20.5513 18.1477 22.0001 21.1446C23.449 18.1479 27.3949 12.5632 31.0638 9.80896C33.7109 7.82161 38 6.2839 38 11.177C38 12.1542 37.4397 19.386 37.1111 20.5601C35.9689 24.6419 31.8067 25.683 28.1043 25.0529C34.576 26.1544 36.2223 29.8028 32.6668 33.4512C25.9143 40.3803 22.9615 31.7127 22.2046 29.4917C22.0659 29.0846 22.001 28.8941 22 29.0561C21.999 28.8941 21.9341 29.0846 21.7954 29.4917C21.0388 31.7127 18.0861 40.3805 11.3332 33.4512C7.77764 29.8028 9.42392 26.1541 15.8957 25.0529C12.1932 25.683 8.03094 24.6419 6.88888 20.5601C6.56026 19.3859 6 12.154 6 11.177C6 6.2839 10.2892 7.82161 12.9362 9.80896H12.9364Z" />
            </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" viewBox="0 0 44 44" fill="currentColor">
              <g clip-path="url(#clip0_970_224)">
                <path d="M22 8.88125C26.275 8.88125 26.7812 8.9 28.4625 8.975C30.025 9.04375 30.8687 9.30625 31.4312 9.525C32.175 9.8125 32.7125 10.1625 33.2687 10.7188C33.8312 11.2812 34.175 11.8125 34.4625 12.5563C34.6812 13.1188 34.9438 13.9688 35.0125 15.525C35.0875 17.2125 35.1063 17.7188 35.1063 21.9875C35.1063 26.2625 35.0875 26.7688 35.0125 28.45C34.9438 30.0125 34.6812 30.8563 34.4625 31.4188C34.175 32.1625 33.825 32.7 33.2687 33.2563C32.7062 33.8188 32.175 34.1625 31.4312 34.45C30.8687 34.6688 30.0187 34.9313 28.4625 35C26.775 35.075 26.2688 35.0938 22 35.0938C17.725 35.0938 17.2188 35.075 15.5375 35C13.975 34.9313 13.1312 34.6688 12.5687 34.45C11.825 34.1625 11.2875 33.8125 10.7312 33.2563C10.1687 32.6938 9.825 32.1625 9.5375 31.4188C9.31875 30.8563 9.05625 30.0063 8.9875 28.45C8.9125 26.7625 8.89375 26.2563 8.89375 21.9875C8.89375 17.7125 8.9125 17.2063 8.9875 15.525C9.05625 13.9625 9.31875 13.1188 9.5375 12.5563C9.825 11.8125 10.175 11.275 10.7312 10.7188C11.2937 10.1562 11.825 9.8125 12.5687 9.525C13.1312 9.30625 13.9813 9.04375 15.5375 8.975C17.2188 8.9 17.725 8.88125 22 8.88125ZM22 6C17.6562 6 17.1125 6.01875 15.4062 6.09375C13.7063 6.16875 12.5375 6.44375 11.525 6.8375C10.4688 7.25 9.575 7.79375 8.6875 8.6875C7.79375 9.575 7.25 10.4688 6.8375 11.5188C6.44375 12.5375 6.16875 13.7 6.09375 15.4C6.01875 17.1125 6 17.6562 6 22C6 26.3438 6.01875 26.8875 6.09375 28.5938C6.16875 30.2938 6.44375 31.4625 6.8375 32.475C7.25 33.5313 7.79375 34.425 8.6875 35.3125C9.575 36.2 10.4688 36.75 11.5188 37.1562C12.5375 37.55 13.7 37.825 15.4 37.9C17.1062 37.975 17.65 37.9937 21.9937 37.9937C26.3375 37.9937 26.8813 37.975 28.5875 37.9C30.2875 37.825 31.4563 37.55 32.4688 37.1562C33.5188 36.75 34.4125 36.2 35.3 35.3125C36.1875 34.425 36.7375 33.5313 37.1437 32.4813C37.5375 31.4625 37.8125 30.3 37.8875 28.6C37.9625 26.8938 37.9813 26.35 37.9813 22.0063C37.9813 17.6625 37.9625 17.1188 37.8875 15.4125C37.8125 13.7125 37.5375 12.5438 37.1437 11.5312C36.75 10.4688 36.2063 9.575 35.3125 8.6875C34.425 7.8 33.5312 7.25 32.4813 6.84375C31.4625 6.45 30.3 6.175 28.6 6.1C26.8875 6.01875 26.3438 6 22 6Z" />
                <path d="M22 13.7812C17.4625 13.7812 13.7812 17.4625 13.7812 22C13.7812 26.5375 17.4625 30.2188 22 30.2188C26.5375 30.2188 30.2188 26.5375 30.2188 22C30.2188 17.4625 26.5375 13.7812 22 13.7812ZM22 27.3312C19.0563 27.3312 16.6687 24.9438 16.6687 22C16.6687 19.0563 19.0563 16.6687 22 16.6687C24.9438 16.6687 27.3312 19.0563 27.3312 22C27.3312 24.9438 24.9438 27.3312 22 27.3312Z" />
                <path d="M32.4625 13.4564C32.4625 14.5189 31.6 15.3752 30.5438 15.3752C29.4813 15.3752 28.625 14.5126 28.625 13.4564C28.625 12.3939 29.4875 11.5376 30.5438 11.5376C31.6 11.5376 32.4625 12.4001 32.4625 13.4564Z" />
              </g>
              <defs>
                <clipPath id="clip0_970_224">
                  <rect width="32" height="32" transform="translate(6 6)" />
                </clipPath>
              </defs>
            </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" viewBox="0 0 44 44" fill="currentColor">
              <path d="M30.4351 8.53841H34.933L25.1063 19.7697L36.6667 35.053H27.615L20.5254 25.7838L12.4133 35.053H7.91258L18.4232 23.0399L7.33333 8.53841H16.6148L23.0232 17.0108L30.4351 8.53841ZM28.8564 32.3608H31.3488L15.2605 11.0892H12.5859L28.8564 32.3608Z" />
            </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" viewBox="0 0 44 44" fill="currentColor">
              <g clip-path="url(#clip0_970_229)">
                <path d="M35.6313 6H8.3625C7.05625 6 6 7.03125 6 8.30625V35.6875C6 36.9625 7.05625 38 8.3625 38H35.6313C36.9375 38 38 36.9625 38 35.6938V8.30625C38 7.03125 36.9375 6 35.6313 6ZM15.4937 33.2687H10.7438V17.9937H15.4937V33.2687ZM13.1188 15.9125C11.5938 15.9125 10.3625 14.6812 10.3625 13.1625C10.3625 11.6438 11.5938 10.4125 13.1188 10.4125C14.6375 10.4125 15.8687 11.6438 15.8687 13.1625C15.8687 14.675 14.6375 15.9125 13.1188 15.9125ZM33.2687 33.2687H28.525V25.8438C28.525 24.075 28.4937 21.7937 26.0562 21.7937C23.5875 21.7937 23.2125 23.725 23.2125 25.7188V33.2687H18.475V17.9937H23.025V20.0813H23.0875C23.7188 18.8813 25.2688 17.6125 27.575 17.6125C32.3813 17.6125 33.2687 20.775 33.2687 24.8875V33.2687Z" />
              </g>
              <defs>
                <clipPath id="clip0_970_229">
                  <rect width="32" height="32" transform="translate(6 6)" />
                </clipPath>
              </defs>
            </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" viewBox="0 0 44 44" fill="currentColor">
              <g clip-path="url(#clip0_990_510)">
                <mask id="mask0_990_510" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="6" y="6" width="32" height="32">
                  <path d="M38 6.32654H6V37.6735H38V6.32654Z" />
                </mask>
                <g mask="url(#mask0_990_510)">
                  <path d="M19.5313 28.9828C15.4062 28.4828 12.5 25.514 12.5 21.6703C12.5 20.1078 13.0625 18.4203 14 17.2953C13.5938 16.264 13.6563 14.0765 14.125 13.1703C15.375 13.014 17.0625 13.6703 18.0625 14.5765C19.25 14.2015 20.5 14.014 22.0312 14.014C23.5625 14.014 24.8125 14.2015 25.9375 14.5453C26.9063 13.6703 28.625 13.014 29.875 13.1703C30.3125 14.014 30.375 16.2015 29.9688 17.264C30.9688 18.4515 31.5 20.0453 31.5 21.6703C31.5 25.514 28.5938 28.4203 24.4062 28.9515C25.4687 29.639 26.1875 31.139 26.1875 32.8578V36.1078C26.1875 37.0453 26.9688 37.5765 27.9063 37.2015C33.5625 35.0453 38 29.389 38 22.389C38 13.5453 30.8125 6.32654 21.9688 6.32654C13.125 6.32654 6 13.5453 6 22.389C6 29.3265 10.4062 35.0765 16.3437 37.2328C17.1875 37.5453 18 36.9828 18 36.139V33.639C17.5625 33.8266 17 33.9515 16.5 33.9515C14.4375 33.9515 13.2187 32.8266 12.3437 30.7328C12 29.8891 11.625 29.389 10.9063 29.2953C10.5313 29.264 10.4062 29.1078 10.4062 28.9203C10.4062 28.5453 11.0312 28.264 11.6563 28.264C12.5625 28.264 13.3437 28.8266 14.1562 29.9828C14.7813 30.8891 15.4375 31.2953 16.2187 31.2953C17 31.2953 17.5 31.014 18.2187 30.2953C18.75 29.764 19.1562 29.2953 19.5313 28.9828Z" />
                </g>
              </g>
              <defs>
                <clipPath id="clip0_990_510">
                  <rect width="32" height="31.3469" transform="translate(6 6.32654)" />
                </clipPath>
              </defs>
            </svg>
          </a>
          <a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="mail">
            <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="currentColor">
              <path d="M33.4453 10.9042C35.9619 10.9042 38.0029 12.9452 38.0029 15.4618V28.539C38.0028 31.0555 35.9618 33.0956 33.4453 33.0956H10.5596C8.04318 33.0954 6.00307 31.0554 6.00293 28.539V15.4618C6.00293 12.9453 8.0431 10.9044 10.5596 10.9042H33.4453ZM8.5957 15.203C8.58467 15.2877 8.57812 15.3741 8.57812 15.4618V28.539C8.57826 29.6334 9.46513 30.5212 10.5596 30.5214H33.4453C34.5399 30.5214 35.4276 29.6335 35.4277 28.539V15.4618C35.4277 15.4245 35.4229 15.3873 35.4209 15.3505L25.7168 25.2519C23.9764 27.0275 21.1331 27.0809 19.3281 25.371L8.5957 15.203ZM10.5225 13.4804L21.0996 23.5009C21.8847 24.2447 23.1209 24.2224 23.8779 23.4501L33.6396 13.4892C33.5758 13.483 33.5108 13.4794 33.4453 13.4794H10.5596C10.5472 13.4794 10.5348 13.4801 10.5225 13.4804Z" />
            </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>

Partner Columns variant

Nunjucks syntax

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 = { 
"footer__theme" : "dark",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : "columns",
"footer__show_logo" : true,
"footer__show_mission" : true,
"footer__show_social" : true,
"footer__show_contact" : true,
"footer__show_sublinks" : false,
"footer__show_intro_notice" : false,
 }
%}
{% include "../path_to/vf-footer/vf-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-footer', {
  "footer__theme" : "dark",
  "component-type" : "container",
  "hide-from-sitemenu" : true,
  "partner__variant" : "columns",
  "footer__show_logo" : true,
  "footer__show_mission" : true,
  "footer__show_social" : true,
  "footer__show_contact" : true,
  "footer__show_sublinks" : false,
  "footer__show_intro_notice" : false,}
%}
HTML 
<div class="vf-footer vf-u-background-color-ui--white vf-footer__partners">
  <div class="vf-footer__inner">

    <div>
      <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-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-footer/assets/site-logo-dark-bg.png" alt="EMBL-EBI Logo" loading="eager" />
        </a>
        <div class="vf-grid vf-grid__col-1">
          <!-- Mission Statement -->
          <p class="vf-u-type__text-body--3 vf-footer__notice">
            A description of a site or organisation and what its goals are.
          </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--dark">
              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--dark">
              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--dark">
              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" viewBox="0 0 44 44" fill="currentColor">
              <path d="M38 22.0588C38 13.1898 30.8365 6 22 6C13.1635 6 6 13.1898 6 22.0588C6 29.5901 11.1658 35.9093 18.1348 37.6447V26.9661H14.8355V22.0588H18.1348V19.9442C18.1348 14.4783 20.5993 11.9449 25.9459 11.9449C26.9595 11.9449 28.7085 12.1444 29.4241 12.3439V16.7924C29.0464 16.7525 28.3905 16.7326 27.5756 16.7326C24.9521 16.7326 23.9384 17.73 23.9384 20.3233V22.0588H29.1645L28.2668 26.9661H23.9384V38C31.8607 37.0396 38 30.2692 38 22.0588Z" />
            </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" viewBox="0 0 44 44" fill="currentColor">
              <path d="M12.9364 9.80896C16.6051 12.5632 20.5513 18.1477 22.0001 21.1446C23.449 18.1479 27.3949 12.5632 31.0638 9.80896C33.7109 7.82161 38 6.2839 38 11.177C38 12.1542 37.4397 19.386 37.1111 20.5601C35.9689 24.6419 31.8067 25.683 28.1043 25.0529C34.576 26.1544 36.2223 29.8028 32.6668 33.4512C25.9143 40.3803 22.9615 31.7127 22.2046 29.4917C22.0659 29.0846 22.001 28.8941 22 29.0561C21.999 28.8941 21.9341 29.0846 21.7954 29.4917C21.0388 31.7127 18.0861 40.3805 11.3332 33.4512C7.77764 29.8028 9.42392 26.1541 15.8957 25.0529C12.1932 25.683 8.03094 24.6419 6.88888 20.5601C6.56026 19.3859 6 12.154 6 11.177C6 6.2839 10.2892 7.82161 12.9362 9.80896H12.9364Z" />
            </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" viewBox="0 0 44 44" fill="currentColor">
              <g clip-path="url(#clip0_970_224)">
                <path d="M22 8.88125C26.275 8.88125 26.7812 8.9 28.4625 8.975C30.025 9.04375 30.8687 9.30625 31.4312 9.525C32.175 9.8125 32.7125 10.1625 33.2687 10.7188C33.8312 11.2812 34.175 11.8125 34.4625 12.5563C34.6812 13.1188 34.9438 13.9688 35.0125 15.525C35.0875 17.2125 35.1063 17.7188 35.1063 21.9875C35.1063 26.2625 35.0875 26.7688 35.0125 28.45C34.9438 30.0125 34.6812 30.8563 34.4625 31.4188C34.175 32.1625 33.825 32.7 33.2687 33.2563C32.7062 33.8188 32.175 34.1625 31.4312 34.45C30.8687 34.6688 30.0187 34.9313 28.4625 35C26.775 35.075 26.2688 35.0938 22 35.0938C17.725 35.0938 17.2188 35.075 15.5375 35C13.975 34.9313 13.1312 34.6688 12.5687 34.45C11.825 34.1625 11.2875 33.8125 10.7312 33.2563C10.1687 32.6938 9.825 32.1625 9.5375 31.4188C9.31875 30.8563 9.05625 30.0063 8.9875 28.45C8.9125 26.7625 8.89375 26.2563 8.89375 21.9875C8.89375 17.7125 8.9125 17.2063 8.9875 15.525C9.05625 13.9625 9.31875 13.1188 9.5375 12.5563C9.825 11.8125 10.175 11.275 10.7312 10.7188C11.2937 10.1562 11.825 9.8125 12.5687 9.525C13.1312 9.30625 13.9813 9.04375 15.5375 8.975C17.2188 8.9 17.725 8.88125 22 8.88125ZM22 6C17.6562 6 17.1125 6.01875 15.4062 6.09375C13.7063 6.16875 12.5375 6.44375 11.525 6.8375C10.4688 7.25 9.575 7.79375 8.6875 8.6875C7.79375 9.575 7.25 10.4688 6.8375 11.5188C6.44375 12.5375 6.16875 13.7 6.09375 15.4C6.01875 17.1125 6 17.6562 6 22C6 26.3438 6.01875 26.8875 6.09375 28.5938C6.16875 30.2938 6.44375 31.4625 6.8375 32.475C7.25 33.5313 7.79375 34.425 8.6875 35.3125C9.575 36.2 10.4688 36.75 11.5188 37.1562C12.5375 37.55 13.7 37.825 15.4 37.9C17.1062 37.975 17.65 37.9937 21.9937 37.9937C26.3375 37.9937 26.8813 37.975 28.5875 37.9C30.2875 37.825 31.4563 37.55 32.4688 37.1562C33.5188 36.75 34.4125 36.2 35.3 35.3125C36.1875 34.425 36.7375 33.5313 37.1437 32.4813C37.5375 31.4625 37.8125 30.3 37.8875 28.6C37.9625 26.8938 37.9813 26.35 37.9813 22.0063C37.9813 17.6625 37.9625 17.1188 37.8875 15.4125C37.8125 13.7125 37.5375 12.5438 37.1437 11.5312C36.75 10.4688 36.2063 9.575 35.3125 8.6875C34.425 7.8 33.5312 7.25 32.4813 6.84375C31.4625 6.45 30.3 6.175 28.6 6.1C26.8875 6.01875 26.3438 6 22 6Z" />
                <path d="M22 13.7812C17.4625 13.7812 13.7812 17.4625 13.7812 22C13.7812 26.5375 17.4625 30.2188 22 30.2188C26.5375 30.2188 30.2188 26.5375 30.2188 22C30.2188 17.4625 26.5375 13.7812 22 13.7812ZM22 27.3312C19.0563 27.3312 16.6687 24.9438 16.6687 22C16.6687 19.0563 19.0563 16.6687 22 16.6687C24.9438 16.6687 27.3312 19.0563 27.3312 22C27.3312 24.9438 24.9438 27.3312 22 27.3312Z" />
                <path d="M32.4625 13.4564C32.4625 14.5189 31.6 15.3752 30.5438 15.3752C29.4813 15.3752 28.625 14.5126 28.625 13.4564C28.625 12.3939 29.4875 11.5376 30.5438 11.5376C31.6 11.5376 32.4625 12.4001 32.4625 13.4564Z" />
              </g>
              <defs>
                <clipPath id="clip0_970_224">
                  <rect width="32" height="32" transform="translate(6 6)" />
                </clipPath>
              </defs>
            </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" viewBox="0 0 44 44" fill="currentColor">
              <path d="M30.4351 8.53841H34.933L25.1063 19.7697L36.6667 35.053H27.615L20.5254 25.7838L12.4133 35.053H7.91258L18.4232 23.0399L7.33333 8.53841H16.6148L23.0232 17.0108L30.4351 8.53841ZM28.8564 32.3608H31.3488L15.2605 11.0892H12.5859L28.8564 32.3608Z" />
            </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" viewBox="0 0 44 44" fill="currentColor">
              <g clip-path="url(#clip0_970_229)">
                <path d="M35.6313 6H8.3625C7.05625 6 6 7.03125 6 8.30625V35.6875C6 36.9625 7.05625 38 8.3625 38H35.6313C36.9375 38 38 36.9625 38 35.6938V8.30625C38 7.03125 36.9375 6 35.6313 6ZM15.4937 33.2687H10.7438V17.9937H15.4937V33.2687ZM13.1188 15.9125C11.5938 15.9125 10.3625 14.6812 10.3625 13.1625C10.3625 11.6438 11.5938 10.4125 13.1188 10.4125C14.6375 10.4125 15.8687 11.6438 15.8687 13.1625C15.8687 14.675 14.6375 15.9125 13.1188 15.9125ZM33.2687 33.2687H28.525V25.8438C28.525 24.075 28.4937 21.7937 26.0562 21.7937C23.5875 21.7937 23.2125 23.725 23.2125 25.7188V33.2687H18.475V17.9937H23.025V20.0813H23.0875C23.7188 18.8813 25.2688 17.6125 27.575 17.6125C32.3813 17.6125 33.2687 20.775 33.2687 24.8875V33.2687Z" />
              </g>
              <defs>
                <clipPath id="clip0_970_229">
                  <rect width="32" height="32" transform="translate(6 6)" />
                </clipPath>
              </defs>
            </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" viewBox="0 0 44 44" fill="currentColor">
              <g clip-path="url(#clip0_990_510)">
                <mask id="mask0_990_510" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="6" y="6" width="32" height="32">
                  <path d="M38 6.32654H6V37.6735H38V6.32654Z" />
                </mask>
                <g mask="url(#mask0_990_510)">
                  <path d="M19.5313 28.9828C15.4062 28.4828 12.5 25.514 12.5 21.6703C12.5 20.1078 13.0625 18.4203 14 17.2953C13.5938 16.264 13.6563 14.0765 14.125 13.1703C15.375 13.014 17.0625 13.6703 18.0625 14.5765C19.25 14.2015 20.5 14.014 22.0312 14.014C23.5625 14.014 24.8125 14.2015 25.9375 14.5453C26.9063 13.6703 28.625 13.014 29.875 13.1703C30.3125 14.014 30.375 16.2015 29.9688 17.264C30.9688 18.4515 31.5 20.0453 31.5 21.6703C31.5 25.514 28.5938 28.4203 24.4062 28.9515C25.4687 29.639 26.1875 31.139 26.1875 32.8578V36.1078C26.1875 37.0453 26.9688 37.5765 27.9063 37.2015C33.5625 35.0453 38 29.389 38 22.389C38 13.5453 30.8125 6.32654 21.9688 6.32654C13.125 6.32654 6 13.5453 6 22.389C6 29.3265 10.4062 35.0765 16.3437 37.2328C17.1875 37.5453 18 36.9828 18 36.139V33.639C17.5625 33.8266 17 33.9515 16.5 33.9515C14.4375 33.9515 13.2187 32.8266 12.3437 30.7328C12 29.8891 11.625 29.389 10.9063 29.2953C10.5313 29.264 10.4062 29.1078 10.4062 28.9203C10.4062 28.5453 11.0312 28.264 11.6563 28.264C12.5625 28.264 13.3437 28.8266 14.1562 29.9828C14.7813 30.8891 15.4375 31.2953 16.2187 31.2953C17 31.2953 17.5 31.014 18.2187 30.2953C18.75 29.764 19.1562 29.2953 19.5313 28.9828Z" />
                </g>
              </g>
              <defs>
                <clipPath id="clip0_990_510">
                  <rect width="32" height="31.3469" transform="translate(6 6.32654)" />
                </clipPath>
              </defs>
            </svg>
          </a>
          <a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="mail">
            <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="currentColor">
              <path d="M33.4453 10.9042C35.9619 10.9042 38.0029 12.9452 38.0029 15.4618V28.539C38.0028 31.0555 35.9618 33.0956 33.4453 33.0956H10.5596C8.04318 33.0954 6.00307 31.0554 6.00293 28.539V15.4618C6.00293 12.9453 8.0431 10.9044 10.5596 10.9042H33.4453ZM8.5957 15.203C8.58467 15.2877 8.57812 15.3741 8.57812 15.4618V28.539C8.57826 29.6334 9.46513 30.5212 10.5596 30.5214H33.4453C34.5399 30.5214 35.4276 29.6335 35.4277 28.539V15.4618C35.4277 15.4245 35.4229 15.3873 35.4209 15.3505L25.7168 25.2519C23.9764 27.0275 21.1331 27.0809 19.3281 25.371L8.5957 15.203ZM10.5225 13.4804L21.0996 23.5009C21.8847 24.2447 23.1209 24.2224 23.8779 23.4501L33.6396 13.4892C33.5758 13.483 33.5108 13.4794 33.4453 13.4794H10.5596C10.5472 13.4794 10.5348 13.4801 10.5225 13.4804Z" />
            </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>

Partner Summary variant

OUR PARTNERS/COLLABORATORS

Partnership statement. A short description of the partnerships, collaborations or consortium.

See all collaborators

35

Data partners

4

Supporting funders

35

Research institutions

Nunjucks syntax

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 = { 
"footer__theme" : "dark",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : "summary",
"footer__show_logo" : true,
"footer__show_mission" : true,
"footer__show_social" : true,
"footer__show_contact" : true,
"footer__show_sublinks" : false,
"footer__show_intro_notice" : false,
 }
%}
{% include "../path_to/vf-footer/vf-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-footer', {
  "footer__theme" : "dark",
  "component-type" : "container",
  "hide-from-sitemenu" : true,
  "partner__variant" : "summary",
  "footer__show_logo" : true,
  "footer__show_mission" : true,
  "footer__show_social" : true,
  "footer__show_contact" : true,
  "footer__show_sublinks" : false,
  "footer__show_intro_notice" : false,}
%}
HTML 
<div class="vf-footer vf-u-background-color-ui--white vf-footer__partners">
  <div class="vf-footer__inner">

    <div class="vf-grid vf-grid__col-5 vf-footer__partners-summary-grid">
      <div class="vf-grid__col--span-2">
        <h4 class="vf-u-type__text-body--4 vf-u-text-color--grey--dark">OUR PARTNERS/COLLABORATORS</h4>
        <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-footer/assets/site-logo-dark-bg.png" alt="EMBL-EBI Logo" loading="eager" />
        </a>
        <div class="vf-grid vf-grid__col-1">
          <!-- Mission Statement -->
          <p class="vf-u-type__text-body--3 vf-footer__notice">
            A description of a site or organisation and what its goals are.
          </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--dark">
              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--dark">
              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--dark">
              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" viewBox="0 0 44 44" fill="currentColor">
              <path d="M38 22.0588C38 13.1898 30.8365 6 22 6C13.1635 6 6 13.1898 6 22.0588C6 29.5901 11.1658 35.9093 18.1348 37.6447V26.9661H14.8355V22.0588H18.1348V19.9442C18.1348 14.4783 20.5993 11.9449 25.9459 11.9449C26.9595 11.9449 28.7085 12.1444 29.4241 12.3439V16.7924C29.0464 16.7525 28.3905 16.7326 27.5756 16.7326C24.9521 16.7326 23.9384 17.73 23.9384 20.3233V22.0588H29.1645L28.2668 26.9661H23.9384V38C31.8607 37.0396 38 30.2692 38 22.0588Z" />
            </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" viewBox="0 0 44 44" fill="currentColor">
              <path d="M12.9364 9.80896C16.6051 12.5632 20.5513 18.1477 22.0001 21.1446C23.449 18.1479 27.3949 12.5632 31.0638 9.80896C33.7109 7.82161 38 6.2839 38 11.177C38 12.1542 37.4397 19.386 37.1111 20.5601C35.9689 24.6419 31.8067 25.683 28.1043 25.0529C34.576 26.1544 36.2223 29.8028 32.6668 33.4512C25.9143 40.3803 22.9615 31.7127 22.2046 29.4917C22.0659 29.0846 22.001 28.8941 22 29.0561C21.999 28.8941 21.9341 29.0846 21.7954 29.4917C21.0388 31.7127 18.0861 40.3805 11.3332 33.4512C7.77764 29.8028 9.42392 26.1541 15.8957 25.0529C12.1932 25.683 8.03094 24.6419 6.88888 20.5601C6.56026 19.3859 6 12.154 6 11.177C6 6.2839 10.2892 7.82161 12.9362 9.80896H12.9364Z" />
            </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" viewBox="0 0 44 44" fill="currentColor">
              <g clip-path="url(#clip0_970_224)">
                <path d="M22 8.88125C26.275 8.88125 26.7812 8.9 28.4625 8.975C30.025 9.04375 30.8687 9.30625 31.4312 9.525C32.175 9.8125 32.7125 10.1625 33.2687 10.7188C33.8312 11.2812 34.175 11.8125 34.4625 12.5563C34.6812 13.1188 34.9438 13.9688 35.0125 15.525C35.0875 17.2125 35.1063 17.7188 35.1063 21.9875C35.1063 26.2625 35.0875 26.7688 35.0125 28.45C34.9438 30.0125 34.6812 30.8563 34.4625 31.4188C34.175 32.1625 33.825 32.7 33.2687 33.2563C32.7062 33.8188 32.175 34.1625 31.4312 34.45C30.8687 34.6688 30.0187 34.9313 28.4625 35C26.775 35.075 26.2688 35.0938 22 35.0938C17.725 35.0938 17.2188 35.075 15.5375 35C13.975 34.9313 13.1312 34.6688 12.5687 34.45C11.825 34.1625 11.2875 33.8125 10.7312 33.2563C10.1687 32.6938 9.825 32.1625 9.5375 31.4188C9.31875 30.8563 9.05625 30.0063 8.9875 28.45C8.9125 26.7625 8.89375 26.2563 8.89375 21.9875C8.89375 17.7125 8.9125 17.2063 8.9875 15.525C9.05625 13.9625 9.31875 13.1188 9.5375 12.5563C9.825 11.8125 10.175 11.275 10.7312 10.7188C11.2937 10.1562 11.825 9.8125 12.5687 9.525C13.1312 9.30625 13.9813 9.04375 15.5375 8.975C17.2188 8.9 17.725 8.88125 22 8.88125ZM22 6C17.6562 6 17.1125 6.01875 15.4062 6.09375C13.7063 6.16875 12.5375 6.44375 11.525 6.8375C10.4688 7.25 9.575 7.79375 8.6875 8.6875C7.79375 9.575 7.25 10.4688 6.8375 11.5188C6.44375 12.5375 6.16875 13.7 6.09375 15.4C6.01875 17.1125 6 17.6562 6 22C6 26.3438 6.01875 26.8875 6.09375 28.5938C6.16875 30.2938 6.44375 31.4625 6.8375 32.475C7.25 33.5313 7.79375 34.425 8.6875 35.3125C9.575 36.2 10.4688 36.75 11.5188 37.1562C12.5375 37.55 13.7 37.825 15.4 37.9C17.1062 37.975 17.65 37.9937 21.9937 37.9937C26.3375 37.9937 26.8813 37.975 28.5875 37.9C30.2875 37.825 31.4563 37.55 32.4688 37.1562C33.5188 36.75 34.4125 36.2 35.3 35.3125C36.1875 34.425 36.7375 33.5313 37.1437 32.4813C37.5375 31.4625 37.8125 30.3 37.8875 28.6C37.9625 26.8938 37.9813 26.35 37.9813 22.0063C37.9813 17.6625 37.9625 17.1188 37.8875 15.4125C37.8125 13.7125 37.5375 12.5438 37.1437 11.5312C36.75 10.4688 36.2063 9.575 35.3125 8.6875C34.425 7.8 33.5312 7.25 32.4813 6.84375C31.4625 6.45 30.3 6.175 28.6 6.1C26.8875 6.01875 26.3438 6 22 6Z" />
                <path d="M22 13.7812C17.4625 13.7812 13.7812 17.4625 13.7812 22C13.7812 26.5375 17.4625 30.2188 22 30.2188C26.5375 30.2188 30.2188 26.5375 30.2188 22C30.2188 17.4625 26.5375 13.7812 22 13.7812ZM22 27.3312C19.0563 27.3312 16.6687 24.9438 16.6687 22C16.6687 19.0563 19.0563 16.6687 22 16.6687C24.9438 16.6687 27.3312 19.0563 27.3312 22C27.3312 24.9438 24.9438 27.3312 22 27.3312Z" />
                <path d="M32.4625 13.4564C32.4625 14.5189 31.6 15.3752 30.5438 15.3752C29.4813 15.3752 28.625 14.5126 28.625 13.4564C28.625 12.3939 29.4875 11.5376 30.5438 11.5376C31.6 11.5376 32.4625 12.4001 32.4625 13.4564Z" />
              </g>
              <defs>
                <clipPath id="clip0_970_224">
                  <rect width="32" height="32" transform="translate(6 6)" />
                </clipPath>
              </defs>
            </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" viewBox="0 0 44 44" fill="currentColor">
              <path d="M30.4351 8.53841H34.933L25.1063 19.7697L36.6667 35.053H27.615L20.5254 25.7838L12.4133 35.053H7.91258L18.4232 23.0399L7.33333 8.53841H16.6148L23.0232 17.0108L30.4351 8.53841ZM28.8564 32.3608H31.3488L15.2605 11.0892H12.5859L28.8564 32.3608Z" />
            </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" viewBox="0 0 44 44" fill="currentColor">
              <g clip-path="url(#clip0_970_229)">
                <path d="M35.6313 6H8.3625C7.05625 6 6 7.03125 6 8.30625V35.6875C6 36.9625 7.05625 38 8.3625 38H35.6313C36.9375 38 38 36.9625 38 35.6938V8.30625C38 7.03125 36.9375 6 35.6313 6ZM15.4937 33.2687H10.7438V17.9937H15.4937V33.2687ZM13.1188 15.9125C11.5938 15.9125 10.3625 14.6812 10.3625 13.1625C10.3625 11.6438 11.5938 10.4125 13.1188 10.4125C14.6375 10.4125 15.8687 11.6438 15.8687 13.1625C15.8687 14.675 14.6375 15.9125 13.1188 15.9125ZM33.2687 33.2687H28.525V25.8438C28.525 24.075 28.4937 21.7937 26.0562 21.7937C23.5875 21.7937 23.2125 23.725 23.2125 25.7188V33.2687H18.475V17.9937H23.025V20.0813H23.0875C23.7188 18.8813 25.2688 17.6125 27.575 17.6125C32.3813 17.6125 33.2687 20.775 33.2687 24.8875V33.2687Z" />
              </g>
              <defs>
                <clipPath id="clip0_970_229">
                  <rect width="32" height="32" transform="translate(6 6)" />
                </clipPath>
              </defs>
            </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" viewBox="0 0 44 44" fill="currentColor">
              <g clip-path="url(#clip0_990_510)">
                <mask id="mask0_990_510" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="6" y="6" width="32" height="32">
                  <path d="M38 6.32654H6V37.6735H38V6.32654Z" />
                </mask>
                <g mask="url(#mask0_990_510)">
                  <path d="M19.5313 28.9828C15.4062 28.4828 12.5 25.514 12.5 21.6703C12.5 20.1078 13.0625 18.4203 14 17.2953C13.5938 16.264 13.6563 14.0765 14.125 13.1703C15.375 13.014 17.0625 13.6703 18.0625 14.5765C19.25 14.2015 20.5 14.014 22.0312 14.014C23.5625 14.014 24.8125 14.2015 25.9375 14.5453C26.9063 13.6703 28.625 13.014 29.875 13.1703C30.3125 14.014 30.375 16.2015 29.9688 17.264C30.9688 18.4515 31.5 20.0453 31.5 21.6703C31.5 25.514 28.5938 28.4203 24.4062 28.9515C25.4687 29.639 26.1875 31.139 26.1875 32.8578V36.1078C26.1875 37.0453 26.9688 37.5765 27.9063 37.2015C33.5625 35.0453 38 29.389 38 22.389C38 13.5453 30.8125 6.32654 21.9688 6.32654C13.125 6.32654 6 13.5453 6 22.389C6 29.3265 10.4062 35.0765 16.3437 37.2328C17.1875 37.5453 18 36.9828 18 36.139V33.639C17.5625 33.8266 17 33.9515 16.5 33.9515C14.4375 33.9515 13.2187 32.8266 12.3437 30.7328C12 29.8891 11.625 29.389 10.9063 29.2953C10.5313 29.264 10.4062 29.1078 10.4062 28.9203C10.4062 28.5453 11.0312 28.264 11.6563 28.264C12.5625 28.264 13.3437 28.8266 14.1562 29.9828C14.7813 30.8891 15.4375 31.2953 16.2187 31.2953C17 31.2953 17.5 31.014 18.2187 30.2953C18.75 29.764 19.1562 29.2953 19.5313 28.9828Z" />
                </g>
              </g>
              <defs>
                <clipPath id="clip0_990_510">
                  <rect width="32" height="31.3469" transform="translate(6 6.32654)" />
                </clipPath>
              </defs>
            </svg>
          </a>
          <a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="mail">
            <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="currentColor">
              <path d="M33.4453 10.9042C35.9619 10.9042 38.0029 12.9452 38.0029 15.4618V28.539C38.0028 31.0555 35.9618 33.0956 33.4453 33.0956H10.5596C8.04318 33.0954 6.00307 31.0554 6.00293 28.539V15.4618C6.00293 12.9453 8.0431 10.9044 10.5596 10.9042H33.4453ZM8.5957 15.203C8.58467 15.2877 8.57812 15.3741 8.57812 15.4618V28.539C8.57826 29.6334 9.46513 30.5212 10.5596 30.5214H33.4453C34.5399 30.5214 35.4276 29.6335 35.4277 28.539V15.4618C35.4277 15.4245 35.4229 15.3873 35.4209 15.3505L25.7168 25.2519C23.9764 27.0275 21.1331 27.0809 19.3281 25.371L8.5957 15.203ZM10.5225 13.4804L21.0996 23.5009C21.8847 24.2447 23.1209 24.2224 23.8779 23.4501L33.6396 13.4892C33.5758 13.483 33.5108 13.4794 33.4453 13.4794H10.5596C10.5472 13.4794 10.5348 13.4801 10.5225 13.4804Z" />
            </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>

Legacy Footer variant

Nunjucks syntax

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 = { 
"footer__theme" : "dark",
"component-type" : "container",
"hide-from-sitemenu" : true,
"partner__variant" : ,
"footer__show_logo" : false,
"footer__show_mission" : false,
"footer__show_social" : false,
"footer__show_contact" : false,
"footer__show_sublinks" : true,
"footer__show_intro_notice" : true,
 }
%}
{% include "../path_to/vf-footer/vf-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-footer', {
  "footer__theme" : "dark",
  "component-type" : "container",
  "hide-from-sitemenu" : true,
  "partner__variant" : ,
  "footer__show_logo" : false,
  "footer__show_mission" : false,
  "footer__show_social" : false,
  "footer__show_contact" : false,
  "footer__show_sublinks" : true,
  "footer__show_intro_notice" : true,}
%}
HTML 
<footer class="vf-footer  | vf-u-background-color-ui--dark-grey">
  <div class="vf-footer__inner">
    <p class="vf-footer__notice">The Visual Framework is a toolkit to quickly and collaboratively build better life science websites.</p>
    <div class=" vf-footer__links-group">
      <!-- ROW 1: Logo + Mission (4) | Category Links (8) -->
      <!-- Logo -->
      <div>
        <!-- Category Links -->
        <div class="vf-grid vf-grid__col-5 ">
          <div class="vf-links">
            <h4 class="vf-links__heading vf-u-text-color--grey--dark">
              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--dark">
              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--dark">
              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--dark">
              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--dark">
              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 -->
      <ul class="vf-footer__list vf-footer__list--legal | vf-list vf-list--inline">
        <li class="vf-list__item">
          <a href="JavaScript:Void(0);" class="vf-list__link">Entry</a>
        </li>
        <li class="vf-list__item">
          <a href="JavaScript:Void(0);" class="vf-list__link">Entry</a>
        </li>
        <li class="vf-list__item">
          <a href="JavaScript:Void(0);" class="vf-list__link">Entry</a>
        </li>
      </ul>
    </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>
Installation info

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

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-footer/index.scss";

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

Changelog

Changelog

1.2.3

  • Release with feedback changes and bug fixes

1.2.2

  • Layout and styling updates including inner wrapper, spacing tokens, social icons, and mobile responsiveness improvements

1.2.1

  • Changes to footer based on EMBL-EBI Intranet implementation findings Tracking issue

1.2.0

  • Requires at least @visual-framework@vf-sass-config@2.6.1.
  • Specify the footer link colours.
  • https://github.com/visual-framework/vf-core/pull/1606

1.1.1

  • changes any set- style functions to cleaner version

1.1.0

  • removes inline padding as it's defunct when using the vf-body component

1.0.6

  • dependency bump

1.0.3

  • updates max-width of component

1.0.2

  • Removes need for .vf-body on .vf-footer
  • Refines layout spacing
  • Allows for footer headers to be links

1.0.1

  • Darkens background
  • Updates layout

1.0.0

  • Initial stable release

Assets


File system location: components/vf-footer

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