Social Card 

<div class="social-card" data-module="socialCard" data-card-id="">
    <div class="grid-x">
        <div class="social-card__image cell medium-6">
            <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-1586724245836-4bc391ad30db?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;50&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-1586724245836-4bc391ad30db?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                    <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1586724245836-4bc391ad30db?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                    <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1586724245836-4bc391ad30db?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                    <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                </picture>
            </figure>
        </div>
        <div class="social-card__content cell medium-6">
            <button class="like-button js-like-button" role="button">
                <span class="like-button__text"></span>
                <span class="like-button__wave"></span>
            </button>
            <div class="social-card__heading">
                <div class="social-card__logo"></div>
                <p class="social-card__title js-title">Tourism Ireland</p>
            </div>
            <p class="social-card__caption">“Who wants to make a wish under this twinkling sky? 🌌Thanks @photographer for the lovely image.</p>
            <a href="#" class="button-p2 button-p2--with-icon social-card__button " role="button">Follow us</a>
        </div>
    </div>
</div>
 
<div class="social-card" data-module="socialCard" data-card-id="{{cardId}}">
    <div class="grid-x">
        <div class="social-card__image cell medium-6">
            {{> @cp-medium-image responsiveImage}}
        </div>
        <div class="social-card__content cell medium-6">
            {{> @cp-like-button likeText}}
            <div class="social-card__heading">
                <div class="social-card__logo"></div>
                <p class="social-card__title js-title">{{title}}</p>
            </div>
            <p class="social-card__caption">{{caption}}</p>
            {{#if button}}
                {{> @cp-button-secondary target=button.target url=button.url text=button.text modifier="with-icon" cssClasses="social-card__button"}}
            {{/if}}
            {{#if tags}}
                {{> @cp-hashtags tags }}
            {{/if}}
        </div>
    </div>
</div>
 
{
  "title": "Tourism Ireland",
  "responsiveImage": {
    "altText": "Alt Text",
    "lowResolutionUrl": "https://images.unsplash.com/photo-1586724245836-4bc391ad30db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10",
    "sources": [
      {
        "type": "image/jpeg",
        "largeUrl": "https://images.unsplash.com/photo-1586724245836-4bc391ad30db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
        "smallUrl": "https://images.unsplash.com/photo-1586724245836-4bc391ad30db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
      }
    ]
  },
  "caption": "“Who wants to make a wish under this twinkling sky? 🌌Thanks @photographer for the lovely image.",
  "button": {
    "text": "Follow us",
    "url": "#"
  }
}

There are no notes for this item.