Summaries in the form of text, headlines and often imagery for a range of types of content, including: articles, jobs, news and people profiles.
vf-summary--profile component has been deprecated. Please use the
vf-summary--publication can be nested inside a vf-box where it takes the vf-box colours.
vf-summary__author list is truncated to a certain number of authors you will need to add vf-u-text--et-al to the
<p class="vf-summary__author | vf-u-text--et-al"> - for it to add et al to the end of the list.
At times you might want to use an image for purely decorative reasons. For example an abstract graphic to go alongside the text then you should label, if using nunjcuks and yaml,
summary__image_alt: decorative. This will make sure the image
alt text is empty (
alt="") and add
role="presentation" to the
This component is distributed with npm. After installing npm, you can install the
vf-summary with this command.
$ yarn add --dev @visual-framework/vf-summary
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.
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the