deprecated It is strongly recommended that this not to be used.

Box deprecated

This component has been deprecated. Please use the vf-card component. A new layout-specific vf-box may be made in the future.

github location npm version



Usage

The vf-box layout container can add spacing, a background color, a border, and text colours to an area of content.

A vf-box can be used in all layout components (vf-grid, vf-stack, embl-grid) and also inside of vf-content.

For now 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:

Using .njk and .yml for content:

  • if you are using .njk you only need to add a box_href to the data.

Authoring in HTML:

  • adding 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>.

Design Variants

There are currently two Design variants available. To add the appropriate level of design you can add a component–level class:

  • vf-box--easy
  • vf-box--normal

Themes

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

The 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:

  • vf-box-theme--primary
  • vf-box-theme--secondary
  • vf-box-theme--tertiary
  • vf-box-theme--quaternary
  • vf-box-theme--quinary

Accessibility

Do not use the themes vf-box-theme--qauternary or vf-box-theme--quinary with the design variant vf-box--easy as they do not conform to WCAG colour contrast ratio specifications.

Variants

Examples

Installation info

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

Sass/CSS

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.

@import "@visual-framework/vf-box/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

1.1.13

  • Documentation updates
  • New release

1.1.12

  • Update milestones and roadmap.

1.1.11

  • Add ELIXIR banner to example EMBL-EBI page.
  • https://stable.visual-framework.dev/patterns/boilerplate-generic-embl-ebi/
  • https://github.com/visual-framework/vf-core/pull/1615

1.1.7

  • Fixed issue of overlapping menu on VF components site
  • https://github.com/visual-framework/vf-core/issues/1518

1.1.6

  • dependency bump

1.1.2

  • Implements updated vf-search markup.
  • Changes a few pages on how it works with nunjucks and markdown.

1.1.0

  • 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.
  • https://github.com/visual-framework/vf-core/pull/1390/files
  • Updates to use 11ty 0.12.1
  • https://github.com/visual-framework/vf-core/pull/1435

1.0.24

  • changes the vf-intro so it's a white background, removes the padding.
  • changes the links in vf-intro to be the 'correct' buttons.

1.0.23

  • small change to cards on homepage

1.0.18

  • dependency bump

1.0.17

  • dependency bump

1.0.16

  • dependency bump

1.0.13

  • dependency bump
  • adds roamap and consultation docs

1.0.12

  • design token documenation now lives in the component libary

1.0.7

  • adds updates blog

1.0.6

  • begin to make more pattern/boilerplate guidance
  • minor templating updates

1.0.5

  • dependency bump

1.0.4

  • uses vf-favicon
  • adds meta attributes

1.0.3

  • run vf-component-assets:everything on local dev
  • remove reference to removed /css/app.css

1.0.2

  • Add 404
  • Fix component CSS generation

1.0.1

  • Also generate per-component CSS with vf-css:generate-component-css

1.0.0

  • Initial release to be used with vf-core 2.2.0

Assets



File system location: components/vf-box

Find an issue on this page? Propose a change or discuss it.