Visual Framework

Search
GitHub
Slack

Building a site
vf-design-tokens

Building a site

How to make a project with Visual Framework components.

Building a site
Components and patterns
Troubleshooting
Design kit
Guidance and principles

Layout

EMBL Grid
Body
Cluster
Flag
Grid
Sidebar Layout
Stack

Element

EMBL Favicon
EMBL Logo
Badge
Blockquote
Button
Collapse
Divider
Explainer
Favicon
Figure
Headings
Link
Lists
Logo
Text

Block

Activity List
Article Meta Information
Back to top
Box
Breadcrumbs
Card
Code Example
Details
Discussion
Embed
Footer
Global Header
Lede
Links List
Navigation
Page Header
Pagination
Profile
Search
Section Header
Social icons
Summary
Table
Tabs
Tree
Video
Video Teaser

Form

Form
Checkbox
Fieldset
Helper
Input
Item
Label
Legend
Radio
Select
Textarea

Container

Acivity List Group
Banner
ELIXIR Banner
Card Container
Content
Header
Hero
Intro
News Container
Summary Container
Video Container

Utility

EMBL-EBI Header and Footer
Compatibility with EBI-VF 1.x Components
EMBL Breadcrumbs lookup
EMBL Conditional Edit Links component
EMBL ContentHub Loader component
EMBL Content meta properties
EMBL Notifications
Google Analytics enhancements
Component Rollup
Plex Mono Font
Plex Sans Font
Nearest location
No JS detection
JavaScript Polyfill
Sass config and templates
Sass Starter
Search Client Side
Show more
Full Bleed
Utility Classes

Tools

VF extensions
React extensions
Sass compilation
Component generator

Design Tokens

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

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.0-beta.2 See more releases RSS Feed Code license is Apache 2.0