2.7.1 • Public • Published

Card component

npm version


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


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


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


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;


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

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


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




Package Sidebar


npm i @visual-framework/vf-card

Weekly Downloads





Apache 2.0

Unpacked Size

190 kB

Total Files


Last publish


  • bhushan-ebi
  • pacope92
  • ebiwebdev
  • sandykadam
  • khawkins98