Components and 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

• Banner vf-banner
• Card Container vf-card-container
• Chatbot vf-chatbot
• Chatbot Modal vf-chatbot-modal
• Chatbot Standalone vf-chatbot-standalone
• Content vf-content
• ELIXIR Banner vf-banner-elixir
• Hero vf-hero
• Intro vf-intro
• Mega menu vf-mega-menu
• News Container vf-news-container
• Summary Container vf-summary-container
• Video Container vf-video-container

• Article Meta Information vf-article-meta-information
• Back to top vf-back-to-top
• Breadcrumbs vf-breadcrumbs
• Card vf-card
• Code Example vf-code-example
• Details vf-details
• Discussion vf-discussion
• Dropdown vf-dropdown
• Embed vf-embed
• Footer vf-footer
• Global Header vf-global-header
• Lede vf-lede
• Navigation vf-navigation
• Page Header vf-page-header
• Pagination vf-pagination
• Profile vf-profile
• Progress indicator vf-progress-indicator
• Search vf-search
• Section Header vf-section-header
• Social icons vf-social-links
• Summary vf-summary
• Table vf-table
• Tabs vf-tabs
• Tags vf-tags
• Tree vf-tree
• Video vf-video
• Video Teaser vf-video-teaser

• Badge vf-badge
• Blockquote vf-blockquote
• Bookmark vf-bookmark
• Button vf-button
• Divider vf-divider
• Favicon vf-favicon
• Figure vf-figure
• Headings vf-heading
• Link vf-link
• Lists vf-list
• Logo vf-logo
• Text vf-text

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

• 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

• 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
• Smooth scroll vf-smooth-scroll
• Utility Classes vf-utility-classes

Main Components

• Chatbot
  • Standalone Chatbot
  • Modal Chatbot

Shared components

• Chatbot Prompt
• Welcome Screen
• Feedback Controls
• Sources Component
• Action Prompts
• Selector Component

Modal specific components

• Floating Action Button
• Confirmaiton dialog

• VF extensions
• React extensions
• Sass compilation
• Component generator

See also

• About components and patterns
• Creating new components
• Component versioning interoperability
• Legacy browser support