Box Component

npm version

About

The vf-box container is an element to be used when ...

Usage

A vf-box can be used in all grid systems 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.

Options

Is Link

If you require the vf-box to link to a page you can do this by:

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:

Deprecated Variants

Since v1.1.0 the following components are considered depracted and should not be used in new projects:

To update your existing usage of these variants to use the component–level theming you can swap:

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.

Install

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.

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

Make sure you import Sass requirements along with the modules.

File system location: components/vf-box

Variants

Variant: Default live block

Nunjucks demo

{% render '@vf-box--default', {
  "component-type": "block",
  "box": {
    "box_href": "JavaScript:Void(0);",
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box."
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<a href="JavaScript:Void(0);" class="vf-box vf-box--is-link">
  <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>
</a>

Assets

Variant: Is A Link live block

Nunjucks demo

{% render '@vf-box--is-a-link', {
  "component-type": "block",
  "box": {
    "box_href": "JavaScript:Void(0);",
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--is-link"
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<a href="JavaScript:Void(0);" class="vf-box vf-box--is-link vf-box--is-link">
  <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>
</a>

Assets

Variant: Very Easy live block

Nunjucks demo

{% render '@vf-box--very-easy', {
  "component-type": "block",
  "box": {
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--very-easy"
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<div class="vf-box vf-box--very-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>

Assets

Variant: Easy live block

Nunjucks demo

{% render '@vf-box--easy', {
  "component-type": "block",
  "box": {
    "box_href": "JavaScript:Void(0);",
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--easy"
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<a href="JavaScript:Void(0);" class="vf-box vf-box--is-link 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>
</a>

Assets

Variant: Easy Primary live block

Nunjucks demo

{% render '@vf-box--easy-(primary)', {
  "component-type": "block",
  "box": {
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--easy vf-box-theme--primary"
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<div class="vf-box vf-box--easy vf-box-theme--primary">
  <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>

Assets

Variant: Easy Secondary live block

Nunjucks demo

{% render '@vf-box--easy-(secondary)', {
  "component-type": "block",
  "box": {
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--easy vf-box-theme--secondary"
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<div class="vf-box vf-box--easy vf-box-theme--secondary">
  <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>

Assets

Variant: Easy Tertiary live block

Nunjucks demo

{% render '@vf-box--easy-(tertiary)', {
  "component-type": "block",
  "box": {
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--easy vf-box-theme--tertiary"
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<div class="vf-box vf-box--easy vf-box-theme--tertiary">
  <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>

Assets

Variant: Easy Quaternary live block

Nunjucks demo

{% render '@vf-box--easy-(quaternary)', {
  "component-type": "block",
  "box": {
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--easy vf-box-theme--quaternary"
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<div class="vf-box vf-box--easy vf-box-theme--quaternary">
  <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>

Assets

Variant: Easy Quinary live block

Nunjucks demo

{% render '@vf-box--easy-(quinary)', {
  "component-type": "block",
  "box": {
    "box_href": "JavaScript:Void(0);",
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--easy vf-box-theme--quinary"
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<a href="JavaScript:Void(0);" class="vf-box vf-box--is-link vf-box--easy vf-box-theme--quinary">
  <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>
</a>

Assets

Variant: Normal live block

Nunjucks demo

{% render '@vf-box--normal', {
  "component-type": "block",
  "box": {
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--normal"
  }
} %}

Sample output

Did You Know?

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

Sample output as 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>

Assets

Variant: Normal Primary live block

Nunjucks demo

{% render '@vf-box--normal-(primary)', {
  "component-type": "block",
  "box": {
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--normal vf-box-theme--primary"
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<div class="vf-box vf-box--normal vf-box-theme--primary">
  <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>

Assets

Variant: Normal Secondary live block

Nunjucks demo

{% render '@vf-box--normal-(secondary)', {
  "component-type": "block",
  "box": {
    "box_href": "JavaScript:Void(0);",
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--normal vf-box-theme--secondary"
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<a href="JavaScript:Void(0);" class="vf-box vf-box--is-link vf-box--normal vf-box-theme--secondary">
  <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>
</a>

Assets

Variant: Normal Tertiary live block

Nunjucks demo

{% render '@vf-box--normal-(tertiary)', {
  "component-type": "block",
  "box": {
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--normal vf-box-theme--tertiary"
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<div class="vf-box vf-box--normal vf-box-theme--tertiary">
  <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>

Assets

Variant: Normal Quaternary live block

Nunjucks demo

{% render '@vf-box--normal-(quaternary)', {
  "component-type": "block",
  "box": {
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--normal vf-box-theme--quaternary"
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<div class="vf-box vf-box--normal vf-box-theme--quaternary">
  <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>

Assets

Variant: Normal Quinary live block

Nunjucks demo

{% render '@vf-box--normal-(quinary)', {
  "component-type": "block",
  "box": {
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--normal vf-box-theme--quinary"
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<div class="vf-box vf-box--normal vf-box-theme--quinary">
  <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>

Assets

Variant: Hard live block

Nunjucks demo

{% render '@vf-box--hard', {
  "component-type": "block",
  "box": {
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--hard"
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<div class="vf-box vf-box--hard">
  <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>

Assets

Variant: Extreme live block

Nunjucks demo

{% render '@vf-box--extreme', {
  "component-type": "block",
  "box": {
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--extreme"
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<div class="vf-box vf-box--extreme">
  <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>

Assets

Variant: Intense live block

Nunjucks demo

{% render '@vf-box--intense', {
  "component-type": "block",
  "box": {
    "box_heading": "Did You Know?",
    "box_text": "This is some more content that would be in the box.",
    "box_modifier": "vf-box--intense"
  }
} %}

Sample output

Did You Know?

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

Sample output as HTML

<div class="vf-box vf-box--intense">
  <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>

Assets

Variant: Factoid live block

Nunjucks demo

{% render '@vf-box--factoid', {
  "component-type": "block",
  "box": {
    "box_heading": "Did You Know?",
    "box_text": "Invasive cancer is the leading cause of death in the developed world and the second leading in the developing world.",
    "box_modifier": "vf-box--factoid",
    "deprecated_text": "vf-box--factoid is now deprecated, please use `vf-box--theme--primary`"
  }
} %}

Sample output

Did You Know?

Invasive cancer is the leading cause of death in the developed world and the second leading in the developing world.

Sample output as HTML

<!-- vf-box--factoid is now deprecated, please use `vf-box--theme--primary` -->
<div class="vf-box vf-box--factoid">
  <h3 class="vf-box__heading">Did You Know?</h3>
  <p class="vf-box__text">Invasive cancer is the leading cause of death in the developed world and the second leading in the developing world.</p>
</div>

Assets

Variant: Inlay live block

Nunjucks demo

{% render '@vf-box--inlay', {
  "component-type": "block",
  "box": {
    "box_heading": "About the Häring Group",
    "box_text": "The Sharpe group brings together an interdisciplinary team of biologists, physicists and computer scientists to build a multi-scale computer simulation of a paradigm of organogenesis – mammalian limb development.",
    "box_modifier": "vf-box--inlay",
    "deprecated_text": "vf-box--inlay is now deprecated, please use `vf-box--theme--quaternary`"
  }
} %}

Sample output

About the Häring Group

The Sharpe group brings together an interdisciplinary team of biologists, physicists and computer scientists to build a multi-scale computer simulation of a paradigm of organogenesis – mammalian limb development.

Sample output as HTML

<!-- vf-box--inlay is now deprecated, please use `vf-box--theme--quaternary` -->
<div class="vf-box vf-box--inlay">
  <h3 class="vf-box__heading">About the Häring Group</h3>
  <p class="vf-box__text">The Sharpe group brings together an interdisciplinary team of biologists, physicists and computer scientists to build a multi-scale computer simulation of a paradigm of organogenesis – mammalian limb development.</p>
</div>

Assets

All components in this design system

This page is part of the components section.