@visual-framework/vf-box

    2.4.0 • Public • Published

    Box component

    npm version

    About

    This component has been deprecated. Please use the vf-card component. A new layout-specific vf-box may be made in the future.

    Usage

    The vf-box layout container can add spacing, a background color, a border, and text colours to an area of content.

    A vf-box can be used in all layout components (vf-grid, vf-stack, embl-grid) and also inside of vf-content.

    For now vf-box is only designed to accept a heading and text (both have classes). The text node – vf-box__text can also accept a link which will inherit the text colour.

    Is Link option

    If you require the vf-box to link to a page you can do this by:

    Using .njk and .yml for content:

    • if you are using .njk you only need to add a box_href to the data.

    Authoring in HTML:

    • adding vf-box--is-link to the classes being used <div class="vf-box vf-box--is-link">...</div>.
    • adding the link inside of the title <h3 class="vf-box__title"><a href="#" class="vf-box__link">A title</a></h3>.

    Design Variants

    There are currently two Design variants available. To add the appropriate level of design you can add a component–level class:

    • vf-box--easy
    • vf-box--normal

    Themes

    note: you need a design variant set at the page (todo), container (todo), or component level to make use of the themes available to avoid any potential conflicts with code or unexpected results

    The vf-box component allows for global and component–level theming so that it is customisable to your needs.

    To make use of the component–level theming you will need to add a theme classname to the component.

    The theme classnames available are:

    • vf-box-theme--primary
    • vf-box-theme--secondary
    • vf-box-theme--tertiary
    • vf-box-theme--quaternary
    • vf-box-theme--quinary

    Accessibility

    Do not use the themes vf-box-theme--qauternary or vf-box-theme--quinary with the design variant vf-box--easy as they do not conform to WCAG colour contrast ratio specifications.

    Install

    This component is distributed with npm. After installing npm, you can install the vf-box with this command.

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

    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-box/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-box

    DownloadsWeekly Downloads

    757

    Version

    2.4.0

    License

    Apache 2.0

    Unpacked Size

    40.2 kB

    Total Files

    12

    Last publish

    Collaborators

    • khawkins98