Card component
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