Campaign Tout: With Tears 

<div class="campaign-tout campaign-tout--has-tears" data-module="campaignTout">
        <div class="campaign-tout__background">
            <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1536954393774-b247f795fda7?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;100&amp;q&#x3D;10" alt="Alt Text">
                <picture class="image__container">
                    <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1536954393774-b247f795fda7?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;640&amp;q&#x3D;80" />
                    <source media="(min-width: 768px) and (max-width:1023px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1536954393774-b247f795fda7?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2100&amp;q&#x3D;80" />
                    <source media="(min-width: 1024px) and (max-width:1319px)" class="js-semilarge-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1536954393774-b247f795fda7?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2100&amp;q&#x3D;80" />
                    <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1536954393774-b247f795fda7?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2100&amp;q&#x3D;80" />
                    <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                </picture>
            </figure>
        </div>
        <a href="#" class="campaign-tout__link">
            <div class="campaign-tout__inner">
                <div class="grid-container">
                    <div class="grid-x">
                        <div class="cell medium-7 large-5 ">
                            <p class="campaign-tout__eyebrow">Sale now on</p>
                            <time class="campaign-tout__date" datetime="">14 - 18 March</time>
                            <h2 class="campaign-tout__title">The big Ireland sale</h2>
                            <p class="campaign-tout__subtitle">Celebrate St Patrick’s Day with the BIG Ireland Sale! For a limited time only, we have exceptional offers on accommodation, travel, activities and attractions to help you plan your trip to Ireland!</p>
                            <p class="campaign-tout__location">Dublin</p>
                            <div class="button-p1 button-p1--with-icon campaign-tout__fake-button">
                                <span>Experience now</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
 
{{#if html}}
    {{#if isTearVariant}}
        <div class="offer-banner--has-tears">
            {{{html}}}
        </div>
    {{else}}
        <div class="offer-banner--no-tears">
            {{{html}}}
        </div>
    {{/if}}
{{else}}
    <div class="campaign-tout {{#if isTearVariant}}campaign-tout--has-tears{{/if}}" data-module="campaignTout">
        {{#if backgroundResponsiveImage}}
            <div class="campaign-tout__background">
                {{> @cp-medium-image backgroundResponsiveImage}}
            </div>
        {{/if}}
        <a href="{{button.url}}" class="campaign-tout__link">
            <div class="campaign-tout__inner">
                <div class="grid-container">
                    <div class="grid-x">
                        <div class="cell medium-7 large-5 {{#unless isTearVariant}}medium-offset-1{{/unless}}">
                            {{#if eyebrow}}
                                <p class="campaign-tout__eyebrow">{{eyebrow}}</p>
                            {{/if}}
                            {{#if timeSpan}}
                                <time class="campaign-tout__date" datetime="{{timeSpan.stamp}}">{{timeSpan.text}}</time>
                            {{/if}}
                            <h2 class="campaign-tout__title">{{title}}</h2>
                            <p class="campaign-tout__subtitle">{{subtitle}}</p>
                            {{#if locationName}}
                                <p class="campaign-tout__location">{{locationName}}</p>
                            {{/if}}
                            <div class="button-p1 button-p1--with-icon campaign-tout__fake-button">
                                <span>{{button.text}}</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
{{/if}}
 
{
  "isTearVariant": true,
  "backgroundResponsiveImage": {
    "altText": "Alt Text",
    "lowResolutionUrl": "https://images.unsplash.com/photo-1536954393774-b247f795fda7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=10",
    "sources": [
      {
        "type": "image/jpeg",
        "largeUrl": "https://images.unsplash.com/photo-1536954393774-b247f795fda7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
        "smallUrl": "https://images.unsplash.com/photo-1536954393774-b247f795fda7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80"
      }
    ]
  },
  "eyebrow": "Sale now on",
  "timeSpan": {
    "text": "14 - 18 March"
  },
  "title": "The big Ireland sale",
  "subtitle": "Celebrate St Patrick’s Day with the BIG Ireland Sale! For a limited time only, we have exceptional offers on accommodation, travel, activities and attractions to help you plan your trip to Ireland!",
  "locationName": "Dublin",
  "button": {
    "text": "Experience now",
    "url": "#"
  }
}

There are no notes for this item.