Accommodation Grid Initial: 9

HTML
View
Context
Info
Notes


        <div class="grid-container js-api-results" data-total-results="18 results">
    <div class="trip-ideas-grid__wrapper">
        <div class="trip-ideas-grid__row">
            <div class="trip-ideas-grid__card trip-ideas-grid__card--add-margin">
                <div data-module="card" class="card-standard card-standard--short-form js-card-standard js-short-form-card js-card-generic   has-location ">
                    <div class="card-standard__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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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">Accomodation</p>
                    <div class="card-standard__inner">
                        <h3 class="card-standard__title js-title">Generic headline for character limits</h3>
                        <div class="card-standard__rating">
                            <div class="star-rating star-rating--5-max star-rating--5-rating"></div>
                            <p class="card-standard__rating-text">5/5</p>
                        </div>
                        <a href="#" class="card-standard__link card-standard__link--external js-external-link js-link" target="_blank" rel="noopener" data-type="Accomodation">Visit hotel 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>
                </div>
            </div>
            <div class="trip-ideas-grid__col">
                <div class="trip-ideas-grid__card">
                    <div data-module="card" class="card-standard card-standard--short-form js-card-standard js-short-form-card js-card-generic   has-location ">
                        <div class="card-standard__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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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">Accomodation</p>
                        <div class="card-standard__inner">
                            <h3 class="card-standard__title js-title">Generic headline for character limits</h3>
                            <div class="card-standard__rating">
                                <div class="star-rating star-rating--5-max star-rating--5-rating"></div>
                                <p class="card-standard__rating-text">5/5</p>
                            </div>
                            <a href="#" class="card-standard__link card-standard__link--external js-external-link js-link" target="_blank" rel="noopener" data-type="Accomodation">Visit hotel 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>
                    </div>
                </div>
                <div class="trip-ideas-grid__card">
                    <div data-module="card" class="card-standard card-standard--short-form js-card-standard js-short-form-card js-card-generic   has-location ">
                        <div class="card-standard__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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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">Accomodation</p>
                        <div class="card-standard__inner">
                            <h3 class="card-standard__title js-title">Generic headline for character limits</h3>
                            <div class="card-standard__rating">
                                <div class="star-rating star-rating--5-max star-rating--5-rating"></div>
                                <p class="card-standard__rating-text">5/5</p>
                            </div>
                            <a href="#" class="card-standard__link card-standard__link--external js-external-link js-link" target="_blank" rel="noopener" data-type="Accomodation">Visit hotel 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>
                    </div>
                </div>
                <div class="trip-ideas-grid__card">
                    <div data-module="card" class="card-standard card-standard--short-form js-card-standard js-short-form-card js-card-generic   has-location ">
                        <div class="card-standard__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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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">Accomodation</p>
                        <div class="card-standard__inner">
                            <h3 class="card-standard__title js-title">Generic headline for character limits</h3>
                            <div class="card-standard__rating">
                                <div class="star-rating star-rating--5-max star-rating--5-rating"></div>
                                <p class="card-standard__rating-text">5/5</p>
                            </div>
                            <a href="#" class="card-standard__link card-standard__link--external js-external-link js-link" target="_blank" rel="noopener" data-type="Accomodation">Visit hotel 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>
                    </div>
                </div>
                <div class="trip-ideas-grid__card">
                    <div data-module="card" class="card-standard card-standard--short-form js-card-standard js-short-form-card js-card-generic   has-location ">
                        <div class="card-standard__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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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">Accomodation</p>
                        <div class="card-standard__inner">
                            <h3 class="card-standard__title js-title">Generic headline for character limits</h3>
                            <div class="card-standard__rating">
                                <div class="star-rating star-rating--5-max star-rating--5-rating"></div>
                                <p class="card-standard__rating-text">5/5</p>
                            </div>
                            <a href="#" class="card-standard__link card-standard__link--external js-external-link js-link" target="_blank" rel="noopener" data-type="Accomodation">Visit hotel 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>
                    </div>
                </div>
            </div>
        </div>
        <div class="trip-ideas-grid__row">
            <div class="trip-ideas-grid__card">
                <div data-module="card" class="card-standard card-standard--short-form js-card-standard js-short-form-card js-card-generic   has-location ">
                    <div class="card-standard__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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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">Accomodation</p>
                    <div class="card-standard__inner">
                        <h3 class="card-standard__title js-title">Generic headline for character limits</h3>
                        <div class="card-standard__rating">
                            <div class="star-rating star-rating--5-max star-rating--5-rating"></div>
                            <p class="card-standard__rating-text">5/5</p>
                        </div>
                        <a href="#" class="card-standard__link card-standard__link--external js-external-link js-link" target="_blank" rel="noopener" data-type="Accomodation">Visit hotel 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>
                </div>
            </div>
            <div class="trip-ideas-grid__card">
                <div data-module="card" class="card-standard card-standard--short-form js-card-standard js-short-form-card js-card-generic   has-location ">
                    <div class="card-standard__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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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">Accomodation</p>
                    <div class="card-standard__inner">
                        <h3 class="card-standard__title js-title">Generic headline for character limits</h3>
                        <div class="card-standard__rating">
                            <div class="star-rating star-rating--5-max star-rating--5-rating"></div>
                            <p class="card-standard__rating-text">5/5</p>
                        </div>
                        <a href="#" class="card-standard__link card-standard__link--external js-external-link js-link" target="_blank" rel="noopener" data-type="Accomodation">Visit hotel 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>
                </div>
            </div>
            <div class="trip-ideas-grid__card">
                <div data-module="card" class="card-standard card-standard--short-form js-card-standard js-short-form-card js-card-generic   has-location ">
                    <div class="card-standard__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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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">Accomodation</p>
                    <div class="card-standard__inner">
                        <h3 class="card-standard__title js-title">Generic headline for character limits</h3>
                        <div class="card-standard__rating">
                            <div class="star-rating star-rating--5-max star-rating--5-rating"></div>
                            <p class="card-standard__rating-text">5/5</p>
                        </div>
                        <a href="#" class="card-standard__link card-standard__link--external js-external-link js-link" target="_blank" rel="noopener" data-type="Accomodation">Visit hotel 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>
                </div>
            </div>
            <div class="trip-ideas-grid__card">
                <div data-module="card" class="card-standard card-standard--short-form js-card-standard js-short-form-card js-card-generic   has-location ">
                    <div class="card-standard__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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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">Accomodation</p>
                    <div class="card-standard__inner">
                        <h3 class="card-standard__title js-title">Generic headline for character limits</h3>
                        <div class="card-standard__rating">
                            <div class="star-rating star-rating--5-max star-rating--5-rating"></div>
                            <p class="card-standard__rating-text">5/5</p>
                        </div>
                        <a href="#" class="card-standard__link card-standard__link--external js-external-link js-link" target="_blank" rel="noopener" data-type="Accomodation">Visit hotel 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>
                </div>
            </div>
        </div>
        <div class="trip-ideas-grid__row">
            <div class="trip-ideas-grid__col">
            </div>
        </div>
    </div>
