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

2.4.0

  • Deprecates vf-box. Most use cases should now use the vf-card component. A new layout-specific vf-box may be made in the future.

2.3.3

  • Repeat release of 2.3.2 for dependency linkage.

2.3.2

  • Don't set vf-box typography colours via revised set-type function.
  • https://github.com/visual-framework/vf-core/issues/1619

2.3.1

  • changes any set- style functions to cleaner version

2.3.0

  • updates font size for title/heading
  • makes sure the text is black inside the --easy variant.

2.2.0

  • adds internal padding option back

2.1.0

  • updates spacing design tokens
  • requires v2.0.0 of the vf-design-tokens package or newer

2.0.2

  • fixes bug with -link variant by adding position relative to vf-box
  • adds | safe to vf-box__text variable so that HTML can be parsed through

2.0.1

  • margin reset on .vf-box :last-child now has more specificity as .vf-box > :last-child

2.0.0

  • removed bottom margin from component. You should now make use of vf-stack in a parent element to create vertical spacing between multiple components
  • made the vf-box__title the link rather than the whole component, using ::after pseudo element so the whole of vf-box is clickable
  • added some more examples (easy primay with link, normal primary with link, normal primary with link with text link)
  • removed 'default' component .yml data
  • removed box from .yml and .njk for setting context as it was an additional step
  • adds variant and theme options to replace vf-box__modifier (vf-box__modifier will be removed in v3,0)
  • removes previously deprecated variants vf-box--inlay and vf-box--factoid

1.1.1

  • fixes issue with links in vf-box__text being visited and purple

1.1.0

  • makes theme variant naming and decisions consistent

1.0.3

  • handle a elments inside the text in old WP posts

1.0.2 (2020-03-20)

  • Flattens Nunjucks template variables for more portability https://github.com/visual-framework/vf-core/pull/805

1.0.1

  • Removes --medium variants
  • Introduces --very-easy variant
  • Pulls all design variants back one
  • Deprecates vf-box--inlay and vf-box--factoid
  • Introduces component–level theming variants

1.0.0 (2019-12-17)

  • Initial stable release

Assets


File system location: components/vf-box

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