beta This component version is ready to be used but is still in active development.

Figure element

The vf-figure component can be used to display and caption diagrams, illustrations, photos, etc. This is to be used as a 'single' item of content that if it was removed from the page or have its position moved in the DOM it would not affect the pages other content.

github location npm version

Usage

The vf-figure component can be used within any existing Visual Framework layout component. The size of the vf-figure is dictated by the size of the image rather and responds to the browser viewport if the viewport is smaller. The vf-figure component also has some alignment class selectors available which can float or centre the component in and around the other content on the page.

Class Selectors

  • vf-figure--align: required to align the component depending on where it is needed. The class also changes the display to display: table so that we can confine the figcaption inside of the figure HTML element without any overflow.
  • vf-figure--align-inline-start: This class adds float: left;.
  • vf-figure--align-inline-end: This class adds float: right;.
  • vf-figure--align-inline-centered: This class adds margin: 0 auto;.

Nunjucks Props

To avoid any mistyping, forgetfulness, and to aid in future proofing the component. We are using 'pseudo props' in nunjucks to determine which CSS selectors to use. All props do nothing unless included in your data for the component.

Props available

  • vf_figure__align_inline_start: if set to true (vf_figure__align_inline_start: true) it will apply the class selectors vf-figure--align vf-figure--align-inline-start to vf-figure.
  • vf_figure__align_inline_end: if set to true (vf_figure__align_inline_end: true) it will apply the class selectors vf-figure--align vf-figure--align-inline-end to vf-figure.
  • vf_figure__align_inline_centered: if set to true (vf_figure__align_inline_centered: true) it will apply the class selectors vf-figure--align vf-figure--align-inline-centered to vf-figure.

Variants

Default variant

hello alt text
Version, 1982, Adenovirus with 217 dots
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 (example), 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 = { 
"exampleMultiColumns" : "false",
"component-type" : "element",
"text" : "Version, 1982, Adenovirus with 217 dots",
"alttext" : "hello alt text",
"imageUrl" : "../../assets/vf-figure/assets/figure-example.png",
 }
%}
{% include "../path_to/vf-figure/vf-figure.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-figure', {
  "exampleMultiColumns" : "false",
  "component-type" : "element",
  "text" : "Version, 1982, Adenovirus with 217 dots",
  "alttext" : "hello alt text",
  "imageUrl" : "../../assets/vf-figure/assets/figure-example.png",}
%}
HTML 
<figure class="vf-figure">
  <img class="vf-figure__image" src="../../assets/vf-figure/assets/figure-example.png" alt="hello alt text" loading="lazy">
  <figcaption class="vf-figure__caption">Version, 1982, Adenovirus with 217 dots</figcaption>
</figure>

Align Inline Start variant

hello alt text
Version, 1982, Adenovirus with 217 dots
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 (example), 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 = { 
"exampleMultiColumns" : "false",
"component-type" : "element",
"text" : "Version, 1982, Adenovirus with 217 dots",
"alttext" : "hello alt text",
"imageUrl" : "../../assets/vf-figure/assets/figure-example.png",
"vf_figure__align_inline_start" : true,
 }
%}
{% include "../path_to/vf-figure/vf-figure.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-figure', {
  "exampleMultiColumns" : "false",
  "component-type" : "element",
  "text" : "Version, 1982, Adenovirus with 217 dots",
  "alttext" : "hello alt text",
  "imageUrl" : "../../assets/vf-figure/assets/figure-example.png",
  "vf_figure__align_inline_start" : true,}
%}
HTML 
<figure class="vf-figure vf-figure--align vf-figure--align-inline-start">
  <img class="vf-figure__image" src="../../assets/vf-figure/assets/figure-example.png" alt="hello alt text" loading="lazy">
  <figcaption class="vf-figure__caption">Version, 1982, Adenovirus with 217 dots</figcaption>
</figure>

Align Inline End variant

hello alt text
Version, 1982, Adenovirus with 217 dots
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 (example), 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 = { 
"exampleMultiColumns" : "false",
"component-type" : "element",
"text" : "Version, 1982, Adenovirus with 217 dots",
"alttext" : "hello alt text",
"imageUrl" : "../../assets/vf-figure/assets/figure-example.png",
"vf_figure__align_inline_end" : true,
 }
%}
{% include "../path_to/vf-figure/vf-figure.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-figure', {
  "exampleMultiColumns" : "false",
  "component-type" : "element",
  "text" : "Version, 1982, Adenovirus with 217 dots",
  "alttext" : "hello alt text",
  "imageUrl" : "../../assets/vf-figure/assets/figure-example.png",
  "vf_figure__align_inline_end" : true,}
%}
HTML 
<figure class="vf-figure vf-figure--align vf-figure--align-inline-end">
  <img class="vf-figure__image" src="../../assets/vf-figure/assets/figure-example.png" alt="hello alt text" loading="lazy">
  <figcaption class="vf-figure__caption">Version, 1982, Adenovirus with 217 dots</figcaption>
</figure>

Align Centered variant

hello alt text
Version, 1982, Adenovirus with 217 dots
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 (example), 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 = { 
"exampleMultiColumns" : "false",
"component-type" : "element",
"text" : "Version, 1982, Adenovirus with 217 dots",
"alttext" : "hello alt text",
"imageUrl" : "../../assets/vf-figure/assets/figure-example.png",
"vf_figure__align_centered" : true,
 }
%}
{% include "../path_to/vf-figure/vf-figure.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-figure', {
  "exampleMultiColumns" : "false",
  "component-type" : "element",
  "text" : "Version, 1982, Adenovirus with 217 dots",
  "alttext" : "hello alt text",
  "imageUrl" : "../../assets/vf-figure/assets/figure-example.png",
  "vf_figure__align_centered" : true,}
%}
HTML 
<figure class="vf-figure vf-figure--align vf-figure--align-centered">
  <img class="vf-figure__image" src="../../assets/vf-figure/assets/figure-example.png" alt="hello alt text" loading="lazy">
  <figcaption class="vf-figure__caption">Version, 1982, Adenovirus with 217 dots</figcaption>
</figure>

Examples

Installation info

This component is distributed with npm. After installing npm, you can install the vf-figure with this command.

$ yarn add --dev @visual-framework/vf-figure

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-figure/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.0.1

  • Support passed context.
  • https://github.com/visual-framework/vf-core/issues/1509

2.0.0

  • Removed width: 100% from the .vf-figure__image class.
  • Added display: block to the .vf-figure__image class.
  • Removed CSS for the width when the vf-figure is using floats.

1.3.0

  • adds loading="lazy" to the img element for better performance

1.2.0

  • Changes structure of nunjuck to add the ability to make use of props
  • Changes class selector naming from float to align
  • Adds a align-centered variant
  • Adds --vf-figure__width as a CSS Custom Property that can be overriden
  • Adds some documentation

1.1.0

  • Adds vf-figure--float (-inline-start and -inline-end) variants

1.0.0-beta.2

  • removes the | path from the njk template which made it non-usable outside of Fractal

Assets


File system location: components/vf-figure

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