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: stable.visual-framework.dev

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

Links:

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

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

Robots: index, follow

URLs of crawlers that visited me.