# 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 adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
      card_image__alt: Image alt text
      react: <VfCard
              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_image__alt="Image alt text"
              card_heading="A Bordered Card Heading"
              card_subheading="With sub–heading"
              card_text={<>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
              variant="bordered"
              newTheme="primary"
              card_href="JavaScript:Void(0);"
            />
  - 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 adipisicing elit. 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 adipisicing elit. 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 adipisicing elit. 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 adipisicing elit. 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 adipisicing elit. 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 adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
      card_image__alt: Image alt text
      react: <VfCard
              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_image__alt="Image alt text"
              card_heading="A Striped Card Heading"
              card_href="JavaScript:Void(0);"
              card_subheading="With sub–heading"
              card_text={<>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</>}
              variant="striped"
              newTheme="primary"
            />
  - 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 adipisicing elit. 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 adipisicing elit. 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 adipisicing elit. 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, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
      card_image__alt: Image alt text
