@visual-framework/vf-card-container

    3.2.1 • Public • Published

    Card component

    npm version

    About

    A multi-column container for vf-card.

    Usage

    Columns

    The containier defaults to three columns (the recommended number of image-based cards per row). However if text-only cards are being used, a 4-column variant is supported cards_per_row: 4 which appends CSS class vf-card-container__col-4.

    CSS Custom Properties

    The vf-card component allows for a CSS custom property to be set to define the aspect-ratio of the card image. This can be set per card, but with the vf-card-container you should aim for consistency across the vf-cards it is displaying. Therefore we can pass the aspect-ratio value from this component and it will cascade through the CSS onto the cards. This is encapsulated to this container, which allows you to set different aspect-ratio values for different containers as needed.

    To set the aspect-ratio you will need to set the card_custom_aspect_ratio key/value pair in the .yml or the {%  render  %} api of the `vf-card-container as needed.

    Install

    This repository is distributed with npm. After installing npm, you can install vf-card-container with this command.

    $ yarn add --dev @visual-framework/vf-card-container
    

    Sass/CSS

    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-card-container/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-card-container

    DownloadsWeekly Downloads

    679

    Version

    3.2.1

    License

    Apache 2.0

    Unpacked Size

    32.7 kB

    Total Files

    13

    Last publish

    Collaborators

    • khawkins98