Property Card: Residential 

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

<div class="property-card" data-data-source="" data-partner="">
    <div class="property-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&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;768&amp;q&#x3D;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&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1000&amp;q&#x3D;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&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;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&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;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&#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: 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&#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" />
                                    <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-card__title-and-location">
        <h3 class="property-card__title">Residential Property 1</h3>
        <p class="property-card__location">Camana Bay</p>
        <p class="property-card__mls"></p>
    </a>
    <a href="#" class="property-card__details">

        <p class="property-card__bedrooms property-card__detail">1 Bedroom</p>
        <p class="property-card__bathrooms property-card__detail">1 Bathroom</p>

        <div class="property-card__price-container">
            <p class="property-card__price">$6,766,777</p>
        </div>
    </a>
</div>
 
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/property-card.css?cb={{cacheBuster}}">
{{/if}}

<div class="property-card" data-data-source="{{dataSource}}" data-partner="{{partner}}">
    <div class="property-card__gallery">
        {{> @gallery slides=gallery.slides hideThumbnails=true destinationUrl=propertyUrl theme=theme firstInstance=gallery.firstInstance }}
    </div>
    <a href="{{propertyUrl}}" class="property-card__title-and-location">
        <h3 class="property-card__title">{{title}}</h3>
        <p class="property-card__location">{{location}}</p>
        <p class="property-card__mls">{{mls}}</p>
    </a>
    <a href="{{propertyUrl}}" class="property-card__details">
        {{#if propertyType}}<div class="property-card__property-type property-card__detail">{{#if propertyTypeIcon}}<div class="property-card__property-type-icon">{{{propertyTypeIcon}}}</div>{{/if}}<p>{{propertyType}}</p></div>{{/if}}
        {{#if bedrooms}}<p class="property-card__bedrooms property-card__detail">{{bedrooms}}</p>{{/if}}
        {{#if bathrooms}}<p class="property-card__bathrooms property-card__detail">{{bathrooms}}</p>{{/if}}
        {{#if squareFootage}}<p class="property-card__square-footage property-card__detail">{{squareFootage}}</p>{{/if}}
        {{#if price}}<div class="property-card__price-container"><p class="property-card__price">{{price}}</p></div>{{/if}}
    </a>
</div>
 
{
  "theme": "default",
  "firstInstance": true,
  "propertyUrl": "#",
  "status": "Property Status",
  "gallery": {
    "firstInstance": true,
    "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,
          "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",
  "bedrooms": "1 Bedroom",
  "bathrooms": "1 Bathroom",
  "price": "$6,766,777"
}
  • Content: 
    @import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';

.property-card {
    min-height: 100%;
    padding: rem(10);

    &__link {
        text-decoration: none;
    }

    &__title {
        @extend %heading03;
        text-decoration: none;
    }

    &__gallery {
        @extend %spacer-small;
        position: relative;
    }

    .gallery {
        &__dots {
            display: none;
        }

        &__slide {
            .image {
                &:not(.loaded) {
                    // Display the ajax loader while we wait for the image to load
                    &::after {
                        background: $color-white url('../images/ajax-loader.gif') center center no-repeat;
                        bottom: 0;
                        content: '';
                        left: 0;
                        position: absolute;
                        right: 0;
                        top: 0;
                    }
                }
            }
        }
    }

    &__location,
    &__mls,
    &__property-type,
    &__square-footage,
    &__bedrooms,
    &__bathrooms {
        @extend %p--body;
        @extend %spacer-small;
        text-decoration: none;
    }

    &__property-type,
    &__square-footage,
    &__bedrooms,
    &__bathrooms {
        width: 50%;
    }

    &__details {
        display: flex;
        flex-wrap: wrap;
    }

    &__price {
        @extend %p--lead;
        flex-shrink: 0;
        font-weight: bold;
        text-decoration: none;
        width: 100%;
    }
}
  • URL: /components/raw/property-card/property-card.scss
  • Filesystem Path: source/patterns/03-components/cards/property-card/property-card.scss
  • Size: 1.6 KB

No notes defined.