Unit Details 

<link media="all" rel="stylesheet" href="/assets/themes/default/css/image.css?cb=">

<div class="property-floor-selector__overlay property-floor-selector__overlay--secondary js-unit-details-overlay">
</div>

<div class="property-floor-selector-modal js-unit-details">
    <div class="property-floor-selector-modal__container">
        <a href="#" class="property-floor-selector-modal__close js-unit-details-close"></a>
        <div class="property-floor-selector-modal__tab-content-panels">
            <div class="property-floor-selector-modal__tab-content js-tab-content js-gallery-content active">
                <div class="property-floor-selector-gallery">
                    <link media="all" rel="stylesheet" href="/assets/themes/default/css/gallery.css?cb=">

                    <div class="gallery gallery--vertical-scroll js-vertical-scroll" data-module="gallery">
                        <div class="gallery__slides-container">
                            <div class="gallery__slides js-slides">
                            </div>
                            <span class="gallery__arrow gallery__arrow--left js-arrow-left"><span>Previous</span> </span>
                            <div class="gallery__selection-label">
                                <span class="gallery__current-slide js-current-slide">1</span>
                                <span class="gallery__total-slides js-total-slides"></span>
                            </div>
                            <span class="gallery__arrow gallery__arrow--right js-arrow-right"><span>Next</span> </span>
                        </div>
                        <div class="gallery__dots js-dots">
                        </div>
                    </div>
                </div>

                <div class="js-unit-details-modal-box property-floor-selector-modal__box">
                    <span class="property-floor-selector-modal__box-eyebrow js-eyebrow"></span>
                    <h4 class="property-floor-selector-modal__box-title js-title"></h4>
                    <span class="property-floor-selector-modal__box-meta">
                        <span class="property-floor-selector-modal__box-unit js-unit">
                        </span>
                        <span class="property-floor-selector-modal__box-spacer">
                            •
                        </span>
                        <span class="property-floor-selector-modal__box-sqft js-square-footage">
                        </span>
                        <span class="property-floor-selector-modal__box-spacer">
                            •
                        </span>
                        <span class="property-floor-selector-modal__box-floor js-floor">

                        </span>
                    </span>
                    <div class="property-floor-selector-modal__box-footer">
                        <a href="#" class="property-floor-selector-modal__enquire-cta js-enquire-trigger"></a>
                    </div>
                </div>
            </div>
            <div class="property-floor-selector-modal__tab-content property-floor-selector-modal__tab-content--tour js-tab-content js-virtual-tour-content">
                <iframe src="" loading="lazy" class="property-floor-selector-modal__virtual-tour"></iframe>
                <a href="#" class="property-floor-selector-modal__enquire-cta js-enquire-trigger"></a>
            </div>
            <div class="property-floor-selector-modal__tab-content js-tab-content js-map-content">
                <link media="all" href='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css' rel='stylesheet' />
                <link media="all" rel="stylesheet" href="/assets/themes/default/css/mapbox.css?cb=">

                <div class="mapbox js-mapbox" data-longitude="-81.378112" data-latitude="19.322003" data-map-key="" data-map-style="" data-zoom="" data-pitch="0">
                    <div class="mapbox__map js-map"></div>
                </div>
                <div class="js-unit-details-modal-box property-floor-selector-modal__box">
                    <span class="property-floor-selector-modal__description">

                    </span>

                    <div class="property-floor-selector-modal__box-footer">
                        <a href="#" class="property-floor-selector-modal__enquire-cta js-enquire-trigger"></a>
                    </div>
                </div>
            </div>
            <div class="property-floor-selector-modal__tab-content js-tab-content js-floorplan-content">
                <div class="property-floor-selector-modal__floorplan-content">
                    <a href="#" class="property-floor-selector-modal__enquire-cta js-enquire-trigger"></a>
                    <aside class="property-floor-selector-modal__floorplan-info">
                        <div class="js-floorplan-unit-no"><span class="property-floor-selector-modal__floorplan-info-value--unit-no js-value">1</span> <span class="property-floor-selector-modal__floorplan-info-field">Unit No.</span></div>
                        <div class="js-floorplan-floor-size"><span class="property-floor-selector-modal__floorplan-info-value js-value">1/2 Floor</span> <span class="property-floor-selector-modal__floorplan-info-field">Space</span></div>
                        <div class="js-floorplan-square-footage"><span class="property-floor-selector-modal__floorplan-info-value js-value">3,349</span> <span class="property-floor-selector-modal__floorplan-info-field">SQFT</span></div>
                        <div class="js-floorplan-floor"><span class="property-floor-selector-modal__floorplan-info-value js-value">6</span> <span class="property-floor-selector-modal__floorplan-info-field">Floor</span></div>
                    </aside>
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" class="js-floorplan-image property-floor-selector-modal__floorplan-image" />
                    <iframe loading="lazy" class="js-floorplan-file property-floor-selector-modal__floorplan-file"></iframe>
                </div>
            </div>
        </div>

        <div class="property-floor-selector-modal__navigation">
            <ul class="property-floor-selector-modal__navigation-list">
                <li class="property-floor-selector-modal__navigation-list-item">
                    <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--images js-tab-trigger js-navigation-link-images active" data-tab-content="js-gallery-content" href="#">
                        <span>Images</span>
                    </a>
                </li>
                <li class="property-floor-selector-modal__navigation-list-item">
                    <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--map js-tab-trigger" data-tab-content="js-map-content" href="#">
                        <span>Map</span>
                    </a>
                </li>
                <li class="property-floor-selector-modal__navigation-list-item">
                    <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--plan js-tab-trigger js-navigation-link-floorplan" data-tab-content="js-floorplan-content" href="#">
                        <span>Floor Plan</span>
                    </a>
                </li>
                <li class="property-floor-selector-modal__navigation-list-item js-virtual-tour-item">
                    <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--tour js-tab-trigger" data-tab-content="js-virtual-tour-content" href="#">
                        <span>360 Tour</span>
                    </a>
                </li>
                <li class="property-floor-selector-modal__navigation-list-item property-floor-selector-modal__navigation-list-item--sales js-navigation-link-download">
                    <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--download" href="" download target="_blank">
                        <span>Sales Sheet</span>
                    </a>
                </li>
                <li class="property-floor-selector-modal__navigation-list-item property-floor-selector-modal__navigation-list-item--contact">
                    <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--contact js-enquire-trigger" href="#">
                        <span>Enquire</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
 
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/image.css?cb={{cacheBuster}}">
{{/if}}

