This component has been deprecated. Please use the vf-card component. A new layout-specific vf-box may be made in the future.
vf-box layout container can add spacing, a background color, a border, and text colours to an area of content.
vf-box can be used in all layout components (
embl-grid) and also inside of
vf-box is only designed to accept a heading and text (both have classes). The text node –
vf-box__text can also accept a link which will inherit the text colour.
Is Link option
If you require the
vf-box to link to a page you can do this by:
.yml for content:
- if you are using
.njk you only need to add a
box_href to the data.
Authoring in HTML:
vf-box--is-link to the classes being used
<div class="vf-box vf-box--is-link">...</div>.
- adding the link inside of the title
<h3 class="vf-box__title"><a href="#" class="vf-box__link">A title</a></h3>.
There are currently two Design variants available. To add the appropriate level of design you can add a component–level class:
note: you need a design variant set at the page (todo), container (todo), or component level to make use of the themes available to avoid any potential conflicts with code or unexpected results
vf-box component allows for global and component–level theming so that it is customisable to your needs.
To make use of the component–level theming you will need to add a theme classname to the component.
The theme classnames available are:
Do not use the themes
vf-box-theme--quinary with the design variant
vf-box--easy as they do not conform to WCAG colour contrast ratio specifications.
This component is distributed with npm. After installing npm, you can install the
vf-box with this command.
$ yarn add --dev @visual-framework/vf-box
The source files included are written in Sass(
scss). You can point your Sass
include-path at your
node_modules directory and import it like this.
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the
- Documentation updates
- New release
- Update milestones and roadmap.
- Add ELIXIR banner to example EMBL-EBI page.
- Fixed issue of overlapping menu on VF components site
- Implements updated vf-search markup.
- Changes a few pages on how it works with nunjucks and markdown.
- updates Design Tokens homepage.
- adds neutral colour tokens
- adds 'status banners' for components in the documentation page.
- Adds the form options as their own set of components in the list.
- Updates to use 11ty 0.12.1
- changes the
vf-intro so it's a white background, removes the padding.
- changes the links in
vf-intro to be the 'correct' buttons.
- small change to cards on homepage
- dependency bump
- adds roamap and consultation docs
- design token documenation now lives in the component libary
- begin to make more pattern/boilerplate guidance
- minor templating updates
- uses vf-favicon
- adds meta attributes
vf-component-assets:everything on local dev
- remove reference to removed
- Add 404
- Fix component CSS generation
- Also generate per-component CSS with
- Initial release to be used with vf-core 2.2.0
File system location:
Find an issue on this page?
Propose a change or discuss it.