Skip to content

Commit 552fbaf

Browse files
wesleycolewesleycole
committed
adding property component
1 parent e7ff0f6 commit 552fbaf

File tree

15 files changed

+310
-38
lines changed

15 files changed

+310
-38
lines changed

‎_component/property/component.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<div class="Property" itemscope itemtype="http://schema.org/SingleFamilyResidence">
2+
<span class="Property-address hide" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
3+
<span itemprop="streetAddress">1234 Street Address Way #1343</span>
4+
<span itemprop="addressLocality">Aspen</span>
5+
<span itemprop="addressRegion">CO</span>
6+
<span class="postalCode">12345</span>
7+
</span>
8+
<span itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
9+
<meta itemprop="latitude" content="39.148027">
10+
<meta itemprop="longitude" content="-106.814707">
11+
</span>
12+
<div class="Property-image">
13+
<a href="http://example.com">
14+
<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" />
15+
</a>
16+
</div>
17+
<div class="Property-details">
18+
<h4 class="Property-price">
19+
<a href="http://example.com">$2,695,000 </br>
20+
<span class="Property-address">1234 Street Address Way #1343</span>
21+
</a>
22+
</h4>
23+
<div class="Property-data">
24+
<ul class="Property-meta">
25+
<li><strong>3</strong> Bed</li>
26+
<li><strong>2</strong> Bath</li>
27+
<li><strong>6,474</strong> SqFt</li>
28+
</ul>
29+
</div>
30+
</div>
31+
</div>

‎_component/property/css/component.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.hide {
2+
display: none !important;
3+
}
4+
5+
.Property {
6+
max-width: 400px;
7+
}
8+
9+
.Property-meta {
10+
align-items: baseline;
11+
display: flex;
12+
justify-content: space-between;
13+
margin: 0;
14+
padding: 0;
15+
}
16+
17+
.Property-meta li {
18+
list-style-type: none;
19+
}

‎_component/property/example.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US" class="no-js">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Accordion</title>
6+
<link rel="stylesheet" href="css/component.css" />
7+
</head>
8+
<body>
9+
10+
<div class="Property" itemscope itemtype="http://schema.org/SingleFamilyResidence">
11+
<span class="Property-address hide" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
12+
<span itemprop="streetAddress">1234 Street Address Way #1343</span>
13+
<span itemprop="addressLocality">Aspen</span>
14+
<span itemprop="addressRegion">CO</span>
15+
<span class="postalCode">12345</span>
16+
</span>
17+
<span itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
18+
<meta itemprop="latitude" content="39.148027">
19+
<meta itemprop="longitude" content="-106.814707">
20+
</span>
21+
<div class="Property-image">
22+
<a href="http://example.com">
23+
<img src="https://placekitten.com/g/400/200" srcset="https://placekitten.com/g/400/200 1x, https://placekitten.com/g/800/400 2x" alt="header image" />
24+
</a>
25+
</div>
26+
<div class="Property-details">
27+
<h4 class="Property-price">
28+
<a href="http://example.com">$2,695,000 </br>
29+
<span class="Property-address">1234 Street Address Way #1343</span>
30+
</a>
31+
</h4>
32+
<div class="Property-data">
33+
<ul class="Property-meta">
34+
<li><strong>3</strong> Bed</li>
35+
<li><strong>2</strong> Bath</li>
36+
<li><strong>6,474</strong> SqFt</li>
37+
</ul>
38+
</div>
39+
</div>
40+
</div>
41+
42+
</body>
43+
</html>

‎_component/property/index.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
title: Property
3+
layout: component
4+
path_slug: property
5+
category: content
6+
iframe_height: medium
7+
---
8+
9+
<iframe {% if page.iframe_height %}class="h-{{ page.iframe_height }}"{% endif %} src="{{ site.baseurl }}/component/{{ page.path_slug }}/example.html"></iframe>
10+
11+
12+
## Markup
13+
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.
14+
15+
```html
16+
{% include_relative component.html %}
17+
```
18+
19+
## Styles
20+
21+
### CSS
22+
```css
23+
{% include_relative css/component.css %}
24+
```

‎_site/component/accordion/index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,10 @@ <h4>Content</h4>
8989

9090

9191

92-
<li class="ComponentList-item"><a href="/component-library/component/logo/index.html">Logo</a></li>
93-
9492

9593

94+
<li class="ComponentList-item"><a href="/component-library/component/property/index.html">Property</a></li>
95+
9696

9797

9898

@@ -114,15 +114,15 @@ <h4>Twig</h4>
114114

115115

116116

117-
118-
119117
<li class="ComponentList-item"><a href="/component-library/component/macros/index.html">Macros</a></li>
120118

121119

122120

123121

124122

125123

124+
125+
126126
</ul>
127127
</div>
128128

‎_site/component/blogpost/index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,10 @@ <h4>Content</h4>
8989

9090

9191

92-
<li class="ComponentList-item"><a href="/component-library/component/logo/index.html">Logo</a></li>
93-
9492

9593

