# The title shown on the component page
title: Card Container
# Label shown on index pages
label: Card Container
status: alpha
preview: '@preview--nogrid'
collated: true
# The template used from /components/_previews
#
# Per-variant options
# variants:
  # - name: default
  #   hidden: true
context:
  component-type: container

variants:
  - name: default
    context:
      modifier: vf-u-background-color-ui--white vf-u-fullbleed
      cards_aspect_ratio: 16 / 9
      cards_per_row: 3
      container_section__header:
        section_title: Missions
        href: "JavaScript:Void(0);"
        vf_section__content:
          - To promote molecular biology across Europe
          - To create a centre of excellence for Europe's leading young molecular biologists
      vf_cards:
        -
          variant: bordered
          newTheme: primary
          card_title: One card
          card_href: "JavaScript:Void(0);"
          card_image: ../../assets/vf-card/assets/vf-card-example.png
          card_text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos? Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
        -
          variant: bordered
          newTheme: primary
          card_title: A card here
          card_href: "JavaScript:Void(0);"
          card_image: ../../assets/vf-card/assets/vf-card-example.png
          card_text: Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        -
          variant: bordered
          newTheme: primary
          card_title: Another card
          card_href: "JavaScript:Void(0);"
          card_image: ../../assets/vf-card/assets/vf-card-example.png
          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: section header hidden
    context:
      isExample: true
      variant: default
      theme: primary
      modifier: vf-u-background-color-ui--white vf-u-fullbleed
      cards_aspect_ratio: 16 / 9
      cards_per_row: 3
      container_section__header:
        hidden: true
        section_title: Missions
        href: "JavaScript:Void(0);"
        vf_section__content:
          - To promote molecular biology across Europe
          - To create a centre of excellence for Europe's leading young molecular biologists
      vf_cards:
        -
          variant: striped
          newTheme: primary
          card_title: One card
          card_href: "JavaScript:Void(0);"
          card_image: ../../assets/vf-card/assets/vf-card-example.png
          card_text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos? Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
        -
          variant: striped
          newTheme: primary
          card_title: A card here
          card_href: "JavaScript:Void(0);"
          card_image: ../../assets/vf-card/assets/vf-card-example.png
          card_text: Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        -
          variant: striped
          newTheme: primary
          card_title: Another card
          card_href: "JavaScript:Void(0);"
          card_image: ../../assets/vf-card/assets/vf-card-example.png
          card_text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?