The Visual Framework

Good defaults and technical flexibility for life science websites

Learn about the framework

Principles
Updates and blog
Roadmap
FAQ

Guidance
Design tokens
Figma resources
Troubleshooting

Contributing and developing
Setting up your development environment
Creating a component

Patterns

Article example pattern (with EMBL header, footer)
Content page (with the EMBL-EBI header, footer)
Error pages
Integrating with existing sites and CSS, JS
Landing page
Scientific resource landing page
Search results

Container

Banner
Card Container
Chatbot
Content
ELIXIR Banner
Hero
Intro
Mega menu
News Container
Summary Container
Video Container

Block

Article Meta Information
Back to top
Breadcrumbs
Card
Code Example
Details
Discussion
Dropdown
Embed
Footer
Global Header
Lede
Navigation
Page Header
Pagination
Profile
Progress indicator
Search
Section Header
Social icons
Summary
Table
Tabs
Tags
Tree
Video
Video Teaser

Element

Badge
Blockquote
Bookmark
Button
Chatbot Modal
Divider
Favicon
Figure
Headings
Link
Lists
Logo
Text

Layout

Body
Cluster
Flag
Grid
Sidebar Layout
Stack

Chatbot

Forms

Tools

Utility

Search

Search documentation and guidance.

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

The Visual Framework is a toolkit to quickly and collaboratively build better life science websites.

It is open source and used on dozens of life science websites and maintained by a community of front end developers, UX specialists and designers. Get involved.

About

FAQ
Roadmap
Consultation process
Updates and blog

Building

Component list
Patterns and examples
Guidance and principles
Troubleshooting

Developing

Setting up
Code of conduct
Making a Pull Request

Project

Search
Changelog, updates
GitHub
Slack

Brought to you by the developers, designers and UX teams at EMBL and EMBL-EBI Meyerhofstraße 1, 69117 Heidelberg, Germany Tel: +49 6221 387-0

Latest release: v2.5.24 See more releases RSS Feed Code license is Apache 2.0

Type to search

AI Assistant

Welcome! I'm here to help

Try asking me:

Disclaimer: This chatbot is designed to assist you with general information and basic inquiries. See our disclaimer notes.

Ask me

Review AI generated content for accuracy. Leave feedback.

Close chat and delete conversation?

Are you sure you want to close the chat?
Your current conversation history will be permanently deleted.