Visual Framework
Visual Framework
Good defaults and technical flexibility for life science websites
deprecated It is strongly recommended that this not to be used.
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.
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="https://orcid.org" target="_blank" class="vf-explainer__link">learn more</a>
</div>
This is a draft component, it is not yet functional. Background on the implementation, goals and work plan can be found in the issue.
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
vf-explainer component. vf-details component needs to be used instead. Tracking issue
File system location: components/vf-explainer
Find an issue on this page? Propose a change or discuss it.