Summary component

About

Summaries in the form of text, headlines and often imagery for a list of like content, including: articles, jobs, news and people profiles.

Usage

Publications summary

The vf-summary--publication can be nested inside a vf-box where it takes the vf-box colours.

If the 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> - <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 nunjucks and yaml, summary__image_alt: decorative. This will make sure the image alt text is empty (alt="") and add role="presentation" to the img element.

Profile summary

The vf-summary--profile variant has been deprecated. Please use the vf-profile component.

Install

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

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-summary/index.scss";

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

Help

• Read the Visual Framework troubleshooting
• Open a ticket
• Chat on Slack