Card github location npm version

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.

Do Not have more than one variant of the vf-card in a container.

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

Variants


Image alt text

A Default Card Title

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

Nunjucks syntax
{% render '@vf-card', {
  "component-type": "block",
  "card_title": "A Default Card Title",
  "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 adipisicing elit. 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 paramater="value" />
                

For indivdual paramater 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">

  <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__title">A Default Card Title</h3>

    <p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</p>
  </div>
</article>
              
Image alt text

A Default With Link Card Title

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

Nunjucks syntax
{% render '@vf-card', {
  "component-type": "block",
  "card_title": "A Default With Link Card Title",
  "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 adipisicing elit. 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 paramater="value" />
                

For indivdual paramater 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">

  <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__title"><a class="vf-card__link" href="JavaScript:Void(0);">A Default With Link Card Title</a></h3>

    <p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</p>
  </div>
</article>
              
Image alt text

A Bordered Card Title

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

Nunjucks syntax
{% render '@vf-card', {
  "component-type": "block",
  "card_title": "A Bordered Card Title",
  "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 adipisicing elit. 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 paramater="value" />
                

For indivdual paramater 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--primary 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__title">A Bordered Card Title</h3>

    <p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</p>
  </div>
</article>
              
Image alt text

A Bordered With Link Card Title

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

Nunjucks syntax
{% render '@vf-card', {
  "component-type": "block",
  "card_title": "A Bordered With Link Card Title",
  "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 adipisicing elit. 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 paramater="value" />
                

For indivdual paramater 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--primary 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__title"><a class="vf-card__link" href="JavaScript:Void(0);">A Bordered With Link Card Title</a></h3>

    <p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</p>
  </div>
</article>
              
Image alt text

A Striped Card Title

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

Nunjucks syntax
{% render '@vf-card', {
  "component-type": "block",
  "card_title": "A Striped Card Title",
  "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 adipisicing elit. 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 paramater="value" />
                

For indivdual paramater 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--primary 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__title">A Striped Card Title</h3>

    <p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</p>
  </div>
</article>
              
Nunjucks syntax
{% render '@vf-card', {
  "component-type": "block",
  "card_title": "A Striped Card Title with Link",
  "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, <a class=\"vf-card__link\" href=\"JavaScript:Void(0);\">consectetur</a> adipisicing elit. 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 paramater="value" />
                

For indivdual paramater 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--primary 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__title"><a class="vf-card__link" href="JavaScript:Void(0);">A Striped Card Title with Link</a></h3>

    <p class="vf-card__text">Lorem ipsum dolor sit amet, <a class="vf-card__link" href="JavaScript:Void(0);">consectetur</a> adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</p>
  </div>
</article>
              

Assets



File system location: components/vf-card

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