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.

Scientific resource landing page

Example landing page for an online scientific service such as a bioinformatics database, tool or similar where search is key.

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

Many types of users visit landing pages which guide users along their journey, and promote other content and actions.

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