</div>


        <div class="grid-container js-api-results" data-total-results="{{totalResults}}">
    <div class="trip-ideas-grid__wrapper">
        <div class="trip-ideas-grid__row">
            {{#each cards}}
                {{#ifEquals @index 0}}
                    <div class="trip-ideas-grid__card trip-ideas-grid__card--add-margin">
                        {{> @card-standard-or-featured}}
                    </div>
                {{/ifEquals}}
            {{/each}}
            <div class="trip-ideas-grid__col">
                {{#each cards}}
                    {{#ifEquals @index 1}}
                        <div class="trip-ideas-grid__card">
                            {{> @card-standard-or-featured}}
                        </div>
                    {{/ifEquals}}
                    {{#ifEquals @index 2}}
                        <div class="trip-ideas-grid__card">
                            {{> @card-standard-or-featured}}
                        </div>
                    {{/ifEquals}}
                    {{#ifEquals @index 3}}
                        <div class="trip-ideas-grid__card">
                            {{> @card-standard-or-featured}}
                        </div>
                    {{/ifEquals}}
                    {{#ifEquals @index 4}}
                        <div class="trip-ideas-grid__card">
                            {{> @card-standard-or-featured}}
                        </div>
                    {{/ifEquals}}
                {{/each}}
            </div>
        </div>
        <div class="trip-ideas-grid__row">
            {{#each cards}}
                {{#ifEquals @index 5}}
                    <div class="trip-ideas-grid__card">
                        {{> @card-standard-or-featured}}
                    </div>
                {{/ifEquals}}
                {{#ifEquals @index 6}}
                    <div class="trip-ideas-grid__card">
                        {{> @card-standard-or-featured}}
                    </div>
                {{/ifEquals}}
                {{#ifEquals @index 7}}
                    <div class="trip-ideas-grid__card">
                        {{> @card-standard-or-featured}}
                    </div>
                {{/ifEquals}}
                {{#ifEquals @index 8}}
                    <div class="trip-ideas-grid__card">
                        {{> @card-standard-or-featured}}
                    </div>
                {{/ifEquals}}
            {{/each}}
        </div>
        <div class="trip-ideas-grid__row">
            <div class="trip-ideas-grid__col">
                {{#each cards}}
                    {{#ifEquals @index 9}}
                        <div class="trip-ideas-grid__card">
                            {{> @card-standard-or-featured}}
                        </div>
                    {{/ifEquals}}
                    {{#ifEquals @index 10}}
                        <div class="trip-ideas-grid__card">
                            {{> @card-standard-or-featured}}
                        </div>
                    {{/ifEquals}}
                    {{#ifEquals @index 12}}
                        <div class="trip-ideas-grid__card">
                            {{> @card-standard-or-featured}}
                        </div>
                    {{/ifEquals}}
                    {{#ifEquals @index 13}}
                        <div class="trip-ideas-grid__card">
                            {{> @card-standard-or-featured}}
                        </div>
                    {{/ifEquals}}
                {{/each}}
            </div>
            {{#each cards}}
                {{#ifEquals @index 11}}
                    <div class="trip-ideas-grid__card trip-ideas-grid__card-add-margin">
                        {{> @card-standard-or-featured}}
                    </div>
                {{/ifEquals}}
            {{/each}}
        </div>
    </div>
</div>


            {
  "totalResults": "18 results",
  "cards": [
    {
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "ShortForm",
      "pageType": "Accomodation",
      "title": "Generic headline for character limits",
      "starRating": {
        "rating": 5,
        "total": 5
      },
      "locationName": "Dublin",
      "link": {
        "text": "Visit hotel website",
        "url": "#",
        "isExternal": true,
        "target": "_blank"
      },
      "detailsLink": {
        "text": "View details",
        "url": "#"
      }
    },
    {
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "ShortForm",
      "pageType": "Accomodation",
      "title": "Generic headline for character limits",
      "starRating": {
        "rating": 5,
        "total": 5
      },
      "locationName": "Dublin",
      "link": {
        "text": "Visit hotel website",
        "url": "#",
        "isExternal": true,
        "target": "_blank"
      },
      "detailsLink": {
        "text": "View details",
        "url": "#"
      }
    },
    {
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "ShortForm",
      "pageType": "Accomodation",
      "title": "Generic headline for character limits",
      "starRating": {
        "rating": 5,
        "total": 5
      },
      "locationName": "Dublin",
      "link": {
        "text": "Visit hotel website",
        "url": "#",
        "isExternal": true,
        "target": "_blank"
      },
      "detailsLink": {
        "text": "View details",
        "url": "#"
      }
    },
    {
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "ShortForm",
      "pageType": "Accomodation",
      "title": "Generic headline for character limits",
      "starRating": {
        "rating": 5,
        "total": 5
      },
      "locationName": "Dublin",
      "link": {
        "text": "Visit hotel website",
        "url": "#",
        "isExternal": true,
        "target": "_blank"
      },
      "detailsLink": {
        "text": "View details",
        "url": "#"
      }
    },
    {
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "ShortForm",
      "pageType": "Accomodation",
      "title": "Generic headline for character limits",
      "starRating": {
        "rating": 5,
        "total": 5
      },
      "locationName": "Dublin",
      "link": {
        "text": "Visit hotel website",
        "url": "#",
        "isExternal": true,
        "target": "_blank"
      },
      "detailsLink": {
        "text": "View details",
        "url": "#"
      }
    },
    {
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "ShortForm",
      "pageType": "Accomodation",
      "title": "Generic headline for character limits",
      "starRating": {
        "rating": 5,
        "total": 5
      },
      "locationName": "Dublin",
      "link": {
        "text": "Visit hotel website",
        "url": "#",
        "isExternal": true,
        "target": "_blank"
      },
      "detailsLink": {
        "text": "View details",
        "url": "#"
      }
    },
    {
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "ShortForm",
      "pageType": "Accomodation",
      "title": "Generic headline for character limits",
      "starRating": {
        "rating": 5,
        "total": 5
      },
      "locationName": "Dublin",
      "link": {
        "text": "Visit hotel website",
        "url": "#",
        "isExternal": true,
        "target": "_blank"
      },
      "detailsLink": {
        "text": "View details",
        "url": "#"
      }
    },
    {
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "ShortForm",
      "pageType": "Accomodation",
      "title": "Generic headline for character limits",
      "starRating": {
        "rating": 5,
        "total": 5
      },
      "locationName": "Dublin",
      "link": {
        "text": "Visit hotel website",
        "url": "#",
        "isExternal": true,
        "target": "_blank"
      },
      "detailsLink": {
        "text": "View details",
        "url": "#"
      }
    },
    {
      "responsiveImage": {
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ]
      },
      "cardType": "ShortForm",
      "pageType": "Accomodation",
      "title": "Generic headline for character limits",
      "starRating": {
        "rating": 5,
        "total": 5
      },
      "locationName": "Dublin",
      "link": {
        "text": "Visit hotel website",
        "url": "#",
        "isExternal": true,
        "target": "_blank"
      },
      "detailsLink": {
        "text": "View details",
        "url": "#"
      }
    }
  ]
}

Handle: @cp-accommodation-grid-init--9
Variants (3): Default , 9 , 14
Preview:
- With layout
- Component only
Filesystem Path: src/patterns/03-components/travel/_accommodation/cp-accommodation-grid-init.hbs
References (1): @card-standard-or-featured

There are no notes for this item.

Accommodation Grid Initial: 9

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