Card block

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

github location npm version



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;

Variants

Image alt text

A Bordered Card Heading

With sub–heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "card_heading": "A Bordered Card Heading",
  "card_subheading": "With sub–heading",
  "variant": "bordered",
  "newTheme": "primary",
  "card_href": "JavaScript:Void(0);",
  "card_image": "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg",
  "card_text": "Lorem ipsum dolor sit amet, consectetur <a href=\"JavaScript:Void(0);\" class=\"vf-card__link\">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?",
  "card_image__alt": "Image alt text"
}
 %}
{% include "../path_to/vf-card/vf-card.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-card', {
  "component-type": "block",
  "card_heading": "A Bordered Card Heading",
  "card_subheading": "With sub–heading",
  "variant": "bordered",
  "newTheme": "primary",
  "card_href": "JavaScript:Void(0);",
  "card_image": "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg",
  "card_text": "Lorem ipsum dolor sit amet, consectetur <a href=\"JavaScript:Void(0);\" class=\"vf-card__link\">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?",
  "card_image__alt": "Image alt text"
} %}
                
React syntax (pre-alpha)

import { VfCard } from "@visual-framework/vf-card/vf-card.react.js";
// or
import { VfCard } from "@visual-framework/vf-card/vf-card.jsx";
<VfCard parameter="value" />
                

For individual parameter names and options, see the Nunjucks syntax example. Also follow the React setup guide. Note: React support is in its early pre-alpha stage and not all component are yet supported.

HTML
<article class="vf-card vf-card--brand vf-card--bordered">

  <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg" alt="Image alt text" class="vf-card__image" loading="lazy">
  <div class="vf-card__content | vf-stack vf-stack--400">
    <h3 class="vf-card__heading"><a class="vf-card__link" href="JavaScript:Void(0);">A Bordered Card Heading <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path>
        </svg>
      </a></h3>
    <p class="vf-card__subheading">With sub–heading</p>
    <p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" class="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</p>
  </div>
</article>
              
Image alt text

A Striped Card Heading

With sub–heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "card_heading": "A Striped Card Heading",
  "card_subheading": "With sub–heading",
  "variant": "striped",
  "newTheme": "primary",
  "card_href": "JavaScript:Void(0);",
  "card_image": "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg",
  "card_text": "Lorem ipsum dolor sit amet, consectetur <a href=\"JavaScript:Void(0);\" class=\"vf-card__link\">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?",
  "card_image__alt": "Image alt text"
}
 %}
{% include "../path_to/vf-card/vf-card.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-card', {
  "component-type": "block",
  "card_heading": "A Striped Card Heading",
  "card_subheading": "With sub–heading",
  "variant": "striped",
  "newTheme": "primary",
  "card_href": "JavaScript:Void(0);",
  "card_image": "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg",
  "card_text": "Lorem ipsum dolor sit amet, consectetur <a href=\"JavaScript:Void(0);\" class=\"vf-card__link\">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?",
  "card_image__alt": "Image alt text"
} %}
                
React syntax (pre-alpha)

import { VfCard } from "@visual-framework/vf-card/vf-card.react.js";
// or
import { VfCard } from "@visual-framework/vf-card/vf-card.jsx";
<VfCard parameter="value" />
                

For individual parameter names and options, see the Nunjucks syntax example. Also follow the React setup guide. Note: React support is in its early pre-alpha stage and not all component are yet supported.

HTML
<article class="vf-card vf-card--brand vf-card--striped">

  <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg" alt="Image alt text" class="vf-card__image" loading="lazy">
  <div class="vf-card__content | vf-stack vf-stack--400">
    <h3 class="vf-card__heading"><a class="vf-card__link" href="JavaScript:Void(0);">A Striped Card Heading <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path>
        </svg>
      </a></h3>
    <p class="vf-card__subheading">With sub–heading</p>
    <p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" class="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</p>
  </div>
</article>
              

Examples

A Bordered Card Heading as an example

With sub–heading

Image alt text

A Bordered Card Heading

With sub–heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?

A Bordered Card Heading

With sub–heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?

Image alt text

A Bordered Card Heading

With sub–heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?

Image alt text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?

A Striped Card Heading

With sub–heading

Image alt text

A Striped Card Heading

With sub–heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?

Image alt text

A Striped Card Heading

With sub–heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?

Installation info

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

Changelog

Changelog

1.1.13

  • Documentation updates
  • New release

1.1.12

  • Update milestones and roadmap.

1.1.11

  • Add ELIXIR banner to example EMBL-EBI page.
  • https://stable.visual-framework.dev/patterns/boilerplate-generic-embl-ebi/
  • https://github.com/visual-framework/vf-core/pull/1615

1.1.7

  • Fixed issue of overlapping menu on VF components site
  • https://github.com/visual-framework/vf-core/issues/1518

1.1.6

  • dependency bump

1.1.2

  • Implements updated vf-search markup.
  • Changes a few pages on how it works with nunjucks and markdown.

1.1.0

  • updates Design Tokens homepage.
  • adds neutral colour tokens
  • adds 'status banners' for components in the documentation page.
  • Adds the form options as their own set of components in the list.
  • https://github.com/visual-framework/vf-core/pull/1390/files
  • Updates to use 11ty 0.12.1
  • https://github.com/visual-framework/vf-core/pull/1435

1.0.24

  • changes the vf-intro so it's a white background, removes the padding.
  • changes the links in vf-intro to be the 'correct' buttons.

1.0.23

  • small change to cards on homepage

1.0.18

  • dependency bump

1.0.17

  • dependency bump

1.0.16

  • dependency bump

1.0.13

  • dependency bump
  • adds roamap and consultation docs

1.0.12

  • design token documenation now lives in the component libary

1.0.7

  • adds updates blog

1.0.6

  • begin to make more pattern/boilerplate guidance
  • minor templating updates

1.0.5

  • dependency bump

1.0.4

  • uses vf-favicon
  • adds meta attributes

1.0.3

  • run vf-component-assets:everything on local dev
  • remove reference to removed /css/app.css

1.0.2

  • Add 404
  • Fix component CSS generation

1.0.1

  • Also generate per-component CSS with vf-css:generate-component-css

1.0.0

  • Initial release to be used with vf-core 2.2.0

Assets



File system location: components/vf-card

Find an issue on this page? Propose a change or discuss it.