<div
    class="property-floor-selector__overlay property-floor-selector__overlay--secondary js-unit-details-overlay">
</div>

<div class="property-floor-selector-modal js-unit-details">
    <div class="property-floor-selector-modal__container">
        <a href="#" class="property-floor-selector-modal__close js-unit-details-close"></a>
        <div class="property-floor-selector-modal__tab-content-panels">
            <div class="property-floor-selector-modal__tab-content js-tab-content js-gallery-content active">
                <div class="property-floor-selector-gallery">
                    {{> @gallery verticalScroll=true hideThumbnails=true firstInstance=true theme=theme }}
                </div>

                <div class="js-unit-details-modal-box property-floor-selector-modal__box">
                    <span class="property-floor-selector-modal__box-eyebrow js-eyebrow"></span>
                    <h4 class="property-floor-selector-modal__box-title js-title"></h4>
                    <span class="property-floor-selector-modal__box-meta">
                        <span class="property-floor-selector-modal__box-unit js-unit">
                        </span>
                        <span class="property-floor-selector-modal__box-spacer">
                            •
                        </span>
                        <span class="property-floor-selector-modal__box-sqft js-square-footage">
                        </span>
                        <span class="property-floor-selector-modal__box-spacer">
                            •
                        </span>
                        <span class="property-floor-selector-modal__box-floor js-floor">

                        </span>
                    </span>
                    <div class="property-floor-selector-modal__box-footer">
                        {{#if brochureUrl }}
                        <a href="{{ brochureUrl }}" class="property-floor-selector-modal__brochure-cta" download>{{ boxCtaText
                            }}</a>
                        {{/if}}
                        <a href="#" class="property-floor-selector-modal__enquire-cta js-enquire-trigger">{{ boxContactText }}</a>
                    </div>
                </div>
            </div>
            <div class="property-floor-selector-modal__tab-content property-floor-selector-modal__tab-content--tour js-tab-content js-virtual-tour-content">
                <iframe src="" loading="lazy" class="property-floor-selector-modal__virtual-tour"></iframe>
                <a href="#" class="property-floor-selector-modal__enquire-cta js-enquire-trigger">{{ boxContactText }}</a>
            </div>
            <div class="property-floor-selector-modal__tab-content js-tab-content js-map-content">
                {{> @mapbox latitude=map.latitude longitude=map.longitude key=map.key style=map.style doNotInitialise=true zoomLevel=map.zoomLevel }}
                <div class="js-unit-details-modal-box property-floor-selector-modal__box">
                    {{#if locationEyebrow}}
                    <span class="property-floor-selector-modal__box-eyebrow">{{locationEyebrow}}</span>
                    {{/if}}
                    {{#if locationTitle}}
                    <h4 class="property-floor-selector-modal__box-title">{{locationTitle}}</h4>
                    {{/if}}
                    <span class="property-floor-selector-modal__description">
                        {{locationDescription}}
                    </span>

                    <div class="property-floor-selector-modal__box-footer">
                        {{#if brochureUrl }}
                        <a href="{{ brochureUrl }}" class="property-floor-selector-modal__brochure-cta" download>{{ boxCtaText
                            }}</a>
                        {{/if}}
                        <a href="#" class="property-floor-selector-modal__enquire-cta js-enquire-trigger">{{ boxContactText }}</a>
                    </div>
                </div>
            </div>
             <div class="property-floor-selector-modal__tab-content js-tab-content js-floorplan-content">
                <div class="property-floor-selector-modal__floorplan-content">
                    <a href="#" class="property-floor-selector-modal__enquire-cta js-enquire-trigger">{{ boxContactText }}</a>
                    <aside class="property-floor-selector-modal__floorplan-info">
                        <div class="js-floorplan-unit-no"><span class="property-floor-selector-modal__floorplan-info-value--unit-no js-value">1</span> <span class="property-floor-selector-modal__floorplan-info-field">Unit No.</span></div>
                        <div class="js-floorplan-floor-size"><span class="property-floor-selector-modal__floorplan-info-value js-value">1/2 Floor</span> <span class="property-floor-selector-modal__floorplan-info-field">Space</span></div>
                        <div class="js-floorplan-square-footage"><span class="property-floor-selector-modal__floorplan-info-value js-value">3,349</span> <span class="property-floor-selector-modal__floorplan-info-field">SQFT</span></div>
                        <div class="js-floorplan-floor"><span class="property-floor-selector-modal__floorplan-info-value js-value">6</span> <span class="property-floor-selector-modal__floorplan-info-field">Floor</span></div>
                    </aside>
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" class="js-floorplan-image property-floor-selector-modal__floorplan-image" />
                    <iframe loading="lazy" class="js-floorplan-file property-floor-selector-modal__floorplan-file"></iframe>
                </div>
             </div>
        </div>

        <div class="property-floor-selector-modal__navigation">
            <ul class="property-floor-selector-modal__navigation-list">
                <li
                    class="property-floor-selector-modal__navigation-list-item">
                    <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--images js-tab-trigger js-navigation-link-images active"
                        data-tab-content="js-gallery-content" href="#">
                        <span>Images</span>
                    </a>
                </li>
                <li class="property-floor-selector-modal__navigation-list-item">
                    <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--map js-tab-trigger" data-tab-content="js-map-content" href="#">
                        <span>Map</span>
                    </a>
                </li>
                <li class="property-floor-selector-modal__navigation-list-item">
                    <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--plan js-tab-trigger js-navigation-link-floorplan" data-tab-content="js-floorplan-content" href="#">
                        <span>Floor Plan</span>
                    </a>
                </li>
                <li class="property-floor-selector-modal__navigation-list-item js-virtual-tour-item">
                    <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--tour js-tab-trigger" data-tab-content="js-virtual-tour-content" href="#">
                        <span>360 Tour</span>
                    </a>
                </li>
                <li
                    class="property-floor-selector-modal__navigation-list-item property-floor-selector-modal__navigation-list-item--sales js-navigation-link-download">
                    <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--download"
                        href="" download target="_blank">
                        <span>Sales Sheet</span>
                    </a>
                </li>
                <li
                    class="property-floor-selector-modal__navigation-list-item property-floor-selector-modal__navigation-list-item--contact">
                    <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--contact js-enquire-trigger"
                        href="#">
                        <span>Enquire</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
 
{
  "theme": "default",
  "firstInstance": true
}

Property Floor Selector (PFS)