5.19 Teaser Large View in a new window

Example

Ut placet inquam tum dicere exorsus est laborum et inter

Sunt autem quibusdam et voluptatem ut ita ruant itaque earum motus et expexrt
Markup
{% set data = data|default({
      "theme": "",
      "heading": "Ut placet inquam tum dicere exorsus est laborum et inter",
      "copy": "Sunt autem quibusdam et voluptatem ut ita ruant itaque earum motus et expexrt",
      "img": "./images/health-risk-1.png",
      "contentModifierClass": "col-12 col-md-6 align-self-center ",
      "imageModifierClass": "col-12 col-md-6",
      "rowModifierClass":"m-0",
      "linkUrl":"",
      "svgUrl":".",
      "titleModifierClass":"mb-4"
    }) 
%}

<div class="large-teaser">
  <div class="{{data.modifier_class}}">
    <div class="row {{data.rowModifierClass}}">
        <div class="large-teaser__content {{data.contentModifierClass}} order-2 order-md-first ">
            {% if data.isMoreDetail %}
              <h3 class="{{data.titleModifierClass}}">
                <a href="{{data.linkUrl}}" class="large-teaser__link">{{data.heading}}</a>
              </h3>      
            {% else %}
              <h2 class="large-teaser__title {{data.titleModifierClass}}">
                <a href="{{data.linkUrl}}" class="large-teaser__link">{{data.heading}}</a>
              </h2>
            {% endif %}
            {% if data.tag %}
            <p class="large-teaser__tag">{{data.tag}}</p>
            {% endif %}
            {% if data.copy %}<div class="large-teaser__copy">{{data.copy}}</div>{% endif %}
            {% if data.isMoreDetail %}
                {% include '@asbestos/components/buttons/outline-button.twig'  with { 
                            label: "More details",
                            modifier_class:  "col-12 col-md-4 sticky-bottom",
                            url: data.moreDetailLink
                } %}              
            {% else %}
            <div class="mt-4">
              <img src="{{data.svgUrl}}/images/arrow-blue.svg" alt="" class="large-teaser__copy nsw-icon large-teaser__icon">
            </div>
            {% endif %}
        </div>
        
          {% if data.img and not isVideo %}
            <div class="large-teaser__image-area px-0 pb-3 pb-md-0 {{data.imageModifierClass}} ">
                <img src="{{data.img}}" alt="{{data.imgAlt}}" class="large-teaser__image">
                {% if data.imgTotal %}
                  <p class="large-teaser__image__area-total mt-2 ml-3 ml-md-0"> 1 of {{data.imgTotal }} images</p>
                {% endif %}
            </div>
            {% elseif data.isVideo%}
             <div class="large-teaser__image-area p-0 {{data.imageModifierClass}} ">
              <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="{{data.src}}" allowfullscreen></iframe>
                  </div>
                  </div>
          {% endif %}
            
        </div>
</div>
</div>