Property Detail Card 

<div class="property-detail-card">
    <div class="grid-x grid-padding-x">
        <div class="cell medium-5 property-detail-card__cell">
            <div class="property-detail-card__image lazy-load-image" data-module="imageLazyLoad">
                <picture>
                    <img src="" loading="lazy" alt="">
                </picture>
            </div>
        </div>
        <div class="cell medium-7 property-detail-card__cell">
            <div class="property-detail-card__detail">
                <div class="property-detail-card__heading">
                    <p class="property-detail-card__eyebrow"></p>
                    <h2 class="property-detail-card__title"></h2>
                </div>
                <p class="property-detail-card__price"></p>
            </div>
        </div>
    </div>
</div>
 
<div class="property-detail-card">
    <div class="grid-x grid-padding-x">
        <div class="cell medium-5 property-detail-card__cell">
            <div class="property-detail-card__image lazy-load-image" data-module="imageLazyLoad">
                {{> @picture image }}
            </div>
        </div>
        <div class="cell medium-7 property-detail-card__cell">
            <div class="property-detail-card__detail">
                <div class="property-detail-card__heading">
                    <p class="property-detail-card__eyebrow">{{location}}</p>
                    <h2 class="property-detail-card__title">{{title}}</h2>
                </div>
                <p class="property-detail-card__price">{{price}}</p>
            </div>
        </div>
        {{#if brokerAttribution}}
        <div class="cell">
            <p class="property-details-card__broker-text">{{brokerAttribution}}</p>
        </div>
        {{/if}}
    </div>
</div>
 
{
  "theme": "default",
  "firstInstance": true
}
  • Content: 
    @import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';

.property-detail-card {
    @extend %spacer-large;

    &__image {
        aspect-ratio: 5 / 3;
        height: auto;
        width: 100%;
    }

    &__detail {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    &__cell {
        margin-bottom: rem(10);
    }

    &__title {
        @extend %heading02;
    }

    &__eyebrow {
        @extend %p--small;
    }

    &__price {
        margin-top: auto;
    }
}
  • URL: /components/raw/property-detail-card/_property-detail-card.scss
  • Filesystem Path: source/patterns/03-components/property/_property-detail-card/_property-detail-card.scss
  • Size: 533 Bytes

No notes defined.