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.
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.
vf-figure--align: required to align the component depending on where it is needed. The class also changes the
display: tableso that we can confine the
figcaptioninside of the
figureHTML element without any overflow.
vf-figure--align-inline-start: This class adds
vf-figure--align-inline-end: This class adds
vf-figure--align-inline-centered: This class adds
margin: 0 auto;.
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.
vf_figure__align_inline_start: if set to true (
vf_figure__align_inline_start: true) it will apply the class selectors
vf_figure__align_inline_end: if set to true (
vf_figure__align_inline_end: true) it will apply the class selectors
vf_figure__align_inline_centered: if set to true (
vf_figure__align_inline_centered: true) it will apply the class selectors
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
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.