Components and patterns

Building block components and pattern-level example boilerplates.

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.


Content page (with the EMBL-EBI header, footer)

Content-focused pages with the EMBL-EBI header and footer.

Integrating with existing sites and CSS, JS

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

Online scientific resource

An example landing page for an online scientific service such as a bioinformatics database, tool or similar.

Search results

Use this boilerplate pattern for generic pages.

Error pages

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

Article example pattern (with EMBL header, footer)

An example long-form article.

Landing page

Use this boilerplate pattern for landing pages.

Also in this section

More from the Components and patterns section

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