René's URL Explorer Experiment


Title: Components and patterns | The Visual Framework

Open Graph Title: Components and patterns

X Title: Components and patterns

Description: Individual building block components and pattern-level example boilerplates.

Open Graph Description: Individual building block components and pattern-level example boilerplates.

X Description: Individual building block components and pattern-level example boilerplates.

Tel number
004962213870

Opengraph URL: https://stable.visual-framework.dev//components/

direct link

Domain: latest.visual-framework.dev

msapplication-TileColor#ffffff
theme-color#ffffff
titleComponents and patterns
authorEMBL
og:typewebsite
twitter:cardsummary_large_image

Links:

Visual Framework https://latest.visual-framework.dev/
About https://latest.visual-framework.dev/about
Components https://latest.visual-framework.dev/components
GitHubhttps://github.com/visual-framework/vf-core
Search https://latest.visual-framework.dev/search
Learn about the frameworkhttps://latest.visual-framework.dev/about
Principleshttps://latest.visual-framework.dev/design-principles/
Updates and bloghttps://latest.visual-framework.dev/updates/
Roadmaphttps://latest.visual-framework.dev/about/roadmap/
FAQhttps://latest.visual-framework.dev/about/faq/
Guidancehttps://latest.visual-framework.dev/guidance/
Design tokenshttps://latest.visual-framework.dev/design-tokens/
Figma resourceshttps://latest.visual-framework.dev/design-kit/
Troubleshootinghttps://latest.visual-framework.dev/troubleshooting/
Contributing and developinghttps://latest.visual-framework.dev/developing/
Setting up your development environmenthttps://latest.visual-framework.dev/developing/getting-started/setting-up/
Creating a componenthttps://latest.visual-framework.dev/guidance/creating-components
Article example pattern (with EMBL header, footer)https://latest.visual-framework.dev/patterns/article/
Content page (with the EMBL-EBI header, footer)https://latest.visual-framework.dev/patterns/boilerplate-generic-embl-ebi/
Error pageshttps://latest.visual-framework.dev/patterns/error-pages/
Integrating with existing sites and CSS, JShttps://latest.visual-framework.dev/patterns/integration/
Landing pagehttps://latest.visual-framework.dev/patterns/landing-page/
Scientific resource landing pagehttps://latest.visual-framework.dev/patterns/scientific-service/
Search resultshttps://latest.visual-framework.dev/patterns/search-results/
Bannerhttps://latest.visual-framework.dev/components/vf-banner
Card Containerhttps://latest.visual-framework.dev/components/vf-card-container
Chatbothttps://latest.visual-framework.dev/components/vf-chatbot
Contenthttps://latest.visual-framework.dev/components/vf-content
ELIXIR Bannerhttps://latest.visual-framework.dev/components/vf-banner-elixir
Footerhttps://latest.visual-framework.dev/components/footer
Herohttps://latest.visual-framework.dev/components/vf-hero
Introhttps://latest.visual-framework.dev/components/vf-intro
Mega menuhttps://latest.visual-framework.dev/components/vf-mega-menu
News Containerhttps://latest.visual-framework.dev/components/vf-news-container
Summary Containerhttps://latest.visual-framework.dev/components/vf-summary-container
Video Containerhttps://latest.visual-framework.dev/components/vf-video-container
Article Meta Informationhttps://latest.visual-framework.dev/components/vf-article-meta-information
Back to tophttps://latest.visual-framework.dev/components/vf-back-to-top
Breadcrumbshttps://latest.visual-framework.dev/components/vf-breadcrumbs
Cardhttps://latest.visual-framework.dev/components/vf-card
Code Examplehttps://latest.visual-framework.dev/components/vf-code-example
Detailshttps://latest.visual-framework.dev/components/vf-details
Discussionhttps://latest.visual-framework.dev/components/vf-discussion
Dropdownhttps://latest.visual-framework.dev/components/vf-dropdown
Embedhttps://latest.visual-framework.dev/components/vf-embed
Global Headerhttps://latest.visual-framework.dev/components/vf-global-header
Ledehttps://latest.visual-framework.dev/components/vf-lede
Navigationhttps://latest.visual-framework.dev/components/vf-navigation
Page Headerhttps://latest.visual-framework.dev/components/vf-page-header
Paginationhttps://latest.visual-framework.dev/components/vf-pagination
Profilehttps://latest.visual-framework.dev/components/vf-profile
Progress indicatorhttps://latest.visual-framework.dev/components/vf-progress-indicator
Searchhttps://latest.visual-framework.dev/components/vf-search
Section Headerhttps://latest.visual-framework.dev/components/vf-section-header
Social iconshttps://latest.visual-framework.dev/components/vf-social-links
Summaryhttps://latest.visual-framework.dev/components/vf-summary
Tablehttps://latest.visual-framework.dev/components/vf-table
Tabshttps://latest.visual-framework.dev/components/vf-tabs
Tagshttps://latest.visual-framework.dev/components/vf-tags
Treehttps://latest.visual-framework.dev/components/vf-tree
Videohttps://latest.visual-framework.dev/components/vf-video
Video Teaserhttps://latest.visual-framework.dev/components/vf-video-teaser
Badgehttps://latest.visual-framework.dev/components/vf-badge
Blockquotehttps://latest.visual-framework.dev/components/vf-blockquote
Bookmarkhttps://latest.visual-framework.dev/components/vf-bookmark
Buttonhttps://latest.visual-framework.dev/components/vf-button
Dividerhttps://latest.visual-framework.dev/components/vf-divider
Faviconhttps://latest.visual-framework.dev/components/vf-favicon
Figurehttps://latest.visual-framework.dev/components/vf-figure
Headingshttps://latest.visual-framework.dev/components/vf-heading
Linkhttps://latest.visual-framework.dev/components/vf-link
Listshttps://latest.visual-framework.dev/components/vf-list
Logohttps://latest.visual-framework.dev/components/vf-logo
Texthttps://latest.visual-framework.dev/components/vf-text
Bodyhttps://latest.visual-framework.dev/components/vf-body
Clusterhttps://latest.visual-framework.dev/components/vf-cluster
Flaghttps://latest.visual-framework.dev/components/vf-flag
Gridhttps://latest.visual-framework.dev/components/vf-grid
Sidebar Layouthttps://latest.visual-framework.dev/components/vf-sidebar
Stackhttps://latest.visual-framework.dev/components/vf-stack
Chatbothttps://latest.visual-framework.dev/components#chatbot
Formshttps://latest.visual-framework.dev/components#form
Toolshttps://latest.visual-framework.dev/components#tools
Utilityhttps://latest.visual-framework.dev/components#utility
Building a sitehttps://latest.visual-framework.dev/building
the guidance and principleshttps://latest.visual-framework.dev/guidance
Article example pattern (with EMBL header, footer)https://latest.visual-framework.dev/patterns/article/
Content page (with the EMBL-EBI header, footer)https://latest.visual-framework.dev/patterns/boilerplate-generic-embl-ebi/
Error pageshttps://latest.visual-framework.dev/patterns/error-pages/
Integrating with existing sites and CSS, JShttps://latest.visual-framework.dev/patterns/integration/
Landing pagehttps://latest.visual-framework.dev/patterns/landing-page/
Scientific resource landing pagehttps://latest.visual-framework.dev/patterns/scientific-service/
Search resultshttps://latest.visual-framework.dev/patterns/search-results/
Bannerhttps://latest.visual-framework.dev/components/vf-banner
Card Containerhttps://latest.visual-framework.dev/components/vf-card-container
Chatbothttps://latest.visual-framework.dev/components/vf-chatbot
Chatbot Standalonehttps://latest.visual-framework.dev/components/vf-chatbot-standalone
Contenthttps://latest.visual-framework.dev/components/vf-content
ELIXIR Bannerhttps://latest.visual-framework.dev/components/vf-banner-elixir
Footerhttps://latest.visual-framework.dev/components/footer
Herohttps://latest.visual-framework.dev/components/vf-hero
Introhttps://latest.visual-framework.dev/components/vf-intro
Mega menuhttps://latest.visual-framework.dev/components/vf-mega-menu
Minimal Footerhttps://latest.visual-framework.dev/components/vf-minimal-footer
Modular VF Footerhttps://latest.visual-framework.dev/components/vf-footer
News Containerhttps://latest.visual-framework.dev/components/vf-news-container
Summary Containerhttps://latest.visual-framework.dev/components/vf-summary-container
Video Containerhttps://latest.visual-framework.dev/components/vf-video-container
Article Meta Informationhttps://latest.visual-framework.dev/components/vf-article-meta-information
Back to tophttps://latest.visual-framework.dev/components/vf-back-to-top
Breadcrumbshttps://latest.visual-framework.dev/components/vf-breadcrumbs
Cardhttps://latest.visual-framework.dev/components/vf-card
Code Examplehttps://latest.visual-framework.dev/components/vf-code-example
Detailshttps://latest.visual-framework.dev/components/vf-details
Discussionhttps://latest.visual-framework.dev/components/vf-discussion
Dropdownhttps://latest.visual-framework.dev/components/vf-dropdown
Embedhttps://latest.visual-framework.dev/components/vf-embed
Global Headerhttps://latest.visual-framework.dev/components/vf-global-header
Ledehttps://latest.visual-framework.dev/components/vf-lede
Navigationhttps://latest.visual-framework.dev/components/vf-navigation
Page Headerhttps://latest.visual-framework.dev/components/vf-page-header
Paginationhttps://latest.visual-framework.dev/components/vf-pagination
Profilehttps://latest.visual-framework.dev/components/vf-profile
Progress indicatorhttps://latest.visual-framework.dev/components/vf-progress-indicator
Searchhttps://latest.visual-framework.dev/components/vf-search
Section Headerhttps://latest.visual-framework.dev/components/vf-section-header
Social iconshttps://latest.visual-framework.dev/components/vf-social-links
Summaryhttps://latest.visual-framework.dev/components/vf-summary
Tablehttps://latest.visual-framework.dev/components/vf-table
Tabshttps://latest.visual-framework.dev/components/vf-tabs
Tagshttps://latest.visual-framework.dev/components/vf-tags
Treehttps://latest.visual-framework.dev/components/vf-tree
Videohttps://latest.visual-framework.dev/components/vf-video
Video Teaserhttps://latest.visual-framework.dev/components/vf-video-teaser
Badgehttps://latest.visual-framework.dev/components/vf-badge
Blockquotehttps://latest.visual-framework.dev/components/vf-blockquote
Bookmarkhttps://latest.visual-framework.dev/components/vf-bookmark
Buttonhttps://latest.visual-framework.dev/components/vf-button
Chatbot Modalhttps://latest.visual-framework.dev/components/vf-chatbot-modal
Dividerhttps://latest.visual-framework.dev/components/vf-divider
Faviconhttps://latest.visual-framework.dev/components/vf-favicon
Figurehttps://latest.visual-framework.dev/components/vf-figure
Headingshttps://latest.visual-framework.dev/components/vf-heading
Linkhttps://latest.visual-framework.dev/components/vf-link
Listshttps://latest.visual-framework.dev/components/vf-list
Logohttps://latest.visual-framework.dev/components/vf-logo
Texthttps://latest.visual-framework.dev/components/vf-text
Bodyhttps://latest.visual-framework.dev/components/vf-body
Clusterhttps://latest.visual-framework.dev/components/vf-cluster
Flaghttps://latest.visual-framework.dev/components/vf-flag
Gridhttps://latest.visual-framework.dev/components/vf-grid
Sidebar Layouthttps://latest.visual-framework.dev/components/vf-sidebar
Stackhttps://latest.visual-framework.dev/components/vf-stack
Checkboxhttps://latest.visual-framework.dev/components/vf-form__checkbox
Fieldsethttps://latest.visual-framework.dev/components/vf-form__fieldset
Formhttps://latest.visual-framework.dev/components/vf-form
Helperhttps://latest.visual-framework.dev/components/vf-form__helper
Inputhttps://latest.visual-framework.dev/components/vf-form__input
Itemhttps://latest.visual-framework.dev/components/vf-form__item
Labelhttps://latest.visual-framework.dev/components/vf-form__label
Legendhttps://latest.visual-framework.dev/components/vf-form__legend
Radiohttps://latest.visual-framework.dev/components/vf-form__radio
Selecthttps://latest.visual-framework.dev/components/vf-form__select
Textareahttps://latest.visual-framework.dev/components/vf-form__textarea
Compatibility with EBI-VF 1.x Componentshttps://latest.visual-framework.dev/components/ebi-vf1-integration
Component Rolluphttps://latest.visual-framework.dev/components/vf-componenet-rollup
EMBL Breadcrumbs lookuphttps://latest.visual-framework.dev/components/embl-breadcrumbs-lookup
EMBL Conditional Edit Links componenthttps://latest.visual-framework.dev/components/embl-conditional-edit
EMBL Content meta propertieshttps://latest.visual-framework.dev/components/embl-content-meta-properties
EMBL ContentHub Loader componenthttps://latest.visual-framework.dev/components/embl-content-hub-loader
EMBL Notificationshttps://latest.visual-framework.dev/components/embl-notifications
EMBL-EBI Header and Footerhttps://latest.visual-framework.dev/components/ebi-header-footer
Full Bleedhttps://latest.visual-framework.dev/components/vf-u-fullbleed
Google Analytics enhancementshttps://latest.visual-framework.dev/components/vf-analytics-google
JavaScript Polyfillhttps://latest.visual-framework.dev/components/vf-polyfill-js
Nearest locationhttps://latest.visual-framework.dev/components/vf-location-nearest
No JS detectionhttps://latest.visual-framework.dev/components/vf-no-js
Plex Mono Fonthttps://latest.visual-framework.dev/components/vf-font-plex-mono
Plex Sans Fonthttps://latest.visual-framework.dev/components/vf-font-plex-sans
Sass Starterhttps://latest.visual-framework.dev/components/vf-sass-starter
Sass config and templateshttps://latest.visual-framework.dev/components/vf-sass-config
Search Client Sidehttps://latest.visual-framework.dev/components/vf-search-client-side
Show morehttps://latest.visual-framework.dev/components/vf-show-more
Smooth scrollhttps://latest.visual-framework.dev/components/vf-smooth-scroll
Utility Classeshttps://latest.visual-framework.dev/components/vf-utility-classes
Chatbothttps://latest.visual-framework.dev/components/vf-chatbot
Standalone Chatbothttps://latest.visual-framework.dev/components/vf-chatbot-standalone
Modal Chatbothttps://latest.visual-framework.dev/components/vf-chatbot-modal
Chatbot Prompthttps://latest.visual-framework.dev/components/vf-chatbot-prompt
Welcome Screenhttps://latest.visual-framework.dev/components/vf-chatbot-welcome
Feedback Controlshttps://latest.visual-framework.dev/components/vf-chatbot-feedback
Sources Componenthttps://latest.visual-framework.dev/components/vf-chatbot-sources
Action Promptshttps://latest.visual-framework.dev/components/vf-chatbot-action-prompt
Selector Componenthttps://latest.visual-framework.dev/components/vf-chatbot-selector
Floating action button componenthttps://latest.visual-framework.dev/components/vf-chatbot-fab
Dialog Componenthttps://latest.visual-framework.dev/components/vf-chatbot-dialog
VF extensions https://github.com/visual-framework/vf-core/tree/develop/tools/vf-extensions
React extensions https://github.com/visual-framework/vf-core/blob/develop/tools/vf-extensions-react/README.md
Sass compilation https://github.com/visual-framework/vf-core/tree/develop/tools/vf-sass-compilation
Component generator https://github.com/visual-framework/vf-core/tree/develop/tools/vf-component-generator
About components and patternshttps://latest.visual-framework.dev/guidance/components-and-patterns/
Creating new componentshttps://latest.visual-framework.dev/guidance/creating-components/
Component versioning interoperabilityhttps://latest.visual-framework.dev/guidance/versioning-and-component-interoperability/
Legacy browser supporthttps://latest.visual-framework.dev/guidance/browser-support/
Propose a changehttps://github.com/visual-framework/vf-core/blob/develop/tools/vf-component-library/src/site/components/index.njk
discuss ithttps://latest.visual-framework.dev/guidance/discussing-the-vf
Get involvedhttps://latest.visual-framework.dev/guidance/discussing-the-vf
Abouthttps://latest.visual-framework.dev/about
FAQhttps://latest.visual-framework.dev/about/faq
Roadmaphttps://latest.visual-framework.dev/about/roadmap
Consultation processhttps://latest.visual-framework.dev/about/consultation
Updates and bloghttps://latest.visual-framework.dev/updates
Buildinghttps://latest.visual-framework.dev/building
Component listhttps://latest.visual-framework.dev/components
Patterns and exampleshttps://latest.visual-framework.dev/patterns
Guidance and principleshttps://latest.visual-framework.dev/guidance
Troubleshootinghttps://latest.visual-framework.dev/troubleshooting
Developinghttps://latest.visual-framework.dev/developing
Setting uphttps://latest.visual-framework.dev/developing/getting-started/setting-up
Code of conducthttps://latest.visual-framework.dev/developing/getting-started/code-of-conduct
Making a Pull Requesthttps://latest.visual-framework.dev/developing/getting-started/pull-requests
Projecthttps://github.com/visual-framework/vf-core
Searchhttps://latest.visual-framework.dev/search
Changelog, updateshttps://latest.visual-framework.dev/updates
GitHubhttps://github.com/visual-framework/vf-core
Brought to you by the developers, designers and UX teams at EMBL and EMBL-EBIhttps://www.embl.org/
Meyerhofstraße 1, 69117 Heidelberg, Germanyhttps://goo.gl/maps/nbxNg2HGXL1MTtzt9
See more releaseshttps://latest.visual-framework.dev/updates
RSS Feedhttps://latest.visual-framework.dev/feed.xml
Apache 2.0https://github.com/visual-framework/vf-core/blob/develop/LICENSE
https://latest.visual-framework.dev/components/
disclaimer noteshttps://www.ebi.ac.uk/data-protection/privacy-notice/embl-ebi-public-website/
Leave feedbackhttps://embl.service-now.com/esc?id=sc_cat_item&sys_id=5eeb8eb91b92e650b376da88b04bcbc1
https://latest.visual-framework.dev/components/

Viewport: width=device-width, initial-scale=1.0

Robots: index, follow

URLs of crawlers that visited me.