@visual-framework/vf-summary

    1.6.0 • Public • Published

    Summary component

    npm version

    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

    Install

    npm i @visual-framework/vf-summary

    DownloadsWeekly Downloads

    648

    Version

    1.6.0

    License

    Apache 2.0

    Unpacked Size

    171 kB

    Total Files

    42

    Last publish

    Collaborators

    • khawkins98