Local components

Description

This footer is designed to display branding and essential content within the EMBL-EBI ecosystem without overwhelming the user experience. This approach ensures a clear and consistent representation of the EMBL-EBI identity across services and websites, and provides a structured pattern for communicating partnerships and collaborations.

When to use

Across EMBL-EBI platforms and organisational digital properties, particularly recommended for service pages within the ebi.ac.uk domain
Where the EBML-EBI branding, essential links and legal information are required
For task oriented pages such as payment pages or registration pages
Where there is a need to show collaboration with multiple partners

When not to use

In cases where the footer needs to reflect the service site's navigation
Where the social media channels are to be added

For cases like this we recommend using the Modular variant which offers more flexibility.

Deciding what to use

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

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

Usability and content guidance

The content in the footer is designed to clearly describe the relationship between the services and EMBL-EBI. The footer has clear link labels and descriptions such as: "[Name of resource] is developed and maintained by EMBL-EBI, a world leader in biological data resources", for other use cases of descriptions, contact the Comms team via this email comms@ebi.ac.uk for support with appropriate wording.

The content in the minimal footer variant is standardised to ensure consistency across our services.

Element	Required	Notes
EMBL-EBI logo	Yes	The logo should not be altered on the services page
Description	Yes	The content should reflect the relationship between the service and EMBL-EBI
Utility & legal links	Yes	Bottom bar with Terms of use, EMBL-EBI affiliation and copyright. These links should be retained.
Collaborators	No	This can be added for acknowledgment of collaborators

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 elements wrap across the tablet and mobile breaking points while ensuring 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

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",
 }
%}
{% include "../path_to/vf-minimal-footer/vf-minimal-footer.njk" %}

Using `render`

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


{% render '@vf-minimal-footer', {
  "footer__theme" : "dark",
  "component-type" : "container",
  "hide-from-sitemenu" : true,
  "partner__variant" : "logos",}
%}

HTML

<div class="vf-footer vf-u-background-color-ui--white vf-footer__partners">
  <div class="vf-footer__inner">
    <h4 class="vf-u-type__text-body--4 vf-u-text-color--grey--dark">Our partners/collaborators</h4>

    <ul class="vf-grid vf-grid__col-6 vf-list">
      <li class="vf-list__item">
        <a href="JavaScript:Void(0);" class="vf-list__link">
          <img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
        </a>
      </li>
      <li class="vf-list__item">
        <a href="JavaScript:Void(0);" class="vf-list__link">
          <img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
        </a>
      </li>
      <li class="vf-list__item">
        <a href="JavaScript:Void(0);" class="vf-list__link">
          <img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
        </a>
      </li>
      <li class="vf-list__item">
        <a href="JavaScript:Void(0);" class="vf-list__link">
          <img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
        </a>
      </li>
      <li class="vf-list__item">
        <a href="JavaScript:Void(0);" class="vf-list__link">
          <img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
        </a>
      </li>
      <li class="vf-list__item">
        <a href="JavaScript:Void(0);" class="vf-list__link">
          <img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
        </a>
      </li>
    </ul>

  </div>
</div>

<footer class="vf-footer  vf-footer--without-rule | vf-u-background-color-ui--dark-grey">
  <div class="vf-footer__inner">
    <a href="https://www.ebi.ac.uk" class="vf-logo">
      <img class="vf-logo__image" src="../../assets/vf-minimal-footer/assets/embl-ebi-rgb-all-white.png" alt="EMBL-EBI Logo" loading="eager">
    </a>
    <p class="vf-footer__notice">[Name of resource] is developed and maintained by EMBL-EBI, a world leader in biological data resources.</p>
    <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>

Minimal Footer container

Usage

Description

When to use

When not to use

Deciding what to use

Collaboration section variants

Choosing the right collaboration variant

Usability and content guidance

Terms of Use (ToU)

Themes

Responsiveness

Accessibility

Variants

Using include

Using render

Using include

Using render

Using include

Using render

Our partners/collaborators

Using include

Using render

Our partners/collaborators

Using include

Using render

Our partners/collaborators

Using include

Using render

Examples

Sass/CSS

Changelog

1.0.0-alpha.1

Assets

Using `include`

Using `render`

Using `include`

Using `render`

Using `include`

Using `render`

Using `include`

Using `render`

Using `include`

Using `render`

Using `include`

Using `render`