deprecated It is strongly recommended that this not to be used.

Explainer deprecated

This component has been deprecated. Please use the vf-details component. Justification text: This component hasn't been implemented. The basic use case for providing details is supported by vf-details. For highlighting explanations we suggested that the Comms team uses vf-card.

github location npm version


This will likely be similar to "tooltips" or "foldable info tabs".

Conceptual code:

<span aria-describedby="whatis-orcid">ORCID</span>

<div id="whatis-orcid" class="vf-explainer">
 <dfn class="vf-explainer--dfn">ORCID</dfn> is a unique identifier for researchers to distinguish themselves, and make it easier to find specific work;
 <a href="" target="_blank" class="vf-explainer__link">learn more</a>

This is a draft component, it is not yet functional. Background on the implementation, goals and work plan can be found in the issue.



Installation info

This repository is distributed with npm. After installing npm, you can install vf-explainer with this command.

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


The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

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

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter




  • Deprecated vf-explainer component. vf-details component needs to be used instead. Tracking issue


  • initial version


File system location: components/vf-explainer

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