'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json'
name: Hero billboard
description: Hero with stacked slots for media and content.
group: Layout
props:
  type: object
  properties:
    media:
      $ref: json-schema-definitions://canvas.module/image
      title: Background image
      description: Media image for the hero.
      type: object
      examples:
        - src: 'images/hero-background.jpg'
          alt: 'Placeholder image'
    opacity:
      type: string
      title: Opacity
      description: Select opacity background
      enum:
        - '100'
        - '95'
        - '90'
        - '85'
        - '80'
        - '75'
        - '70'
        - '65'
        - '60'
        - '55'
        - '50'
        - '45'
        - '40'
        - '35'
        - '30'
        - '25'
        - '20'
        - '15'
        - '10'
        - '5'
        - '0'
      meta:enum:
        '100': '100%'
        '95': '95%'
        '90': '90%'
        '85': '85%'
        '80': '80%'
        '75': '75%'
        '70': '70%'
        '65': '65%'
        '60': '60%'
        '55': '55%'
        '50': '50%'
        '45': '45%'
        '40': '40%'
        '35': '35%'
        '30': '30%'
        '25': '25%'
        '20': '20%'
        '15': '15%'
        '10': '10%'
        '5': '5%'
        '0': '0%'
      default: '100'
      examples:
        - '100'
    title:
      type: string
      title: Title
      examples:
        - 'Title of lorem ipsum amet'
    text:
      type: string
      title: Rich text
      contentMediaType: text/html
      x-formatting-context: block
      examples:
        - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tristique pretium pellentesque semper enim aliquam.</p>
    height:
      type: string
      title: Hero height
      enum:
        - '500'
        - '550'
        - '600'
        - '650'
        - '700'
        - '750'
        - '800'
        - '850'
        - '900'
        - '950'
        - '1000'
      meta:enum:
        '500': '500px'
        '550': '550px'
        '600': '600px'
        '650': '650px'
        '700': '700px'
        '750': '750px'
        '800': '800px'
        '850': '850px'
        '900': '900px'
        '950': '950px'
        '1000': '1000px'
      default: '600'
      examples:
        - '600'
    heading_level:
      type: string
      title: Heading level
      description: Select Heading level
      enum:
        - h1
        - h2
        - h3
      default: h2
      examples:
        - h2
    text_color:
      type: string
      title: Text color
      description: Select text color
      enum:
        - black
        - white
        - primary
      default: white
      examples:
        - white
    vertical_align:
      type: string
      title: Vertical align
      description: Select vertical align
      enum:
        - start
        - center
        - end
      meta:enum:
        'start': 'Top'
        'center': 'Center'
        'end': 'Bottom'
      default: center
      examples:
        - center
    text_align:
      type: string
      title: Text align
      description: Select text align
      enum:
        - center
        - left
        - right
      default: left
      examples:
        - left
