<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/Food_and_Drink_Top_Left.png);"></div>
    <div class="thematic-callout__layered-image thematic-callout__layered-image--bottom js-bottom-image" style="background-image: url(/media/thematic-callout/Food_and_Drink_Bottom_Right.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">Food and Drink</h2>
                    <p class="thematic-callout__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.</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 js-card-standard js-card-generic   has-location ">
                            <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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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="">4 min read</time>
                                        <h3 class="card-standard__title js-title">1 Gardens in Ireland have a magic edge</h3>
                                        <p class="card-standard__subtitle js-subtitle">Progressively supply state of the art partnerships with 24/7 e-services. Interactively incentivize.</p>
                                    </div>
                                    <p class="card-standard__location js-location-name">Dublin</p>
                                </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 ">
                            <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-1561995701-8b87d9ece801?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-1561995701-8b87d9ece801?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-1561995701-8b87d9ece801?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-1561995701-8b87d9ece801?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-1561995701-8b87d9ece801?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-1561995701-8b87d9ece801?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-1561995701-8b87d9ece801?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-1561995701-8b87d9ece801?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="">4 min read</time>
                                        <h3 class="card-standard__title js-title">2 Tales from Irelands's crypts</h3>
                                        <p class="card-standard__subtitle js-subtitle">Globally scale alternative synergy after fully tested architectures. Progressively e-enable dynamic models without innovative strategic theme areas.</p>
                                    </div>
                                    <p class="card-standard__location js-location-name">Belfast</p>
                                </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 ">
                            <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-1568425370221-21ee552d83b7?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-1568425370221-21ee552d83b7?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-1568425370221-21ee552d83b7?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-1568425370221-21ee552d83b7?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-1568425370221-21ee552d83b7?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-1568425370221-21ee552d83b7?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-1568425370221-21ee552d83b7?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-1568425370221-21ee552d83b7?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="">1 min read</time>
                                        <h3 class="card-standard__title js-title">Clonmacnoise – The Monastic Marvel</h3>
                                        <p class="card-standard__subtitle js-subtitle">Quickly evolve virtual opportunities vis-a-vis distinctive web-readiness. Synergistically architect installed.</p>
                                    </div>
                                    <p class="card-standard__location js-location-name">Cork</p>
                                </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 ">
                            <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>
                            </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 ">
                            <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>
                            </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/Food_and_Drink_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/Food_and_Drink_Background.jpg" />
                <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/thematic-callout/Food_and_Drink_Background.jpg" />
                <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/thematic-callout/Food_and_Drink_Background.jpg" />
                <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="/media/thematic-callout/Food_and_Drink_Background.jpg" alt="Alt Text">
            </picture>
        </figure>
    </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": "Food and Drink",
  "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/Food_and_Drink_Background.jpg",
    "fallbackImageUrl": "/media/thematic-callout/Food_and_Drink_Background.jpg",
    "sources": [
      {
        "type": "image/jpeg",
        "largeUrl": "/media/thematic-callout/Food_and_Drink_Background.jpg",
        "smallUrl": "/media/thematic-callout/Food_and_Drink_Background.jpg"
      }
    ]
  },
  "topSimpleImage": {
    "src": "/media/thematic-callout/Food_and_Drink_Top_Left.png"
  },
  "bottomSimpleImage": {
    "src": "/media/thematic-callout/Food_and_Drink_Bottom_Right.png"
  },
  "cards": [
    {
      "cardType": "Generic",
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1551819561-c69621886139?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-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "pageType": "Article",
      "title": "1 Gardens in Ireland have a magic edge",
      "subtitle": "Progressively supply state of the art partnerships with 24/7 e-services. Interactively incentivize.",
      "locationName": "Dublin",
      "timeSpan": {
        "text": "4 min read"
      },
      "link": {
        "text": "",
        "url": "#"
      }
    },
    {
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1561995701-8b87d9ece801?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-1561995701-8b87d9ece801?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1561995701-8b87d9ece801?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "Generic",
      "pageType": "Article",
      "title": "2 Tales from Irelands's crypts",
      "subtitle": "Globally scale alternative synergy after fully tested architectures. Progressively e-enable dynamic models without innovative strategic theme areas.",
      "locationName": "Belfast",
      "timeSpan": {
        "text": "4 min read"
      },
      "link": {
        "text": "",
        "url": "#"
      }
    },
    {
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1568425370221-21ee552d83b7?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-1568425370221-21ee552d83b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1568425370221-21ee552d83b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "Generic",
      "pageType": "Article",
      "title": "Clonmacnoise – The Monastic Marvel",
      "subtitle": "Quickly evolve virtual opportunities vis-a-vis distinctive web-readiness. Synergistically architect installed.",
      "locationName": "Cork",
      "timeSpan": {
        "text": "1 min read"
      },
      "link": {
        "text": "",
        "url": "#"
      }
    },
    {
      "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": "#"
      }
    },
    {
      "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": "#"
      }
    }
  ]
}

There are no notes for this item.