# The title shown on the component page
title: Hero
# Label shown on index pages
label: Hero
status: live
preview: "@preview--nogrid"
# The template used from /components/_previews
#
# Per-variant options
# variants:
# - name: default
#   hidden: true
context:
  component-type: container
  # Recommended responsive image settings:
  # - mobile: 360x200
  # - desktop: 1920x1080
  # - large/high-res: 2560x1440
  # Example Cloudimage URLs:
  # vf_hero_image_mobile_src: "https://acxngcvroo.cloudimg.io/v7/https://example.org/hero.jpg?width=360&height=200&func=crop"
  # vf_hero_image_src: "https://acxngcvroo.cloudimg.io/v7/https://example.org/hero.jpg?width=1920&height=1080&func=crop"
  # vf_hero_image_large_src: "https://acxngcvroo.cloudimg.io/v7/https://example.org/hero.jpg?width=2560&height=1440&func=crop"
  # vf_hero_image_width: 1920
  # vf_hero_image_height: 1080
  # vf_hero_image_sizes: "(max-width: 767px) 100vw, 1920px"
  # vf_hero_image_fetchpriority: high
  # vf_hero_image_loading: eager



variants:
  - name: default
    context:
      vf_hero_kicker: <a href="JavaScript:Void(0);">VF Hamburg</a> | Structural Biology
      vf_hero_heading: About the Hentze group!
      vf_hero_heading_href: JavaScript:Void(0);
      vf_hero_subheading: an example of some ancillary text
      vf_hero_text:
        - The Hentze group combines biochemical and <a href="JavaScript:Void(0);">systems–level approaches</a> to investigate the connections between <a href="JavaScript:Void(0);">gene expression</a> and <a href="JavaScript:Void(0);">cell metabolism</a>, and their roles in human disease.
      vf_hero_link_text: Learn more
      vf_hero_link_href: JavaScript:Void(0);
      vf_hero_image_size: auto 28.5rem
      angular:
        <vf-hero
        [vf_hero_kicker]="'<a href=JavaScript:Void(0);>VF Hamburg</a> | Structural Biology'"
        [vf_hero_heading]="'About the Hentze group!'"
        [vf_hero_heading_href]="'JavaScript:Void(0);'"
        [vf_hero_subheading]="'an example of some ancillary text'"
        [vf_hero_text]="['The Hentze group combines biochemical and <a href=JavaScript:Void(0);>systems–level approaches</a> to investigate the connections between <a href=JavaScript:Void(0);>gene expression</a> and <a href=JavaScript:Void(0);>cell metabolism</a>, and their roles in human disease.']"
        [vf_hero_link_text]="'Learn more'"
        [vf_hero_link_href]="'JavaScript:Void(0);'"
        [vf_hero_image_size]="'auto 28.5rem'">
        </vf-hero>
      react:
        <VfHero
          id="0"
          vf_hero_kicker="<a href=JavaScript:Void(0);>VF Hamburg</a> | Structural Biology"
          vf_hero_heading="About the Hentze group!"
          vf_hero_heading_href="'JavaScript:Void(0);'"
          vf_hero_subheading="an example of some ancillary text"
          vf_hero_text={["The Hentze group combines biochemical and <a href=#>systems–level approaches</a> to investigate the connections between <a href=#>gene expression</a> and <a href=#>cell metabolism</a>, and their roles in human disease."]}
          vf_hero_link_text="Learn more"
          vf_hero_link_href="'JavaScript:Void(0);'"
          vf_hero_image_size="auto 28.5rem"
        />
  - name: default with optimized responsive image
    label: Default With Optimized and Responsive Image
    context:
      vf_hero_kicker: <a href="JavaScript:Void(0);">VF Hamburg</a> | Structural Biology
      vf_hero_heading: About the Hentze group!
      vf_hero_subheading: an example of some ancillary text
      vf_hero_text:
        - The Hentze group combines biochemical and <a href="JavaScript:Void(0);">systems–level approaches</a> to investigate the connections between <a href="JavaScript:Void(0);">gene expression</a> and <a href="JavaScript:Void(0);">cell metabolism</a>, and their roles in human disease.
      vf_hero_link_text: Learn more
      vf_hero_link_href: JavaScript:Void(0);
      vf_hero_image: url('https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.avif')
      vf_hero_image_size: null
      vf_hero_image_mobile_src: https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.avif?width=360&height=200&func=crop
      vf_hero_image_src: https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.avif?width=1920&height=1080&func=crop
      vf_hero_image_large_src: https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.avif?width=2560&height=1440&func=crop
      vf_hero_image_width: 1920
      vf_hero_image_height: 1080
      vf_hero_image_sizes: '(max-width: 767px) 100vw, 1920px'
      vf_hero_image_fetchpriority: high
      vf_hero_image_loading: eager
      angular:
        <vf-hero
        [vf_hero_kicker]="'<a href=JavaScript:Void(0);>VF Hamburg</a> | Structural Biology'"
        [vf_hero_heading]="'About the Hentze group!'"
        [vf_hero_subheading]="'an example of some ancillary text'"
        [vf_hero_text]="['The Hentze group combines biochemical and <a href=JavaScript:Void(0);>systems–level approaches</a> to investigate the connections between <a href=JavaScript:Void(0);>gene expression</a> and <a href=JavaScript:Void(0);>cell metabolism</a>, and their roles in human disease.']"
        [vf_hero_link_text]="'Learn more'"
        [vf_hero_link_href]="'JavaScript:Void(0);'"
        [vf_hero_image]="'url(https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.avif)'"
        [vf_hero_image_mobile_src]="'https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.avif?width=360&height=200&func=crop'"
        [vf_hero_image_src]="'https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.avif?width=1920&height=1080&func=crop'"
        [vf_hero_image_large_src]="'https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.avif?width=2560&height=1440&func=crop'"
        [vf_hero_image_width]="'1920'"
        [vf_hero_image_height]="'1080'"
        [vf_hero_image_fetchpriority]="'high'"
        [vf_hero_image_loading]="'eager'">
        </vf-hero>
      react:
        <VfHero
          id="1"
          vf_hero_kicker="<a href=JavaScript:Void(0);>VF Hamburg</a> | Structural Biology"
          vf_hero_heading="About the Hentze group!"
          vf_hero_subheading="an example of some ancillary text"
          vf_hero_text={["The Hentze group combines biochemical and <a href=#>systems–level approaches</a> to investigate the connections between <a href=#>gene expression</a> and <a href=#>cell metabolism</a>, and their roles in human disease."]}
          vf_hero_link_text="Learn more"
          vf_hero_link_href="'JavaScript:Void(0);'"
          vf_hero_image="url(https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.avif)"
          vf_hero_image_mobile_src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.avif?width=360&height=200&func=crop"
          vf_hero_image_src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.avif?width=1920&height=1080&func=crop"
          vf_hero_image_large_src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.avif?width=2560&height=1440&func=crop"
          vf_hero_image_width="1920"
          vf_hero_image_height="1080"
          vf_hero_image_fetchpriority="high"
          vf_hero_image_loading="eager"
        />
  - name: legacy hero with image
    label: Legacy Hero - With Image
    context:
      vf_hero_kicker: <a href="JavaScript:Void(0);">VF Hamburg</a> | Structural Biology
      vf_hero_heading: About the Hentze group!
      vf_hero_subheading: an example of some ancillary text
      vf_hero_text:
        - The Hentze group combines biochemical and <a href="JavaScript:Void(0);">systems–level approaches</a> to investigate the connections between <a href="JavaScript:Void(0);">gene expression</a> and <a href="JavaScript:Void(0);">cell metabolism</a>, and their roles in human disease.
      vf_hero_link_text: Learn more
      vf_hero_link_href: JavaScript:Void(0);
      vf_hero_image_size: null
      vf_hero_image: url('https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.png')
      angular:
        <vf-hero
        [vf_hero_kicker]="'<a href=JavaScript:Void(0);>VF Hamburg</a> | Structural Biology'"
        [vf_hero_heading]="'About the Hentze group!'"
        [vf_hero_subheading]="'an example of some ancillary text'"
        [vf_hero_text]="['The Hentze group combines biochemical and <a href=JavaScript:Void(0);>systems–level approaches</a> to investigate the connections between <a href=JavaScript:Void(0);>gene expression</a> and <a href=JavaScript:Void(0);>cell metabolism</a>, and their roles in human disease.']"
        [vf_hero_link_text]="'Learn more'"
        [vf_hero_link_href]="'JavaScript:Void(0);'"
        [vf_hero_image]="'url(https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.png)'">
        </vf-hero>
      react:
        <VfHero
          id="1"
          vf_hero_kicker="<a href=JavaScript:Void(0);>VF Hamburg</a> | Structural Biology"
          vf_hero_heading="About the Hentze group!"
          vf_hero_subheading="an example of some ancillary text"
          vf_hero_text={["The Hentze group combines biochemical and <a href=#>systems–level approaches</a> to investigate the connections between <a href=#>gene expression</a> and <a href=#>cell metabolism</a>, and their roles in human disease."]}
          vf_hero_link_text="Learn more"
          vf_hero_link_href="'JavaScript:Void(0);'"
          vf_hero_image="url(https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.png)"
        />
  - name: spacing (400)
    context:
      spacing: 400
      vf_hero_heading: A journey through bioinformatics
      vf_hero_text:
        - Explore resources from EMBL-EBI
      vf_hero_image_size: auto 28.5rem
      angular:
        <vf-hero
        [spacing]="400"
        [vf_hero_heading]="'A journey through bioinformatics'"
        [vf_hero_text]="['Explore resources from EMBL-EBI']"
        [vf_hero_image_size]="'auto 28.5rem'"></vf-hero>
      react:
        <VfHero
          id="2"
          spacing="400"
          vf_hero_heading="A journey through bioinformatics"
          vf_hero_text={["Explore resources from EMBL-EBI"]}
          vf_hero_image_size="auto 28.5rem"
        />
  - name: spacing (800)
    context:
      spacing: 800
      vf_hero_heading: About the Hentze group!
      vf_hero_link_text: Learn more
      vf_hero_link_href: JavaScript:Void(0);
      vf_hero_image_size: auto 28.5rem
      angular:
        <vf-hero
        [spacing]="800"
        [vf_hero_heading]="'About the Hentze group!'"
        [vf_hero_link_text]="'Learn more'"
        [vf_hero_link_href]="'JavaScript:Void(0);'"
        [vf_hero_image_size]="'auto 28.5rem'"></vf-hero>
      react:
        <VfHero
          id="3"
          spacing="800"
          vf_hero_heading="About the Hentze group!"
          vf_hero_link_text="Learn more"
          vf_hero_link_href="#"
          vf_hero_image_size="auto 28.5rem"
        />
  - name: spacing (1200)
    context:
      spacing: 1200
      vf_hero_heading: About the Hentze group!
      vf_hero_subheading: an example of some ancillary text
      vf_hero_link_text: Learn more
      vf_hero_link_href: JavaScript:Void(0);
      vf_hero_image_size: auto 28.5rem
      angular:
        <vf-hero
        [spacing]="1200"
        [vf_hero_heading]="'About the Hentze group!'"
        [vf_hero_subheading]="'an example of some ancillary text'"
        [vf_hero_link_text]="'Learn more'"
        [vf_hero_link_href]="'JavaScript:Void(0);'"
        [vf_hero_image_size]="'auto 28.5rem'"></vf-hero>
      react:
        <VfHero
          id="4"
          spacing="1200"
          vf_hero_heading="About the Hentze group!"
          vf_hero_subheading="an example of some ancillary text"
          vf_hero_link_text="Learn more"
          vf_hero_link_href="#"
          vf_hero_image_size="auto 28.5rem"
        />
  - name: spacing (1600)
    hidden: true
    context:
      spacing: 1600
      vf_hero_kicker: <a href="JavaScript:Void(0);">VF Hamburg</a> | Structural Biology
      vf_hero_heading: About the Hentze group!
      vf_hero_subheading: an example of some ancillary text
      vf_hero_link_text: Learn more
      vf_hero_link_href: JavaScript:Void(0);
      vf_hero_image_size: auto 28.5rem
      angular:
        <vf-hero
        [spacing]="1600"
        [vf_hero_kicker]="'<a href=JavaScript:Void(0);>VF Hamburg</a> | Structural Biology'"
        [vf_hero_heading]="'About the Hentze group!'"
        [vf_hero_subheading]="'an example of some ancillary text'"
        [vf_hero_link_text]="'Learn more'"
        [vf_hero_link_href]="'JavaScript:Void(0);'"
        [vf_hero_image_size]="'auto 28.5rem'"></vf-hero>
      react:
        <VfHero
          id="5"
          spacing="1600"
          vf_hero_kicker="<a href=#>VF Hamburg</a> | Structural Biology"
          vf_hero_heading="About the Hentze group!"
          vf_hero_subheading="an example of some ancillary text"
          vf_hero_link_text="Learn more"
          vf_hero_link_href="#"
          vf_hero_image_size="auto 28.5rem"
        />
