VF 2.0 Component library alpha

Browse all the components included in the Visual Framework 2.0 core.

Use this website to browse components, understand the consituent CSS, JS templates, and to install from npm.

In the right place?

This site is designed as a demonstration of all the components bundled with the Visual Framework 2.0 core.

You most likely don't need to clone the vf-core unless you're interested in improving the architecure of the system or contributing a global component for all users of the Visual Framework.

Most developers will want to build a site or design system that use the Visual Framework architecure and components, for those users we recommend:

  1. Reviewing the links below and components on this site; and
  2. Utilising the vf-eleventy templates.

Getting started

If you're new to the Visual Framework, here are some links to look at first.

  1. Understand the basics;
  2. Review the documentation;
  3. Browse the components below;
  4. Learn how to create new components or request a new component;
  5. Make your own site or design system; and
  6. Ask the community for help or open an issue.

All the components

Grids

Put stuff in columns.

Grid

Page Grid

Inlay


Elements

The micro elements of the component library.

Badges

Blockquote

Button

Collapse

Divider

Explainer

Favicon

Figure

Headings

Link

Lists

Logo

No JS

Text


Blocks

Simple components like sections headers, galleries and so on.

Activity List

Article Meta Information

Box

Breadcrumbs

Card

Code Example

Discussion

Embed

Footer

Global Header

Lede

Links List

Masthead

Navigation

Page Header

Pagination

Search

Section Header

Social icons

Summary

Table

Tabs

Tree

Video

Video Teaser


Container

More complex components that sometimes have specific layout, like page intros, mastheads, news sections and so on.

EBI Header and Footer

Acivity List Group

Banner

Card Container

Content

Forms

Header

Hero

Intro

News Container

Summary Container

Video Container


Boilerplates

Whole-page templates that are a collection of many components.

VF Boilerplate


Utilities

Utility classes to help where neeed.

EBI-VF 1.x Compatibility Component

EMBL Notifications

Google Analytics enhancements

Visual Framework Componet Rollup

Design Tokens

Plex Mono Font

Plex Sans Font

JS Polyfill

Sass config

Full Bleed

Utility classes


EMBL Grids

EMBLs way to put stuff in columns.

EMBL Grid


EMBL Elements

EMBLs micro elements of the component library.

EMBL Conditional Edit

EMBL Favicon

EMBL Logo


EMBL Blocks

Simple components from EMBL like sections headers, galleries and so on.

EMBL Breadcrumbs

EMBL Content meta properties


EMBL Containers

More complex EMBL components that sometimes have specific layout, like page intros, mastheads, news sections and so on.

EMBL ContentHub Loader


EMBL Boilerplates

Whole-page templates that are a collection of many components.


Deprecated

These components are no longer maintained.

Deprecated pattern

Sass utilities