image:
  namespace: "Atoms/HTML5"
  use: "@atoms/html5/image/image.twig"
  label: Image
  description: "Image with caption component."

  fields:
    image:
      type: text
      label: The image.
      description: The image provided by CMS.
    url:
      label: Url
      type: textfield
      description: Use "Url" if you don't have the rendered image tag. The component will generate an image tag.
      preview: "https://picsum.photos/500/400"
    alt:
      type: text
      label: Alt text.
      description: The image alt text.
      preview:
        faker: lorem.sentences
    caption:
      type: text
      label: The caption text.
      description: The caption for figure mostly.
      preview:
        faker: lorem.sentences

  settings:
    type:
      label: Type
      type: select
      options:
        fg: Foreground
        bg: Background
    img_attributes:
      type: attributes
      label: Image attributes.
      description: The attributes as passed from parent.
    img_class:
      label: Foreground style
      description: Classes applied to foreground image.
      type: textfield
      preview: w-100
      default_value: w-100
    background_class:
      label: Background style
      description: Classes applied to background image container.
      type: textfield
      preview: w-100 p-5 bg-cover
      default_value: w-100 p-5 bg-cover

