{# Button element #}
{% include '@bolt-elements-button/button.twig' with {
  content: 'Button trigger',
  size: 'small',
  attributes: {
    type: 'button',
    'data-bolt-modal-target': '.js-bolt-modal--trigger-button',
  },
} only %}
{% include '@bolt-components-modal/modal.twig' with {
  content: 'This modal is triggered by a button.',
  attributes: {
    class: 'js-bolt-modal--trigger-button'
  },
} only %}

{# Image element and Trigger component #}
{% set trigger_content %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/placeholders/tout-4x3-climber.jpg',
      alt: 'A Rock Climber',
      loading: 'lazy',
      style: 'max-width: 320px',
      width: '640',
      height: '480'
    }
  } only %}
{% endset %}

{% set modal_content %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/placeholders/tout-4x3-climber.jpg',
      alt: 'A Rock Climber',
      width: '640',
      height: '480'
    }
  } only %}
{% endset %}

{% include '@bolt-components-trigger/trigger.twig' with {
  content: trigger_content,
  cursor: 'zoom-in',
  display: 'inline',
  attributes: {
    'data-bolt-modal-target': '.js-bolt-modal--trigger-image',
  },
} only %}

{% include '@bolt-components-modal/modal.twig' with {
  content: modal_content,
  spacing: 'none',
  theme: 'none',
  scroll: 'overall',
  width: 'auto',
  attributes: {
    class: 'js-bolt-modal--trigger-image'
  },
} only %}

{# Text Link element #}
{% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'Text link trigger',
  attributes: {
    type: 'button',
    'data-bolt-modal-target': '.js-bolt-modal--trigger-link',
  },
} only %}

{% include '@bolt-components-modal/modal.twig' with {
  content: 'This modal is triggered by a text link.',
  attributes: {
    class: 'js-bolt-modal--trigger-link'
  },
} only %}