5.16 Image description teaser View in a new window

Example
Before starting any work involving asbestos materials, make sure you prepare a plan. Once you start work you risk contamination.
What to prepare
Markup 
{% set data = data|default({
      "copy": "Before starting any work involving asbestos materials, make sure you prepare a plan.  Once you start work you risk contamination.",
      "src": "./images/health-risk-1.png",
      "buttonLabel": "What to prepare",
      "isVideo":false
    }) 
%}
<div class="video-teaser" id="{{data.id}}">
  {% if data.heading %}
      <h3 class="mb-3 font-weight-bold text-center text-md-left">{{data.heading}}</h3>
  {% endif %}
  <div class="row m-md-0">
      <div class="col-md-4 col-12 px-0 pr-md-4 pb-3">
          {% if data.isVideo %}
                <div class="embed-responsive embed-responsive-4by3">
                  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/oenxVnRznwU" allowfullscreen></iframe>
                </div>             
            {% else %}
                <img src="{{data.src}}" alt="{{data.imgAlt}}" class="video-teaser__image">
            {% endif %}
        </div>
      <div class="video-teaser__content mt-2 mt-md-0 col-md-8 col-12">
            {% if data.copy %}<div class="video-teaser__copy">{{data.copy}}</div>{% endif %}
            {% include '@asbestos/components/buttons/outline-button.twig'  with { 
                  label: data.buttonLabel,
                  modifier_class:  data.buttonModifierClass
              } %}
        </div>
  </div>
</div>