94+
<li class="ComponentList-item"><a href="/component-library/component/property/index.html">Property</a></li>
95+
9696

9797

9898

@@ -114,15 +114,15 @@ <h4>Twig</h4>
114114

115115

116116

117-
118-
119117
<li class="ComponentList-item"><a href="/component-library/component/macros/index.html">Macros</a></li>
120118

121119

122120

123121

124122

125123

124+
125+
126126
</ul>
127127
</div>
128128

‎_site/component/blogroll/index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,10 @@ <h4>Content</h4>
8989

9090

9191

92-
<li class="ComponentList-item"><a href="/component-library/component/logo/index.html">Logo</a></li>
93-
9492

9593

94+
<li class="ComponentList-item"><a href="/component-library/component/property/index.html">Property</a></li>
95+
9696

9797

9898

@@ -114,15 +114,15 @@ <h4>Twig</h4>
114114

115115

116116

117-
118-
119117
<li class="ComponentList-item"><a href="/component-library/component/macros/index.html">Macros</a></li>
120118

121119

122120

123121

124122

125123

124+
125+
126126
</ul>
127127
</div>
128128

‎_site/component/macros/index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,10 @@ <h4>Content</h4>
8989

9090

9191

92-
<li class="ComponentList-item"><a href="/component-library/component/logo/index.html">Logo</a></li>
93-
9492

9593

94+
<li class="ComponentList-item"><a href="/component-library/component/property/index.html">Property</a></li>
95+
9696

9797

9898

@@ -114,15 +114,15 @@ <h4>Twig</h4>
114114

115115

116116

117-
118-
119117
<li class="ComponentList-item"><a href="/component-library/component/macros/index.html">Macros</a></li>
120118

121119

122120

123121

124122

125123

124+
125+
126126
</ul>
127127
</div>
128128

‎_site/component/property/component.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<div class="Property" itemscope itemtype="http://schema.org/SingleFamilyResidence">
2+
<span class="Property-address hide" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
3+
<span itemprop="streetAddress">1234 Street Address Way #1343</span>
4+
<span itemprop="addressLocality">Aspen</span>
5+
<span itemprop="addressRegion">CO</span>
6+
<span class="postalCode">12345</span>
7+
</span>
8+
<span itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
9+
<meta itemprop="latitude" content="39.148027">
10+
<meta itemprop="longitude" content="-106.814707">
11+
</span>
12+
<div class="Property-image">
13+
<a href="http://example.com">
14+
<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" />
15+
</a>
16+
</div>
17+
<div class="Property-details">
18+
<h4 class="Property-price">
19+
<a href="http://example.com">$2,695,000 </br>
20+
<span class="Property-address">1234 Street Address Way #1343</span>
21+
</a>
22+
</h4>
23+
<div class="Property-data">
24+
<ul class="Property-meta">
25+
<li><strong>3</strong> Bed</li>
26+
<li><strong>2</strong> Bath</li>
27+
<li><strong>6,474</strong> SqFt</li>
28+
</ul>
29+
</div>
30+
</div>
31+
</div>

‎_site/component/property/css/component.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.hide {
2+
display: none !important;
3+
}
4+
5+
.Property {
6+
max-width: 400px;
7+
}
8+
9+
.Property-meta {
10+
align-items: baseline;
11+
display: flex;
12+
justify-content: space-between;
13+
margin: 0;
14+
padding: 0;
15+
}
16+
17+
.Property-meta li {
18+
list-style-type: none;
19+
}

‎_site/component/property/example.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US" class="no-js">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Accordion</title>
6+
<link rel="stylesheet" href="css/component.css" />
7+
</head>
8+
<body>
9+
10+
<div class="Property" itemscope itemtype="http://schema.org/SingleFamilyResidence">
11+
<span class="Property-address hide" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
12+
<span itemprop="streetAddress">1234 Street Address Way #1343</span>
13+
<span itemprop="addressLocality">Aspen</span>
14+
<span itemprop="addressRegion">CO</span>
15+
<span class="postalCode">12345</span>
16+
</span>
17+
<span itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
18+
<meta itemprop="latitude" content="39.148027">
19+
<meta itemprop="longitude" content="-106.814707">
20+
</span>
21+
<div class="Property-image">
22+
<a href="http://example.com">
23+
<img src="https://placekitten.com/g/400/200" srcset="https://placekitten.com/g/400/200 1x, https://placekitten.com/g/800/400 2x" alt="header image" />
24+
</a>
25+
</div>
26+
<div class="Property-details">
27+
<h4 class="Property-price">
28+
<a href="http://example.com">$2,695,000 </br>
29+
<span class="Property-address">1234 Street Address Way #1343</span>
30+
</a>
31+
</h4>
32+
<div class="Property-data">
33+
<ul class="Property-meta">
34+
<li><strong>3</strong> Bed</li>
35+
<li><strong>2</strong> Bath</li>
36+
<li><strong>6,474</strong> SqFt</li>
37+
</ul>
38+
</div>
39+
</div>
40+
</div>
41+
42+
</body>
43+
</html>

0 commit comments

Comments
 (0)