"$schema": "https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json"
name: Hero side-by-side
description: Hero with side-by-side slots for media and content.
group: Hero
props:
  type: object
  required:
    - padding_block_start
    - padding_block_end
  properties:
    hero_flex_gap:
      type: string
      title: Flex gap
      enum:
        - large
        - extra-large
      meta:enum:
        large: Normal
        extra-large: Extra-Large
      default: large
      examples:
        - "large"
    hero_flex_direction_mobile:
      type: string
      title: Mobile flex direction
      enum:
        - vertical
        - vertical-reverse
      meta:enum:
        vertical: Vertical
        vertical-reverse: Reverse vertical
      default: vertical
      examples:
        - "vertical"
    background:
      type: string
      title: Background color
      enum:
        - primary
        - secondary
        - accent
      meta:enum:
        primary: Primary
        secondary: Secondary
        accent: Accent
    padding_block_start:
      type: string
      title: Padding top
      enum:
        - "0"
        - "16"
        - "32"
        - "64"
      examples:
        - "0"
    padding_block_end:
      type: string
      title: Padding bottom
      enum:
        - "0"
        - "16"
        - "32"
        - "64"
      examples:
        - "0"
    image_size:
      type: string
      title: Aspect ratio
      enum:
        - "2:1"
        - "16:9"
        - "3:2"
        - "4:3"
        - "1:1"
      meta:enum:
        "2:1": 2 × 1
        "16:9": 16 × 9
        "3:2": 3 × 2
        "4:3": 4 × 3
        "1:1": Square
      default: "4:3"
      examples:
        - "4:3"
    image_position:
      type: string
      title: Image position
      enum:
        - left
        - right
      meta:enum:
        left: Left
        right: Right
      default: left
      examples:
        - "left"
    image_radius:
      type: string
      title: Image border radius
      enum:
        - small
        - large
        - extra-large
      meta:enum:
        small: Small
        large: Large
        extra-large: Extra-Large
      default: small
      examples:
        - "small"
    media:
      $ref: json-schema-definitions://canvas.module/image
      title: Image
      type: object
      examples:
        - src: "assets/luke-chesser-pJadQetzTkI-unsplash.jpg"
          alt: "Green blue gradient placeholder image"
          width: 1920
          height: 1344
slots:
  hero_slot:
    title: "Content"
