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

Generic page at EMBL-EBI

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

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.

Scientific service

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

Search results

Use this boilerplate pattern for generic pages.

Error pages

Use these boilerplate pattern for 404, 403, 500 and other common 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.