Card component

About

A multi-column container for vf-card.

Usage

Section header

• Use one card container for all cards that belong to the same section.
• Always include a vf-section header to the card container. This ensures that your page will not have skipped headings between the cards and the preceding content outside the container.
• If you do not want the section header to be visible, you can hide it by passing hidden as true (hidden: true) inside the container_section__header section in card container config.yml setting. This value (true) applies the class vf-u-sr-only (for screen reader only) to the section header and hides it. See the example with the hidden header below.
• Hiding the heading can only be applied to a section header that is not a link (i.e. the default variant). Section headers that act as links should not be hidden because when users navigate with the keyboard the header is selected as a link but it will not be visible to them.

Card container background

• Use a white background for both striped (green) cards and bordered (white) cards.
• vf-u-background-color-ui--grey--light (which is called 'Gray lightest' in the equivalent WP block) may be used as an alternative background of bordered (white) cards, especially when the section header is hidden and there is no text between the section header and the cards.

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.

Accessibility

This component targets WCAG 2.1 AA accessibility.

Pages that use this component

The Meet our people page at the EMBL-EBI site includes examples of the card container that pass the basic contrast tests for accessibility.

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

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