# The title shown on the component page
title: Card
# Label shown on index pages
label: Card
status: live
# preview: '@preview--nogrid'
# The template used from /components/_previews
#
context:
  component-type: block

  # modifier: vf-u-background-color--grey--lightest
# Per-variant options
variants:
  - name: default
    hidden: true

  # Bordered Variants
  # -----------------
  - name: Bordered
    context:
      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
  - name: Bordered Headings
    context:
      isExample: true
      card_heading: A Bordered Card Heading as an example
      card_subheading: With sub–heading
      variant: bordered
      newTheme: primary
  - name: Bordered Headings with Link
    context:
      isExample: true
      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
  - name: Bordered
    context:
      isExample: true
      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?
  - name: Bordered with Link
    context:
      isExample: true
      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?
  - name: Bordered with Image
    context:
      isExample: true
      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
  - name: Bordered with Image and no Heading
    context:
      isExample: true
      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

  # Striped Variants
  # ----------------
  - name: Striped
    context:
      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
  - name: Striped only Headings
    context:
      isExample: true
      card_heading: A Striped Card Heading
      card_subheading: With sub–heading
      variant: striped
      newTheme: primary
  - name: Striped only linked Headings
    context:
      isExample: true
      card_heading: A Striped Card Heading
      card_href: "JavaScript:Void(0);"
      card_subheading: With sub–heading
      variant: striped
      newTheme: primary
  - name: Striped
    context:
      isExample: true
      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?
  - name: Striped with Link
    context:
      isExample: true
      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?
  - name: Striped with Image
    context:
      isExample: true
      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




















  # ----------------------------------------
  # TODO: Remove these when moving to v3.0.0
  # ----------------------------------------

  - name: very-easy
    label: Very Easy
    hidden: true
    context:
      card_title: A Easy Card Title 1
      variant: very-easy
      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
  - name: easy
    label: Easy
    hidden: true
    context:
      card_title: A Easy Card Title 2
      variant: easy
      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
  - name: easy--primary
    label: Easy (primary)
    hidden: true
    context:
      card_title: Easy Card with primary accent
      theme: primary
      variant: easy
      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
  - name: easy--secondary
    label: Easy (secondary)
    hidden: true
    context:
      theme: secondary
      variant: easy
      card_title: A Easy Card with secondary accent
      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
  - name: easy--tertiary
    label: Easy (tertiary)
    hidden: true
    context:
      theme: tertiary
      variant: easy
      card_title: A Easy Card with tertiary accent
      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
  - name: easy--quaternary
    label: Easy (quaternary)
    hidden: true
    context:
      theme: quaternary
      variant: easy
      card_title: A Easy Card with quaternary accent
      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
  - name: normal
    label: Normal
    hidden: true
    context:
      card_title: A Normal Card
      variant: normal
      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
  - name: normal--primary
    label: Normal (primary)
    hidden: true
    context:
      card_title: A Normal Card with primary accent
      theme: primary
      variant: normal
      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
  - name: normal--secondary
    label: Normal (secondary)
    hidden: true
    context:
      theme: secondary
      variant: normal
      card_title: A Normal Card with secondary accent
      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
  - name: normal--tertiary
    label: Normal (tertiary)
    hidden: true
    context:
      theme: tertiary
      variant: normal
      card_title: A Normal Card with tertiary accent
      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
  - name: normal--quaternary
    label: Normal (quaternary)
    hidden: true
    context:
      theme: quaternary
      variant: normal
      card_title: A Normal Card with quaternary accent
      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
  - name: normal--primary--with-link
    label: Normal (primary) link
    hidden: true
    context:
      card_title: A Normal Primary Card with Link
      theme: 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