Examples and patterns

More than components, this is how you should do things.

Where components offer technical implementations, patterns and boilerplates show how things should come together to facilitate tasks and goals.

If you're looking for guidance on how to integrate a different technical approach like React or a custom Sass build, see the building guide.


Boilerplate for a generic EMBL-EBI page

Use this boilerplate pattern for generic content-focused pages at EMBL-EBI.

Boilerplate for a generic page

Use this boilerplate pattern for generic content-focused pages.

Integrating with existing sites and CSS, JS

An example that doesn't use the Visual Framework as the main visual tool.


The Visual Framework favours a container-based navigation system.

Example service

An example scientific service that blends VF 2.0 components and bespoke code.

Boilerplate for search results

Use this boilerplate pattern for generic pages.

Boilerplate with sidebar

Use this boilerplate pattern for generic pages.

Boilerplate error pages

Use these boilerplate pattern for 404, 403, 500 and other common pages.

In this section

Browser support

We focus support on major browsers in use by 95%+ of our audiences, and we ensure the site is navigable and usable by the remaining 5%.

About components and patterns

Think of components as lego blocks you can use to build the look and content of your sites. Think of patterns as assembled packages of behaviour.

Creating new components

This codebase includes a folder and file creation tool.

Sass and CSS guidelines

The Visual Framework delivers much of its value through Sass.

Discussions, exchanges and help

Regardless of where, we welcome contribution, ideas and constructive criticism.

Image handling best practice

It's best to not let CSS do the image cropping.

JavaScript guidelines

We use "just enough" JavaScript in the Visual Framework.

Using British and American english if code and documentation

For the language and spelling of documentation and code.

User base of the Visual Framework code

This project is designed to be used by organisations with experienced developers delivery life science websites.

Component versioning interoperability

Each Visual Framework component carries its own semantic versioning.

Content guidelines

Unique to the web are certain types of content that support user interaction.

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