<link media="all" rel="stylesheet" href="/assets/themes/default/css/property-featured-card.css?cb=">
<div class="property-featured-card">
<div class="property-featured-card__gallery">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/gallery.css?cb=">
<div class="gallery " data-module="gallery">
<div class="gallery__slides-container">
<a href="#">
<div class="gallery__slides js-slides">
<div class="gallery__slide js-slide" data-type="image" data-slide-index="0">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/image.css?cb=">
<div class="image " data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" class="js-small-image" type="image/jpeg" srcset="/assets/themes/default/images/ajax-loader.gif" data-srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85" />
<source media="(min-width: 841px)" class="js-medium-image" type="image/jpeg" srcset="/assets/themes/default/images/ajax-loader.gif" data-srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85" />
<img src="/assets/themes/default/images/ajax-loader.gif" data-src="" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="gallery__slide js-slide" data-type="image" data-slide-index="1">
<div class="image " data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" class="js-small-image" type="image/jpeg" srcset="/assets/themes/default/images/ajax-loader.gif" data-srcset="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85" />
<source media="(min-width: 841px)" class="js-medium-image" type="image/jpeg" srcset="/assets/themes/default/images/ajax-loader.gif" data-srcset="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85" />
<img src="/assets/themes/default/images/ajax-loader.gif" data-src="" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="gallery__slide js-slide" data-type="image" data-slide-index="2">
<div class="image " data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" class="js-small-image" type="image/jpeg" srcset="/assets/themes/default/images/ajax-loader.gif" data-srcset="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<source media="(min-width: 841px)" class="js-medium-image" type="image/jpeg" srcset="/assets/themes/default/images/ajax-loader.gif" data-srcset="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<img src="/assets/themes/default/images/ajax-loader.gif" data-src="" alt="Image Alt Text">
</picture>
</div>
</div>
</div>
</a>
<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">3</span>
</div>
<span class="gallery__arrow gallery__arrow--right js-arrow-right"><span>Next</span> </span>
</div>
<div class="gallery__dots js-dots">
<span class="gallery__dot js-dot active" data-dot-index="0"></span>
<span class="gallery__dot js-dot " data-dot-index="1"></span>
<span class="gallery__dot js-dot " data-dot-index="2"></span>
</div>
</div>
</div>
<a href="#" class="property-featured-card__text">
<div href="#" class="property-featured-card__title-and-location">
<h2 class="property-featured-card__title">Residential Property 1</h2>
<p class="property-featured-card__location">Camana Bay</p>
</div>
<div class="property-featured-card__details">
</div>
<div class="property-featured-card__price-container">
<p class="property-featured-card__price">$6,766,777</p>
</div>
</a>
</div>
{{#if firstInstance}}
<link media="all" rel="stylesheet"
href="/assets/themes/{{theme}}/css/property-featured-card.css?cb={{cacheBuster}}">
{{/if}}
<div class="property-featured-card">
<div class="property-featured-card__gallery">
{{> @gallery slides=gallery.slides hideThumbnails=true destinationUrl=propertyUrl theme=theme
firstInstance=gallery.firstInstance }}
</div>
<a href="{{propertyUrl}}" class="property-featured-card__text">
<div href="{{propertyUrl}}" class="property-featured-card__title-and-location">
<h2 class="property-featured-card__title">{{title}}</h2>
<p class="property-featured-card__location">{{location}}</p>
</div>
<div class="property-featured-card__details">
{{#if propertyType}}<div class="property-featured-card__property-type property-featured-card__detail">{{#if
propertyTypeIcon}}<div class="property-featured-card__property-type-icon">{{{propertyTypeIcon}}}</div>
{{/if}}<p>{{propertyType}}</p>
</div>{{/if}}
{{#if bedrooms}}<p class="property-featured-card__bedrooms property-featured-card__detail">{{bedrooms}}</p>
{{/if}}
{{#if bathrooms}}<p class="property-featured-card__bathrooms property-featured-card__detail">{{bathrooms}}
</p>
{{/if}}
{{#if squareFootage}}<p class="property-featured-card__square-footage property-featured-card__detail">
{{squareFootage}}</p>{{/if}}
</div>
{{#if price}}<div class="property-featured-card__price-container">
<p class="property-featured-card__price">{{price}}</p>
</div>{{/if}}
</a>
</div>
{
"theme": "default",
"firstInstance": true,
"propertyUrl": "#",
"status": "Property Status",
"gallery": {
"firstInstance": true,
"theme": "default",
"slides": [
{
"thumbnailUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"firstInstance": true,
"theme": "default",
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
"mobileImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
}
}
]
},
"title": "Residential Property 1",
"location": "Camana Bay",
"bedroomsBathrooms": "1 Bed/1 Bath",
"price": "$6,766,777"
}
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.property-featured-card {
display: flex;
flex: 0 0 auto;
flex-direction: column;
width: 100%;
@include breakpoint(medium) {
flex-direction: row;
}
&__title {
@extend %heading02;
text-transform: uppercase;
}
&__price {
@extend %p--lead;
font-weight: bold;
margin-bottom: rem(30);
}
&__gallery {
position: relative;
@include breakpoint(medium) {
padding-right: rem(15);
width: 50%;
}
.gallery {
&__dots {
display: none;
}
}
}
&__text {
@include breakpoint(medium) {
padding-left: rem(15);
width: 50%;
}
}
}
No notes defined.