Building a site

How to make a project with Visual Framework components.

Components and patterns

The Visual Framework provides dozens of individual building block components and pattern-level example boilerplates.

For higher level guidance, read the guidance and principles.

Patterns

Container components

Acivity List Group vf-activity-group
Banner vf-banner
Card Container vf-card-container
Content vf-content
ELIXIR Banner vf-banner-elixir
Header vf-header
Hero vf-hero
Intro vf-intro
News Container vf-news-container
Summary Container vf-summary-container
Video Container vf-video-container

Block components

Activity List vf-activity-list
Article Meta Information vf-article-meta-information
Back to top vf-back-to-top
Box vf-box
Breadcrumbs vf-breadcrumbs
Card vf-card
Code Example vf-code-example
Details vf-details
Discussion vf-discussion
Embed vf-embed
Footer vf-footer
Global Header vf-global-header
Lede vf-lede
Links List vf-link-list
Navigation vf-navigation
Page Header vf-page-header
Pagination vf-pagination
Profile vf-profile
Search vf-search
Section Header vf-section-header
Social icons vf-social-links
Summary vf-summary
Table vf-table
Tabs vf-tabs
Tree vf-tree
Video vf-video
Video Teaser vf-video-teaser

Element components

Badge vf-badge
Blockquote vf-blockquote
Button vf-button
Collapse vf-collapse
Divider vf-divider
Explainer vf-explainer
Favicon vf-favicon
Figure vf-figure
Headings vf-heading
Link vf-link
Lists vf-list
Logo vf-logo
Text vf-text

Layout components

Body vf-body
Cluster vf-cluster
Flag vf-flag
Grid vf-grid
Sidebar Layout vf-sidebar
Stack vf-stack

Form components

Checkbox vf-form__checkbox
Fieldset vf-form__fieldset
Form vf-form
Helper vf-form__helper
Input vf-form__input
Item vf-form__item
Label vf-form__label
Legend vf-form__legend
Radio vf-form__radio
Select vf-form__select
Textarea vf-form__textarea

Utility components

Compatibility with EBI-VF 1.x Components ebi-vf1-integration
Component Rollup vf-componenet-rollup
EMBL Breadcrumbs lookup embl-breadcrumbs-lookup
EMBL Conditional Edit Links component embl-conditional-edit
EMBL Content meta properties embl-content-meta-properties
EMBL ContentHub Loader component embl-content-hub-loader
EMBL Notifications embl-notifications
EMBL-EBI Header and Footer ebi-header-footer
Full Bleed vf-u-fullbleed
Google Analytics enhancements vf-analytics-google
JavaScript Polyfill vf-polyfill-js
Nearest location vf-location-nearest
No JS detection vf-no-js
Plex Mono Font vf-font-plex-mono
Plex Sans Font vf-font-plex-sans
Sass Starter vf-sass-starter
Sass config and templates vf-sass-config
Search Client Side vf-search-client-side
Show more vf-show-more
Utility Classes vf-utility-classes

Tools

See also

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