# 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



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 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.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"
        />