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.

Patterns

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.

Article example pattern (with EMBL header, footer)

An example long-form article.

Landing page

Use this boilerplate pattern for landing pages.


In this section

The Visual Framework favours a container-based navigation system.

Use this boilerplate pattern for generic pages.

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