Box github location npm version

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

Variants


Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "variant": "easy"
}
 %}
{% include "../path_to/vf-box/vf-box.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-box', {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "variant": "easy"
} %}
                
HTML
<div class="vf-box vf-box--easy">

  <h3 class="vf-box__heading">Did you know?</h3>
  <p class="vf-box__text">This is some more content that would be in the box.</p>
</div>
              

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "primary",
  "variant": "easy"
}
 %}
{% include "../path_to/vf-box/vf-box.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-box', {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "primary",
  "variant": "easy"
} %}
                
HTML
<div class="vf-box vf-box-theme--primary vf-box--easy">

  <h3 class="vf-box__heading">Did you know?</h3>
  <p class="vf-box__text">This is some more content that would be in the box.</p>
</div>
              

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "tertiary",
  "variant": "easy"
}
 %}
{% include "../path_to/vf-box/vf-box.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-box', {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "tertiary",
  "variant": "easy"
} %}
                
HTML
<div class="vf-box vf-box-theme--tertiary vf-box--easy">

  <h3 class="vf-box__heading">Did you know?</h3>
  <p class="vf-box__text">This is some more content that would be in the box.</p>
</div>
              

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "variant": "normal"
}
 %}
{% include "../path_to/vf-box/vf-box.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-box', {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "variant": "normal"
} %}
                
HTML
<div class="vf-box vf-box--normal">

  <h3 class="vf-box__heading">Did you know?</h3>
  <p class="vf-box__text">This is some more content that would be in the box.</p>
</div>
              

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "primary",
  "variant": "normal"
}
 %}
{% include "../path_to/vf-box/vf-box.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-box', {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "primary",
  "variant": "normal"
} %}
                
HTML
<div class="vf-box vf-box-theme--primary vf-box--normal">

  <h3 class="vf-box__heading">Did you know?</h3>
  <p class="vf-box__text">This is some more content that would be in the box.</p>
</div>
              

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "secondary",
  "variant": "normal"
}
 %}
{% include "../path_to/vf-box/vf-box.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-box', {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "secondary",
  "variant": "normal"
} %}
                
HTML
<div class="vf-box vf-box-theme--secondary vf-box--normal">

  <h3 class="vf-box__heading">Did you know?</h3>
  <p class="vf-box__text">This is some more content that would be in the box.</p>
</div>
              

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "tertiary",
  "variant": "normal"
}
 %}
{% include "../path_to/vf-box/vf-box.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-box', {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "tertiary",
  "variant": "normal"
} %}
                
HTML
<div class="vf-box vf-box-theme--tertiary vf-box--normal">

  <h3 class="vf-box__heading">Did you know?</h3>
  <p class="vf-box__text">This is some more content that would be in the box.</p>
</div>
              

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "quaternary",
  "variant": "normal"
}
 %}
{% include "../path_to/vf-box/vf-box.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-box', {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "quaternary",
  "variant": "normal"
} %}
                
HTML
<div class="vf-box vf-box-theme--quaternary vf-box--normal">

  <h3 class="vf-box__heading">Did you know?</h3>
  <p class="vf-box__text">This is some more content that would be in the box.</p>
</div>
              

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "quinary",
  "variant": "normal"
}
 %}
{% include "../path_to/vf-box/vf-box.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-box', {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "quinary",
  "variant": "normal"
} %}
                
HTML
<div class="vf-box vf-box-theme--quinary vf-box--normal">

  <h3 class="vf-box__heading">Did you know?</h3>
  <p class="vf-box__text">This is some more content that would be in the box.</p>
</div>
              

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "variant": "normal",
  "theme": "primary",
  "box_spacing": 400
}
 %}
{% include "../path_to/vf-box/vf-box.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-box', {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "variant": "normal",
  "theme": "primary",
  "box_spacing": 400
} %}
                
HTML
<div class="vf-box vf-box--400 vf-box-theme--primary vf-box--normal">

  <h3 class="vf-box__heading">Did you know?</h3>
  <p class="vf-box__text">This is some more content that would be in the box.</p>
</div>
              

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "variant": "normal",
  "theme": "primary",
  "box_spacing": 600
}
 %}
{% include "../path_to/vf-box/vf-box.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-box', {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "variant": "normal",
  "theme": "primary",
  "box_spacing": 600
} %}
                
HTML
<div class="vf-box vf-box--600 vf-box-theme--primary vf-box--normal">

  <h3 class="vf-box__heading">Did you know?</h3>
  <p class="vf-box__text">This is some more content that would be in the box.</p>
</div>
              

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "variant": "normal",
  "theme": "primary",
  "box_spacing": 800
}
 %}
{% include "../path_to/vf-box/vf-box.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-box', {
  "component-type": "block",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "variant": "normal",
  "theme": "primary",
  "box_spacing": 800
} %}
                
HTML
<div class="vf-box vf-box--800 vf-box-theme--primary vf-box--normal">

  <h3 class="vf-box__heading">Did you know?</h3>
  <p class="vf-box__text">This is some more content that would be in the box.</p>
</div>
              
Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "box_href": "JavaScript:Void(0);",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "primary",
  "variant": "easy"
}
 %}
{% include "../path_to/vf-box/vf-box.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-box', {
  "component-type": "block",
  "box_href": "JavaScript:Void(0);",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "primary",
  "variant": "easy"
} %}
                
HTML
<div class="vf-box vf-box--is-link vf-box-theme--primary vf-box--easy">

  <h3 class="vf-box__heading"><a class="vf-box__link" href="JavaScript:Void(0);">Did you know?</a></h3>
  <p class="vf-box__text">This is some more content that would be in the box.</p>
</div>
              
Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "box_href": "JavaScript:Void(0);",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "primary",
  "variant": "normal"
}
 %}
{% include "../path_to/vf-box/vf-box.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-box', {
  "component-type": "block",
  "box_href": "JavaScript:Void(0);",
  "box_heading": "Did you know?",
  "box_text": "This is some more content that would be in the box.",
  "theme": "primary",
  "variant": "normal"
} %}
                
HTML
<div class="vf-box vf-box--is-link vf-box-theme--primary vf-box--normal">

  <h3 class="vf-box__heading"><a class="vf-box__link" href="JavaScript:Void(0);">Did you know?</a></h3>
  <p class="vf-box__text">This is some more content that would be in the box.</p>
</div>
              
Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "box_href": "JavaScript:Void(0);",
  "box_heading": "Did you know?",
  "box_text": "This is some more <a href=\"https://www.emblg.org\">content with a link</a> that would be in the box.",
  "theme": "primary",
  "variant": "normal"
}
 %}
{% include "../path_to/vf-box/vf-box.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-box', {
  "component-type": "block",
  "box_href": "JavaScript:Void(0);",
  "box_heading": "Did you know?",
  "box_text": "This is some more <a href=\"https://www.emblg.org\">content with a link</a> that would be in the box.",
  "theme": "primary",
  "variant": "normal"
} %}
                
HTML
<div class="vf-box vf-box--is-link vf-box-theme--primary vf-box--normal">

  <h3 class="vf-box__heading"><a class="vf-box__link" href="JavaScript:Void(0);">Did you know?</a></h3>
  <p class="vf-box__text">This is some more <a href="https://www.emblg.org">content with a link</a> that would be in the box.</p>
</div>
              

Usage

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:

Authoring in HTML:

Design Variants

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

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:

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.

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