Thematic Callout: Right Aligned With Hashtags

HTML
View
Context
Info
Notes


        <div class="thematic-callout thematic-callout--right-aligned" data-module="thematicCallout">
    <div class="callout-sidebar">
        <div class="callout-sidebar__inner">
            <p class="callout-sidebar__text">Next component title</p>
            <div class="callout-sidebar__icon"></div>
        </div>
    </div>
    <div class="thematic-callout__layered-image thematic-callout__layered-image--top" style="background-image: url(/media/thematic-callout/Soft_Adventure_Top_Right.png);"></div>
    <div class="thematic-callout__layered-image thematic-callout__layered-image--bottom js-bottom-image" style="background-image: url(/media/thematic-callout/Soft_Adventure_Bottom_Left.png);"></div>
    <div class="grid-container">
        <div class="thematic-callout__grid grid-x grid-padding-x">
            <div class="cell medium-4 large-offset-1">
                <div class="thematic-callout__intro js-thematic-callout-intro">
                    <span class="thematic-callout__eyebrow">Eyebrow text</span>
                    <h2 class="thematic-callout__title">Soft adventure</h2>
                    <p class="thematic-callout__subtitle thematic-callout__subtitle--with-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo sit amet elit at posuere. Aenean in vulputate libero. Proin semper justo odio, nec rutrum leo mollis non.</p>
                </div>
            </div>
            <div class="cell medium-8 large-7 thematic-callout__card-grid-cell">
                <div class="thematic-callout__card-grid js-card-grid grid-x grid-margin-x">
                    <div class="thematic-callout__card cell medium-6">
                        <div data-module="card" class="card-standard card-standard--editorial card-standard--editorial-video js-editorial-card js-card-standard js-card-generic   has-location has-tags" data-card-id=1234 data-longitude="53.31969" data-latitude="-7.70727">
                            <div class="location-marker js-location-marker" data-module="locationMarker" data-longitude="53.31969" data-latitude="-7.70727">
                                <div class="location-marker__text">
                                    <span class="location-marker__text-description js-marker-description"></span>
                                    <span class="location-marker__distance js-marker-distance"></span>
                                </div>
                            </div>
                            <button class="like-button js-like-button" role="button">
                                <span class="like-button__text"></span>
                                <span class="like-button__wave"></span>
                            </button>
                            <div class="card-standard__media-atom-container">
                                <div class="rich-media-atom" data-module="richMediaAtom" data-isYouTube="false" data-isInsideTransform="true">
                                    <div class="rich-media-atom__inner js-atom-inner">
                                        <div class="rich-media-atom__image">
                                            <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-1543748624-61a84917186f?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-1543748624-61a84917186f?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:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1543748624-61a84917186f?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-1543748624-61a84917186f?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>
                                        <div class="rich-media-atom__image-overlay js-image-overlay"></div>
                                        <div class="rich-media-atom__content">
                                            <p class="rich-media-atom__title js-title">A guide to Galway</p>
                                            <p class="rich-media-atom__subtitle js-subtitle">Georgia, Galway tour guide</p>
                                        </div>
                                        <div class="rich-media-atom__button js-button">
                                            <div class="rich-media-atom__icon rich-media-atom__icon--play"></div>
                                        </div>
                                    </div>
                                    <div class="rich-media-atom__modal js-modal">
                                        <div class="rich-media-atom__modal-inner">
                                            <a href="#" class="rich-media-atom__modal-close js-modal-close "></a>
                                            <div class="video " data-autoplay="false" data-hide-controls="false" data-loop="false" data-muted="false">
                                                <template class="js-small-video-template">
                                                    <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
                                                        <video controls playsinline class="video__player js-video-player">
                                                            <source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4" />
                                                            <source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4" />
                                                        </video>
                                                    </div>
                                                </template>
                                                <template class="js-medium-video-template">
                                                    <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
                                                        <video controls playsinline class="video__player js-video-player">
                                                            <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm" />
                                                            <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
                                                        </video>
                                                    </div>
                                                </template>
                                                <div class="js-video-container video__container"></div>
                                                <div class="hashtags" data-module="hashtags">
                                                    <ul>
                                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
                                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="card-standard__location js-location-name">Dublin</p>
                                <div class="hashtags" data-module="hashtags">
                                    <ul>
                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="thematic-callout__card cell medium-6">
                        <div data-module="card" class="card-standard card-standard--editorial card-standard--editorial-video js-editorial-card js-card-standard js-card-generic   has-location has-tags" data-card-id=1234 data-longitude="53.31969" data-latitude="-7.70727">
                            <div class="location-marker js-location-marker" data-module="locationMarker" data-longitude="53.31969" data-latitude="-7.70727">
                                <div class="location-marker__text">
                                    <span class="location-marker__text-description js-marker-description"></span>
                                    <span class="location-marker__distance js-marker-distance"></span>
                                </div>
                            </div>
                            <button class="like-button js-like-button" role="button">
                                <span class="like-button__text"></span>
                                <span class="like-button__wave"></span>
                            </button>
                            <div class="card-standard__media-atom-container">
                                <div class="rich-media-atom" data-module="richMediaAtom" data-isYouTube="false" data-isInsideTransform="true">
                                    <div class="rich-media-atom__inner js-atom-inner">
                                        <div class="rich-media-atom__image">
                                            <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-1543748624-61a84917186f?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-1543748624-61a84917186f?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:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1543748624-61a84917186f?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-1543748624-61a84917186f?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>
                                        <div class="rich-media-atom__image-overlay js-image-overlay"></div>
                                        <div class="rich-media-atom__content">
                                            <p class="rich-media-atom__title js-title">A guide to Galway</p>
                                            <p class="rich-media-atom__subtitle js-subtitle">Georgia, Galway tour guide</p>
                                        </div>
                                        <div class="rich-media-atom__button js-button">
                                            <div class="rich-media-atom__icon rich-media-atom__icon--play"></div>
                                        </div>
                                    </div>
                                    <div class="rich-media-atom__modal js-modal">
                                        <div class="rich-media-atom__modal-inner">
                                            <a href="#" class="rich-media-atom__modal-close js-modal-close "></a>
                                            <div class="video " data-autoplay="false" data-hide-controls="false" data-loop="false" data-muted="false">
                                                <template class="js-small-video-template">
                                                    <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
                                                        <video controls playsinline class="video__player js-video-player">
                                                            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" />
                                                            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" />
                                                        </video>
                                                    </div>
                                                </template>
                                                <template class="js-medium-video-template">
                                                    <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
                                                        <video controls playsinline class="video__player js-video-player">
                                                            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" />
                                                        </video>
                                                    </div>
                                                </template>
                                                <div class="js-video-container video__container"></div>
                                                <div class="hashtags" data-module="hashtags">
                                                    <ul>
                                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
                                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="card-standard__location js-location-name">Dublin</p>
                                <div class="hashtags" data-module="hashtags">
                                    <ul>
                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="thematic-callout__card cell medium-6">
                        <div class="card-featured card-featured--campaign js-card-generic" data-module="card">
                            <a href="#" target="_blank" rel="noopener" alt="Visit The West Coast" class="card-featured__anchor js-link">
                                <button class="like-button js-like-button" role="button">
                                    <span class="like-button__text">Like</span>
                                    <span class="like-button__wave"></span>
                                </button>
                                <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-1549918864-48ac978761a4?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-1549918864-48ac978761a4?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-1549918864-48ac978761a4?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-1549918864-48ac978761a4?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 class="video " data-module="video" data-autoplay="true" data-hide-controls="true" data-loop="true" data-muted="">
                                    <template class="js-small-video-template">
                                        <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
                                            <video playsinline autoplay muted loop class="video__player js-video-player">
                                                <source src="/media/campaign-card/GreenButtonCard.mp4" type="video/mp4" />
                                                <source src="/media/campaign-card/GreenButtonCard.mp4" type="video/mp4" />
                                            </video>
                                        </div>
                                    </template>
                                    <template class="js-medium-video-template">
                                        <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
                                            <video playsinline autoplay muted loop class="video__player js-video-player">
                                                <source src="/media/campaign-card/GreenButtonCard.mp4" type="video/mp4" />
                                            </video>
                                        </div>
                                    </template>
                                    <div class="js-video-container video__container"></div>
                                </div>
                                <p class="card-featured__campaign-tag js-page-type">Push The Green Button</p>
                                <div class="card-featured__overlay">
                                    <h2 class="card-featured__title js-title">Explore the Wild Atlantic Way</h2>
                                    <p class="card-featured__location js-location-name">Dublin</p>
                                    <div class="hashtags hashtags--has-background" data-module="hashtags">
                                        <ul>
                                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="wildAtlandticWay" onclick="window.location='#wildAtlanticWay'" role="button">#WildAtlanticWay</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="thematic-callout__card cell medium-6">
                        <div class="card-featured bg-inverted js-card-generic has-tags" data-module="card">
                            <a href="#" target="_blank" rel="noopener" class="card-featured__anchor js-link">
                                <button class="like-button js-like-button" role="button">
                                    <span class="like-button__text"></span>
                                    <span class="like-button__wave"></span>
                                </button>
                                <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-1549918864-48ac978761a4?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-1549918864-48ac978761a4?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-1549918864-48ac978761a4?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-1549918864-48ac978761a4?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>
                                <p class="card-featured__page-type js-page-type">Event</p>
                                <div class="card-featured__overlay">
                                    <time class="card-featured__read-time" datetime="">14 - 18 March</time>
                                    <h2 class="card-featured__title js-title">Generic headline for character limits</h2>
                                    <p class="card-featured__location js-location-name">Dublin</p>
                                    <div class="hashtags" data-module="hashtags">
                                        <ul>
                                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
                                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="thematic-callout__card cell medium-6">
                        <div data-module="card" class="card-standard card-standard--short-form js-card-standard js-short-form-card js-card-generic   has-location has-tags">
                            <div class="card-standard__image-container">
                                <button class="like-button js-like-button" role="button">
                                    <span class="like-button__text"></span>
                                    <span class="like-button__wave"></span>
                                </button>
                                <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-1502700807168-484a3e7889d0?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="">
                                    <picture class="image__container">
                                        <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1502700807168-484a3e7889d0?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-1502700807168-484a3e7889d0?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-1502700807168-484a3e7889d0?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="">
                                    </picture>
                                </figure>
                            </div>
                            <p class="card-standard__page-type js-page-type">Attraction</p>
                            <div class="card-standard__inner">
                                <h3 class="card-standard__title js-title">Generic headline for character limits</h3>
                                <a href="#" class="card-standard__link card-standard__link--external js-external-link js-link" target="_blank" rel="noopener" data-type="Attraction">Visit attraction website</a>
                                <p class="card-standard__location js-location-name">Dublin</p>
                                <a href="#" class="card-standard__link card-standard__details-link card-standard__link--bold js-details-link">View details</a>
                                <div class="hashtags" data-module="hashtags">
                                    <ul>
                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="thematic-callout__card cell medium-6">
                        <div data-module="card" class="card-standard js-card-standard js-card-generic   has-location has-tags">
                            <button class="like-button js-like-button" role="button">
                                <span class="like-button__text"></span>
                                <span class="like-button__wave"></span>
                            </button>
                            <template class="js-small-image-template">
                                <div class="card-standard__small-image-container js-small-image-container">
                                    <figure class="image js-image  js-small-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-1511219096939-ce77f5f44cc8?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="">
                                        <picture class="image__container">
                                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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="">
                                        </picture>
                                    </figure>
                                </div>
                            </template>
                            <a href="#" class="card-standard__anchor js-link">
                                <div class="card-standard__image-container js-image-container">
                                    <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-1511219096939-ce77f5f44cc8?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="">
                                        <picture class="image__container">
                                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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="">
                                        </picture>
                                    </figure>
                                </div>
                                <p class="card-standard__page-type js-page-type">Article</p>
                                <div class="card-standard__inner">
                                    <div class="card-standard__details">
                                        <time class="card-standard__read-time js-readtime" datetime="">6 min read</time>
                                        <h3 class="card-standard__title js-title">Gardens in Ireland have a magic edge</h3>
                                        <p class="card-standard__subtitle js-subtitle"></p>
                                    </div>
                                    <p class="card-standard__location js-location-name">Waterford</p>
                                    <div class="hashtags" data-module="hashtags">
                                        <ul>
                                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
                                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="thematic-callout__card cell medium-6">
                        <div data-module="card" class="card-standard js-card-standard js-card-generic   has-location has-tags">
                            <button class="like-button js-like-button" role="button">
                                <span class="like-button__text"></span>
                                <span class="like-button__wave"></span>
                            </button>
                            <template class="js-small-image-template">
                                <div class="card-standard__small-image-container js-small-image-container">
                                    <figure class="image js-image  js-small-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-1511219096939-ce77f5f44cc8?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="">
                                        <picture class="image__container">
                                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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="">
                                        </picture>
                                    </figure>
                                </div>
                            </template>
                            <a href="#" class="card-standard__anchor js-link">
                                <div class="card-standard__image-container js-image-container">
                                    <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-1511219096939-ce77f5f44cc8?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="">
                                        <picture class="image__container">
                                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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="">
                                        </picture>
                                    </figure>
                                </div>
                                <p class="card-standard__page-type js-page-type">Article</p>
                                <div class="card-standard__inner">
                                    <div class="card-standard__details">
                                        <time class="card-standard__read-time js-readtime" datetime="">6 min read</time>
                                        <h3 class="card-standard__title js-title">Gardens in Ireland have a magic edge</h3>
                                        <p class="card-standard__subtitle js-subtitle"></p>
                                    </div>
                                    <p class="card-standard__location js-location-name">Waterford</p>
                                    <div class="hashtags" data-module="hashtags">
                                        <ul>
                                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
                                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="thematic-callout__background js-thematic-callout-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="/media/thematic-callout/Soft_Adventure_Background.jpg" alt="Alt Text">
            <picture class="image__container">
                <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/thematic-callout/Soft_Adventure_Background.jpg" />
                <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/thematic-callout/Soft_Adventure_Background.jpg" />
                <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/thematic-callout/Soft_Adventure_Background.jpg" />
                <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="/media/thematic-callout/Soft_Adventure_Background.jpg" alt="Alt Text">
            </picture>
        </figure>
        <div class="thematic-callout__hashtags grid-container">
            <div class="grid-x grid-padding-x thematic-callout__hashtags-grid">
                <div class="cell">
                    <div class="hashtags hashtags--with-nudge-image hashtags--has-background" data-module="hashtags">
                        <ul>
                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="citybreak" onclick="window.location='#citybreak'" role="button">#Citybreak</span></li>
                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="adventure" onclick="window.location='#adventure'" role="button">#Adventure</span></li>
                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="surfing" onclick="window.location='#surfing'" role="button">#Surfing</span></li>
                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="dublin" onclick="window.location='#dublin'" role="button">#Dublin</span></li>
                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="romance" onclick="window.location='#romance'" role="button">#Romance</span></li>
                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="sport" onclick="window.location='#sport'" role="button">#Sport</span></li>
                        </ul>
                        <div class="hashtags__nudge-image">
                            <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                                <img class="image__lowres js-image-lazyload" data-object-fit data-src="/media/nudges/more-what-you-love-bottom-right.svg" alt="Alt Text">
                                <picture class="image__container">
                                    <source media="(max-width: 767px)" class="js-small-image" type="image/svg+xml" data-srcset="/media/nudges/more-what-you-love-bottom-right.svg" />
                                    <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/svg+xml" data-srcset="/media/nudges/more-what-you-love-bottom-right.svg" />
                                    <source media="(min-width: 1320px)" class="js-large-image" type="image/svg+xml" data-srcset="/media/nudges/more-what-you-love-bottom-right.svg" />
                                    <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="/media/nudges/more-what-you-love-bottom-right.svg" alt="Alt Text">
                                </picture>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


        <div class="thematic-callout{{#if isRightAligned}} thematic-callout--right-aligned{{/if}}"
     data-module="thematicCallout">
    {{#if nextThematicCallout}}
        {{> @cp-callout-sidebar nextThematicCallout}}
    {{/if}}
    {{#if topSimpleImage}}
        <div class="thematic-callout__layered-image thematic-callout__layered-image--top"
             style="background-image: url({{topSimpleImage.src}});"></div>
    {{/if}}
    {{#if bottomSimpleImage}}
        <div class="thematic-callout__layered-image thematic-callout__layered-image--bottom js-bottom-image"
             style="background-image: url({{bottomSimpleImage.src}});"></div>
    {{/if}}
    <div class="grid-container">
        <div class="thematic-callout__grid grid-x grid-padding-x">
            <div class="cell medium-4{{#if isRightAligned}} large-offset-1{{/if}}">
                <div class="thematic-callout__intro js-thematic-callout-intro">
                    {{#if eyebrow}}
                        <span class="thematic-callout__eyebrow">{{eyebrow}}</span>
                    {{/if}}
                    <h2 class="thematic-callout__title">{{title}}</h2>
                    <p class="thematic-callout__subtitle{{#if topTags.nudgeResponsiveImage}} thematic-callout__subtitle--with-margin-bottom{{/if}}">{{subtitle}}</p>
                </div>
            </div>
            <div class="cell medium-8 large-7 thematic-callout__card-grid-cell">
                <div class="thematic-callout__card-grid js-card-grid grid-x grid-margin-x">
                    {{#each cards}}
                        <div class="thematic-callout__card cell medium-6">
                            {{#ifEquals cardType "Collection"}}
                                {{> @cp-collection-card cssClasses="collection-card__item--featured"}}
                            {{/ifEquals}}
                            {{#ifNotEquals cardType "Collection"}}
                                {{> @card-standard-or-featured}}
                            {{/ifNotEquals}}
                        </div>
                    {{/each}}
                </div>
            </div>
        </div>
    </div>
    {{#if backgroundResponsiveImage}}
        <div class="thematic-callout__background js-thematic-callout-background">
            {{> @cp-medium-image backgroundResponsiveImage}}
            {{#if tags }}
                <div class="thematic-callout__hashtags grid-container">
                    <div class="grid-x grid-padding-x thematic-callout__hashtags-grid">
                        <div class="cell">
                            {{> @cp-hashtags tags }}
                        </div>
                    </div>
                </div>
            {{/if}}
        </div>
    {{/if}}
</div>


            {
  "isRightAligned": true,
  "nextThematicCallout": "Next component title",
  "eyebrow": "Eyebrow text",
  "title": "Soft adventure",
  "subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo sit amet elit at posuere. Aenean in vulputate libero. Proin semper justo odio, nec rutrum leo mollis non.",
  "backgroundResponsiveImage": {
    "altText": "Alt Text",
    "lowResolutionUrl": "/media/thematic-callout/Soft_Adventure_Background.jpg",
    "fallbackImageUrl": "/media/thematic-callout/Soft_Adventure_Background.jpg",
    "sources": [
      {
        "type": "image/jpeg",
        "largeUrl": "/media/thematic-callout/Soft_Adventure_Background.jpg",
        "smallUrl": "/media/thematic-callout/Soft_Adventure_Background.jpg"
      }
    ]
  },
  "topSimpleImage": {
    "src": "/media/thematic-callout/Soft_Adventure_Top_Right.png"
  },
  "bottomSimpleImage": {
    "src": "/media/thematic-callout/Soft_Adventure_Bottom_Left.png"
  },
  "cards": [
    {
      "webAppMode": true,
      "presentationMode": "video",
      "cardType": "EditorialCard",
      "cardId": 1234,
      "is360Video": false,
      "title": "A guide to Galway",
      "subtitle": "Georgia, Galway tour guide",
      "backgroundResponsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?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-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80"
          }
        ]
      },
      "fullVideo": {
        "isYouTube": false,
        "video": {
          "videoUrls": [
            {
              "type": "video/webm",
              "url": "http://techslides.com/demos/sample-videos/small.webm"
            },
            {
              "type": "video/mp4",
              "url": "http://techslides.com/demos/sample-videos/small.mp4"
            }
          ],
          "mobileVideoUrls": [
            {
              "type": "video/mp4",
              "url": "https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
            },
            {
              "type": "video/mp4",
              "url": "https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
            }
          ],
          "posterUrl": "https://via.placeholder.com/1600x900.png"
        }
      },
      "location": {
        "latitude": -7.70727,
        "longitude": 53.31969
      },
      "locationName": "Dublin",
      "tags": {
        "isLarge": false,
        "hashtags": [
          {
            "text": "#Gardens",
            "url": "#gardens",
            "openOnClick": true,
            "tagName": "gardens"
          },
          {
            "text": "#Outdoors",
            "url": "#outdoors",
            "openOnClick": true,
            "tagName": "outdoors"
          }
        ]
      }
    },
    {
      "webAppMode": true,
      "presentationMode": "video",
      "cardType": "EditorialCard",
      "cardId": 1234,
      "is360Video": false,
      "title": "A guide to Galway",
      "subtitle": "Georgia, Galway tour guide",
      "backgroundResponsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?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-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80"
          }
        ]
      },
      "fullVideo": {
        "isYouTube": false,
        "video": {
          "videoUrls": [
            {
              "type": "video/mp4",
              "url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
            }
          ],
          "mobileVideoUrls": [
            {
              "type": "video/mp4",
              "url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
            },
            {
              "type": "video/mp4",
              "url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
            }
          ],
          "posterUrl": "https://via.placeholder.com/1600x900.png"
        }
      },
      "location": {
        "latitude": -7.70727,
        "longitude": 53.31969
      },
      "locationName": "Dublin",
      "tags": {
        "isLarge": false,
        "hashtags": [
          {
            "text": "#Gardens",
            "url": "#gardens",
            "openOnClick": true,
            "tagName": "gardens"
          },
          {
            "text": "#Outdoors",
            "url": "#outdoors",
            "openOnClick": true,
            "tagName": "outdoors"
          }
        ]
      }
    },
    {
      "cardType": "Campaign",
      "webAppMode": true,
      "likeText": "Like",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1549918864-48ac978761a4?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-1549918864-48ac978761a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "fullVideo": {
        "isYouTube": false,
        "video": {
          "videoUrls": [
            {
              "type": "video/mp4",
              "url": "/media/campaign-card/GreenButtonCard.mp4"
            }
          ],
          "mobileVideoUrls": [
            {
              "type": "video/mp4",
              "url": "/media/campaign-card/GreenButtonCard.mp4"
            },
            {
              "type": "video/mp4",
              "url": "/media/campaign-card/GreenButtonCard.mp4"
            }
          ],
          "posterUrl": "https://via.placeholder.com/1600x900.png"
        }
      },
      "campaignTag": "Push The Green Button",
      "title": "Explore the Wild Atlantic Way",
      "locationName": "Dublin",
      "link": {
        "text": "Visit The West Coast",
        "url": "#",
        "target": "_blank"
      },
      "tags": {
        "isLarge": false,
        "hasBackground": true,
        "hashtags": [
          {
            "text": "#WildAtlanticWay",
            "url": "#wildAtlanticWay",
            "openOnClick": true,
            "tagName": "wildAtlandticWay"
          }
        ]
      }
    },
    {
      "webAppMode": true,
      "likeText": "Like",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1549918864-48ac978761a4?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-1549918864-48ac978761a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "ShortForm",
      "pageType": "Event",
      "title": "Generic headline for character limits",
      "locationName": "Dublin",
      "timeSpan": {
        "text": "14 - 18 March"
      },
      "link": {
        "text": "Visit event website",
        "url": "#",
        "isExternal": true,
        "target": "_blank"
      },
      "detailsLink": {
        "text": "View details",
        "url": "#"
      },
      "isFeatured": true,
      "tags": {
        "isLarge": false,
        "hashtags": [
          {
            "text": "#Gardens",
            "url": "#gardens",
            "openOnClick": true,
            "tagName": "gardens"
          },
          {
            "text": "#Outdoors",
            "url": "#outdoors",
            "openOnClick": true,
            "tagName": "outdoors"
          }
        ]
      }
    },
    {
      "webAppMode": true,
      "likeText": "Like",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1502700807168-484a3e7889d0?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-1502700807168-484a3e7889d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1502700807168-484a3e7889d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "ShortForm",
      "pageType": "Attraction",
      "title": "Generic headline for character limits",
      "locationName": "Dublin",
      "link": {
        "text": "Visit attraction website",
        "url": "#",
        "isExternal": true,
        "target": "_blank"
      },
      "detailsLink": {
        "text": "View details",
        "url": "#"
      },
      "tags": {
        "isLarge": false,
        "hashtags": [
          {
            "text": "#Gardens",
            "url": "#gardens",
            "openOnClick": true,
            "tagName": "gardens"
          },
          {
            "text": "#Outdoors",
            "url": "#outdoors",
            "openOnClick": true,
            "tagName": "outdoors"
          }
        ]
      }
    },
    {
      "webAppMode": true,
      "likeText": "Like",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "Generic",
      "pageType": "Article",
      "title": "Gardens in Ireland have a magic edge",
      "locationName": "Waterford",
      "timeSpan": {
        "text": "6 min read"
      },
      "link": {
        "text": "",
        "url": "#"
      },
      "tags": {
        "isLarge": false,
        "hashtags": [
          {
            "text": "#Gardens",
            "url": "#gardens",
            "openOnClick": true,
            "tagName": "gardens"
          },
          {
            "text": "#Outdoors",
            "url": "#outdoors",
            "openOnClick": true,
            "tagName": "outdoors"
          }
        ]
      }
    },
    {
      "webAppMode": true,
      "likeText": "Like",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "Generic",
      "pageType": "Article",
      "title": "Gardens in Ireland have a magic edge",
      "locationName": "Waterford",
      "timeSpan": {
        "text": "6 min read"
      },
      "link": {
        "text": "",
        "url": "#"
      },
      "tags": {
        "isLarge": false,
        "hashtags": [
          {
            "text": "#Gardens",
            "url": "#gardens",
            "openOnClick": true,
            "tagName": "gardens"
          },
          {
            "text": "#Outdoors",
            "url": "#outdoors",
            "openOnClick": true,
            "tagName": "outdoors"
          }
        ]
      }
    }
  ],
  "tags": {
    "isLarge": false,
    "hasBackground": true,
    "hashtags": [
      {
        "text": "#Citybreak",
        "url": "#citybreak",
        "tagName": "citybreak",
        "openOnClick": true
      },
      {
        "text": "#Adventure",
        "url": "#adventure",
        "tagName": "adventure",
        "openOnClick": true
      },
      {
        "text": "#Surfing",
        "url": "#surfing",
        "tagName": "surfing",
        "openOnClick": true
      },
      {
        "text": "#Dublin",
        "url": "#dublin",
        "tagName": "dublin",
        "openOnClick": true
      },
      {
        "text": "#Romance",
        "url": "#romance",
        "tagName": "romance",
        "openOnClick": true
      },
      {
        "text": "#Sport",
        "url": "#sport",
        "tagName": "sport",
        "openOnClick": true
      }
    ],
    "nudgeResponsiveImage": {
      "altText": "Alt Text",
      "lowResolutionUrl": "/media/nudges/more-what-you-love-bottom-right.svg",
      "fallbackImageUrl": "/media/nudges/more-what-you-love-bottom-right.svg",
      "sources": [
        {
          "type": "image/svg+xml",
          "largeUrl": "/media/nudges/more-what-you-love-bottom-right.svg",
          "smallUrl": "/media/nudges/more-what-you-love-bottom-right.svg"
        }
      ]
    }
  },
  "topTags": {
    "isLarge": false,
    "nudgeResponsiveImage": {
      "altText": "Alt Text",
      "lowResolutionUrl": "/media/nudges/love-great-flavours.svg",
      "fallbackImageUrl": "/media/nudges/love-great-flavours.svg",
      "sources": [
        {
          "type": "image/svg+xml",
          "largeUrl": "/media/nudges/love-great-flavours.svg",
          "smallUrl": "/media/nudges/love-great-flavours.svg"
        }
      ]
    }
  }
}

Handle: @cp-thematic-callout--right-aligned-with-hashtags
Variants (4): Default , Right Aligned , With Hashtags , Right Aligned With Hashtags
Preview:
- With layout
- Component only
Filesystem Path: src/patterns/03-components/media/cp-thematic-callout.hbs
References (5): @cp-callout-sidebar, @cp-collection-card, @card-standard-or-featured, @cp-medium-image, @cp-hashtags

There are no notes for this item.

Thematic Callout: Right Aligned With Hashtags

Hero

Media

Site Furniture

Text

Quote

Brand Cards Carousel

Card Collection

Card Collection with Quote

Card Carousel

Featured Carousel

Image Carousel

Editorial Map & Card Grid

Featured Trip Ideas Card Carousel

Hashtags

Highlight List

Icon Cards

Location Access

Offer Cards Carousel

Offset Tout Collection

Porthole Tabber

Tabbed Content

Collage Hero

404 Hero

Experience Brand

Standard

Video

Homepage

Shared Board Hero

Themed Page Hero Video

Media Collage

Video

Image

Rich Media Atom

Thematic Callout

FAB

Navigation

Featured Highlight Item

Key Information Block

Responsive Table

Quote

Richtext

Campaign Tout

Credibility Tout

Large Image Tout

Standard Tout

Seasonal Container

Geolocated Container

Travel To

Hero

Datepicker

Social Share

Immersive Weather Tabs