title: Hero
'@extends': default

form:
  fields:
    tabs:
      fields:
        buttons:
          type: tab
          title: Hero
          fields:
            header.hero_classes:
              type: text
              label: Hero Classes
              markdown: true
              description: 'There are several Hero class options that can be listed here (space separated):<br />`text-light`, `text-dark`, `title-h1h2`, `parallax`, `overlay-dark-gradient`, `overlay-light-gradient`, `overlay-dark`, `overlay-light`, `hero-fullscreen`, `hero-large`, `hero-medium`, `hero-small`, `hero-tiny`<br />Please consult the [Quark documentation](https://github.com/getgrav/grav-theme-quark#hero-options) for more details.'
            header.hero_image:
              type: filepicker
              label: Hero Image
              preview_images: true
              toggleable: true
              description: 'If not specified, this defaults to the first image found in the page''s folder'

            header.hero_autosize:
              type: toggle
              label: Hero Image Autosize
              description: Resize image to cover the entire width
              default: 1
              highlight: 1
              options:
                1: Yes
                0: No
              validate:
                type: bool

            header.hero_position:
              type: text
              size: small
              label: Hero Image Position
              description: Horizontal image position in %
              default: 50
              validate:
                type: number
                min: 0
                max: 100

            header.hero_background_image:
              type: filepicker
              label: Hero Background Image
              preview_images: true
              toggleable: true

            header.hero_background_color:
              type: colorpicker
              label: Hero Background Color
              toggleable: true