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
.njkyou only need to add a
box_hrefto the data.
Authoring in HTML:
vf-box--is-linkto 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