Card component

About

Use the vf-card component to feature categories of content.

Usage

There are currently two types of card component that can be used for your projects. Each card component requires the additional modifier class to be added into either your .yml file or directly into the HTML.

The cards are available in two styled varieties: bordered and striped. To avoid visual confusion it is recommended to use one variant in a container.

As the striped variant makes use of the brand colour it is recommended not to use this when displayed in a container that has a background colour.

A striped card must always have a heading (vf-card__heading).

Should I use a Card or Summary or Hero?

The vf-card is one of the most popular ways to feature content, however it is not always the best way.

As a general rule:

• use vf-card to feature a range of different categories (to display event types)
• use vf-summary for a list of the same type of content (a list of upcoming events)
• use vf-hero to indicate a singular theme of content for a page

Layout

The vf-card should look like it's around the same size as card from an average set of playing cards.

Content

The vf-card can take a variety optional of content:

| Content type | .njk / .yml variable | CSS class | Description | | ------------ | -------------------------- | --------------------- | ----------- | | image | card_image | vf-card__image | | | alt text | card_image__alt | | | | aspect ratio | card_custom_aspect_ratio | | | | heading | card_heading | vf-card__heading | | | link | card_href | vf-card__link | | | subheading | card_subheading | vf-card__subheading | | | text | card_text | vf-card__text | |

CSS Custom Properties

For browsers that support the CSS aspect-ratio property we provide the option to stipulate the images aspect ratio in a card using a CSS custom property. By default, if no CSS custom property is set, the aspect ratio is 8 / 4. This can be set on the individual cards using the nunjucks 'key' in the .yml or with the {#{% render %}#} api using the variable card_custom_aspect_ratio.

--vf-card__image--aspect-ratio: 16 / 9;

Install

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

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

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