Card github location npm version

This component version is ready to be used but is still in active development.

The vf-card component is an element that is used to provide a summary of content on a single subject which can link to a larger resource or page.

Variants


A Bordered Card Heading

With sub–heading

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 (exampe), 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"
}
 %}
{% 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"
} %}
                
React syntax (pre-alpha)

import { VfCard } from "@visual-framework/vf-card/vf-card.react.js";
<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">


  <div class="vf-card__content | vf-stack vf-stack--400">
    <h3 class="vf-card__heading">A Bordered Card Heading</h3>
    <p class="vf-card__subheading">With sub–heading</p>

  </div>
</article>
              
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 (exampe), 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_href": "JavaScript:Void(0);",
  "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?",
  "variant": "bordered",
  "newTheme": "primary"
}
 %}
{% 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_href": "JavaScript:Void(0);",
  "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?",
  "variant": "bordered",
  "newTheme": "primary"
} %}
                
React syntax (pre-alpha)

import { VfCard } from "@visual-framework/vf-card/vf-card.react.js";
<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">


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

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 (exampe), 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_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?"
}
 %}
{% 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_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?"
} %}
                
React syntax (pre-alpha)

import { VfCard } from "@visual-framework/vf-card/vf-card.react.js";
<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">


  <div class="vf-card__content | vf-stack vf-stack--400">
    <h3 class="vf-card__heading">A Bordered Card Heading</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>
              

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 (exampe), 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_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?"
}
 %}
{% 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_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?"
} %}
                
React syntax (pre-alpha)

import { VfCard } from "@visual-framework/vf-card/vf-card.react.js";
<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">


  <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 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 (exampe), 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_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_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";
<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 Bordered Card Heading</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 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 (exampe), 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";
<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

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 (exampe), 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",
  "variant": "bordered",
  "newTheme": "primary",
  "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",
  "variant": "bordered",
  "newTheme": "primary",
  "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";
<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">
    <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>
              

A Striped Card Heading

With sub–heading

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 (exampe), 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"
}
 %}
{% 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"
} %}
                
React syntax (pre-alpha)

import { VfCard } from "@visual-framework/vf-card/vf-card.react.js";
<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">


  <div class="vf-card__content | vf-stack vf-stack--400">
    <h3 class="vf-card__heading">A Striped Card Heading</h3>
    <p class="vf-card__subheading">With sub–heading</p>

  </div>
</article>
              
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 (exampe), 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_href": "JavaScript:Void(0);",
  "card_subheading": "With sub–heading",
  "variant": "striped",
  "newTheme": "primary"
}
 %}
{% 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_href": "JavaScript:Void(0);",
  "card_subheading": "With sub–heading",
  "variant": "striped",
  "newTheme": "primary"
} %}
                
React syntax (pre-alpha)

import { VfCard } from "@visual-framework/vf-card/vf-card.react.js";
<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">


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

  </div>
</article>
              

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 (exampe), 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_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?"
}
 %}
{% 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_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?"
} %}
                
React syntax (pre-alpha)

import { VfCard } from "@visual-framework/vf-card/vf-card.react.js";
<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">


  <div class="vf-card__content | vf-stack vf-stack--400">
    <h3 class="vf-card__heading">A Striped Card Heading</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>
              
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 (exampe), 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",
  "variant": "striped",
  "newTheme": "primary",
  "card_href": "JavaScript:Void(0);",
  "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?"
}
 %}
{% 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",
  "variant": "striped",
  "newTheme": "primary",
  "card_href": "JavaScript:Void(0);",
  "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?"
} %}
                
React syntax (pre-alpha)

import { VfCard } from "@visual-framework/vf-card/vf-card.react.js";
<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">


  <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__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 (exampe), 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_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_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";
<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 Striped Card Heading</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 (exampe), 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";
<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>
              

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).

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
apect 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 &#x7B;&#x25;&#x20; render &#x20;&#x25;&#x7D; api using the variable card_custom_aspect_ratio.

--vf-card__image--aspect-ratio: 16 / 9;
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.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.