Property

Markup

We are only including the HTML markup for this component. This is because the information for this component can come from multiple different sources. We use the SimplyRETS API so that we can have complete control over the data when displaying real estate properties.

<div class="Property" itemscope itemtype="http://schema.org/SingleFamilyResidence">
    
    <span class="Property-address hide" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress">1234 Street Address Way #1343</span>
        <span itemprop="addressLocality">Aspen</span>
        <span itemprop="addressRegion"><abbr title="Colorado">CO</abbr></span>
        <span class="postalCode">12345</span>
    </span>
    
    <span itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
        <meta itemprop="latitude" content="39.148027">
        <meta itemprop="longitude" content="-106.814707">
    </span>
    
    <div class="Property-image">
        <a href="http://example.com">
            <img src="https://placekitten.com/g/400/150" srcset="https://placekitten.com/g/400/150 1x, https://placekitten.com/g/800/300 2x" alt="header image" />
        </a>
    </div>
    
    <div class="Property-details">
        <h4 class="Property-price">
            <a href="http://example.com">$2,695,000 </br>
                <span class="Property-address">1234 Street Address Way #1343</span>
            </a>
        </h4>
        <div class="Property-data">
            <ul class="Property-meta">
                <li><strong>3</strong> Bed</li>
                <li><strong>2</strong> Bath</li>
                <li><strong>6,474</strong> SqFt</li>
            </ul>
        </div>
    </div>
    
</div>

Styles

CSS

.hide {
    display: none !important;
}

.Property {
    max-width: 400px;
}

.Property-meta {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}

.Property-meta li {
    list-style-type: none;
}