Blog Featured Article
Etiam sapien mauris, consequat id consectetur ut, imperdiet ut urna. Etiam quis consectetur nulla!
<ul class="sg-colors">
<li>
<span class="sg-swatch" style="background: #141B4D;"></span>
<span class="sg-label">#141B4D "Corporate Purple" $corpPurple</span>
</li>
<li>
<span class="sg-swatch" style="background: #00B5E2;"></span>
<span class="sg-label">#00B5E2 "Corporate Blue" $corpBlue</span>
</li>
<li>
<span class="sg-swatch" style="background: #0072CE;"></span>
<span class="sg-label">#0072CE "Residential Blue" $residentialBlue</span>
</li>
<li>
<span class="sg-swatch" style="background: #DA291C;"></span>
<span class="sg-label">#DA291C "Commercial Red" $commercialRed</span>
</li>
<li>
<span class="sg-swatch" style="background: #009F4D;"></span>
<span class="sg-label">#009F4D "Rural Green" $ruralGreen</span>
</li>
<li>
<span class="sg-swatch" style="background: #5F259F;"></span>
<span class="sg-label">#5F259F "Business Purple" $businessPurple</span>
</li>
<li>
<span class="sg-swatch" style="background: #FFFFFF;"></span>
<span class="sg-label">#FFFFFF "White" $white</span>
</li>
<li>
<span class="sg-swatch" style="background: #F4F4F4;"></span>
<span class="sg-label">#F4F4F4 "Lightest Gray" $lightestGray</span>
</li>
<li>
<span class="sg-swatch" style="background: #EDEDED;"></span>
<span class="sg-label">#EDEDED "Footer Gray" $footerGray</span>
</li>
<li>
<span class="sg-swatch" style="background: #CCCCCC;"></span>
<span class="sg-label">#CCCCCC "Leader Board Gray" $iron</span>
</li>
<li>
<span class="sg-swatch" style="background: #666666;"></span>
<span class="sg-label">#666666 "Steel" $steel</span>
</li>
<li>
<span class="sg-swatch" style="background: #333333;"></span>
<span class="sg-label">#333333 "Oil" $oil</span>
</li>
<li>
<span class="sg-swatch" style="background: #000000;"></span>
<span class="sg-label">#000000 "Black" $black</span>
</li>
</ul>
Primary font: "Open Sans", "Arial", "Helvetica", sans-serif;
Primary font italic: "Open Sans", "Arial", "Helvetica", sans-serif;
Primary font bold: "Open Sans", "Arial", "Helvetica", sans-serif;
Secondary font: Georgia, Times, "Times New Roman", serif;
Secondary font italic: Georgia, Times, "Times New Roman", serif;
Secondary font bold; Georgia, Times, "Times New Roman", serif;
<p>Primary font: "Open Sans", "Arial", "Helvetica", sans-serif;</p>
<p><em>Primary font italic: "Open Sans", "Arial", "Helvetica", sans-serif;</em></p>
<p><strong>Primary font bold: "Open Sans", "Arial", "Helvetica", sans-serif;</strong></p>
<p class="font-secondary">Secondary font: Georgia, Times, "Times New Roman", serif;</p>
<p class="font-secondary"><em>Secondary font italic: Georgia, Times, "Times New Roman", serif;</em></p>
<p class="font-secondary"><strong>Secondary font bold; Georgia, Times, "Times New Roman", serif;</strong></p>
This text is shown only on a small screen. This text is shown on medium screens and up. This text is shown only on a medium screen. This text is shown on large screens and up. This text is shown only on a large screen. This text is shown on xlarge screens and up. This text is shown only on an xlarge screen. This text is shown on xxlarge screens and up.
<p class="panel">
<strong class="show-for-small-only">This text is shown only on a small screen.</strong>
<strong class="show-for-medium-up">This text is shown on medium screens and up.</strong>
<strong class="show-for-medium-only">This text is shown only on a medium screen.</strong>
<strong class="show-for-large-up">This text is shown on large screens and up.</strong>
<strong class="show-for-large-only">This text is shown only on a large screen.</strong>
<strong class="show-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
<strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
<strong class="show-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong>
</p>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.
<blockquote>
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
</blockquote>
Strong is used to indicate strong importance
This text has added emphasis
The b element is stylistically different text from normal text, without any special importance
The i element is text that is set off from the normal text
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation
This text is deleted and This text is inserted
This text has a strikethrough
Superscript®
Subscript for things like H2O
This small text is small for for fine print, etc.
Abbreviation: HTML
Keybord input: Cmd
This text is a short inline quotation
This is a citation
The dfn element indicates a definition.
The mark element indicates a highlight
This is what inline code looks like.
This is sample output from a computer program
The variable element, such as x = y
<div class="text">
<p><a href="#">This is a text link</a></p>
<p><strong>Strong is used to indicate strong importance</strong></p>
<p><em>This text has added emphasis</em></p>
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>
<p>The <i>i element</i> is text that is set off from the normal text</p>
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
<p><s>This text has a strikethrough</s></p>
<p>Superscript<sup>®</sup></p>
<p>Subscript for things like H<sub>2</sub>O</p>
<p><small>This small text is small for for fine print, etc.</small></p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p>Keybord input: <kbd>Cmd</kbd></p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
<p><cite>This is a citation</cite>
</p><p>The <dfn>dfn element</dfn> indicates a definition.</p>
<p>The <mark>mark element</mark> indicates a highlight</p>
<p><code>This is what inline code looks like.</code></p>
<p><samp>This is sample output from a computer program</samp></p>
<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var></p>
</div><!--end .text-->
<time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>
P R E F O R M A T T E D T E X T ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~
<pre>
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
</pre>
<hr />
<ul class="disc">
<li>List item with a much longer description or more content.</li>
<li>List item</li>
<li>List item
<ul>
<li>Nested List Item</li>
<li>Nested List Item</li>
<li>Nested List Item</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<ul class="no-bullet">
<li>List item with a much longer description or more content.</li>
<li>List item</li>
<li>List item
<ul>
<li>Nested List Item</li>
<li>Nested List Item</li>
<li>Nested List Item</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<img src="../../images/fpo_4x3.png" alt="4x3 Image" />
<img src="../../images/fpo_16x9.png" alt="16x9 Image" />
<img src="/images/blog/800-232-article-header.jpg" alt="Article Header Image" />
<fieldset>
<div class="field-container">
<label for="text">Text Input <abbr title="Required">*</abbr></label>
<input id="text" type="text" placeholder="Text Input">
</div>
<div class="field-container">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Type your Password">
</div>
<div class="field-container">
<label for="webaddress">Web Address</label>
<input id="webaddress" type="url" placeholder="http://yoursite.com">
</div>
<div class="field-container">
<label for="emailaddress">Email Address</label>
<input id="emailaddress" type="email" placeholder="name@email.com">
</div>
<div class="field-container">
<label for="search">Search</label>
<input id="search" type="search" placeholder="Enter Search Term">
</div>
<div class="field-container">
<label for="number">Number Input <abbr title="Required">*</abbr></label>
<input id="number" type="number" placeholder="Enter a Number" pattern="[0-9]*">
</div>
<div class="field-container">
<label for="textarea">Textarea</label>
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</div>
<div class="field-container">
<label class="error">Error Input</label>
<input class="is-error" type="text" placeholder="Text Input">
</div>
<div class="field-container">
<label class="valid">Valid</label>
<input class="is-valid" type="text" placeholder="Text Input">
</div>
</fieldset>
<fieldset>
<div class="field-container">
<label for="select">Select</label>
<select id="select">
<optgroup label="Option Group">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
</select>
</div>
</fieldset>
<form action="#">
<fieldset class="options">
<legend>Checkbox <abbr title="Required">*</abbr></legend>
<ul class="no-bullet">
<li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
</ul>
</fieldset>
</form>
<form action="#">
<fieldset class="options">
<legend>Radio</legend>
<ul class="no-bullet">
<li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
<li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
<li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
</ul>
</fieldset>
</form>
<p><a href="#" class="button">Button</a></p>
<p><a href="#" class="button secondary">Alternate Button</a></p>
<p><a href="#" class="button disabled">Disabled Button</a></p>
<p><a href="#" class="button alert">Color Button</a></p>
Table Header | Table Header | Table Header | Table Header |
---|---|---|---|
Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
<table>
<thead>
<tr>
<th width="200">Table Header</th>
<th>Table Header</th>
<th width="150">Table Header</th>
<th width="150">Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Goes Here</td>
<td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
</tbody>
</table>
<svg class="icon star">
<use xlink:href="#star-icon" />
</svg>
<svg class="icon email">
<use xlink:href="#email-icon" />
</svg>
<svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg>
<svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg>
<svg class="icon floor-area">
<use xlink:href="#floor-area-icon" />
</svg>
<svg class="icon land-area">
<use xlink:href="#land-area-icon" />
</svg>
<svg class="icon ensuite">
<use xlink:href="#ensuite-icon" />
</svg>
<svg class="icon auction">
<use xlink:href="#auction-icon" />
</svg>
<svg class="icon broadband">
<use xlink:href="#broadband-icon" />
</svg>
<svg class="icon carpark-uncovered">
<use xlink:href="#carpark-uncovered-icon" />
</svg>
<svg class="icon carpark-covered">
<use xlink:href="#carpark-covered-icon" />
</svg>
<svg class="icon garden">
<use xlink:href="#garden-icon" />
</svg>
<svg class="icon kitchen">
<use xlink:href="#kitchen-icon" />
</svg>
<svg class="icon lounge">
<use xlink:href="#lounge-icon" />
</svg>
<svg class="icon pool">
<use xlink:href="#pool-icon" />
</svg>
<svg class="icon pets">
<use xlink:href="#pets-icon" />
</svg>
<svg class="icon stairs">
<use xlink:href="#stairs-icon" />
</svg>
<svg class="icon toilet">
<use xlink:href="#toilet-icon" />
</svg>
<svg class="icon dining">
<use xlink:href="#dining-icon" />
</svg>
<svg class="icon share-with-email">
<use xlink:href="#share-with-email-icon" />
</svg>
<svg class="icon save">
<use xlink:href="#save-icon" />
</svg>
<svg class="icon printer">
<use xlink:href="#printer-icon" />
</svg>
<svg class="icon map-view">
<use xlink:href="#map-icon" />
</svg>
<svg class="icon photo">
<use xlink:href="#photo-icon" />
</svg>
<svg class="icon video">
<use xlink:href="#video-icon" />
</svg>
<svg class="icon floorplan">
<use xlink:href="#floor-plan-icon" />
</svg>
<svg class="icon website">
<use xlink:href="#website-icon" />
</svg>
<svg class="icon v3d-walkthrough">
<use xlink:href="#3d-walkthrough-icon" />
</svg>
<svg class="icon business">
<use xlink:href="#business-icon" />
</svg>
<svg class="icon rural">
<use xlink:href="#rural-icon" />
</svg>
<svg class="icon residential-townhouse">
<use xlink:href="#residential-townhouse-icon" />
</svg>
<svg class="icon residential-house">
<use xlink:href="#residential-house-icon" />
</svg>
<svg class="icon residential-apartment">
<use xlink:href="#residential-apartment-icon" />
</svg>
<svg class="icon rental">
<use xlink:href="#rental-icon" />
</svg>
<svg class="icon open-home">
<use xlink:href="#open-home-icon" />
</svg>
<svg class="icon lifestyle">
<use xlink:href="#lifestyle-icon" />
</svg>
<svg class="icon agent">
<use xlink:href="#agent-icon" />
</svg>
<svg class="icon agency">
<use xlink:href="#agency-icon" />
</svg>
<svg class="icon max-tenants">
<use xlink:href="#max-tenants-icon" />
</svg>
<svg class="icon property-search">
<use xlink:href="#property-search-icon" />
</svg>
<svg class="icon commercial-for-lease">
<use xlink:href="#commercial-for-lease-icon" />
</svg>
<svg class="icon commercial-for-sale">
<use xlink:href="#commercial-for-sale-icon" />
</svg>
<svg class="icon share">
<use xlink:href="#share-icon" />
</svg>
<svg class="icon search-magnify">
<use xlink:href="#search-magnify-icon" />
</svg>
<svg class="icon delete">
<use xlink:href="#delete-icon" />
</svg>
<svg class="icon close">
<use xlink:href="#close-icon" />
</svg>
<svg class="icon left-arrow">
<use xlink:href="#left-arrow-icon" />
</svg>
<svg class="icon right-arrow">
<use xlink:href="#right-arrow-icon" />
</svg>
<svg class="icon list-view">
<use xlink:href="#list-view-icon" />
</svg>
<svg class="icon grid-view">
<use xlink:href="#grid-icon" />
</svg>
<svg class="icon up-arrow">
<use xlink:href="#up-arrow-icon" />
</svg>
<svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg>
<svg class="icon menu-icon">
<use xlink:href="#menu-icon" />
</svg>
<svg class="icon move-box">
<use xlink:href="#move-box-icon" />
</svg>
<svg class="icon move-bulb">
<use xlink:href="#move-bulb-icon" />
</svg>
<svg class="icon move-truck">
<use xlink:href="#move-truck-icon" />
</svg>
<svg class="icon move-trolley">
<use xlink:href="#move-trolley-icon" />
</svg>
<svg class="icon move-tape">
<use xlink:href="#move-tape-icon" />
</svg>
<svg class="icon user">
<use xlink:href="#user-icon" />
</svg>
<svg class="icon facebook">
<use xlink:href="#facebook-icon" />
</svg>
<svg class="icon twitter">
<use xlink:href="#twitter-icon" />
</svg>
<svg class="icon google-plus">
<use xlink:href="#google-plus-icon" />
</svg>
<svg class="icon pinterest">
<use xlink:href="#pinterest-icon" />
</svg>
<svg class="icon checked-circle">
<use xlink:href="#checked-circle-icon" />
</svg>
<svg class="icon spanner-circle">
<use xlink:href="#spanner-circle-icon" />
</svg>
<svg class="icon news">
<use xlink:href="#news-icon" />
</svg>
<svg class="icon tips">
<use xlink:href="#tips-icon" />
</svg>
<svg class="icon letter-a">
<use xlink:href="#a-icon" />
</svg>
<svg class="icon letter-b">
<use xlink:href="#b-icon" />
</svg>
<svg class="icon letter-c">
<use xlink:href="#c-icon" />
</svg>
<svg class="icon letter-d">
<use xlink:href="#d-icon" />
</svg>
<svg class="icon letter-e">
<use xlink:href="#e-icon" />
</svg>
<svg class="icon letter-f">
<use xlink:href="#f-icon" />
</svg>
<svg class="icon letter-g">
<use xlink:href="#g-icon" />
</svg>
<svg class="icon letter-h">
<use xlink:href="#h-icon" />
</svg>
<svg class="icon letter-i">
<use xlink:href="#i-icon" />
</svg>
<svg class="icon letter-j">
<use xlink:href="#j-icon" />
</svg>
<svg class="icon letter-k">
<use xlink:href="#k-icon" />
</svg>
<svg class="icon letter-l">
<use xlink:href="#l-icon" />
</svg>
<svg class="icon letter-m">
<use xlink:href="#m-icon" />
</svg>
<svg class="icon letter-n">
<use xlink:href="#n-icon" />
</svg>
<svg class="icon letter-o">
<use xlink:href="#o-icon" />
</svg>
<svg class="icon letter-p">
<use xlink:href="#p-icon" />
</svg>
<svg class="icon letter-q">
<use xlink:href="#q-icon" />
</svg>
<svg class="icon letter-r">
<use xlink:href="#r-icon" />
</svg>
<svg class="icon letter-s">
<use xlink:href="#s-icon" />
</svg>
<svg class="icon letter-t">
<use xlink:href="#t-icon" />
</svg>
<svg class="icon letter-u">
<use xlink:href="#u-icon" />
</svg>
<svg class="icon letter-v">
<use xlink:href="#v-icon" />
</svg>
<svg class="icon letter-w">
<use xlink:href="#w-icon" />
</svg>
<svg class="icon letter-x">
<use xlink:href="#x-icon" />
</svg>
<svg class="icon letter-y">
<use xlink:href="#y-icon" />
</svg>
<svg class="icon letter-z">
<use xlink:href="#z-icon" />
</svg>
<svg class="icon inspiration">
<use xlink:href="#inspiration-icon" />
</svg>
<svg class="icon stairs2">
<use xlink:href="#stairs2-icon" />
</svg>
<svg class="icon question-circle">
<use xlink:href="#question-circle-icon" />
</svg>
<div class="byline">by Author Name</div>
<div class="vcard">
<div class="org">Company Name</div>
<div class="adr">
<div class="street-address">1234 Main St.</div>
<span class="locality">Anywhere</span>,
<span class="postal-code">101010</span>,
<abbr class="region" title="California">CA</abbr>
<div class="country-name">U.S.A</div>
</div>
<div class="tel">+1.888.123.4567</div>
</div>
<div class="hgroup">
<h2>This is the heading group's main heading</h2>
<h3>This is the heading group's subheading</h3>
</div>
A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.
Quote Source
<blockquote>
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation. </p>
<cite class="citation">Quote Source</cite>
</blockquote>
The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
atoms-paragraph
<p class="intro">The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.</p>
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
<div class="number-of-listings">
<h4>123,456 Listings showing <strong>1</strong> to <strong>20</strong> </h4>
</div>
<div class="next-btn">
<a href="#" title="Next ≫">Next ≫</a>
</div>
<div class="results-headline">
<h1>Search Results</h1>
</div>
“ Aliquaam in diam vitae— Smarty McQuotemouth
nisl psuere malesuada. ”
<div class="blog-blockquote">
<blockquote cite="#">
“ Aliquaam in diam vitae <br />
nisl psuere malesuada. ”
</blockquote>
<cite class="quote-author">— Smarty McQuotemouth</cite>
<br />
</div>
<div class="demo">
<!--Grid 1up-->
<div class="row">
<div class="small-12 column">1/1</div>
</div>
<!--End Grid 1up-->
</div><!--end .demo-->
<div class="demo">
<!--Grid 2up-->
<div class="row">
<div class="medium-6 column">1/2</div>
<div class="medium-6 column end">1/2</div>
</div>
</div>
<div class="demo">
<!--Grid 3up-->
<div class="row">
<div class="medium-4 column">1/3</div>
<div class="medium-4 column">1/3</div>
<div class="medium-4 column end">1/3</div>
</div>
</div>
<div class="demo">
<!--Grid 4up-->
<div class="row">
<div class="medium-3 column">1/4</div>
<div class="medium-3 column">1/4</div>
<div class="medium-3 column">1/4</div>
<div class="medium-3 column end">1/4</div>
</div>
</div>
atoms-time
<div class="block block-headline">
<a href="#" class="b-inner">
<h2 class="b-title">Lorem ipsum dolor sit (37 characters)</h2>
<time datetime="2013-04-06T12:32+00:00">2 weeks ago</time> </a>
</div>
Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.
Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.
<div class="row">
<div class="large-12 columns">
<p><img src="//placehold.it/1000x400&text=[banner img]"></p>
</div>
</div>
<div class="row">
<div class="large-8 columns">
<h4>This is a content section.</h4>
<p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
<p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
<p><a href="#" class="secondary small button">Next Page →</a></p>
</div>
<div class="large-4 columns">
<ul class="small-block-grid-3">
<li><a href="#"><img src="//placehold.it/120x120"></a></li>
<li><a href="#"><img src="//placehold.it/120x120"></a></li>
<li><a href="#"><img src="//placehold.it/120x120"></a></li>
<li><a href="#"><img src="//placehold.it/120x120"></a></li>
<li><a href="#"><img src="//placehold.it/120x120"></a></li>
<li><a href="#"><img src="//placehold.it/120x120"></a></li>
</ul>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="//placehold.it/500x500&text=Logo">
<div class="hide-for-small panel">
<h3>Header</h3>
<h5 class="subheader">Risus ligula, aliquam nec fermentum vitae, sollicitudin eget urna. Donec dignissim nibh fermentum odio ornare sagittis.</h5>
</div>
<a href="#">
<div class="panel callout radius">
<h6>99 items in your cart</h6></a>
</div>
</div>
</div>
<ul class="small-block-grid-3">
<li><img class="th" src="//placehold.it/600x300"></li>
<li><img class="th" src="//placehold.it/600x300"></li>
<li><img class="th" src="//placehold.it/600x300"></li>
</ul>
<div class="share-bar">
<h6>Share</h6>
<ul class="inline-list">
<li>
<a class="sharer clickable"
data-sharer="facebook"
data-app_id='Facebook App Id'
data-url="#"
data-description="This is description text">
<svg class="icon facebook">
<use xlink:href="#facebook-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="twitter"
data-url="#"
data-title="This is description text">
<svg class="icon twitter">
<use xlink:href="#twitter-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="googleplus"
data-url="#"
data-title="This is description text">
<svg class="icon google-plus">
<use xlink:href="#google-plus-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="pinterest"
data-url="#"
data-media="http://styleguide.staging.realestate.co.nz/images/media-player/player1.jpg"
data-description="This is description text">
<svg class="icon pinterest">
<use xlink:href="#pinterest-icon" />
</svg> </a>
</li>
</ul>
</div>
<div class="blog-articles-share-bar">
<h6>Share</h6>
<ul class="inline-list">
<li>
<a class="sharer clickable"
data-sharer="facebook"
data-app_id='Facebook App Id'
data-url="#"
data-description="This is description text">
<svg class="icon facebook">
<use xlink:href="#facebook-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="twitter"
data-url="#"
data-title="This is description text">
<svg class="icon twitter">
<use xlink:href="#twitter-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="googleplus"
data-url="#"
data-title="This is description text">
<svg class="icon google-plus">
<use xlink:href="#google-plus-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="pinterest"
data-url="#"
data-media="http://styleguide.staging.realestate.co.nz/images/media-player/player1.jpg"
data-description="This is description text">
<svg class="icon pinterest">
<use xlink:href="#pinterest-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="email"
data-url="#"
data-description="This is description text">
<svg class="icon email">
<use xlink:href="#email-icon" />
</svg> </a>
</li>
</ul>
</div>
There are currenlty 53 properties on the market in the Eden Terrace with and average asking price of $890,844
<p>
There are currenlty 53 properties on the market in the Eden Terrace with and average asking price of $890,844
</p>
<div class="thinking-of-selling-graph">
<canvas id="myChart" height="200"></canvas>
<div id="chartLegend">
</div>
</div>
Agents | Currently | Last 12 Months | Average asking price | |
---|---|---|---|---|
![]() |
![]() |
45 Currently | 31 Last 12 Months | $1,959,543 avg asking |
<div class="thinking-of-selling-table">
<table role="grid">
<thead>
<tr>
<th colspan="2">
Agents
</th>
<th>
Currently
</th>
<th>
Last 12 Months
</th>
<th>
Average asking price
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class="agent-pic hide-for-small-only" src="/images/featured-agent-photo.jpg" alt="" />
<span>Sally Potgieter</span>
</td>
<td>
<img src="/images/agency-logo-hz.jpg" alt="" />
</td>
<td>
45 Currently
</td>
<td>
31 Last 12 Months
</td>
<td>
$1,959,543 avg asking
</td>
</tr>
</tbody>
</table>
</div>
3
2
<!-- Listing Tile -->
<div class="listing-tile res-sale">
<div class="listing-tile-photo-container">
<div class="tile-photo-top-bg">
<div class="photo-icon-container">
<svg class="icon photo">
<use xlink:href="#photo-icon" />
</svg> </div>
</div>
<ul class="listing-tile-hz show-for-medium-up" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler.jpg"/>
</li>
<li>
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler.jpg"/>
</li>
</ul>
<ul class="listing-tile-vert show-for-small-only" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler-vert.jpg"/>
</li>
<li>
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler-vert.jpg"/>
</li>
</ul>
<ul class="inline-list tile-photo-bottom-bar">
<li>
<div class="video-icon-container">
<svg class="icon video">
<use xlink:href="#video-icon" />
</svg> </div>
<span>2</span>
</li>
<li>
<div class="v3d-walkthrough-icon-container">
<svg class="icon v3d-walkthrough">
<use xlink:href="#3d-walkthrough-icon" />
</svg>
</div>
<span>3</span>
</li>
<li>
<div class="floorplan-icon-container">
<svg class="icon floorplan">
<use xlink:href="#floor-plan-icon" />
</svg>
</div>
<span>1</span>
</li>
</ul>
</div><!-- listing-tile photo-container -->
<div class="listing-tile-details">
<div class="listing-text-container">
<h2 class="listing-tile-title"><a href="#">Listing Residential Sale Tile Title</a></h2>
<h5 class="listing-tile-address">Residentail Sale Tile Address, it may be much longer than we expected. Cutting it if it contains too many words</h5>
</div>
<div class="listing-icon-container">
<p class="bedrooms-text">3</p> <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg>
<p class="bathrooms-text">2</p> <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg>
</div>
<div class="listing-price-agency-container">
<h2 class="listing-tile-price">Asking Price $10m including GST</h2>
<div class="agency">
<a href="#" class="agency-logo-tile"><img src="/images/agency-logo-vert.jpg" alt="Agency Logo" /></a>
</div>
</div>
<div class="listing-tile-bottom-bar">
<h5 class="listing-time-number">
<span class="listing-id-number">IDNumber</span>
<span class="listing-time">Listed Time (It may be long)</span>
</h5>
<p class="tile-share-follow">
<a href="#" title="Share it"><svg class="icon email">
<use xlink:href="#email-icon" />
</svg>
<span class="show-for-medium-up">Share</span></a>
<a href="#" title="Follow it"><svg class="icon star">
<use xlink:href="#star-icon" />
</svg>
<span class="show-for-medium-up">Un Follow</span></a>
</p>
</div><!-- listing-tile-bottom-bar -->
</div><!-- listing-tile-details -->
</div><!-- listing-tile -->
3
2
<!-- featured-Listing Tile -->
<div class="featured-listing-tile featured-res-sale">
<div class="featured-listing-tile-photo-container">
<!--a href="#" class="featured-listing-tile-vert"><img src="/images/featured-vert-photo.jpg" class="featured-listing-tile-photo" alt="Featured Image" /></a-->
<div class="tile-photo-top-bg">
<div class="photo-icon-container">
<svg class="icon photo">
<use xlink:href="#photo-icon" />
</svg> </div>
</div>
<ul class="featured-listing-tile-vert" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
<li>
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
<li>
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
</ul>
<ul class="inline-list tile-photo-bottom-bar">
<li>
<div class="video-icon-container">
<svg class="icon video">
<use xlink:href="#video-icon" />
</svg> </div>
<span>2</span>
</li>
<li>
<div class="v3d-walkthrough-icon-container">
<svg class="icon v3d-walkthrough">
<use xlink:href="#3d-walkthrough-icon" />
</svg>
</div>
<span>3</span>
</li>
<li>
<div class="floorplan-icon-container">
<svg class="icon floorplan">
<use xlink:href="#floor-plan-icon" />
</svg>
</div>
<span>1</span>
</li>
</ul>
</div><!-- featured-listing-tile photo-container -->
<div class="featured-listing-tile-details">
<div class="featured-listing-text-container">
<h2 class="featured-listing-tile-title"><a href="#">Featured Tile Title, it may contain more words than we expected</a></h2>
<h5 class="featured-listing-tile-address">Featured Tile Address, it may be much longer than we expected. Cutting it if it contains too many words</h5>
</div>
<div class="featured-listing-icon-container">
<p class="bedrooms-text">3</p> <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg>
<p class="bathrooms-text">2</p> <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg>
</div>
<div class="featured-listing-price-agency-container">
<h2 class="featured-listing-tile-price">Asking Price $10m including GST</h2>
<div class="agency">
<a href="#" class="agent-photo-tile"><img src="/images/featured-agent-photo.jpg" alt="Agent Photo" /></a>
<a href="#" class="agency-logo-tile"><img src="/images/agency-logo-hz.jpg" alt="Agency Logo" /></a>
</div>
</div>
<div class="featured-listing-tile-bottom-bar">
<h5 class="featured-listing-time-number">
<span class="featured-listing-id-number">IDNumber</span>
<span class="listing-time">Listed Time (It may be long)</span>
</h5>
<p class="tile-share-follow">
<a href="#" title="Share it"><svg class="icon email">
<use xlink:href="#email-icon" />
</svg> <span class="show-for-medium-up">Share</span></a>
<a href="#" title="Follow it"><svg class="icon star">
<use xlink:href="#star-icon" />
</svg> <span class="show-for-medium-up">Un-Follow</span></a>
</p>
</div><!-- featured-listing-tile-bottom-bar -->
</div><!-- featured-listing-tile-details -->
</div><!-- featured-listing-tile -->
3
2
<!-- Listing Tile -->
<div class="listing-tile res-rent">
<div class="listing-tile-photo-container">
<div class="tile-photo-top-bg">
<div class="photo-icon-container">
<svg class="icon photo">
<use xlink:href="#photo-icon" />
</svg> </div>
</div>
<ul class="listing-tile-hz show-for-medium-up" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler.jpg"/>
</li>
<li>
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler.jpg"/>
</li>
</ul>
<ul class="listing-tile-vert show-for-small-only" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler-vert.jpg"/>
</li>
<li>
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler-vert.jpg"/>
</li>
</ul>
<ul class="inline-list tile-photo-bottom-bar">
<li>
<div class="video-icon-container">
<svg class="icon video">
<use xlink:href="#video-icon" />
</svg> </div>
<span>2</span>
</li>
<li>
<div class="v3d-walkthrough-icon-container">
<svg class="icon v3d-walkthrough">
<use xlink:href="#3d-walkthrough-icon" />
</svg>
</div>
<span>3</span>
</li>
<li>
<div class="floorplan-icon-container">
<svg class="icon floorplan">
<use xlink:href="#floor-plan-icon" />
</svg>
</div>
<span>1</span>
</li>
</ul>
</div><!-- listing-tile photo-container -->
<div class="listing-tile-details">
<div class="listing-text-container">
<h2 class="listing-tile-title"><a href="#">Listing Residential Rent Tile Title</a></h2>
<h5 class="listing-tile-address">Residentail Rent Tile Address, it may be much longer than we expected. Cutting it if it contains too many words</h5>
</div>
<div class="listing-icon-container">
<p class="bedrooms-text">3</p> <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg>
<p class="bathrooms-text">2</p> <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg>
</div>
<div class="listing-price-agency-container">
<h2 class="listing-tile-price">$600 per week</h2>
<div class="agency">
<a href="#" class="agency-logo-tile"><img src="/images/agency-logo-vert.jpg" alt="Agency Logo" /></a>
</div>
</div>
<div class="listing-tile-bottom-bar">
<h5 class="listing-time-number">
<span class="listing-id-number">IDNumber</span>
<span class="listing-time">Listed Time (It may be long)</span>
</h5>
<p class="tile-share-follow">
<a href="#" title="Share it"><svg class="icon email">
<use xlink:href="#email-icon" />
</svg>
<span class="show-for-medium-up">Share</span></a>
<a href="#" title="Follow it"><svg class="icon star">
<use xlink:href="#star-icon" />
</svg>
<span class="show-for-medium-up">Un-Follow</span></a>
</p>
</div><!-- listing-tile-bottom-bar -->
</div><!-- listing-tile-details -->
</div><!-- listing-tile -->
3
2
<!-- featured-Listing Tile -->
<div class="featured-listing-tile featured-res-rent">
<div class="featured-listing-tile-photo-container">
<div class="tile-photo-top-bg">
<div class="photo-icon-container">
<svg class="icon photo">
<use xlink:href="#photo-icon" />
</svg> </div>
</div>
<ul class="featured-listing-tile-vert" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
<li>
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
<li>
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
</ul>
<ul class="inline-list tile-photo-bottom-bar">
<li>
<div class="video-icon-container">
<svg class="icon video">
<use xlink:href="#video-icon" />
</svg> </div>
<span>2</span>
</li>
<li>
<div class="v3d-walkthrough-icon-container">
<svg class="icon v3d-walkthrough">
<use xlink:href="#3d-walkthrough-icon" />
</svg>
</div>
<span>3</span>
</li>
<li>
<div class="floorplan-icon-container">
<svg class="icon floorplan">
<use xlink:href="#floor-plan-icon" />
</svg>
</div>
<span>1</span>
</li>
</ul>
</div><!-- featured-listing-tile photo-container -->
<div class="featured-listing-tile-details">
<div class="featured-listing-text-container">
<h2 class="featured-listing-tile-title"><a href="#">Featured Tile Title, it may contain more words than we expected</a></h2>
<h5 class="featured-listing-tile-address">Featured Tile Address, it may be much longer than we expected. Cutting it if it contains too many words</h5>
</div>
<div class="featured-listing-icon-container">
<p class="bedrooms-text">3</p> <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg>
<p class="bathrooms-text">2</p> <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg>
</div>
<div class="featured-listing-price-agency-container">
<h2 class="featured-listing-tile-price">$600</h2>
<div class="agency">
<a href="#" class="agent-photo-tile"><img src="/images/featured-agent-photo.jpg" alt="Agent Photo" /></a>
<a href="#" class="agency-logo-tile"><img src="/images/agency-logo-hz.jpg" alt="Agency Logo" /></a>
</div>
</div>
<div class="featured-listing-tile-bottom-bar">
<h5 class="featured-listing-time-number">
<span class="featured-listing-id-number">IDNumber</span>
<span class="listing-time">Listed Time (It may be long)</span>
</h5>
<p class="tile-share-follow">
<a href="#" title="Share it"><svg class="icon email">
<use xlink:href="#email-icon" />
</svg> <span class="show-for-medium-up">Share</span></a>
<a href="#" title="Follow it"><svg class="icon star">
<use xlink:href="#star-icon" />
</svg> <span class="show-for-medium-up">Un-Follow</span></a>
</p>
</div><!-- featured-listing-tile-bottom-bar -->
</div><!-- featured-listing-tile-details -->
</div><!-- featured-listing-tile -->
989 m2 Floor
<!-- Listing Tile -->
<div class="listing-tile com-sale">
<div class="listing-tile-photo-container">
<div class="tile-photo-top-bg">
<div class="photo-icon-container">
<svg class="icon photo">
<use xlink:href="#photo-icon" />
</svg> </div>
</div>
<ul class="listing-tile-hz show-for-medium-up" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler.jpg"/>
</li>
<li>
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler.jpg"/>
</li>
</ul>
<ul class="listing-tile-vert show-for-small-only" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler-vert.jpg"/>
</li>
<li>
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler-vert.jpg"/>
</li>
</ul>
<ul class="inline-list tile-photo-bottom-bar">
<li>
<div class="video-icon-container">
<svg class="icon video">
<use xlink:href="#video-icon" />
</svg> </div>
<span>2</span>
</li>
<li>
<div class="v3d-walkthrough-icon-container">
<svg class="icon v3d-walkthrough">
<use xlink:href="#3d-walkthrough-icon" />
</svg>
</div>
<span>3</span>
</li>
<li>
<div class="floorplan-icon-container">
<svg class="icon floorplan">
<use xlink:href="#floor-plan-icon" />
</svg>
</div>
<span>1</span>
</li>
</ul>
</div><!-- listing-tile photo-container -->
<div class="listing-tile-details">
<div class="listing-text-container">
<h2 class="listing-tile-title"><a href="#">Listing Commercial Sale Tile Title</a></h2>
<h5 class="listing-tile-address">Commercial Sale Tile Address, it may be much longer than we expected. Cutting it if it contains too many words</h5>
</div>
<div class="listing-icon-container">
<svg class="icon floor-area">
<use xlink:href="#floor-area-icon" />
</svg> <p class="floor-area-text">989 m<sup>2</sup> Floor</p>
</div>
<div class="listing-price-agency-container">
<h2 class="listing-tile-price">Asking Price $10m including GST</h2>
<div class="agency">
<a href="#" class="agency-logo-tile"><img src="/images/agency-logo-vert.jpg" alt="Agency Logo" /></a>
</div>
</div>
<div class="listing-tile-bottom-bar">
<h5 class="listing-time-number">
<span class="listing-id-number">IDNumber</span>
<span class="listing-time">Listed Time (It may be long)</span>
</h5>
<p class="tile-share-follow">
<a href="#" title="Share it"><svg class="icon email">
<use xlink:href="#email-icon" />
</svg> <span class="show-for-medium-up">Share</span></a>
<a href="#" title="Follow it"><svg class="icon star">
<use xlink:href="#star-icon" />
</svg> <span class="show-for-medium-up">Un-Follow</span></a>
</p>
</div><!-- listing-tile-bottom-bar -->
</div><!-- listing-tile-details -->
</div><!-- listing-tile -->
989 m2 Floor
<!-- featured-Listing Tile -->
<div class="featured-listing-tile featured-com-sale">
<div class="featured-listing-tile-photo-container">
<!--a href="#" class="featured-listing-tile-vert"><img src="/images/featured-vert-photo.jpg" class="featured-listing-tile-photo" alt="Featured Image" /></a-->
<div class="tile-photo-top-bg">
<div class="photo-icon-container">
<svg class="icon photo">
<use xlink:href="#photo-icon" />
</svg> </div>
</div>
<ul class="featured-listing-tile-vert" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
<li>
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
<li>
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
</ul>
<ul class="inline-list tile-photo-bottom-bar">
<li>
<div class="video-icon-container">
<svg class="icon video">
<use xlink:href="#video-icon" />
</svg> </div>
<span>2</span>
</li>
<li>
<div class="v3d-walkthrough-icon-container">
<svg class="icon v3d-walkthrough">
<use xlink:href="#3d-walkthrough-icon" />
</svg>
</div>
<span>3</span>
</li>
<li>
<div class="floorplan-icon-container">
<svg class="icon floorplan">
<use xlink:href="#floor-plan-icon" />
</svg>
</div>
<span>1</span>
</li>
</ul>
</div><!-- featured-listing-tile photo-container -->
<div class="featured-listing-tile-details">
<div class="featured-listing-text-container">
<h2 class="featured-listing-tile-title"><a href="#">Featured Tile Title, it may contain more words than we expected</a></h2>
<h5 class="featured-listing-tile-address">Featured Tile Address, it may be much longer than we expected. Cutting it if it contains too many words</h5>
</div>
<div class="featured-listing-icon-container">
<svg class="icon floor-area">
<use xlink:href="#floor-area-icon" />
</svg> <p class="floor-area-text">989 m<sup>2</sup> Floor</p>
</div>
<div class="featured-listing-price-agency-container">
<h2 class="featured-listing-tile-price">Asking Price $10m including GST</h2>
<div class="agency">
<a href="#" class="agent-photo-tile"><img src="/images/featured-agent-photo.jpg" alt="Agent Photo" /></a>
<a href="#" class="agency-logo-tile"><img src="/images/agency-logo-hz.jpg" alt="Agency Logo" /></a>
</div>
</div>
<div class="featured-listing-tile-bottom-bar">
<h5 class="featured-listing-time-number">
<span class="featured-listing-id-number">IDNumber</span>
<span class="listing-time">Listed Time (It may be long)</span>
</h5>
<p class="tile-share-follow">
<a href="#" title="Share it"><svg class="icon email">
<use xlink:href="#email-icon" />
</svg> <span class="show-for-medium-up">Share</span></a>
<a href="#" title="Follow it"><svg class="icon star">
<use xlink:href="#star-icon" />
</svg> <span class="show-for-medium-up">Un-Follow</span></a>
</p>
</div><!-- featured-listing-tile-bottom-bar -->
</div><!-- featured-listing-tile-details -->
</div><!-- featured-listing-tile -->
989 m2 Floor
2,023 m2 Land
<!-- Listing Tile -->
<div class="com-lease listing-tile">
<div class="listing-tile-photo-container">
<div class="tile-photo-top-bg">
<div class="photo-icon-container">
<svg class="icon photo">
<use xlink:href="#photo-icon" />
</svg> </div>
</div>
<ul class="listing-tile-hz show-for-medium-up" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler.jpg"/>
</li>
<li>
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler.jpg"/>
</li>
</ul>
<ul class="listing-tile-vert show-for-small-only" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler-vert.jpg"/>
</li>
<li>
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler-vert.jpg"/>
</li>
</ul>
<ul class="inline-list tile-photo-bottom-bar">
<li>
<div class="video-icon-container">
<svg class="icon video">
<use xlink:href="#video-icon" />
</svg> </div>
<span>2</span>
</li>
<li>
<div class="v3d-walkthrough-icon-container">
<svg class="icon v3d-walkthrough">
<use xlink:href="#3d-walkthrough-icon" />
</svg>
</div>
<span>3</span>
</li>
<li>
<div class="floorplan-icon-container">
<svg class="icon floorplan">
<use xlink:href="#floor-plan-icon" />
</svg>
</div>
<span>1</span>
</li>
</ul>
</div><!-- listing-tile photo-container -->
<div class="listing-tile-details">
<div class="listing-text-container">
<h2 class="listing-tile-title"><a href="#">Listing Commercial Lease Tile Title</a></h2>
<h5 class="listing-tile-address">Commercial Sale Tile Address, it may be much longer than we expected. Cutting it if it contains too many words</h5>
</div>
<div class="listing-icon-container">
<svg class="icon floor-area">
<use xlink:href="#floor-area-icon" />
</svg> <p class="floor-area-text">989 m<sup>2</sup> Floor</p>
<svg class="icon land-area">
<use xlink:href="#land-area-icon" />
</svg> <p class="land-area-text">2,023 m<sup>2</sup> Land</p>
</div>
<div class="listing-price-agency-container">
<h2 class="listing-tile-price">$600</h2>
<div class="agency">
<a href="#" class="agency-logo-tile"><img src="/images/agency-logo-vert.jpg" alt="Agency Logo" /></a>
</div>
</div>
<div class="listing-tile-bottom-bar">
<h5 class="listing-time-number">
<span class="listing-id-number">IDNumber</span>
<span class="listing-time">Listed Time (It may be long)</span>
</h5>
<p class="tile-share-follow">
<a href="#" title="Share it"><svg class="icon email">
<use xlink:href="#email-icon" />
</svg> <span class="show-for-medium-up">Share</span></a>
<a href="#" title="Follow it"><svg class="icon star">
<use xlink:href="#star-icon" />
</svg> <span class="show-for-medium-up">Un-Follow</span></a>
</p>
</div><!-- listing-tile-bottom-bar -->
</div><!-- listing-tile-details -->
</div><!-- listing-tile -->
989 m2 Floor
2,023 m2 Land
<!-- featured-Listing Tile -->
<div class="featured-listing-tile featured-com-lease">
<div class="featured-listing-tile-photo-container">
<div class="tile-photo-top-bg">
<div class="photo-icon-container">
<svg class="icon photo">
<use xlink:href="#photo-icon" />
</svg> </div>
</div>
<ul class="featured-listing-tile-vert" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
<li>
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
<li>
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
</ul>
<ul class="inline-list tile-photo-bottom-bar">
<li>
<div class="video-icon-container">
<svg class="icon video">
<use xlink:href="#video-icon" />
</svg> </div>
<span>2</span>
</li>
<li>
<div class="v3d-walkthrough-icon-container">
<svg class="icon v3d-walkthrough">
<use xlink:href="#3d-walkthrough-icon" />
</svg>
</div>
<span>3</span>
</li>
<li>
<div class="floorplan-icon-container">
<svg class="icon floorplan">
<use xlink:href="#floor-plan-icon" />
</svg>
</div>
<span>1</span>
</li>
</ul>
</div><!-- featured-listing-tile photo-container -->
<div class="featured-listing-tile-details">
<div class="featured-listing-text-container">
<h2 class="featured-listing-tile-title lease"><a href="#">Featured Tile Title, it may contain more words than we expected</a></h2>
<h5 class="featured-listing-tile-address">Featured Tile Address, it may be much longer than we expected. Cutting it if it contains too many words</h5>
</div>
<div class="featured-listing-icon-container">
<svg class="icon floor-area">
<use xlink:href="#floor-area-icon" />
</svg> <p class="floor-area-text">989 m<sup>2</sup> Floor</p>
<svg class="icon land-area">
<use xlink:href="#land-area-icon" />
</svg> <p class="land-area-text">2,023 m<sup>2</sup> Land</p>
</div>
<div class="featured-listing-price-agency-container">
<h2 class="featured-listing-tile-price">$600 per week</h2>
<div class="agency">
<a href="#" class="agent-photo-tile"><img src="/images/featured-agent-photo.jpg" alt="Agent Photo" /></a>
<a href="#" class="agency-logo-tile"><img src="/images/agency-logo-hz.jpg" alt="Agency Logo" /></a>
</div>
</div>
<div class="featured-listing-tile-bottom-bar">
<h5 class="featured-listing-time-number">
<span class="featured-listing-id-number">IDNumber</span>
<span class="listing-time">Listed Time (It may be long)</span>
</h5>
<p class="tile-share-follow">
<a href="#" title="Share it"><svg class="icon email">
<use xlink:href="#email-icon" />
</svg> <span class="show-for-medium-up">Share</span></a>
<a href="#" title="Follow it"><svg class="icon star">
<use xlink:href="#star-icon" />
</svg> <span class="show-for-medium-up">Un-Follow</span></a>
</p>
</div><!-- featured-listing-tile-bottom-bar -->
</div><!-- featured-listing-tile-details -->
</div><!-- featured-listing-tile -->
57.71 ha Land
<!-- Listing Tile -->
<div class="listing-tile rural-sale">
<div class="listing-tile-photo-container">
<div class="tile-photo-top-bg">
<div class="photo-icon-container">
<svg class="icon photo">
<use xlink:href="#photo-icon" />
</svg> </div>
</div>
<ul class="listing-tile-hz show-for-medium-up" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler.jpg"/>
</li>
<li>
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler.jpg"/>
</li>
</ul>
<ul class="listing-tile-vert show-for-small-only" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler-vert.jpg"/>
</li>
<li>
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler-vert.jpg"/>
</li>
</ul>
<ul class="inline-list tile-photo-bottom-bar">
<li>
<div class="video-icon-container">
<svg class="icon video">
<use xlink:href="#video-icon" />
</svg> </div>
<span>2</span>
</li>
<li>
<div class="v3d-walkthrough-icon-container">
<svg class="icon v3d-walkthrough">
<use xlink:href="#3d-walkthrough-icon" />
</svg>
</div>
<span>3</span>
</li>
<li>
<div class="floorplan-icon-container">
<svg class="icon floorplan">
<use xlink:href="#floor-plan-icon" />
</svg>
</div>
<span>1</span>
</li>
</ul>
</div><!-- listing-tile photo-container -->
<div class="listing-tile-details">
<div class="listing-text-container">
<h2 class="listing-tile-title"><a href="#">Listing Rural Sale Tile Title</a></h2>
<h5 class="listing-tile-address">Rural Sale Tile Address, it may be much longer than we expected. Cutting it if it contains too many words</h5>
</div>
<div class="listing-icon-container">
<svg class="icon land-area">
<use xlink:href="#land-area-icon" />
</svg> <p class="land-area-text">57.71 ha Land</p>
</div>
<div class="listing-price-agency-container">
<h2 class="listing-tile-price">Asking Price $10m including GST</h2>
<div class="agency">
<a href="#" class="agency-logo-tile"><img src="/images/agency-logo-vert.jpg" alt="Agency Logo" /></a>
</div>
</div>
<div class="listing-tile-bottom-bar">
<h5 class="listing-time-number">
<span class="listing-id-number">IDNumber</span>
<span class="listing-time">Listed Time (It may be long)</span>
</h5>
<p class="tile-share-follow">
<a href="#" title="Share it"><svg class="icon email">
<use xlink:href="#email-icon" />
</svg> <span class="show-for-medium-up">Share</span></a>
<a href="#" title="Follow it"><svg class="icon star">
<use xlink:href="#star-icon" />
</svg> <span class="show-for-medium-up">Un-Follow</span></a>
</p>
</div><!-- listing-tile-bottom-bar -->
</div><!-- listing-tile-details -->
</div><!-- listing-tile -->
57.71 ha Land
<!-- featured-Listing Tile -->
<div class="featured-listing-tile featured-rural-sale">
<div class="featured-listing-tile-photo-container">
<!--a href="#" class="featured-listing-tile-vert"><img src="/images/featured-vert-photo.jpg" class="featured-listing-tile-photo" alt="Featured Image" /></a-->
<div class="tile-photo-top-bg">
<div class="photo-icon-container">
<svg class="icon photo">
<use xlink:href="#photo-icon" />
</svg> </div>
</div>
<ul class="featured-listing-tile-vert" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
<li>
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
<li>
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
</ul>
<ul class="inline-list tile-photo-bottom-bar">
<li>
<div class="video-icon-container">
<svg class="icon video">
<use xlink:href="#video-icon" />
</svg> </div>
<span>2</span>
</li>
<li>
<div class="v3d-walkthrough-icon-container">
<svg class="icon v3d-walkthrough">
<use xlink:href="#3d-walkthrough-icon" />
</svg>
</div>
<span>3</span>
</li>
<li>
<div class="floorplan-icon-container">
<svg class="icon floorplan">
<use xlink:href="#floor-plan-icon" />
</svg>
</div>
<span>1</span>
</li>
</ul>
</div><!-- featured-listing-tile photo-container -->
<div class="featured-listing-tile-details">
<div class="featured-listing-text-container">
<h2 class="featured-listing-tile-title"><a href="#">Featured Tile Title, it may contain more words than we expected</a></h2>
<h5 class="featured-listing-tile-address">Featured Tile Address, it may be much longer than we expected. Cutting it if it contains too many words</h5>
</div>
<div class="featured-listing-icon-container">
<svg class="icon land-area">
<use xlink:href="#land-area-icon" />
</svg> <p class="land-area-text">57.71 ha Land</p>
</div>
<div class="featured-listing-price-agency-container">
<h2 class="featured-listing-tile-price">Asking Price $10m including GST</h2>
<div class="agency">
<a href="#" class="agent-photo-tile"><img src="/images/featured-agent-photo.jpg" alt="Agent Photo" /></a>
<a href="#" class="agency-logo-tile"><img src="/images/agency-logo-hz.jpg" alt="Agency Logo" /></a>
</div>
</div>
<div class="featured-listing-tile-bottom-bar">
<h5 class="featured-listing-time-number">
<span class="featured-listing-id-number">IDNumber</span>
<span class="listing-time">Listed Time (It may be long)</span>
</h5>
<p class="tile-share-follow">
<a href="#" title="Share it"><svg class="icon email">
<use xlink:href="#email-icon" />
</svg> <span class="show-for-medium-up">Share</span></a>
<a href="#" title="Follow it"><svg class="icon star">
<use xlink:href="#star-icon" />
</svg> <span class="show-for-medium-up">Un-Follow</span></a>
</p>
</div><!-- featured-listing-tile-bottom-bar -->
</div><!-- featured-listing-tile-details -->
</div><!-- featured-listing-tile -->
<!-- Listing Tile -->
<div class="listing-tile biz-sale">
<div class="listing-tile-photo-container">
<div class="tile-photo-top-bg">
<div class="photo-icon-container">
<svg class="icon photo">
<use xlink:href="#photo-icon" />
</svg> </div>
</div>
<ul class="listing-tile-hz show-for-medium-up" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler.jpg"/>
</li>
<li>
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler.jpg"/>
</li>
</ul>
<ul class="listing-tile-vert show-for-small-only" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler-vert.jpg"/>
</li>
<li>
<img class="img-responsive listing-tile-photo" src="/images/listing-tile-sampler-vert.jpg"/>
</li>
</ul>
<ul class="inline-list tile-photo-bottom-bar">
<li>
<div class="video-icon-container">
<svg class="icon video">
<use xlink:href="#video-icon" />
</svg> </div>
<span>2</span>
</li>
<li>
<div class="v3d-walkthrough-icon-container">
<svg class="icon v3d-walkthrough">
<use xlink:href="#3d-walkthrough-icon" />
</svg>
</div>
<span>3</span>
</li>
<li>
<div class="floorplan-icon-container">
<svg class="icon floorplan">
<use xlink:href="#floor-plan-icon" />
</svg>
</div>
<span>1</span>
</li>
</ul>
</div><!-- listing-tile photo-container -->
<div class="listing-tile-details">
<div class="listing-text-container">
<h2 class="listing-tile-title"><a href="#">Listing Business Sale Tile Title</a></h2>
<h5 class="listing-tile-address">Business Sale Tile Address, it may be much longer than we expected. Cutting it if it contains too many words</h5>
</div>
<!--
<div class="listing-icon-container">
<p class="bedrooms-text">3</p> <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg>
<p class="bathrooms-text">2</p> <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg>
</div> -->
<div class="listing-price-agency-container">
<h2 class="listing-tile-price">Asking Price $10m including GST</h2>
<div class="agency">
<a href="#" class="agency-logo-tile"><img src="/images/agency-logo-vert.jpg" alt="Agency Logo" /></a>
</div>
</div>
<div class="listing-tile-bottom-bar">
<h5 class="listing-time-number">
<span class="listing-id-number">IDNumber</span>
<span class="listing-time">Listed Time (It may be long)</span>
</h5>
<p class="tile-share-follow">
<a href="#" title="Share it"><svg class="icon email">
<use xlink:href="#email-icon" />
</svg> <span class="show-for-medium-up">Share</span></a>
<a href="#" title="Follow it"><svg class="icon star">
<use xlink:href="#star-icon" />
</svg> <span class="show-for-medium-up">Un-Follow</span></a>
</p>
</div><!-- listing-tile-bottom-bar -->
</div><!-- listing-tile-details -->
</div><!-- listing-tile -->
<!-- featured-Listing Tile -->
<div class="featured-listing-tile featured-biz-sale">
<div class="featured-listing-tile-photo-container">
<!--a href="#" class="featured-listing-tile-vert"><img src="/images/featured-vert-photo.jpg" class="featured-listing-tile-photo" alt="Featured Image" /></a-->
<div class="tile-photo-top-bg">
<div class="photo-icon-container">
<svg class="icon photo">
<use xlink:href="#photo-icon" />
</svg> </div>
</div>
<ul class="featured-listing-tile-vert" data-orbit data-options="bullets:false;timer:false;navigation_arrows:true;">
<li class="active">
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
<li>
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
<li>
<img class="img-responsive featured-listing-tile-photo" src="/images/featured-vert-photo.jpg"/>
</li>
</ul>
<ul class="inline-list tile-photo-bottom-bar">
<li>
<div class="video-icon-container">
<svg class="icon video">
<use xlink:href="#video-icon" />
</svg> </div>
<span>2</span>
</li>
<li>
<div class="v3d-walkthrough-icon-container">
<svg class="icon v3d-walkthrough">
<use xlink:href="#3d-walkthrough-icon" />
</svg>
</div>
<span>3</span>
</li>
<li>
<div class="floorplan-icon-container">
<svg class="icon floorplan">
<use xlink:href="#floor-plan-icon" />
</svg>
</div>
<span>1</span>
</li>
</ul>
</div><!-- featured-listing-tile photo-container -->
<div class="featured-listing-tile-details">
<div class="featured-listing-text-container">
<h2 class="featured-listing-tile-title"><a href="#">Featured Tile Title, it may contain more words than we expected</a></h2>
<h5 class="featured-listing-tile-address">Featured Tile Address, it may be much longer than we expected. Cutting it if it contains too many words</h5>
</div>
<!--
<div class="featured-listing-icon-container">
<p class="bedrooms-text">3</p> <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg>
<p class="bathrooms-text">2</p> <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg>
</div> -->
<div class="featured-listing-price-agency-container">
<h2 class="featured-listing-tile-price">Asking Price $10m including GST</h2>
<div class="agency">
<a href="#" class="agent-photo-tile"><img src="/images/featured-agent-photo.jpg" alt="Agent Photo" /></a>
<a href="#" class="agency-logo-tile"><img src="/images/agency-logo-hz.jpg" alt="Agency Logo" /></a>
</div>
</div>
<div class="featured-listing-tile-bottom-bar">
<h5 class="featured-listing-time-number">
<span class="featured-listing-id-number">IDNumber</span>
<span class="listing-time">Listed Time (It may be long)</span>
</h5>
<p class="tile-share-follow">
<a href="#" title="Share it"><svg class="icon email">
<use xlink:href="#email-icon" />
</svg> <span class="show-for-medium-up">Share</span></a>
<a href="#" title="Follow it"><svg class="icon star">
<use xlink:href="#star-icon" />
</svg> <span class="show-for-medium-up">Un-Follow</span></a>
</p>
</div><!-- featured-listing-tile-bottom-bar -->
</div><!-- featured-listing-tile-details -->
</div><!-- featured-listing-tile -->
<div class="showcase-tile">
<a class="agent-photo">
<img src="/images/agent-profile.jpg" alt="agent profile image" />
</a>
<div class="showcase-container res-sale">
<div class="showcase-image-slider">
<!--<div class="image-slider-top-shadow"></div>-->
<div class="orbit" data-orbit data-auto-play="false">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><svg class="icon left-arrow">
<use xlink:href="#left-arrow-icon" />
</svg>
</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><svg class="icon right-arrow">
<use xlink:href="#right-arrow-icon" />
</svg>
</button>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player1.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player2.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player3.jpg"/>
</li>
</ul>
</div>
</div>
<div class="showcase-fill-tile-overlay">
<div class="row">
<div class="small-12 column">
<h4 class="showcase-price">Featured Tile Title, it may cont...</h4>
<p>
Description of the property, Description of the property. Description of the property, Description of the property. Description of the property, Description of the property.
</p>
</div>
</div>
<div class="pricing-block">
<h4 class="showcase-price">Asking Price $10m including GST</h4>
</div>
<div class="info-block">
<span class="bedrooms-text">3 <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg></span>
<span class="bathrooms-text">2 <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg></span>
<a class="showcase-agency-logo">
<img src="/images/agency-logo-hz.jpg" alt="Agency Logo" />
</a>
</div>
</div>
<div class="showcase-ui-panel">
<div class="showcase-overlap">
<h4 class="showcase-title">65 Guant Street, Westhaven</h4>
<svg class="icon up-arrow">
<use xlink:href="#up-arrow-icon" />
</svg> <svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg> </div><!-- showcase-top-bar -->
</div><!-- showcase-ui-panel -->
</div><!-- showcase-container -->
</div>
Etiam sapien mauris, consequat id consectetur ut, imperdiet ut urna. Etiam quis consectetur nulla!
<!-- blog-featured-article-tile -->
<div class="blog-featured-article-tile">
<div class="blog-featured-article-photo-container">
<div class="blog-featured-article-photo">
<img class="img-responsive show-for-small-only" src="/images/featured-vert-photo.jpg" alt="" />
<img class="img-responsive show-for-medium-up" src="/images/blog/featured-sample.jpg" alt="" />
</div>
<div class="blog-info-box">
<h6 class="blog-headline">Sponsored</h6>
</div>
<div class="blog-type-box">
<svg class="icon news">
<use xlink:href="#news-icon" />
</svg>
<span class="nav-text">News</span>
</div>
</div>
<div class="blog-featured-article-text-block">
<h2 class="blog-featured-article-headline"><a href="#">Blog Featured Article</a></h2>
<p class="blog-featured-article-paragraph">Etiam sapien mauris, consequat id consectetur ut, imperdiet ut urna. Etiam quis consectetur nulla!</p>
<p class="blog-featured-link"><a href="#">Read More »</a></p>
</div>
</div>
<!-- blog-featured-article-tile -->
<!-- Find Tile -->
<div class="find-an-agent find-agent-tile column large-6 medium-6 small-12">
<div class="find-container">
<div class="agent-detail">
<div class="row">
<div class="small-12 column agent-bio">
<a href="#" class="title">
Amanda Boberg
</a>
<a href="#">
<span class="list-info">Sales Rep</span>
</a>
<a href="#">
<span class="list-info none">No Listings</span>
</a>
<a href="#">
<span class="list-info">View Listings(2)</span>
</a>
</div>
<div class="small-12 column">
<div class="secondary-details">
<a href="tel:+6491234567" class='cell'>M: 09 123 4567</a>
<a href="tel:+6491234567" class='phone'>P: 09 123 4567</a>
<a href="mailto:test@test.com" class='email'>E: <span>Email me</span></a>
</div>
</div>
</div>
</div>
<div class="agent-pic" style="background-image:url(/images/featured-agent-photo);">
</div>
<div class="agent-office-logo">
<a class="secondary-details" href="#">
<img src="/images/agency-logo-hz.jpg" class='find-logo' alt="Agency Logo" />
</a>
</div>
</div>
</div>
<!-- // Find Tile -->
<!-- Find Tile -->
<div class="find-an-office find-office-tile column large-6 medium-6 small-12">
<div class="find-container">
<div class="row">
<div class="column small-12 find-heading">
<a href="#">
Barfoot & Thompson Ltd - Albany
<span class="list-info">(ACE1234)</span>
</a>
</div>
<div class="small-6 column">
<a class="secondary-details" href="#">
<img src="/images/agency-logo-hz.jpg" class='find-logo' alt="Agency Logo" />
</a>
</div>
<div class="small-6 column secondary-details">
<a href="tel:+6491234567" class='find-tel'>09 123 4567</a>
<a href="#">View Listings(100)</a>
<a href="#">Website</a>
</div>
</div>
</div>
</div>
<!-- // Find Tile -->
Etiam sapien mauris, consequat id consectetur ut, imperdiet ut urna. Etiam quis consectetur nulla, scelerisque tincidunt ipsum. Etiam et metus dictum, ornare metus in, accumsan turpis.
<!-- blog-news-article-tile -->
<div class="blog-news-article-tile">
<div class="blog-news-article-photo-container">
<div class="blog-news-article-photo">
<a href="#" title="Article Link">
<img class="img-responsive" src="/images/featured-vert-photo.jpg" alt="Article Image" />
</a>
</div>
<div class="blog-info-box">
<h6 class="blog-headline">Sponsored</h6>
</div>
</div>
<div class="blog-news-article-text-block">
<h2 class="blog-news-article-headline"><a href="#">Blog Featured Article</a></h2>
<p class="blog-news-article-paragraph">Etiam sapien mauris, consequat id consectetur ut, imperdiet ut urna. Etiam quis consectetur nulla, scelerisque tincidunt ipsum. Etiam et metus dictum, ornare metus in, accumsan turpis.</p>
<p class="blog-news-link"><a href="#">More »</a></p>
<div class="blog-type-box">
<svg class="icon news">
<use xlink:href="#news-icon" />
</svg> </div>
</div>
</div>
<!-- blog-news-article-tile -->
Etiam sapien mauris, consequat id consectetur ut, imperdiet ut urna. Etiam quis consectetur nulla, scelerisque tincidunt ipsum. Etiam et metus dictum, ornare metus in, accumsan turpis.
<!-- blog-tips-article-tile -->
<div class="blog-tips-article-tile">
<div class="blog-tips-article-photo-container">
<div class="blog-tips-article-photo">
<a href="#" title="Article Link">
<img class="img-responsive" src="/images/featured-vert-photo.jpg" alt="Article Image" />
</a>
</div>
<div class="blog-info-box">
<h6 class="blog-headline">Sponsored</h6>
</div>
</div>
<div class="blog-tips-article-text-block">
<h2 class="blog-tips-article-headline"><a href="#">Blog Featured Article</a></h2>
<p class="blog-tips-article-paragraph">Etiam sapien mauris, consequat id consectetur ut, imperdiet ut urna. Etiam quis consectetur nulla, scelerisque tincidunt ipsum. Etiam et metus dictum, ornare metus in, accumsan turpis.</p>
<p class="blog-tips-link"><a href="#">More »</a></p>
<div class="blog-type-box">
<svg class="icon tips">
<use xlink:href="#tips-icon" />
</svg> </div>
</div>
</div>
<!-- blog-tips-article-tile -->
Etiam sapien mauris, consequat id consectetur ut, imperdiet ut urna. Etiam quis consectetur nulla, scelerisque tincidunt ipsum. Etiam et metus dictum, ornare metus in, accumsan turpis.
<!-- blog-inspiration-article-tile -->
<div class="blog-inspiration-article-tile">
<div class="blog-inspiration-article-photo-container">
<div class="blog-inspiration-article-photo">
<a href="#" title="Article Link">
<img class="img-responsive" src="/images/featured-vert-photo.jpg" alt="Article Image" />
</a>
</div>
<div class="blog-info-box">
<h6 class="blog-headline">Sponsored</h6>
</div>
</div>
<div class="blog-inspiration-article-text-block">
<h2 class="blog-inspiration-article-headline"><a href="#">Blog Featured Article</a></h2>
<p class="blog-inspiration-article-paragraph">Etiam sapien mauris, consequat id consectetur ut, imperdiet ut urna. Etiam quis consectetur nulla, scelerisque tincidunt ipsum. Etiam et metus dictum, ornare metus in, accumsan turpis.</p>
<p class="blog-inspiration-link"><a href="#">More »</a></p>
<div class="blog-type-box">
<svg class="icon inspiration">
<use xlink:href="#inspiration-icon" />
</svg> </div>
</div>
</div>
<!-- blog-inspiration-article-tile -->
employee.emailaddrees@realestate.co.nz
m: +64 021 0000 0000
d: +64 09 0000 0000
<!-- employee-mobile-tile -->
<div class="employee-mobile-tile">
<div class="employee-image-container">
<img class="employee-image" src="/images/staff/staff-placeholder.jpg" />
</div><!-- employee-image-container -->
<div class="employee-info-container">
<h3 class="employee-name">Employee Name</h3>
<h4 class="employee-title">Employee Title</h4>
<p class="employee-email">
<a href="mailto:">employee.emailaddrees@realestate.co.nz</a>
</p>
<p class="employee-number">
<a href="tel:+640000000"><span class="number-type">m: </span> +64 021 0000 0000</a>
</p>
<p class="employee-number">
<a href="tel:+640000000"><span class="number-type">d: </span> +64 09 0000 0000</a>
</p>
</div><!-- employee-info-container -->
</div><!-- employee-mobile-tile ends -->
<!-- employee-desktop-tile -->
<div class="employee-desktop-tile">
<div class="employee-image-container">
<a class="employee-image-link" href="#">
<img class="employee-image" src="/images/staff/staff-placeholder.jpg" />
</a>
<div class="employee-name-box">
<h3 class="employee-image-name"><a class="employee-text-link" href="#">Employee Name</a></h3>
</div>
</div><!-- employee-image-container -->
<div class="employee-info-container">
<h3 class="employee-name">Employee Name</h3>
<h4 class="employee-title">Employee Title</h4>
<p class="employee-email">
<a href="#">employee.emailaddrees@realestate.co.nz</a>
</p>
<p class="employee-mobile-number">
<span class="number-type">m: </span> +64 021 0000 0000
</p>
<p class="employee-direct-number">
<span class="number-type">d: </span> +64 09 0000 0000
</p>
</div><!-- employee-info-container -->
</div>
<!-- employee-desktop-tile ends -->
<div class="tile-listing row collapse">
<div class="listing-images">
</div>
<div class="listing-details">
<div class="row column">
<div class="listing-details-heading small-10 columns">
<h2 class="listing-tile-title"><a href="#">Listing Residential Sale Tile Title</a></h2>
</div>
<div class="listing-details-icons small-2 columns">
<p class="bedrooms">3 <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg></p>
<p class="bathrooms">2 <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg></p>
</div>
</div>
<div class="listing-details-bottom row column">
<div class="listing-price-agency-container row collapse">
<div class="small-7 columns">
<h5 class="listing-tile-address">Mt Eden 10 Smith St</h5>
<h4 class="listing-tile-price">Asking Price $10m including GST</h4>
</div>
<div class="small-5 columns clearfix">
</div>
</div>
<div class="bottom-bar row column">
<div class="small-7 columns">
<span class="listing-id-number">IDNumber</span>
<span class="listing-time">Listed Time (It may be long)</span>
</div>
<div class="small-5 columns text-right">
<a href="#" title="Share it">
<svg class="icon email">
<use xlink:href="#email-icon" />
</svg> <span class="show-for-medium-up">Share</span>
</a>
<a href="#" title="Follow it">
<svg class="icon star">
<use xlink:href="#star-icon" />
</svg> <span class="show-for-medium-up">Un Follow</span>
</a>
</div>
</div>
</div>
</div>
</div>
<form class="search-bar" action="#">
<div class="row search-bar-row">
<div class="large-3 columns">
<button class="button expanded dropdown" type="button" data-toggle="example-dropdown">Browse by location</button>
<div class="browse-locations dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true" style="background-color: white;">
<ul class="vertical menu" data-drilldown data-auto-height="true" data-animate-height="true">
<li>
<a href="#Northland">Northland</a>
<ul class="vertical menu">
<li><a href="#All-districts">All districts</a></li>
<li>
<a href="#Far-north">Far North</a>
<ul class="vertical menu">
<li><a href="#All-districts">All suburbs</a></li>
<li><a href="#Ahipara">Ahipara</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Ahipara">Ahipara</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
</ul>
</li>
<li><a href="#Ahipara">Ahipara</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
</ul>
</li>
<li>
<a href="#Auckland">Auckland</a>
<ul class="vertical menu">
<li><a href="#All-districts">All districts</a></li>
<li>
<a href="#Auckland City">Auckland City</a>
<ul class="vertical menu">
<li><a href="#All-districts">All suburbs</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
</ul>
</li>
<li><a href="#Ahipara">Ahipara</a></li>
<li><a href="#Ahipara">Ahipara</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="large-1 columns">
<p class="text-center">or</p>
</div>
<div class="large-8 columns">
<div class="row">
<div class="large-10 medium-9 small-12 columns">
<div class="input-group">
<input class="keyword input-group-field" type="text" placeholder="2 bedroom House for sale in Eden Terrace">
<div class="input-group-button">
<button class="button submit-trigger keyword-search-btn">
<svg class="icon search-magnify">
<use xlink:href="#search-magnify-icon" />
</svg>
<span class="show-for-large-only"> Search</span></button>
</div>
</div>
</div>
<div class="large-2 medium-3 small-12 columns">
<a href="#" class="specific-search-trigger button">More Options</a>
</div>
</div>
</div>
<div class="specific-search">
<div class="row padding-horizontal-3">
<div class="large-7 medium-8 small-12 columns">
<!-- CATEGORY SELECT -->
<div class="category-container">
<label class="container-label">Category:</label>
<select id="multiple-category-selector" class="dropped-arrow" data-prompt="Select Category Type/s" >
<option value="all" class="group">All Categories</option>
<!-- <option class="" value="residential">Residential</option> -->
<option value="residential-sale">Residential Sale</option>
<option value="residential-rental">Residential Rental</option>
<!--option class="group" value="commercial">Commercial</option-->
<option value="commercial-sale">Commercial Sale</option>
<option value="commercial-lease">Commercial Lease</option>
<option value="rural">Rural</option>
<option value="business">Business</option>
</select>
</div>
<!-- END CATEGORY SELECT -->
<!-- PROPERTY TYPE CONTAINER -->
<div class="property-types-container">
<label class="container-label">Property Types:</label>
<select id="multiple-property-selector" class="dropped-arrow" data-prompt="Select Property Type/s">
</select>
</div>
<!-- END PROPERTY TYPE CONTAINER -->
<!-- PRICING METHODS CONTAINER -->
<div class="pricing-methods-container advanced-option">
<label class="container-label">Pricing Methods:</label>
<select id="multiple-pricing-methods-selector" class="dropped-arrow" data-prompt="Select Pricing Method/s">
<option value="1">Displayed Price</option>
<option value="2">Negotiation</option>
<option value="3">Auction</option>
<option value="4">Tender</option>
<option value="5">POA</option>
<option value="6">Offers</option>
<option value="7">Deadline Treaty</option>
</select>
</div>
<!-- END PRICING METHODS CONTAINER -->
<!-- LOCATION SELECT -->
<div class="location-container">
<label class="container-label">Location:</label>
<div id="scroll-box">
<select class="regions hide" id="search_filters_regions" data-prompt="Select Region/s" tabindex="2"></select>
<select class="districts hide" id="search_filters_districts" tabindex="3" data-prompt="Select District/s"></select>
</div>
</div>
<!-- END LOCATION SELECT -->
</div>
<div class="large-5 medium-4 small-12 columns">
<div class="property-feature">
<h5>Only show properties with:</h5>
<p>
<label class=""><input type="checkbox" value="1" name="furnished" class="checkbox"/> <span>Fully Furnished</span></label>
<label class=""><input type="checkbox" value="2" name="pet" class="checkbox"/><span>Pet Friendly</span> </label>
<label><input type="checkbox" name="open" value="4" class="checkbox"/> <span>Open Homes</span></label>
<label class=""><input type="checkbox" value="8" name="address" class="checkbox"/> <span>Properties with an Address</span> </label>
</p>
</div>
</div>
</div>
<div class="row">
<div class="large-7 medium-12 small-12 columns multi-locations-container">
<div class="location-label">
<label for="">Locations:</label>
</div>
<div class="location-selectors">
<div class="steps active" id="step-1" data-type="region">
<ul>
</ul>
</div>
<div class="steps" id="step-2" data-type="districts">
<!-- <Label for="">District</Label> -->
<ul>
</ul>
</div>
<div class="steps" id="step-3" data-type="suburbs">
<!-- <Label for="">Suburb</Label> -->
<ul>
</ul>
</div>
<a class="button prev hidden" href="#">
Back
</a>
<a class="button next hidden" href="#">
Districts
</a>
</div>
</div>
<div class="large-5 medium-12 small-12 show-for-medium-up columns">
<div class="locations-summary">
</div>
</div>
</div>
<div class="search-specifics">
<div class="specifics-row" id="buy-row">
<label class="min-txt" for="min_buy">Buy:</label>
<select tabindex="7" class="dropped-arrow" name="search[filters][prices_min]" id="min_buy" data-prompt="$0">
<option value="0">$0</option>
<option value="25000">$25,000+</option>
<option value="50000">$50,000+</option>
<option value="100000">$100,000+</option>
<option value="150000">$150,000+</option>
<option value="200000">$200,000+</option>
<option value="250000">$250,000+</option>
<option value="300000">$300,000+</option>
<option value="350000">$350,000+</option>
<option value="400000">$400,000+</option>
<option value="450000">$450,000+</option>
<option value="500000">$500,000+</option>
<option value="600000">$600,000+</option>
<option value="700000">$700,000+</option>
<option value="800000">$800,000+</option>
<option value="900000">$900,000+</option>
<option value="1000000">$1m+</option>
<option value="1200000">$1.2m+</option>
<option value="1400000">$1.4m+</option>
<option value="1600000">$1.6m+</option>
<option value="1800000">$1.8m+</option>
<option value="2000000">$2m+</option>
<option value="2500000">$2.5m+</option>
<option value="3500000">$3.5m+</option>
<option value="5000000">$5m+</option>
<option value="7500000">$7.5m+</option>
<option value="10000000">$10m+</option>
</select>
<select tabindex="8" class="dropped-arrow" name="search[filters][prices_max]" id="max_buy">
<option value="25000">$25,000</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
<option value="300000">$300,000</option>
<option value="350000">$350,000</option>
<option value="400000">$400,000</option>
<option value="450000">$450,000</option>
<option value="500000">$500,000</option>
<option value="600000">$600,000</option>
<option value="700000">$700,000</option>
<option value="800000">$800,000</option>
<option value="900000">$900,000</option>
<option value="1000000">$1m</option>
<option value="1200000">$1.2m</option>
<option value="1400000">$1.4m</option>
<option value="1600000">$1.6m</option>
<option value="1800000">$1.8m</option>
<option value="2000000">$2m</option>
<option value="2500000">$2.5m</option>
<option value="3500000">$3.5m</option>
<option value="5000000">$5m</option>
<option value="7500000">$7.5m</option>
<option value="10000000">$10m</option>
<option value="999999999" selected="selected">$10m+</option>
</select>
</div>
<div class="specifics-row" id="lease-row">
<label class="min-txt" for="min_lease">Lease:</label>
<select tabindex="7" class="dropped-arrow" name="search[filters][prices_min]" id="min_lease" data-prompt="$0">
<option value="0">$0</option>
<option value="25000">$25,000+</option>
<option value="50000">$50,000+</option>
<option value="100000">$100,000+</option>
<option value="150000">$150,000+</option>
<option value="200000">$200,000+</option>
<option value="250000">$250,000+</option>
<option value="300000">$300,000+</option>
<option value="350000">$350,000+</option>
<option value="400000">$400,000+</option>
<option value="450000">$450,000+</option>
<option value="500000">$500,000+</option>
<option value="600000">$600,000+</option>
<option value="700000">$700,000+</option>
<option value="800000">$800,000+</option>
<option value="900000">$900,000+</option>
<option value="1000000">$1m+</option>
<option value="1200000">$1.2m+</option>
<option value="1400000">$1.4m+</option>
<option value="1600000">$1.6m+</option>
<option value="1800000">$1.8m+</option>
<option value="2000000">$2m+</option>
<option value="2500000">$2.5m+</option>
<option value="3500000">$3.5m+</option>
<option value="5000000">$5m+</option>
<option value="7500000">$7.5m+</option>
<option value="10000000">$10m+</option>
</select>
<select tabindex="8" class="dropped-arrow" name="search[filters][prices_max]" id="max_lease">
<option value="25000">$25,000</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
<option value="300000">$300,000</option>
<option value="350000">$350,000</option>
<option value="400000">$400,000</option>
<option value="450000">$450,000</option>
<option value="500000">$500,000</option>
<option value="600000">$600,000</option>
<option value="700000">$700,000</option>
<option value="800000">$800,000</option>
<option value="900000">$900,000</option>
<option value="1000000">$1m</option>
<option value="1200000">$1.2m</option>
<option value="1400000">$1.4m</option>
<option value="1600000">$1.6m</option>
<option value="1800000">$1.8m</option>
<option value="2000000">$2m</option>
<option value="2500000">$2.5m</option>
<option value="3500000">$3.5m</option>
<option value="5000000">$5m</option>
<option value="7500000">$7.5m</option>
<option value="10000000">$10m</option>
<option value="999999999" selected="selected">$10m+</option>
</select>
</div>
<div class="specifics-row" id="rental-row">
<label class="min-txt" for="min_rent">Rent:</label>
<select tabindex="7" class="dropped-arrow" name="search[filters][prices_min]" id="min_rent" data-prompt="$0">
<option value="0" selected="selected">$0</option>
<option value="75">$75+</option>
<option value="100">$100+</option>
<option value="125">$125+</option>
<option value="150">$150+</option>
<option value="175">$175+</option>
<option value="200">$200+</option>
<option value="225">$225+</option>
<option value="250">$250+</option>
<option value="275">$275+</option>
<option value="300">$300+</option>
<option value="350">$350+</option>
<option value="400">$400+</option>
<option value="450">$450+</option>
<option value="500">$500+</option>
<option value="600">$600+</option>
<option value="700">$700+</option>
<option value="800">$800+</option>
<option value="900">$900+</option>
<option value="1000">$1,000+</option>
<option value="1250">$1,250+</option>
<option value="1500">$1,500+</option>
<option value="1750">$1,750+</option>
<option value="2000">$2,000+</option>
<option value="2500">$2,500+</option>
</select>
<select tabindex="8" class="dropped-arrow" name="search[filters][prices_max]" id="max_rent">
<option value="75">$75</option>
<option value="100">$100</option>
<option value="125">$125</option>
<option value="150">$150</option>
<option value="175">$175</option>
<option value="200">$200</option>
<option value="225">$225</option>
<option value="250">$250</option>
<option value="275">$275</option>
<option value="300">$300</option>
<option value="350">$350</option>
<option value="400">$400</option>
<option value="450">$450</option>
<option value="500">$500</option>
<option value="600">$600</option>
<option value="700">$700</option>
<option value="800">$800</option>
<option value="900">$900</option>
<option value="1000">$1,000</option>
<option value="1250">$1,250</option>
<option value="1500">$1,500</option>
<option value="1750">$1,750</option>
<option value="2000">$2,000</option>
<option value="2500">$2,500</option>
<option value="999999999" selected="selected">$2,500+</option>
</select>
</div>
</div>
<div class="other-row search-specifics">
<div class="specifics-row">
<label class="min-txt" for="min_bedroom">Beds:</label>
<select tabindex="9" class="dropped-arrow" name="search[filters][bedrooms_min]" id="min_bedroom" data-prompt="Any">
<option value="0" selected="selected">Any</option>
<option value="1">1+</option>
<option value="2">2+</option>
<option value="3">3+</option>
<option value="4">4+</option>
<option value="5">5+</option>
</select>
<select tabindex="10" class="dropped-arrow advanced-option" name="search[filters][bedrooms_max]" id="max_bedroom">
<option value="0">Any</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="999" selected="selected">5+</option>
</select>
</div>
<div class="specifics-row">
<label class="min-txt" for="min_bathroom">Baths:</label>
<select tabindex="11" class="dropped-arrow" name="search[filters][bathrooms_min]" id="min_bathroom" data-prompt="Any">
<option value="0" selected="selected">Any</option>
<option value="1">1+</option>
<option value="2">2+</option>
<option value="3">3+</option>
</select>
<select tabindex="12" class="dropped-arrow advanced-option" name="search[filters][bathrooms_max]" id="max_bathroom">
<option value="0">Any</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3+</option>
</select>
</div>
<div class="specifics-row clear-float">
<label class="min-txt" for="search_filters_floorarea_min">Floor:</label>
<select tabindex="13" name="search[filters][floorarea_min]" class="dropped-arrow" id="min_floor">
<option value="0" selected="selected">Any</option>
<option value="40">40m²+</option>
<option value="75">75 m²+</option>
<option value="100">100 m²+</option>
<option value="125">125 m²+</option>
<option value="150">150 m²+</option>
<option value="175">175 m²+</option>
<option value="200">200 m²+</option>
<option value="250">250 m²+</option>
<option value="300">300 m²+</option>
<option value="400">400 m²+</option>
<option value="500">500 m²+</option>
<option value="750">750 m²+</option>
<option value="1000">1,000 m²+</option>
<option value="999999999">1,000 m²+</option>
</select>
<select tabindex="14" name="search[filters][floorarea_max]" class="dropped-arrow advanced-option" id="max_floor">
<option value="40">40m²</option>
<option value="75">75 m²</option>
<option value="100">100 m²</option>
<option value="125">125 m²</option>
<option value="150">150 m²</option>
<option value="175">175 m²</option>
<option value="200">200 m²</option>
<option value="250">250 m²</option>
<option value="300">300 m²</option>
<option value="400">400 m²</option>
<option value="500">500 m²</option>
<option value="750">750 m²</option>
<option value="1000">1,000 m²</option>
<option value="999999999" selected="selected">1,000 m²+</option>
</select>
</div>
<div class="specifics-row ">
<label class="min-txt" for="search_filters_landarea_min">Land:</label>
<select tabindex="15" name="search[filters][landarea_min]" class="dropped-arrow" id="min_land">
<option value="0" selected="selected">Any</option>
<option value="100">100 m²+</option>
<option value="200">200 m²+</option>
<option value="300">300 m²+</option>
<option value="500">500 m²+</option>
<option value="750">750 m²+</option>
<option value="1000">1,000 m²+</option>
<option value="2000">2,000 m²+</option>
<option value="5000">5,000 m²+</option>
<option value="10000">1 HA+</option>
<option value="20000">2 HA+</option>
<option value="50000">5 HA+</option>
<option value="100000">10 HA+</option>
<option value="150000">15 HA+</option>
<option value="200000">20 HA+</option>
<option value="250000">25 HA+</option>
<option value="999999999">25 HA+</option>
</select>
<select tabindex="16" name="search[filters][landarea_max]" class="dropped-arrow advanced-option" id="max_land">
<option value="100">100 m²</option>
<option value="200">200 m²</option>
<option value="300">300 m²</option>
<option value="500">500 m²</option>
<option value="750">750 m²</option>
<option value="1000">1,000 m²</option>
<option value="2000">2,000 m²</option>
<option value="5000">5,000 m²</option>
<option value="10000">1 HA</option>
<option value="20000">2 HA</option>
<option value="50000">5 HA</option>
<option value="100000">10 HA</option>
<option value="150000">15 HA</option>
<option value="200000">20 HA</option>
<option value="250000">25 HA</option>
<option value="999999999" selected="selected">25 HA+</option>
</select>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="margin-top-15">
<button class="button postfix right medium-up-search-btn show-for-medium-up selection-summary-modal-trigger">Search</button>
<button id="advanced-search-trigger" class="button postfix advance-btn">Even More Options</button>
</div>
</div>
</div>
<div class="row expended show-for-small-only">
<div class="row expended">
<a href="#" class="search-txt-btn button expand margin-top-15 selection-summary-modal-trigger">Search</a>
</div>
</div>
</div>
</div>
</div>
<div id="selection-summary-modal" class="reveal-modal search-selection-summary" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class="modal-body">
<div class="row">
<div class="small-12 columns">
<h2>Selection Summary</h2>
<hr/>
</div>
<div class="medium-6 small-12 columns">
<div class="category-selection">
<h6>Category</h6>
<p id="category-field-summary"></p>
</div>
<div class="location-selection">
<h6>Locations</h6>
<p id="location-field-summary"></p>
</div>
<div class="property-type-selection">
<h6>Property Types</h6>
<p id="property-type-field-summary"></p>
</div>
<div class="property-attribute-selection">
<h6>Only Show Properties with</h6>
<p id="property-attribute-checkbox-summary"></p>
</div>
<div class="pricing-method-selection">
<h6>Pricing Methods</h6>
<p id="pricing-method-field-summary"></p>
</div>
</div>
<div class="medium-6 small-12 columns">
<div id="buy-price-selection-summary"></div>
<div id="rent-price-selection-summary"></div>
<div id="bed-selection-summary"></div>
<div id="bath-selection-summary"></div>
<div id="floor-selection-summary"></div>
<div id="land-selection-summary"></div>
</div>
</div>
</div>
<div class="modal-foot">
<button class="button">Search</button>
<button class="button">Save and Search</button>
<button class="button close-reveal-modal">Cancel</button>
</div>
</div>
<input type="hidden" name="search[filters][search_depth_option]" id="searchDepthOption" value="1">
<div class="hidden-locations-fields hide">
</div>
<div class="row column">
<div class="large-4 columns">
</div>
<div class="large-8 columns">
</div>
</div>
</form>
<div class="find-an-agent">
<ul id="tab-findAgentOffice">
<li class="active"><a id="agent" href="#" data-search-keyword="Search by name, location or keyword">Find an agent</a></li>
<li class=""><a id="office" href="#" data-search-keyword="Search by name, location or keyword">Find an office</a></li>
</ul>
<div class="formHolder lightColourBG findAgentOfficeForm">
<form action="/profile/search" method="post" id="findAnAgent">
<input type="text" name="search[keywords]" class="input-field" id="inputField">
<input type="hidden" name="search[type]" value="agent" id="search_type"><input type="hidden" name="search[sort_by]" value="" id="search_sort_by">
<input type="submit" class="button" value="Search">
</form>
</div>
</div>
<div class="formHolder thinkingOfSellingForm">
<form id="sellers-tool-form" method="GET" action="/account/thinking-of-selling">
<fieldset>
<div class="seller-box">
<span class="seller-text">I am thinking about selling a</span>
</div>
<div class="seller-box select-container">
<select name="listing_sub_type" id="listing-sub-type" data-prompt="Select Propery Type/s">
<option value="apartment">Apartment</option>
<option value="boat-shed">Boat shed</option>
<option value="carpark">Carpark</option>
<option value="home-income">Home & Income</option>
<option value="house">House</option>
<option value="lifestyle-property">Lifestyle Property</option>
<option value="lifestyle-section">Lifestyle Section</option>
<option value="multiple-properties">Multiple Properties</option>
<option value="retirement-living">Retirement Living</option>
<option value="section">Section</option>
<option value="studio">Studio</option>
<option value="townhouse">Townhouse</option>
<option value="unit">Unit</option>
</select>
</div>
<div class="seller-box">
<span class="seller-text">in</span>
</div>
<div class="seller-box">
<input type="text" name="autocomplete" id="autocomplete" data-search-type="suburb" value="" class="ui-autocomplete-input" autocomplete="off">
</div>
<div class="seller-box">
<input type="hidden" name="autocomplete_value" id="autocompleteValue" value="">
</div>
<div class="seller-box">
<input type="button" value="Submit" class="button" id="submitBtn">
</div>
</fieldset>
</form>
</div>
<div class="row collapse header-nav">
<div class="small-12 columns">
<nav class="top-bar">
<div class="small-5 columns text-left logo-btn">
<a class="logo" href="/">
<svg class="sprite-logo show-for-medium">
<use xlink:href="#re-logo-hz-v2" />
</svg>
<svg class="logo symbol-mobile show-for-small-only">
<use xlink:href="#re-symbol" />
</svg>
</a>
</div>
<div class="small-7 columns">
<div class="row">
<div class="small-4 columns">
<div class="lock-box search-btn">
<a class="search-icon" href="#">
<svg class="icon property-search">
<use xlink:href="#property-search-icon">
</svg>
</a>
<a class="text-below show-for-medium" href="#"><span class="show-for-medium">Search</span>
<svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon">
</svg>
</a>
</div>
</div>
<div class="small-4 columns">
<div class="lock-box content-btn float-right" data-toggle="blog-dropmenu" aria-controls="blog-dropmenu" aria-expanded="false">
<a class="content-icon" href="#">
<svg class="icon agency">
<use xlink:href="#agency-icon">
</svg>
</a>
<a class="text-below show-for-medium" href="#">Our Blog
<svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon">
</svg>
</a>
</div>
<ul id="blog-dropmenu" class="dropdown-pane small bottom" data-dropdown data-hover="true" data-hover-pane="true" aria-hidden="true" tabindex="-1">
<li><a href="#">Blog</a></li>
<li><a href="#">Finance Tips</a></li>
<li><a href="#">Buyer's Guide</a></li>
<li><a href="#">Sellers Guide</a></li>
</ul>
</div>
<div class="small-4 columns">
<div class="lock-box user-btn float-right" data-toggle="user-dropmenu" aria-controls="user-dropmenu" aria-expanded="false">
<a class="user-icon" href="#">
<svg class="icon user">
<use xlink:href="#user-icon" />
</svg>
</a>
<a class="text-below show-for-medium" href="#">
My property
<svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon">
</svg>
</a>
</div>
<ul id="user-dropmenu" class="dropdown-pane small bottom" data-dropdown data-hover="true" data-hover-pane="true" aria-hidden="true" tabindex="-1">
<li><a href="#">Login</a></li>
<li><a href="#">Sign Up</a></li>
<li>
<a href="#">My Property</a>
<ul class="sub-menu">
<li><a href="#">Saved Properties</a></li>
<li><a href="#">Saved Searches and Alerts</a></li>
<li><a href="#">Open Home Planner</a></li>
<li><a href="#">My Account</a></li>
</ul>
</li>
<li><a href="#">Seller's Tool</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="channel-bar">
<div class="title-bar" data-responsive-toggle="categories-menu" data-hide-for="medium">
<button type="button" data-toggle="example-menu">Browse Categories</button>
</div>
<ul id="categories-menu" class="vertical medium-horizontal menu expanded" data-responsive-menu="drilldown medium-dropdown">
<li class="residential">
<a href="#">Residential</a>
<ul class="vertical menu">
<li><a href="#">For Sale</a></li>
<li><a href="#">For Rental</a></li>
</ul>
</li>
<li class="commercial">
<a href="#">Commercial</a>
<ul class="vertical menu">
<li><a href="#">For Sale</a></li>
<li><a href="#">For Lease</a></li>
</ul>
</li>
<li class="rural"><a href="#">Rural</a></li>
<li class="business"><a href="#">Business</a></li>
</ul>
</div>
</div>
</div>
<!-- footer inner -->
<div id="footerInner" class="large-12 columns footer-container footer-inner">
<div class="medium-6 large-2 columns">
<strong>Explore</strong>
<ul class="no-bullet">
<li><a href="/residential/all">Buy residential property</a></li>
<li><a href="/rental/all">Rent residential property</a></li>
<li><a href="/profile/search">Sell residential property</a></li>
<li><a target="_blank" href="//media.realestate.co.nz/flyers">Promote your listing</a></li>
<li><a href="/about/glossary">Glossary of real estate terms</a></li>
</ul>
</div>
<div class="medium-6 large-2 columns">
<strong>My Property</strong>
<ul class="no-bullet">
<li><a href="/account/my-property">Saved properties</a></li>
<li><a href="/account/my-searches">Saved Searches and Alerts</a></li>
<li><a href="/account/my-open-homes">Open Home Planner</a></li>
<li><a class="account-tools-editdetails" href="/account">My Account</a></li>
<li><a href="/account/thinking-of-selling">Thinking of selling?</a></li>
</ul>
</div>
<div class="medium-6 large-2 columns">
<strong>About Realestate.co.nz</strong>
<ul class="footerNav no-bullet">
<li><a href="/about/about-us">About us</a></li>
<li><a href="/about/contact-us">Contact us</a></li>
<li><a href="/about/legal-notices">Legal notices</a></li>
<li><a href="/about/help">Help</a></li>
<li><a href="/about/advertise">Advertise on Realestate.co.nz</a></li>
</ul>
</div>
<div class="medium-6 large-2 columns">
<strong>Our related sites</strong>
<ul class="footerNav no-bullet">
<li><a href="//agentpro.co.nz">AgentPro</a></li>
<li><a href="//www.unconditional.co.nz">Unconditional</a></li>
</ul>
</div>
<!-- google translate and social media -->
<div class="medium-6 large-2 columns">
<strong>Follow Us</strong>
<ul class="no-bullet">
<li><a target="_blank" href="//twitter.com/realestateconz">Twitter</a></li>
<li><a target="_blank" href="//www.youtube.com/channel/UCTF-kJvbBcL1PEyajMPu4qg">YouTube</a></li>
<li><a target="_blank" href="//www.facebook.com/realestate.co.nz">Facebook</a></li>
</ul>
</div>
<div class="medium-6 large-2 columns">
<strong>Realestate.co.nz Apps</strong>
<ul class="footerNav last no-bullet">
<li><a target="_blank" href="//itunes.apple.com/nz/app/realestate/id404076057?mt=8">iPhone</a></li>
<li><a target="_blank" href="//play.google.com/store/apps/details?id=nz.co.realestate.android">Android</a></li>
</ul>
</div>
<!-- / google translate and social media -->
</div><!-- / footer inner -->
<ul class="breadcrumbs">
<li>
<a href="/residential/all"><span>Home</span></a>
</li>
<li>
<a href="/residential/all/auckland"><span>Auckland</span></a>
</li>
<li>
<a href="/residential/all/auckland/rodney"><span>Rodney</span></a>
</li>
<li>
<a href="/residential/all/auckland/rodney/kumeu"><span>Kumeu</span></a>
</li>
<li>
<a href="/2899968"><span>2 Pomona Road</span></a>
</li>
</ul>
<ul class="pagination">
<li class="arrow unavailable"><a href="">«</a></li>
<li class="current"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li class="unavailable"><a href="">…</a></li>
<li><a href="">12</a></li>
<li><a href="">13</a></li>
<li class="arrow"><a href="">»</a></li>
</ul>
<dl class="tabs" data-tab role="tablist">
<dd class="tab-title active"><a href="#panel1" role="tab">Login</a></dd>
<dd><a href="#panel2">Content</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel1">
<ul class="no-bullet multi-menu">
<li><a href="#">Login</a></li>
<li><a href="#">Sign Up</a></li>
<li class="nested">
<a class="submenu-trigger" href="#">My Properties ></a>
<ul class="sub-menu">
<li class="back-to-parent"><h5>Back</h5></li>
<li><a href="#">Saved Properties</a></li>
<li><a href="#">Saved Searches and Alerts</a></li>
<li><a href="#">Open Home Planner</a></li>
<li><a href="#">My Account</a></li>
</ul>
</li>
<li><a href="#">Seller's Tool</a></li>
</ul>
</div>
<div class="content" id="panel2">
<ul class="no-bullet">
<li>
<a href="#">Blog ></a>
</li>
<li><a href="#">Finance Tips</a></li>
<li><a href="#">Buyer's Guide</a></li>
<li><a href="#">Sellers Guide</a></li>
</ul>
</div>
</div>
atoms-email-plus-icon
<!-- save this search -->
<ul class="saveFeedBTNS">
<li class="hide">
<form id="save_search" method="post" class="hidden" action="/account/save-search">
<fieldset>
<input type="hidden" class="uri" name="uri" value="eyJMaXN0aW5nVHlwZXMiOlsxXSwiRGlzcGxheSI6eyJTdGFydCI6MCwiTGltaXQiOjIwLCJTb3J0IjoibGF0ZXN0IiwiTW9kZSI6Imxpc3QiLCJCcmVha0Rvd24iOlsic3VidXJiIiwiZGlzdHJpY3QiLCJyZWdpb24iXSwiVHlwZSI6InN0YW5kYXJkIn19" />
</fieldset>
</form>
</li>
<li class="save">
<a class="saved saveSearchBTN " href="/account/my-searches">
<svg class="icon share-with-email">
<use xlink:href="#share-with-email-icon" />
</svg><span class="save-search-text">Search saved</span></a>
</li>
</ul>
<!-- / save this search -->
<div class="results-display-container">
<ul class="menu simple results-display-control">
<li>
<ul class="button-group radius">
<li><a class="button trigger"><input type="radio" name="display_mode" value="list"><svg class="icon list-view">
<use xlink:href="#list-view-icon" />
</svg></a></li>
<li><a class="button trigger active"><input type="radio" name="display_mode" value="grid" checked="checked"><svg class="icon grid-view">
<use xlink:href="#grid-icon" />
</svg></a></li>
<li><a class="button trigger"><input type="radio" name="display_mode" value="map"><svg class="icon map-view">
<use xlink:href="#map-icon" />
</svg>
</a></li>
</ul>
</li>
<li>
<select id="sort-trigger" name="sort_order" class="clickable trigger">
<option value="latest">Latest</option>
<option value="lowest">Lowest Price</option>
<option value="highest">Highest</option>
<option value="featured">Featured First</option>
<option value="popular">Most Popular</option>
</select>
</li>
<li>
<select id="perpage-trigger" name="listings_per_page" class="clickable trigger">
<option value="20">20 per page</option>
<option value="40">40 per page</option>
<option value="80">80 per page</option>
</select>
</li>
<li>
<b id="save-search-trigger" class="clickable save-search-button trigger"><img src="/images/save-search-icon.png" alt="Saved Search Icon"/> Save search to get updates</b>
</li>
</ul>
</div>
<div class="expanded row">
<div class="hide-for-small columns blog-nav">
<!-- Mobile Nav starts -->
<nav class="hide-for-medium-up mobile-blog-bar">
<ul class="mobile-blog-navigation">
<li class="news-blog">
<a class="news-blog-link" href="/">
News
</a>
</li>
<li class="tips-blog">
<a class="tips-blog-link" href="/">
Tips & Guides
</a>
</li>
<li class="inspiration-blog">
<a class="inspiration-blog-link" href="/">
Inspiration
</a>
</li>
<li class="agents-blog">
<a class="agents-blog-link" href="/">
Agents
</a>
</li>
</ul>
</nav>
<!-- Mobile Nav ends -->
<nav class="show-for-medium-up desktop-blog-bar">
<ul class="desktop-blog-navigation">
<li class="news-blog">
<a class="news-blog-link" href="/">
<svg class="icon show-for-medium-up">
<use xlink:href="#news-icon" />
</svg>
<span class="nav-text">News</span>
</a>
</li>
<li class="tips-blog">
<a class="tips-blog-link" href="/">
<svg class="icon show-for-medium-up">
<use xlink:href="#tips-icon" />
</svg>
<span class="nav-text">Tips & Guides</span>
</a>
</li>
<li class="inspiration-blog">
<a class="inspiration-blog-link" href="/">
<svg class="icon show-for-medium-up">
<use xlink:href="#inspiration-icon" />
</svg>
<span class="nav-text">Inspiration</span>
</a>
</li>
<li class="keyword-search-blog show-for-large-up">
<input placeholder="Search Articles" type="text">
<button class="search-icon-box-button">
<svg class="icon">
<use xlink:href="#search-magnify-icon" />
</svg>
</button>
</li>
<li class="agents-blog">
<a class="agents-blog-link" href="/">
<svg class="icon show-for-medium-up">
<use xlink:href="#max-tenants-icon" />
</svg>
<span class="nav-text">Agents</span>
</a>
</li>
</ul>
</div>
</div>
Name Description | Summary | Alerts | Date | Actions |
---|---|---|---|---|
search name 1 Albany and Bayswater Properties for Sale with open homes with 2 to 4 bedrooms and 2 or more bathrooms and between $700,000 and $1,600,000 | Albany and Bayswater Properties for Sale with open homes with 2 to 4 bedrooms and 2 or more bathrooms and between $700,000 and $1,600,000 | Daily | 15 Nov 2016 | Edit Save ⛝ Undo |
search name 2 Albany and Bayswater Properties for Sale with open homes with 2 to 4 bedrooms and 2 or more bathrooms and between $700,000 and $1,600,000 | Albany and Bayswater Properties for Sale with open homes with 2 to 4 bedrooms and 2 or more bathrooms and between $700,000 and $1,600,000 | Weekly | 15 Nov 2016 | Edit ⛝ Undo |
<div class="row">
<div class="small-12 columns">
<h4>My Saved Searches</h4>
<table>
<thead>
<tr>
<th class="name">
<span class="show-for-medium-up">Name</span>
<span class="show-for-small-only">Description</span>
</th>
<th class="show-for-medium-up">Summary</th>
<th class="alert">Alerts</th>
<th class="date show-for-medium-up">Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="readonly search-name">search name 1</span>
<input class="editable" type="text" name="search[name]" value="search name 1">
<span class="show-for-small-only">Albany and Bayswater Properties for Sale with open homes with 2 to 4 bedrooms and 2 or more bathrooms and between $700,000 and $1,600,000</span>
</td>
<td class="show-for-medium-up">Albany and Bayswater Properties for Sale with open homes with 2 to 4 bedrooms and 2 or more bathrooms and between $700,000 and $1,600,000</td>
<td>
<span class="readonly">Daily</span>
<select class="editable" name="search[cycle]">
<option value="0">Never</option>
<option value="1" selected="selected">Daily</option>
<option value="7">Weekly</option>
<option value="14">Fortnightly</option>
<option value="30">Monthly</option>
</select>
</td>
<td class="show-for-medium-up">15 Nov 2016</td>
<td class="action">
<a class="edit-search-alert-trigger">Edit</a>
<a data-action="#" class="save-search-alert-trigger hide">Save</a>
<a data-href="#" class="delete-search-alert-trigger">⛝</a>
<a class="undo-search-alert-trigger hide">Undo</a>
</td>
</tr>
<tr>
<td>
<span class="readonly search-name">search name 2</span>
<input class="editable" type="text" name="search[name]" value="search name 1">
<span class="show-for-small-only">Albany and Bayswater Properties for Sale with open homes with 2 to 4 bedrooms and 2 or more bathrooms and between $700,000 and $1,600,000</span>
</td>
<td class="show-for-medium-up">Albany and Bayswater Properties for Sale with open homes with 2 to 4 bedrooms and 2 or more bathrooms and between $700,000 and $1,600,000</td>
<td>
<span class="readonly">Weekly</span>
<select class="editable" name="search[cycle]">
<option value="0">Never</option>
<option value="1">Daily</option>
<option value="7" selected="selected">Weekly</option>
<option value="14">Fortnightly</option>
<option value="30">Monthly</option>
</select>
</td>
<td class="show-for-medium-up">15 Nov 2016</td>
<td class="action">
<a class="edit-search-alert-trigger">Edit</a>
<a class="delete-search-alert-trigger">⛝</a>
<a class="undo-search-alert-trigger hide">Undo</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="similar-articles-container">
<h2 class="similar-articles-headline">Similar Articles</h2>
<ul class="similar-articles-list">
<li><a href="#" title="Similar Article One">Article One</a></li>
<li><a href="#" title="Similar Article Two">Article Two</a></li>
<li><a href="#" title="Similar Article Three">Article Three</a></li>
<li><a href="#" title="Similar Article Four">Article Four</a></li>
</ul>
<p class="similar-articles-link"><a href="#">More <svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg></a></p>
</div>
<div class="articles-tags-container">
<h2 class="articles-tags-headline">Tags:</h2>
<ul class="articles-tags-list">
<li><a href="#" title="Article Tag One">For Sale</a></li>
<li><a href="#" title="Article Tag Two">Rentals</a></li>
<li><a href="#" title="Article Tag Three">Renovations</a></li>
<li><a href="#" title="Article Tag Four">Upgrade</a></li>
<li><a href="#" title="Article Tag Five">Lease</a></li>
<li><a href="#" title="Article Tag Six">Fixer Upper</a></li>
<li><a href="#" title="Article Tag Seven">Inspections</a></li>
<li><a href="#" title="Article Tag Eight">Investment</a></li>
<li><a href="#" title="Article Tag Nine">Interest Rates</a></li>
<li><a href="#" title="Article Tag Ten">Loans</a></li>
<li><a href="#" title="Article Tag Eleven">Mortgage</a></li>
<li><a href="#" title="Article Tag Twelve">Market</a></li>
</ul>
<p class="articles-tag-link"><a href="#">More <svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg></a></p>
</div>
molecules-top-bar
molecules-search
<!-- Begin .header -->
<header class="header" role="banner">
<div class="row collapse header-nav">
<div class="small-12 columns">
<nav class="top-bar">
<div class="small-5 columns text-left logo-btn">
<a class="logo" href="/">
<svg class="sprite-logo show-for-medium">
<use xlink:href="#re-logo-hz-v2" />
</svg>
<svg class="logo symbol-mobile show-for-small-only">
<use xlink:href="#re-symbol" />
</svg>
</a>
</div>
<div class="small-7 columns">
<div class="row">
<div class="small-4 columns">
<div class="lock-box search-btn">
<a class="search-icon" href="#">
<svg class="icon property-search">
<use xlink:href="#property-search-icon">
</svg>
</a>
<a class="text-below show-for-medium" href="#"><span class="show-for-medium">Search</span>
<svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon">
</svg>
</a>
</div>
</div>
<div class="small-4 columns">
<div class="lock-box content-btn float-right" data-toggle="blog-dropmenu" aria-controls="blog-dropmenu" aria-expanded="false">
<a class="content-icon" href="#">
<svg class="icon agency">
<use xlink:href="#agency-icon">
</svg>
</a>
<a class="text-below show-for-medium" href="#">Our Blog
<svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon">
</svg>
</a>
</div>
<ul id="blog-dropmenu" class="dropdown-pane small bottom" data-dropdown data-hover="true" data-hover-pane="true" aria-hidden="true" tabindex="-1">
<li><a href="#">Blog</a></li>
<li><a href="#">Finance Tips</a></li>
<li><a href="#">Buyer's Guide</a></li>
<li><a href="#">Sellers Guide</a></li>
</ul>
</div>
<div class="small-4 columns">
<div class="lock-box user-btn float-right" data-toggle="user-dropmenu" aria-controls="user-dropmenu" aria-expanded="false">
<a class="user-icon" href="#">
<svg class="icon user">
<use xlink:href="#user-icon" />
</svg>
</a>
<a class="text-below show-for-medium" href="#">
My property
<svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon">
</svg>
</a>
</div>
<ul id="user-dropmenu" class="dropdown-pane small bottom" data-dropdown data-hover="true" data-hover-pane="true" aria-hidden="true" tabindex="-1">
<li><a href="#">Login</a></li>
<li><a href="#">Sign Up</a></li>
<li>
<a href="#">My Property</a>
<ul class="sub-menu">
<li><a href="#">Saved Properties</a></li>
<li><a href="#">Saved Searches and Alerts</a></li>
<li><a href="#">Open Home Planner</a></li>
<li><a href="#">My Account</a></li>
</ul>
</li>
<li><a href="#">Seller's Tool</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="channel-bar">
<div class="title-bar" data-responsive-toggle="categories-menu" data-hide-for="medium">
<button type="button" data-toggle="example-menu">Browse Categories</button>
</div>
<ul id="categories-menu" class="vertical medium-horizontal menu expanded" data-responsive-menu="drilldown medium-dropdown">
<li class="residential">
<a href="#">Residential</a>
<ul class="vertical menu">
<li><a href="#">For Sale</a></li>
<li><a href="#">For Rental</a></li>
</ul>
</li>
<li class="commercial">
<a href="#">Commercial</a>
<ul class="vertical menu">
<li><a href="#">For Sale</a></li>
<li><a href="#">For Lease</a></li>
</ul>
</li>
<li class="rural"><a href="#">Rural</a></li>
<li class="business"><a href="#">Business</a></li>
</ul>
</div>
</div>
</div>
<div class="expanded row">
<div class="column large-12"><form class="search-bar" action="#">
<div class="row search-bar-row">
<div class="large-3 columns">
<button class="button expanded dropdown" type="button" data-toggle="example-dropdown">Browse by location</button>
<div class="browse-locations dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true" style="background-color: white;">
<ul class="vertical menu" data-drilldown data-auto-height="true" data-animate-height="true">
<li>
<a href="#Northland">Northland</a>
<ul class="vertical menu">
<li><a href="#All-districts">All districts</a></li>
<li>
<a href="#Far-north">Far North</a>
<ul class="vertical menu">
<li><a href="#All-districts">All suburbs</a></li>
<li><a href="#Ahipara">Ahipara</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Ahipara">Ahipara</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
</ul>
</li>
<li><a href="#Ahipara">Ahipara</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
</ul>
</li>
<li>
<a href="#Auckland">Auckland</a>
<ul class="vertical menu">
<li><a href="#All-districts">All districts</a></li>
<li>
<a href="#Auckland City">Auckland City</a>
<ul class="vertical menu">
<li><a href="#All-districts">All suburbs</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
</ul>
</li>
<li><a href="#Ahipara">Ahipara</a></li>
<li><a href="#Ahipara">Ahipara</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
<li><a href="#Auckland-central">Auckland Central</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="large-1 columns">
<p class="text-center">or</p>
</div>
<div class="large-8 columns">
<div class="row">
<div class="large-10 medium-9 small-12 columns">
<div class="input-group">
<input class="keyword input-group-field" type="text" placeholder="2 bedroom House for sale in Eden Terrace">
<div class="input-group-button">
<button class="button submit-trigger keyword-search-btn">
<svg class="icon search-magnify">
<use xlink:href="#search-magnify-icon" />
</svg>
<span class="show-for-large-only"> Search</span></button>
</div>
</div>
</div>
<div class="large-2 medium-3 small-12 columns">
<a href="#" class="specific-search-trigger button">More Options</a>
</div>
</div>
</div>
<div class="specific-search">
<div class="row padding-horizontal-3">
<div class="large-7 medium-8 small-12 columns">
<!-- CATEGORY SELECT -->
<div class="category-container">
<label class="container-label">Category:</label>
<select id="multiple-category-selector" class="dropped-arrow" data-prompt="Select Category Type/s" >
<option value="all" class="group">All Categories</option>
<!-- <option class="" value="residential">Residential</option> -->
<option value="residential-sale">Residential Sale</option>
<option value="residential-rental">Residential Rental</option>
<!--option class="group" value="commercial">Commercial</option-->
<option value="commercial-sale">Commercial Sale</option>
<option value="commercial-lease">Commercial Lease</option>
<option value="rural">Rural</option>
<option value="business">Business</option>
</select>
</div>
<!-- END CATEGORY SELECT -->
<!-- PROPERTY TYPE CONTAINER -->
<div class="property-types-container">
<label class="container-label">Property Types:</label>
<select id="multiple-property-selector" class="dropped-arrow" data-prompt="Select Property Type/s">
</select>
</div>
<!-- END PROPERTY TYPE CONTAINER -->
<!-- PRICING METHODS CONTAINER -->
<div class="pricing-methods-container advanced-option">
<label class="container-label">Pricing Methods:</label>
<select id="multiple-pricing-methods-selector" class="dropped-arrow" data-prompt="Select Pricing Method/s">
<option value="1">Displayed Price</option>
<option value="2">Negotiation</option>
<option value="3">Auction</option>
<option value="4">Tender</option>
<option value="5">POA</option>
<option value="6">Offers</option>
<option value="7">Deadline Treaty</option>
</select>
</div>
<!-- END PRICING METHODS CONTAINER -->
<!-- LOCATION SELECT -->
<div class="location-container">
<label class="container-label">Location:</label>
<div id="scroll-box">
<select class="regions hide" id="search_filters_regions" data-prompt="Select Region/s" tabindex="2"></select>
<select class="districts hide" id="search_filters_districts" tabindex="3" data-prompt="Select District/s"></select>
</div>
</div>
<!-- END LOCATION SELECT -->
</div>
<div class="large-5 medium-4 small-12 columns">
<div class="property-feature">
<h5>Only show properties with:</h5>
<p>
<label class=""><input type="checkbox" value="1" name="furnished" class="checkbox"/> <span>Fully Furnished</span></label>
<label class=""><input type="checkbox" value="2" name="pet" class="checkbox"/><span>Pet Friendly</span> </label>
<label><input type="checkbox" name="open" value="4" class="checkbox"/> <span>Open Homes</span></label>
<label class=""><input type="checkbox" value="8" name="address" class="checkbox"/> <span>Properties with an Address</span> </label>
</p>
</div>
</div>
</div>
<div class="row">
<div class="large-7 medium-12 small-12 columns multi-locations-container">
<div class="location-label">
<label for="">Locations:</label>
</div>
<div class="location-selectors">
<div class="steps active" id="step-1" data-type="region">
<ul>
</ul>
</div>
<div class="steps" id="step-2" data-type="districts">
<!-- <Label for="">District</Label> -->
<ul>
</ul>
</div>
<div class="steps" id="step-3" data-type="suburbs">
<!-- <Label for="">Suburb</Label> -->
<ul>
</ul>
</div>
<a class="button prev hidden" href="#">
Back
</a>
<a class="button next hidden" href="#">
Districts
</a>
</div>
</div>
<div class="large-5 medium-12 small-12 show-for-medium-up columns">
<div class="locations-summary">
</div>
</div>
</div>
<div class="search-specifics">
<div class="specifics-row" id="buy-row">
<label class="min-txt" for="min_buy">Buy:</label>
<select tabindex="7" class="dropped-arrow" name="search[filters][prices_min]" id="min_buy" data-prompt="$0">
<option value="0">$0</option>
<option value="25000">$25,000+</option>
<option value="50000">$50,000+</option>
<option value="100000">$100,000+</option>
<option value="150000">$150,000+</option>
<option value="200000">$200,000+</option>
<option value="250000">$250,000+</option>
<option value="300000">$300,000+</option>
<option value="350000">$350,000+</option>
<option value="400000">$400,000+</option>
<option value="450000">$450,000+</option>
<option value="500000">$500,000+</option>
<option value="600000">$600,000+</option>
<option value="700000">$700,000+</option>
<option value="800000">$800,000+</option>
<option value="900000">$900,000+</option>
<option value="1000000">$1m+</option>
<option value="1200000">$1.2m+</option>
<option value="1400000">$1.4m+</option>
<option value="1600000">$1.6m+</option>
<option value="1800000">$1.8m+</option>
<option value="2000000">$2m+</option>
<option value="2500000">$2.5m+</option>
<option value="3500000">$3.5m+</option>
<option value="5000000">$5m+</option>
<option value="7500000">$7.5m+</option>
<option value="10000000">$10m+</option>
</select>
<select tabindex="8" class="dropped-arrow" name="search[filters][prices_max]" id="max_buy">
<option value="25000">$25,000</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
<option value="300000">$300,000</option>
<option value="350000">$350,000</option>
<option value="400000">$400,000</option>
<option value="450000">$450,000</option>
<option value="500000">$500,000</option>
<option value="600000">$600,000</option>
<option value="700000">$700,000</option>
<option value="800000">$800,000</option>
<option value="900000">$900,000</option>
<option value="1000000">$1m</option>
<option value="1200000">$1.2m</option>
<option value="1400000">$1.4m</option>
<option value="1600000">$1.6m</option>
<option value="1800000">$1.8m</option>
<option value="2000000">$2m</option>
<option value="2500000">$2.5m</option>
<option value="3500000">$3.5m</option>
<option value="5000000">$5m</option>
<option value="7500000">$7.5m</option>
<option value="10000000">$10m</option>
<option value="999999999" selected="selected">$10m+</option>
</select>
</div>
<div class="specifics-row" id="lease-row">
<label class="min-txt" for="min_lease">Lease:</label>
<select tabindex="7" class="dropped-arrow" name="search[filters][prices_min]" id="min_lease" data-prompt="$0">
<option value="0">$0</option>
<option value="25000">$25,000+</option>
<option value="50000">$50,000+</option>
<option value="100000">$100,000+</option>
<option value="150000">$150,000+</option>
<option value="200000">$200,000+</option>
<option value="250000">$250,000+</option>
<option value="300000">$300,000+</option>
<option value="350000">$350,000+</option>
<option value="400000">$400,000+</option>
<option value="450000">$450,000+</option>
<option value="500000">$500,000+</option>
<option value="600000">$600,000+</option>
<option value="700000">$700,000+</option>
<option value="800000">$800,000+</option>
<option value="900000">$900,000+</option>
<option value="1000000">$1m+</option>
<option value="1200000">$1.2m+</option>
<option value="1400000">$1.4m+</option>
<option value="1600000">$1.6m+</option>
<option value="1800000">$1.8m+</option>
<option value="2000000">$2m+</option>
<option value="2500000">$2.5m+</option>
<option value="3500000">$3.5m+</option>
<option value="5000000">$5m+</option>
<option value="7500000">$7.5m+</option>
<option value="10000000">$10m+</option>
</select>
<select tabindex="8" class="dropped-arrow" name="search[filters][prices_max]" id="max_lease">
<option value="25000">$25,000</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
<option value="300000">$300,000</option>
<option value="350000">$350,000</option>
<option value="400000">$400,000</option>
<option value="450000">$450,000</option>
<option value="500000">$500,000</option>
<option value="600000">$600,000</option>
<option value="700000">$700,000</option>
<option value="800000">$800,000</option>
<option value="900000">$900,000</option>
<option value="1000000">$1m</option>
<option value="1200000">$1.2m</option>
<option value="1400000">$1.4m</option>
<option value="1600000">$1.6m</option>
<option value="1800000">$1.8m</option>
<option value="2000000">$2m</option>
<option value="2500000">$2.5m</option>
<option value="3500000">$3.5m</option>
<option value="5000000">$5m</option>
<option value="7500000">$7.5m</option>
<option value="10000000">$10m</option>
<option value="999999999" selected="selected">$10m+</option>
</select>
</div>
<div class="specifics-row" id="rental-row">
<label class="min-txt" for="min_rent">Rent:</label>
<select tabindex="7" class="dropped-arrow" name="search[filters][prices_min]" id="min_rent" data-prompt="$0">
<option value="0" selected="selected">$0</option>
<option value="75">$75+</option>
<option value="100">$100+</option>
<option value="125">$125+</option>
<option value="150">$150+</option>
<option value="175">$175+</option>
<option value="200">$200+</option>
<option value="225">$225+</option>
<option value="250">$250+</option>
<option value="275">$275+</option>
<option value="300">$300+</option>
<option value="350">$350+</option>
<option value="400">$400+</option>
<option value="450">$450+</option>
<option value="500">$500+</option>
<option value="600">$600+</option>
<option value="700">$700+</option>
<option value="800">$800+</option>
<option value="900">$900+</option>
<option value="1000">$1,000+</option>
<option value="1250">$1,250+</option>
<option value="1500">$1,500+</option>
<option value="1750">$1,750+</option>
<option value="2000">$2,000+</option>
<option value="2500">$2,500+</option>
</select>
<select tabindex="8" class="dropped-arrow" name="search[filters][prices_max]" id="max_rent">
<option value="75">$75</option>
<option value="100">$100</option>
<option value="125">$125</option>
<option value="150">$150</option>
<option value="175">$175</option>
<option value="200">$200</option>
<option value="225">$225</option>
<option value="250">$250</option>
<option value="275">$275</option>
<option value="300">$300</option>
<option value="350">$350</option>
<option value="400">$400</option>
<option value="450">$450</option>
<option value="500">$500</option>
<option value="600">$600</option>
<option value="700">$700</option>
<option value="800">$800</option>
<option value="900">$900</option>
<option value="1000">$1,000</option>
<option value="1250">$1,250</option>
<option value="1500">$1,500</option>
<option value="1750">$1,750</option>
<option value="2000">$2,000</option>
<option value="2500">$2,500</option>
<option value="999999999" selected="selected">$2,500+</option>
</select>
</div>
</div>
<div class="other-row search-specifics">
<div class="specifics-row">
<label class="min-txt" for="min_bedroom">Beds:</label>
<select tabindex="9" class="dropped-arrow" name="search[filters][bedrooms_min]" id="min_bedroom" data-prompt="Any">
<option value="0" selected="selected">Any</option>
<option value="1">1+</option>
<option value="2">2+</option>
<option value="3">3+</option>
<option value="4">4+</option>
<option value="5">5+</option>
</select>
<select tabindex="10" class="dropped-arrow advanced-option" name="search[filters][bedrooms_max]" id="max_bedroom">
<option value="0">Any</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="999" selected="selected">5+</option>
</select>
</div>
<div class="specifics-row">
<label class="min-txt" for="min_bathroom">Baths:</label>
<select tabindex="11" class="dropped-arrow" name="search[filters][bathrooms_min]" id="min_bathroom" data-prompt="Any">
<option value="0" selected="selected">Any</option>
<option value="1">1+</option>
<option value="2">2+</option>
<option value="3">3+</option>
</select>
<select tabindex="12" class="dropped-arrow advanced-option" name="search[filters][bathrooms_max]" id="max_bathroom">
<option value="0">Any</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3+</option>
</select>
</div>
<div class="specifics-row clear-float">
<label class="min-txt" for="search_filters_floorarea_min">Floor:</label>
<select tabindex="13" name="search[filters][floorarea_min]" class="dropped-arrow" id="min_floor">
<option value="0" selected="selected">Any</option>
<option value="40">40m²+</option>
<option value="75">75 m²+</option>
<option value="100">100 m²+</option>
<option value="125">125 m²+</option>
<option value="150">150 m²+</option>
<option value="175">175 m²+</option>
<option value="200">200 m²+</option>
<option value="250">250 m²+</option>
<option value="300">300 m²+</option>
<option value="400">400 m²+</option>
<option value="500">500 m²+</option>
<option value="750">750 m²+</option>
<option value="1000">1,000 m²+</option>
<option value="999999999">1,000 m²+</option>
</select>
<select tabindex="14" name="search[filters][floorarea_max]" class="dropped-arrow advanced-option" id="max_floor">
<option value="40">40m²</option>
<option value="75">75 m²</option>
<option value="100">100 m²</option>
<option value="125">125 m²</option>
<option value="150">150 m²</option>
<option value="175">175 m²</option>
<option value="200">200 m²</option>
<option value="250">250 m²</option>
<option value="300">300 m²</option>
<option value="400">400 m²</option>
<option value="500">500 m²</option>
<option value="750">750 m²</option>
<option value="1000">1,000 m²</option>
<option value="999999999" selected="selected">1,000 m²+</option>
</select>
</div>
<div class="specifics-row ">
<label class="min-txt" for="search_filters_landarea_min">Land:</label>
<select tabindex="15" name="search[filters][landarea_min]" class="dropped-arrow" id="min_land">
<option value="0" selected="selected">Any</option>
<option value="100">100 m²+</option>
<option value="200">200 m²+</option>
<option value="300">300 m²+</option>
<option value="500">500 m²+</option>
<option value="750">750 m²+</option>
<option value="1000">1,000 m²+</option>
<option value="2000">2,000 m²+</option>
<option value="5000">5,000 m²+</option>
<option value="10000">1 HA+</option>
<option value="20000">2 HA+</option>
<option value="50000">5 HA+</option>
<option value="100000">10 HA+</option>
<option value="150000">15 HA+</option>
<option value="200000">20 HA+</option>
<option value="250000">25 HA+</option>
<option value="999999999">25 HA+</option>
</select>
<select tabindex="16" name="search[filters][landarea_max]" class="dropped-arrow advanced-option" id="max_land">
<option value="100">100 m²</option>
<option value="200">200 m²</option>
<option value="300">300 m²</option>
<option value="500">500 m²</option>
<option value="750">750 m²</option>
<option value="1000">1,000 m²</option>
<option value="2000">2,000 m²</option>
<option value="5000">5,000 m²</option>
<option value="10000">1 HA</option>
<option value="20000">2 HA</option>
<option value="50000">5 HA</option>
<option value="100000">10 HA</option>
<option value="150000">15 HA</option>
<option value="200000">20 HA</option>
<option value="250000">25 HA</option>
<option value="999999999" selected="selected">25 HA+</option>
</select>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="margin-top-15">
<button class="button postfix right medium-up-search-btn show-for-medium-up selection-summary-modal-trigger">Search</button>
<button id="advanced-search-trigger" class="button postfix advance-btn">Even More Options</button>
</div>
</div>
</div>
<div class="row expended show-for-small-only">
<div class="row expended">
<a href="#" class="search-txt-btn button expand margin-top-15 selection-summary-modal-trigger">Search</a>
</div>
</div>
</div>
</div>
</div>
<div id="selection-summary-modal" class="reveal-modal search-selection-summary" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class="modal-body">
<div class="row">
<div class="small-12 columns">
<h2>Selection Summary</h2>
<hr/>
</div>
<div class="medium-6 small-12 columns">
<div class="category-selection">
<h6>Category</h6>
<p id="category-field-summary"></p>
</div>
<div class="location-selection">
<h6>Locations</h6>
<p id="location-field-summary"></p>
</div>
<div class="property-type-selection">
<h6>Property Types</h6>
<p id="property-type-field-summary"></p>
</div>
<div class="property-attribute-selection">
<h6>Only Show Properties with</h6>
<p id="property-attribute-checkbox-summary"></p>
</div>
<div class="pricing-method-selection">
<h6>Pricing Methods</h6>
<p id="pricing-method-field-summary"></p>
</div>
</div>
<div class="medium-6 small-12 columns">
<div id="buy-price-selection-summary"></div>
<div id="rent-price-selection-summary"></div>
<div id="bed-selection-summary"></div>
<div id="bath-selection-summary"></div>
<div id="floor-selection-summary"></div>
<div id="land-selection-summary"></div>
</div>
</div>
</div>
<div class="modal-foot">
<button class="button">Search</button>
<button class="button">Save and Search</button>
<button class="button close-reveal-modal">Cancel</button>
</div>
</div>
<input type="hidden" name="search[filters][search_depth_option]" id="searchDepthOption" value="1">
<div class="hidden-locations-fields hide">
</div>
<div class="row column">
<div class="large-4 columns">
</div>
<div class="large-8 columns">
</div>
</div>
</form>
</div>
</div>
</header>
<!-- End .header -->
molecules-footer-nav
<!-- Begin Footer -->
<footer class="footer" role="contentinfo">
<!-- footer inner -->
<div id="footerInner" class="large-12 columns footer-container footer-inner">
<div class="medium-6 large-2 columns">
<strong>Explore</strong>
<ul class="no-bullet">
<li><a href="/residential/all">Buy residential property</a></li>
<li><a href="/rental/all">Rent residential property</a></li>
<li><a href="/profile/search">Sell residential property</a></li>
<li><a target="_blank" href="//media.realestate.co.nz/flyers">Promote your listing</a></li>
<li><a href="/about/glossary">Glossary of real estate terms</a></li>
</ul>
</div>
<div class="medium-6 large-2 columns">
<strong>My Property</strong>
<ul class="no-bullet">
<li><a href="/account/my-property">Saved properties</a></li>
<li><a href="/account/my-searches">Saved Searches and Alerts</a></li>
<li><a href="/account/my-open-homes">Open Home Planner</a></li>
<li><a class="account-tools-editdetails" href="/account">My Account</a></li>
<li><a href="/account/thinking-of-selling">Thinking of selling?</a></li>
</ul>
</div>
<div class="medium-6 large-2 columns">
<strong>About Realestate.co.nz</strong>
<ul class="footerNav no-bullet">
<li><a href="/about/about-us">About us</a></li>
<li><a href="/about/contact-us">Contact us</a></li>
<li><a href="/about/legal-notices">Legal notices</a></li>
<li><a href="/about/help">Help</a></li>
<li><a href="/about/advertise">Advertise on Realestate.co.nz</a></li>
</ul>
</div>
<div class="medium-6 large-2 columns">
<strong>Our related sites</strong>
<ul class="footerNav no-bullet">
<li><a href="//agentpro.co.nz">AgentPro</a></li>
<li><a href="//www.unconditional.co.nz">Unconditional</a></li>
</ul>
</div>
<!-- google translate and social media -->
<div class="medium-6 large-2 columns">
<strong>Follow Us</strong>
<ul class="no-bullet">
<li><a target="_blank" href="//twitter.com/realestateconz">Twitter</a></li>
<li><a target="_blank" href="//www.youtube.com/channel/UCTF-kJvbBcL1PEyajMPu4qg">YouTube</a></li>
<li><a target="_blank" href="//www.facebook.com/realestate.co.nz">Facebook</a></li>
</ul>
</div>
<div class="medium-6 large-2 columns">
<strong>Realestate.co.nz Apps</strong>
<ul class="footerNav last no-bullet">
<li><a target="_blank" href="//itunes.apple.com/nz/app/realestate/id404076057?mt=8">iPhone</a></li>
<li><a target="_blank" href="//play.google.com/store/apps/details?id=nz.co.realestate.android">Android</a></li>
</ul>
</div>
<!-- / google translate and social media -->
</div><!-- / footer inner -->
</footer>
<!-- End Footer -->
<div class="media-player">
<div class="row">
<div class="small-12 columns no-padding-small-only">
<div class="media-container">
<div id="photo-section" class="orbit" data-orbit data-auto-play="false" data-nav-buttons="true" data-bullets="true">
<div class="media-top-bar">
<div class="row padding-horizontal-4">
<div class="medium-1 small-2 columns"><div class="text-center"><img id="nav-prev" class="clickable" src="/images/media-player/icons/top-left-arrow.png"/></div></div>
<div class="medium-2 small-2 columns"><div class="text-left"><span class="slide-number"></span></div></div>
<div class="medium-6 small-6 columns">
<div class="text-center">
<img id="grid-section-trigger" class="margin-right-15 clickable" src="/images/media-player/icons/top-grid-icon.png"/>
<span id="photo-fullsize-modal-trigger" class="text-bold clickable">View full size</span>
</div>
</div>
<div class="medium-2 columns show-for-medium-up"></div>
<div class="medium-1 small-2 columns"><div class="text-center"><img id="nav-next" class="clickable" src="/images/media-player/icons/top-right-arrow.png"/></div></div>
</div>
</div>
<ul class="orbit-container">
<a class="orbit-previous"><span class="show-for-sr"></span></a>
<a class="orbit-next"><span class="show-for-sr"></span></a>
<li class="is-active orbit-slide">
<img class="orbit-image img-responsive" src="/images/media-player/player1.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive" src="/images/listings/2929265/285ea7ae299f05777f40f9daef892ddd.scale.1024x682.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive" src="/images/listings/2929265/a7d9d86947d9ba4bac0328e067f0f7ec.scale.1024x682.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive" src="/images/media-player/player4.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive" src="/images/media-player/player5.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive" src="/images/media-player/player6.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive" src="/images/media-player/player7.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive" src="/images/media-player/player8.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive" src="/images/media-player/player9.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive" src="/images/media-player/player10.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive" src="/images/media-player/player11.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive" src="/images/media-player/player12.jpg"/>
</li>
</ul>
<div class="media-bottom-bar">
<div class="row">
<div class="small-4 columns"><div class="text-center"><img id="video-section-trigger" class="clickable" src="/images/media-player/icons/bottom-video.png"/></div></div>
<div class="small-4 columns"><div class="text-center"><img id="v3d-section-trigger" class="clickable" src="/images/media-player/icons/bottom-3d.png"/></div></div>
<div class="small-4 columns"><div class="text-center"><img id="floorplan-section-trigger" class="clickable" src="/images/media-player/icons/bottom-floorplans.png"/></div></div>
</div>
</div>
</div>
<!-- floorplan section -->
<div id="floorplan-section" class="orbit" data-orbit data-auto-play="false" data-nav-buttons="true" data-bullets="true" style="display:none">
<div class="media-top-bar">
<div class="row padding-horizontal-4">
<div class="medium-1 small-2 columns"><div class="text-center"><img id="nav-prev" class="clickable" src="/images/media-player/icons/top-left-arrow.png"/></div></div>
<div class="medium-2 small-2 columns"><div class="text-left"><span class="slide-number"></span></div></div>
<div class="medium-6 small-6 columns">
<div class="text-center">
<img src="/images/media-player/icons/top-floorplans-txt.png"/>
</div>
</div>
<div class="medium-2 columns show-for-medium-up"></div>
<div class="medium-1 small-2 columns"><div class="text-center"><img id="nav-next" class="clickable" src="/images/media-player/icons/top-right-arrow.png"/></div></div>
</div>
</div>
<ul class="orbit-container">
<a class="orbit-previous"><span class="show-for-sr"></span></a>
<a class="orbit-next"><span class="show-for-sr"></span></a>
<li class="is-active orbit-slide">
<div class="flex-video">
<iframe frameborder="0" data-src="//reconz.open2view.com/floor_plans/380627/7109384" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
</div>
</li>
<li class="orbit-slide">
<div class="flex-video">
<iframe frameborder="0" data-src="//reconz.open2view.com/floor_plans/380627/7109384" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
</div>
</li>
</ul>
<div class="media-bottom-bar">
<div class="row">
<div class="small-4 columns"><div class="text-center"><img id="photo-section-trigger" class="clickable" src="/images/media-player/icons/bottom-photos.png"/></div></div>
<div class="small-4 columns"><div class="text-center"><img id="v3d-section-trigger" class="clickable" src="/images/media-player/icons/bottom-3d.png"/></div></div>
<div class="small-4 columns"><div class="text-center"><img id="video-section-trigger" class="clickable" src="/images/media-player/icons/bottom-video.png"/></div></div>
</div>
</div>
</div>
<!-- video section -->
<div id="video-section" class="orbit" data-orbit data-auto-play="false" data-nav-buttons="true" data-bullets="true" style="display:none">
<div class="media-top-bar">
<div class="row padding-horizontal-4">
<div class="medium-1 small-2 columns"><div class="text-center"><img id="nav-prev" class="clickable" src="/images/media-player/icons/top-left-arrow.png"/></div></div>
<div class="medium-2 small-2 columns"><div class="text-left"><span class="slide-number"></span></div></div>
<div class="medium-6 small-6 columns">
<div class="text-center">
<img src="/images/media-player/icons/top-video-txt.png"/>
</div>
</div>
<div class="medium-2 columns show-for-medium-up"></div>
<div class="medium-1 small-2 columns"><div class="text-center"><img id="nav-next" class="clickable" src="/images/media-player/icons/top-right-arrow.png"/></div></div>
</div>
</div>
<ul class="orbit-container">
<a class="orbit-previous"><span class="show-for-sr"></span></a>
<a class="orbit-next"><span class="show-for-sr"></span></a>
<li class="is-active orbit-slide">
<div class="flex-video widescreen vimeo">
<iframe src="https://player.vimeo.com/video/140397519" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</li>
<li class="orbit-slide">
<div class="flex-video widescreen youtube">
<iframe id="youtube-1" src="https://www.youtube.com/embed/_NbsKX0iMLQ?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
</li>
<li class="orbit-slide">
<div class="flex-video widescreen youtube">
<iframe id="youtube-2" width="560" height="315" src="https://www.youtube.com/embed/uLasBsoZBi0?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
</li>
</ul>
<div class="media-bottom-bar">
<div class="row">
<div class="small-4 columns"><div class="text-center"><img id="photo-section-trigger" class="clickable" src="/images/media-player/icons/bottom-photos.png"/></div></div>
<div class="small-4 columns"><div class="text-center"><img id="v3d-section-trigger" class="clickable" src="/images/media-player/icons/bottom-3d.png"/></div></div>
<div class="small-4 columns"><div class="text-center"><img id="floorplan-section-trigger" class="clickable" src="/images/media-player/icons/bottom-floorplans.png"/></div></div>
</div>
</div>
</div>
<!-- V3D section -->
<div id="v3d-section" class="orbit" data-orbit data-auto-play="false" data-nav-buttons="true" data-bullets="true" style="display:none">
<div class="media-top-bar">
<div class="row padding-horizontal-4">
<div class="medium-1 small-2 columns"><div class="text-center"><img id="nav-prev" class="clickable" src="/images/media-player/icons/top-left-arrow.png"/></div></div>
<div class="medium-2 small-2 columns"><div class="text-left"><span class="slide-number"></span></div></div>
<div class="medium-6 small-6 columns">
<div class="text-center">
<img src="/images/media-player/icons/top-3d-txt.png"/>
</div>
</div>
<div class="medium-2 columns show-for-medium-up"></div>
<div class="medium-1 small-2 columns"><div class="text-center"><img id="nav-next" class="clickable" src="/images/media-player/icons/top-right-arrow.png"/></div></div>
</div>
</div>
<ul class="orbit-container">
<a class="orbit-previous"><span class="show-for-sr"></span></a>
<a class="orbit-next"><span class="show-for-sr"></span></a>
<li class="is-active orbit-slide">
<div class="flex-video widescreen vimeo">
<iframe src="https://my.matterport.com/show/?m=NXMr5X5HDz8" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</li>
<li class="orbit-slide">
<div class="flex-video widescreen youtube">
<iframe src="https://my.matterport.com/show/?m=NXMr5X5HDz8" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</li>
</ul>
<div class="media-bottom-bar">
<div class="row">
<div class="small-4 columns"><div class="text-center"><img id="photo-section-trigger" class="clickable" src="/images/media-player/icons/bottom-photos.png"/></div></div>
<div class="small-4 columns"><div class="text-center"><img id="video-section-trigger" class="clickable" src="/images/media-player/icons/bottom-video.png"/></div></div>
<div class="small-4 columns"><div class="text-center"><img id="floorplan-section-trigger" class="clickable" src="/images/media-player/icons/bottom-floorplans.png"/></div></div>
</div>
</div>
</div>
<!-- grid section -->
<div id="grid-section" class="orbit" data-orbit data-auto-play="false" data-nav-buttons="true" data-bullets="true" style="display:none">
<div class="media-top-bar">
<div class="row padding-horizontal-4">
<div class="small-12 columns">
<div class="text-center">
<span class="slide-number"></span>
<img id="photo-section-trigger" class="clickable" src="/images/media-player/icons/top-photos-txt.png"/>
</div>
</div>
</div>
</div>
<img id="nav-prev" class="nav-arrow prev-arrow clickable" src="/images/media-player/icons/top-left-arrow.png"/>
<img id="nav-next" class="nav-arrow next-arrow clickable" src="/images/media-player/icons/top-right-arrow.png"/>
<ul class="orbit-container">
<a class="orbit-previous"><span class="show-for-sr"></span></a>
<a class="orbit-next"><span class="show-for-sr"></span></a>
<li class="is-active orbit-slide">
<div class="inner-content">
<div class="row padding-horizontal-2">
<div class="medium-4 small-4 columns">
<img class="img-responsive clickable" src="/images/media-player/thumbs/thumbs-proto1.jpg"/>
<div class="orbit-caption">
1
</div>
</div>
<div class="medium-4 small-4 columns">
<img class="img-responsive clickable" src="/images/media-player/thumbs/thumbs-proto2.jpg"/>
<div class="orbit-caption">
2
</div>
</div>
<div class="medium-4 small-4 columns">
<img class="img-responsive clickable" src="/images/media-player/thumbs/thumbs-proto3.jpg"/>
<div class="orbit-caption">
3
</div>
</div>
<div class="medium-4 small-4 columns">
<img class="img-responsive clickable" src="/images/media-player/thumbs/thumbs-proto4.jpg"/>
<div class="orbit-caption">
4
</div>
</div>
<div class="medium-4 small-4 columns">
<img class="img-responsive clickable" src="/images/media-player/thumbs/thumbs-proto5.jpg"/>
<div class="orbit-caption">
5
</div>
</div>
<div class="medium-4 small-4 columns">
<img class="img-responsive clickable" src="/images/media-player/thumbs/thumbs-proto6.jpg"/>
<div class="orbit-caption">
6
</div>
</div>
<div class="medium-4 small-4 columns">
<img class="img-responsive clickable" src="/images/media-player/thumbs/thumbs-proto7.jpg"/>
<div class="orbit-caption">
7
</div>
</div>
<div class="medium-4 small-4 columns">
<img class="img-responsive clickable" src="/images/media-player/thumbs/thumbs-proto8.jpg"/>
<div class="orbit-caption">
8
</div>
</div>
<div class="medium-4 small-4 columns">
<img class="img-responsive clickable" src="/images/media-player/thumbs/thumbs-proto9.jpg"/>
<div class="orbit-caption">
9
</div>
</div>
</div>
</div>
</li>
<li class="orbit-slide">
<div class="inner-content">
<div class="row padding-horizontal-2">
<div class="medium-4 small-4 columns">
<img class="img-responsive clickable" src="/images/media-player/thumbs/thumbs-proto10.jpg"/>
<div class="orbit-caption">
10
</div>
</div>
<div class="medium-4 small-4 columns">
<img class="img-responsive clickable" src="/images/media-player/thumbs/thumbs-proto11.jpg"/>
<div class="orbit-caption">
11
</div>
</div>
<div class="medium-4 small-4 columns">
<img class="img-responsive clickable" src="/images/media-player/thumbs/thumbs-proto12.jpg"/>
<div class="orbit-caption">
12
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="media-bottom-bar">
<div class="row">
<div class="small-4 columns"><div class="text-center"><img id="video-section-trigger" class="clickable" src="/images/media-player/icons/bottom-video.png"/></div></div>
<div class="small-4 columns"><div class="text-center"><img id="v3d-section-trigger" class="clickable" src="/images/media-player/icons/bottom-3d.png"/></div></div>
<div class="small-4 columns"><div class="text-center"><img id="floorplan-section-trigger" class="clickable" src="/images/media-player/icons/bottom-floorplans.png"/></div></div>
</div>
</div>
</div>
</div> <!-- .media-container -->
</div>
</div>
<div id="photo-fullsize-modal" class="reveal-modal" data-reveal aria-labelledby="Full size photo" aria-hidden="true" role="dialog">
<div class="modal-body">
<!--div class="response-container">
<div class="dummy"></div>
<div class="img-container">
<div class="centerer"></div>
<img class="" src="/images/media-player/player1.jpg"/>
</div>
</div-->
<img class="" src=""/>
<div id="nav-prev" class="nav-arrow nav-prev clickable"></div>
<div id="nav-next" class="nav-arrow nav-next clickable"></div>
</div>
<div class="modal-foot">
<div class="image-number">Image <span class="current"></span> of <span class="total"></span></div>
<a href="#" class="close-reveal-modal" aria-label="Close">CLOSE <b>×</b></a>
</div>
</div>
</div>
Auction Wednesday 5 Oct 6:30pm
<section class="primary-info" class="" >
<!-- bread crumbs and controls -->
<div class="breadcrumbs-bar show-for-small-only">
<ul class="breadcrumbs">
<li>
<a href="/residential/all"><span>Home</span></a>
</li>
<li>
<a href="/residential/all/auckland"><span>Auckland</span></a>
</li>
<li>
<a href="/residential/all/auckland/rodney"><span>Rodney</span></a>
</li>
<li>
<a href="/residential/all/auckland/rodney/kumeu"><span>Kumeu</span></a>
</li>
<li>
<a href="/2899968"><span>2 Pomona Road</span></a>
</li>
</ul> </div>
<!-- price title address -->
<div class="headlines">
<h2 id="price">Offers Over $325,000</h2>
<h1 id="listing-title">Prestigious Gordon Place</h1>
<h3 id="address">15 Gordon Place Levin</h3>
<h4 id="listing-id">Listing # LU51606 Listed 13 Sep 2016</h4>
<h5 id="listing-property-type">Residential House</h5>
</div>
<!-- feature Icons -->
<ul class="feature-icons">
<li class="bedrooms"><span>3 </span> <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg></li>
<li class="bathrooms"><span>3 </span> <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg></li>
<li class="car-space"><span>1 </span> <svg class="icon carpark-covered">
<use xlink:href="#carpark-covered-icon" />
</svg></li>
</ul>
<!-- share link -->
<div class="share-bar">
<h6>Share</h6>
<ul class="inline-list">
<li>
<a class="sharer clickable"
data-sharer="facebook"
data-app_id='Facebook App Id'
data-url="#"
data-description="This is description text">
<svg class="icon facebook">
<use xlink:href="#facebook-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="twitter"
data-url="#"
data-title="This is description text">
<svg class="icon twitter">
<use xlink:href="#twitter-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="googleplus"
data-url="#"
data-title="This is description text">
<svg class="icon google-plus">
<use xlink:href="#google-plus-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="pinterest"
data-url="#"
data-media="http://styleguide.staging.realestate.co.nz/images/media-player/player1.jpg"
data-description="This is description text">
<svg class="icon pinterest">
<use xlink:href="#pinterest-icon" />
</svg> </a>
</li>
</ul>
</div>
<!-- auction info -->
<p class="auction-info">Auction Wednesday 5 Oct 6:30pm</p>
<!-- view map link -->
<p class="view-map"><a href="#" id="map-modal-trigger">View Map</a></p>
<div id="map-modal" class="reveal-modal" data-reveal aria-labelledby="View Map" aria-hidden="true" role="dialog">
<div id="reconz-map"></div>
</div>
<!-- email similar link -->
<p class="email-similar"><a href="#">Email me similar</a></p>
<!-- enquire now follow property btns -->
<ul class="action-buttons">
<li id="enquire">
<a href="#enquire-section" class="buttons show-for-medium-up">Enquire</a>
<a href="#" data-reveal-id="enquire-section-modal" class="buttons show-for-small-only">Enquire</a>
</li>
<li id="follow"><a href="#" class="buttons">Follow</a></li>
</ul>
<!-- agency details -->
<div class="agency-details">
<a href="#"><img src="/images/per_orgs/14491/081085bdbc462bea4e75ddc6972fe57b.pad-ffffff.143x56.jpg" width="143" height="56" itemprop="logo"></a>
<ul class="agency-links">
<li><a href="#">Listings</a></li>
<li><a href="#">Website</a></li>
<li><a href="#">Agents</a></li>
</ul>
<h5>Barfoot & Thompson Ltd Mt Albert</h5>
<p>Licensed: REAA 2008</p>
</div>
</section>
I would start in the open state, due to using the `is-active` state class.
If location and growth is the key, then this property is for you. Currently configured as four tidy two bedroom flates, this large two level 1920's Bungalow 233m2(approx), would suit those looking for a project and re-converting back to a family size homde. The 2 upstairs flats have a deck with elevated urban views.
There is nothing more rewarding than restoring a gem of a home to its former glory and here its just good design ideas, time and elbow grease. Be the envy of all your friends when its completed. This character villa with its massive three bedrooms huge lounge and dining area is works really well for the current owners or sit back and workout the things that could be done to make it even more family friendly.
Read More
Read More
<section class="about-property more-or-less">
<div class="title">About this property</div>
<div class="more-content">
<p>I would start in the open state, due to using the `is-active` state class.</p>
<p>If location and growth is the key, then this property is for you. Currently configured as four tidy two bedroom flates,
this large two level 1920's Bungalow 233m2(approx), would suit those looking for a project and re-converting back to a family size homde.
The 2 upstairs flats have a deck with elevated urban views.</p>
<p>There is nothing more rewarding than restoring a gem of a home to its former glory and here its just good design ideas,
time and elbow grease. Be the envy of all your friends when its completed. This character villa with its massive three
bedrooms huge lounge and dining area is works really well for the current owners or sit back and workout the things that
could be done to make it even more family friendly.</p>
</div>
<div class="less-content"></div>
<p class="trigger show-for-small-only">Read More
<svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg>
</p>
<p class="desktop-trigger show-for-medium-up">Read More
<svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg>
</p>
</section>
<section class="collapse-container">
<div class="title-container">
<a href="#" class="accordion-title"><span>Next Open Homes</span> <i class="collapse-trigger">+</i></a>
</div>
<div class="accordion-content" data-tab-content>
<div class="next-open-homes">
<a href="#" class="view-planner-link">Click to view Open Home Planner</a>
<ul>
<li itemprop="event" itemscope itemtype="//schema.org/Event" class="clearfix">
<meta itemprop="name" content="Open home" />
<span itemprop="location" itemscope itemtype="//schema.org/Place" class="hide">
<meta itemprop="name" content="Fabulous Affordable Family living!!" />
<span itemprop="address" itemscope itemtype="//schema.org/PostalAddress">
<span itemprop="streetAddress">19 Commodore Court</span>
<span itemprop="addressLocality">Gulf Harbour</span>
<span itemprop="addressRegion">Rodney</span>
</span>
</span>
<span class="date left" itemprop="startDate" content="2016-09-25T13:30">Saturday 24 Sep</span>
<span class="right">1:30pm - 2:00pm
<meta itemprop="endDate" content="2016-09-24T14:00" />
<a class="saveOpenHome" data-id="12355917" data-type="save" href="/account/save-openhome/12355917" title="Add to Open Homes List">+</a>
</span>
</li>
<li itemprop="event" itemscope itemtype="//schema.org/Event" class="clearfix">
<meta itemprop="name" content="Open home" />
<span itemprop="location" itemscope itemtype="//schema.org/Place" class="hide">
<meta itemprop="name" content="Fabulous Affordable Family living!!" />
<span itemprop="address" itemscope itemtype="//schema.org/PostalAddress">
<span itemprop="streetAddress">19 Commodore Court</span>
<span itemprop="addressLocality">Gulf Harbour</span>
<span itemprop="addressRegion">Rodney</span>
</span>
</span>
<span class="date left" itemprop="startDate" content="2016-09-25T13:30">Sunday 25 Sep</span>
<span class="right">1:30pm - 2:00pm
<meta itemprop="endDate" content="2016-09-25T14:00" />
<a class="saveOpenHome" data-id="12355917" data-type="save" href="/account/save-openhome/12355917" title="Add to Open Homes List">+</a>
</span>
</li>
</ul>
<span class="small-text">Download in <a href="/2894027.ics">iCalendar</a> or <a href="/2894027.vcs">vCalendar</a> format</span>
</div>
</div>
</section>
Lot Features | Exterior cladding | Roof | Style |
---|---|---|---|
Feature | Feature, Feature | Feature | Feature |
Feature | Feature, Feature | Feature | Feature |
Feature | Feature, Feature, Feature | Feature | Feature |
Feature | Feature, Feature | Feature | Feature |
<section class="collapse-container">
<div class="title-container">
<a href="#" class="accordion-title">Key Property Features <i class="collapse-trigger">+</i></a>
</div>
<div class="accordion-content" data-tab-content>
<table class="key-property-feature">
<thead>
<tr>
<th>Lot Features</th>
<th>Exterior cladding</th>
<th>Roof</th>
<th>Style</th>
</tr>
</thead>
<tbody>
<tr>
<td>Feature</td>
<td>Feature, Feature</td>
<td>Feature</td>
<td>Feature</td>
</tr>
<tr>
<td>Feature</td>
<td>Feature, Feature</td>
<td>Feature</td>
<td>Feature</td>
</tr>
<tr>
<td>Feature</td>
<td>Feature, Feature, Feature</td>
<td>Feature</td>
<td>Feature</td>
</tr>
<tr>
<td>Feature</td>
<td>Feature, Feature</td>
<td>Feature</td>
<td>Feature</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="collapse-container">
<div class="title-container">
<a href="#" class="accordion-title"><span>Auction Info</span> <i class="collapse-trigger">+</i></a>
</div>
<div class="accordion-content" data-tab-content>
<div class="auction-info">
<h6><strong>Auction</strong> Saturday 8 Oct 11:30am</h6>
</div>
</div>
</section>
Great Primary School | Primary | 0.52 km |
Decent Primary School | Primary | 1.43 km |
Great Secondary School | Secondary | 2.3 km |
Decent Secondary School | Secondary | 0.9 km |
<section class="collapse-container">
<div class="title-container">
<a href="#" class="accordion-title"><span>Nearby Schools</span> <i class="collapse-trigger">+</i></a>
</div>
<div class="accordion-content" data-tab-content>
<table class="nearby-school">
<tbody>
<tr>
<td>Great Primary School</td>
<td>Primary</td>
<td>0.52 km</td>
</tr>
<tr>
<td>Decent Primary School</td>
<td>Primary</td>
<td>1.43 km</td>
</tr>
<tr>
<td>Great Secondary School</td>
<td>Secondary</td>
<td>2.3 km</td>
</tr>
<tr>
<td>Decent Secondary School</td>
<td>Secondary</td>
<td>0.9 km</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="collapse-container">
<div class="title-container">
<a href="#" class="accordion-title"><span>Agent Details</span> <i class="collapse-trigger">+</i></a>
</div>
<div class="accordion-content" data-tab-content>
<div class="agent-details">
<div class="person">
<div class="agent-image-small photo">
<a href="/profile/agent/9214" class="metrics-agent_link_click-agent-9214">
<img src="/images/per_orgs/9214/6a9ae3065f1794a0a748ee26356a140d.crop.70x89.jpg" width="70" height="89" alt="Wayne Marmont photo" />
</a>
</div>
<div class="agent-detail-text">
<div class="title hide">Agent</div>
<div class="org hide">Harcourts</div>
<div class="adr hide">
<div class="street-address">128 Kitchener Road</div>
<div class="locality">MILFORD</div>
<div class="postal-code">1330</div>
</div>
<h5 class="fn agent">
<a class="metrics-agent_link_click-agent-9214" href="/profile/agent/9214">Wayne Marmont</a>
</h5>
<ul>
<li class="tel" itemprop="telephone"><abbr title="Mobile">M</abbr> 027 477 2342</li>
<li class="tel" itemprop="telephone"><abbr title="Work">W</abbr> 09 486 1029</li>
<li><a href="/profile/agent/9214" class="metrics-agent_link_click-agent-9214">View My Profile</a></li>
</ul>
</div>
<div class="clear-floats"></div>
</div>
<div class="person">
<div class="agent-image-small photo">
<a href="/profile/agent/9214" class="metrics-agent_link_click-agent-9214">
<img src="/images/per_orgs/9214/6a9ae3065f1794a0a748ee26356a140d.crop.70x89.jpg" width="70" height="89" alt="Wayne Marmont photo" />
</a>
</div>
<div class="agent-detail-text">
<div class="title hide">Agent</div>
<div class="org hide">Harcourts</div>
<div class="adr hide">
<div class="street-address">128 Kitchener Road</div>
<div class="locality">MILFORD</div>
<div class="postal-code">1330</div>
</div>
<h5 class="fn agent">
<a class="metrics-agent_link_click-agent-9214" href="/profile/agent/9214">Wayne Marmont</a>
</h5>
<ul>
<li class="tel" itemprop="telephone"><abbr title="Mobile">M</abbr> 027 477 2342</li>
<li class="tel" itemprop="telephone"><abbr title="Work">W</abbr> 09 486 1029</li>
<li><a href="/profile/agent/9214" class="metrics-agent_link_click-agent-9214">View My Profile</a></li>
</ul>
</div>
<div class="clear-floats"></div>
</div>
</div>
</div>
</section>
Planned | Fibre | |
Avaliable | VDSL | |
Avaliable | ADSL | |
Unavaliable | Wireless |
* Data provided by National Broadband Map
<section class="collapse-container">
<div class="title-container">
<a href="#" class="accordion-title">Broadband Avaliability <i class="collapse-trigger">+</i></a>
</div>
<div class="accordion-content" data-tab-content>
<table class="broadband-avaliability">
<tbody>
<tr class="selected">
<td><!-- <img src="/images/broadband-icon-planned-25.gif"/>-->
<svg class="icon spanner-circle">
<use xlink:href="#spanner-circle-icon" />
</svg> </td>
<td>Planned</td>
<td>Fibre</td>
</tr>
<tr>
<td><!-- <img src="/images/broadband-icon-available-25.gif"/>-->
<svg class="icon checked-circle">
<use xlink:href="#checked-circle-icon" />
</svg> </td>
<td>Avaliable</td>
<td>VDSL</td>
</tr>
<tr>
<td><!-- <img src="/images/broadband-icon-available-25.gif"/>-->
<svg class="icon checked-circle">
<use xlink:href="#checked-circle-icon" />
</svg> </td>
<td>Avaliable</td>
<td>ADSL</td>
</tr>
<tr>
<td><!-- <img src="/images/broadband-icon-available-25.gif"/>-->
<svg class="icon checked-circle">
<use xlink:href="#checked-circle-icon" />
</svg> </td>
<td>Unavaliable</td>
<td>Wireless</td>
</tr>
</tbody>
</table>
<p><small>* Data provided by <a href="#">National Broadband Map</a></small></p>
</div>
</section>
<section class="collapse-container">
<div class="title-container">
<a href="#" class="accordion-title"><span>Reach</span> <i class="collapse-trigger">+</i></a>
</div>
<div class="accordion-content" data-tab-content>
<div class="metrics">
<ul class="left-list">
<li><a href="/2895298/statistics">13,159 Search Views <svg class="icon question-circle"><use xlink:href="#question-circle-icon" /></svg></a>
<span class="tooltip" data-title="Search Views represent the number of times<br>a property has appeared on the website<br>user’s screen for at least a second"></span></li>
<li><a href="/2895298/statistics">1,024 Listing Views <svg class="icon question-circle"><use xlink:href="#question-circle-icon" /></svg></a>
<span class="tooltip" data-title="Listing Views represent the number of times<br>a listing has been viewed in full"></span></li>
<li><strong><a href="/2895298/statistics">14,183 Total Reach <svg class="icon question-circle"><use xlink:href="#question-circle-icon" /></svg></a>
<span class="tooltip" data-title="The Total Reach of a listing is found by<br>combining the number of Listing Views<br>and Search Views"></span></strong></li>
<meta itemprop="interactionCount" content="1,024 Views" />
</ul>
<ul class="right-list">
<li><svg class="icon printer"><use xlink:href="#printer-icon" /></svg><span class="print-listing"><a href="/2895298/pdf">Print (PDF)</a></span></li>
<li><svg class="icon agent"><use xlink:href="#agent-icon" /></svg><span class="agentReport print-listing" style="text-align: right"><span class="agentReport"></span><a onclick="var w=window.open(this.href);w.focus();return false;" href="/2895298/agent-report?token=0fa05d97810dc58b83a5f76a7646a5ac">Agent report</a></span></li>
</ul>
</div>
</div>
</section>
<section class="collapse-container">
<div class="title-container">
<a href="#" class="accordion-title">Locale Love <i class="collapse-trigger">+</i></a>
</div>
<div class="accordion-content" data-tab-content>
<div class="locale-love">
<div class="row padding-horizontal-3">
<div class="large-4 medium-6 small-6 columns">
<div class="business">
<div class="overlap">
<p>Palco Cafe</p>
<p><span class="heart">♥</span> 10</p>
</div>
<img class="img-responsive" src="/images/media-player/thumbs/thumbs-proto4.jpg">
<div class="brief">
<p class="follow">
+ Follow
</p>
<p class="blockquote">"I've been paleo new for six mon..."</p>
<div class="author">
<img class="avator" src="/images/media-player/thumbs/thumbs-proto4.jpg">
<small>loved by <br/> <a href="#">Kylie B.</a></small>
</div>
<p class="star">⋆</p>
</div>
</div>
</div>
<div class="large-4 medium-6 small-6 columns">
<div class="business">
<div class="overlap">
<p>The Frence Cafe</p>
<p><span class="heart">♥</span> 10</p>
</div>
<img class="img-responsive" src="/images/media-player/thumbs/thumbs-proto3.jpg">
<div class="brief">
<p class="follow">+ Follow</p>
<p class="blockquote">"for people who like real coffee"</p>
<div class="author">
<img class="avator" src="/images/media-player/thumbs/thumbs-proto3.jpg">
<small>loved by <br/> <a href="#">Toni K.</a></small>
</div>
<p class="star">⋆</p>
</div>
</div>
</div>
<div class="show-for-large-up large-4 medium-6 small-6 columns"></div>
</div>
</div>
</div>
</section>
<section class="collapse-container">
<div class="title-container">
<a href="#" class="accordion-title tool-title"><span>Calculate your costs with Westpac</span> <i class="collapse-trigger">+</i></a>
</div>
<div class="accordion-content" data-tab-content>
<img class="img-responsive" src="/images/mortgage-calculator-tool.png"/>
</div>
</section>
<section id="enquire-section" class="collapse-container show-for-medium-up">
<div class="title-container">
<a href="#" class="accordion-title"><span>Ask [AGENT NAME/S] about this property</span> <i class="collapse-trigger">+</i></a>
</div>
<div class="accordion-content" data-tab-content>
<div class="enquire-property">
<!-- NOT SHOW AGENT DETAIL/IMAGE HERE ANY MORE -->
<!--div class="agent">
<p class="name">Paula Lzzard</p>
<div class="agent-image-big photo">
<a href="/profile/agent/9214" class="metrics-agent_link_click-agent-9214">
<img src="/images/media-player/player1.jpg" width="200" height="auto" alt="Wayne Marmont photo" />
</a>
</div>
<ul class="info">
<li class="name">John McCracken</li>
<li><abbr title="Mobile">M</abbr> <b>027 458 2833</b></li>
<li><abbr title="Work">D</abbr> <b>027 458 2833</b></li>
<li><abbr title="Work">W</abbr> <b>027 458 2833</b></li>
<li><a href="#">View My Profile</a></li>
</ul>
</div-->
<div class="enquire-form">
<form class="row padding-horizontal-3">
<div class="large-2 medium-3 small-12 columns">
<label for="enquiry_form_name" class="left">NAME <span>*</span></label>
</div>
<div class="large-10 medium-9 small-12 columns">
<input id="enquiry_form_name" type="text" />
</div>
<div class="large-2 medium-3 small-12 columns">
<label for="enquiry_form_email" class="left">EMAIL <span>*</span></label>
</div>
<div class="large-10 medium-9 small-12 columns">
<input id="enquiry_form_email" type="email" />
</div>
<div class="large-2 medium-3 small-12 columns">
<label for="enquiry_form_message" class="left">MESSAGE <span>*</span></label>
</div>
<div class="large-10 medium-9 small-12 columns">
<textarea id="enquiry_form_message" type="text" rows="5"></textarea>
</div>
<div class="medium-12 small-12 columns">
<div class="captcha">
<input id="enquiry_form_captcha" placeholder="CAPTCHA IMAGE SHOW HERE" type="text" />
</div>
</div>
<div class="medium-3 small-12 columns">
</div>
<div class="medium-9 small-12 columns">
<button class="button expand small">Send Your Message</button>
</div>
</form>
</div>
</div>
</div>
</section>
<section class="collapse-container">
<div class="title-container">
<a href="#" class="accordion-title"><span>Similar Properties Nearby</span> <i class="collapse-trigger">+</i></a>
</div>
<div class="accordion-content" data-tab-content>
<div class="similar-properties">
<!-- similar details box -->
<div id="similar-2907176" class="similar-recent-details-box clearfix" data-gtm="{
"id": "2907176",
"name": "579546",
"brand": "14968",
"price": 0,
"category": "residential",
"list" : "similar",
"variant": "buy"
}">
<div class="similar-recent-image-small">
<a href="/2907176" class="relative-anchor">
<img src="/images/listings/2907176/9381b53465ff1916995369728efd7205.crop.70x48.jpg" width="70" height="48" alt="Similar property" />
</a>
</div>
<div class="similar-recent-text">
<h6><a href="/2907176">Instantly Appealing!</a></h6>
<ul>
<li>34F Forest Hill Road</li>
<li><strong>Auction</strong></li>
</ul>
</div>
</div>
<div id="similar-2906282" class="similar-recent-details-box clearfix" data-gtm="{
"id": "2906282",
"name": "TET24585",
"brand": "14639",
"price": 0,
"category": "residential",
"list" : "similar",
"variant": "buy"
}">
<div class="similar-recent-image-small">
<a href="/2907176" class="relative-anchor">
<img src="/images/listings/2906282/472e9684080e562a5fe1e222ea8bfb1a.crop.70x48.jpg" width="70" height="48" alt="Similar property" />
</a>
</div>
<div class="similar-recent-text">
<h6><a href="/2906282">Ready for a revamp - Hot location</a></h6>
<ul>
<li>36 Waitaki Street</li>
<li><strong>Negotiation</strong></li>
</ul>
</div>
</div>
<div id="similar-2904059" class="similar-recent-details-box clearfix" data-gtm="{
"id": "2904059",
"name": "580451",
"brand": "15004",
"price": 0,
"category": "residential",
"list" : "similar",
"variant": "buy"
}">
<div class="similar-recent-image-small">
<a href="/2907176" class="relative-anchor">
<img src="/images/listings/2904059/b113f7de5bf22678938fda17cbf99710.crop.70x48.jpg" width="70" height="48" alt="Similar property" />
</a>
</div>
<div class="similar-recent-text">
<h6><a href="/2904059">Prestige Section With Building Consent</a></h6>
<ul>
<li>124 San Valentino Drive</li>
<li><strong>Negotiation</strong></li>
</ul>
</div>
</div>
<div id="similar-2901810" class="similar-recent-details-box clearfix" data-gtm="{
"id": "2901810",
"name": "TG005753",
"brand": "196478",
"price": 0,
"category": "residential",
"list" : "similar",
"variant": "buy"
}">
<div class="similar-recent-image-small">
<a href="/2907176" class="relative-anchor">
<img src="/images/listings/2901810/588bcbec7be1a43925e7f14615f375d6.crop.70x48.jpg" width="70" height="48" alt="Similar property" />
</a>
</div>
<div class="similar-recent-text">
<h6><a href="/2901810">SECURE YOUR FUTURE</a></h6>
<ul>
<li>Henderson</li>
<li><strong>$629,000</strong></li>
</ul>
</div>
</div>
<p>
<a class="more" href="/residential/all/auckland/waitakere-city/henderson">More nearby properties</a>
</p>
</div>
</div>
</section>
This is the description of this advertisement! This is the description of this advertisement!
<div class="native-ad-container">
<div class="native-ad clearfix">
<img src="/images/sample/native-ad-image.png"/>
<div class="ad-text">
<h5>This is the advertisement title, or some headline</h5>
<p>This is the description of this advertisement! This is the description of this advertisement!</p>
<p><a href="#">Click Here</a></p>
</div>
</div>
<div class="sponsored show-for-small-only"><span>SPONSORED</span></div>
</div>
molecules-showcase-tile
<div class="row padding-horizontal-2">
<div class="small-12 columns">
<div id="breakpoints">
<div class="breakpoint-small" data-size="small"></div>
<div class="breakpoint-medium" data-size="medium"></div>
<div class="breakpoint-large" data-size="large"></div>
</div>
<section class="showcase-player">
<div id="showcase-player-container" data-row="2">
<div class="showcase-tile">
<a class="agent-photo">
<img src="/images/agent-profile.jpg" alt="agent profile image" />
</a>
<div class="showcase-container res-sale">
<div class="showcase-image-slider">
<!--<div class="image-slider-top-shadow"></div>-->
<div class="orbit" data-orbit data-auto-play="false">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><svg class="icon left-arrow">
<use xlink:href="#left-arrow-icon" />
</svg>
</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><svg class="icon right-arrow">
<use xlink:href="#right-arrow-icon" />
</svg>
</button>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player1.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player2.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player3.jpg"/>
</li>
</ul>
</div>
</div>
<div class="showcase-fill-tile-overlay">
<div class="row">
<div class="small-12 column">
<h4 class="showcase-price">Featured Tile Title, it may cont...</h4>
<p>
Description of the property, Description of the property. Description of the property, Description of the property. Description of the property, Description of the property.
</p>
</div>
</div>
<div class="pricing-block">
<h4 class="showcase-price">Asking Price $10m including GST</h4>
</div>
<div class="info-block">
<span class="bedrooms-text">3 <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg></span>
<span class="bathrooms-text">2 <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg></span>
<a class="showcase-agency-logo">
<img src="/images/agency-logo-hz.jpg" alt="Agency Logo" />
</a>
</div>
</div>
<div class="showcase-ui-panel">
<div class="showcase-overlap">
<h4 class="showcase-title">65 Guant Street, Westhaven</h4>
<svg class="icon up-arrow">
<use xlink:href="#up-arrow-icon" />
</svg> <svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg> </div><!-- showcase-top-bar -->
</div><!-- showcase-ui-panel -->
</div><!-- showcase-container -->
</div>
<div class="showcase-tile">
<a class="agent-photo">
<img src="/images/agent-profile.jpg" alt="agent profile image" />
</a>
<div class="showcase-container res-sale">
<div class="showcase-image-slider">
<!--<div class="image-slider-top-shadow"></div>-->
<div class="orbit" data-orbit data-auto-play="false">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><svg class="icon left-arrow">
<use xlink:href="#left-arrow-icon" />
</svg>
</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><svg class="icon right-arrow">
<use xlink:href="#right-arrow-icon" />
</svg>
</button>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player1.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player2.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player3.jpg"/>
</li>
</ul>
</div>
</div>
<div class="showcase-fill-tile-overlay">
<div class="row">
<div class="small-12 column">
<h4 class="showcase-price">Featured Tile Title, it may cont...</h4>
<p>
Description of the property, Description of the property. Description of the property, Description of the property. Description of the property, Description of the property.
</p>
</div>
</div>
<div class="pricing-block">
<h4 class="showcase-price">Asking Price $10m including GST</h4>
</div>
<div class="info-block">
<span class="bedrooms-text">3 <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg></span>
<span class="bathrooms-text">2 <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg></span>
<a class="showcase-agency-logo">
<img src="/images/agency-logo-hz.jpg" alt="Agency Logo" />
</a>
</div>
</div>
<div class="showcase-ui-panel">
<div class="showcase-overlap">
<h4 class="showcase-title">65 Guant Street, Westhaven</h4>
<svg class="icon up-arrow">
<use xlink:href="#up-arrow-icon" />
</svg> <svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg> </div><!-- showcase-top-bar -->
</div><!-- showcase-ui-panel -->
</div><!-- showcase-container -->
</div>
<div class="showcase-tile">
<a class="agent-photo">
<img src="/images/agent-profile.jpg" alt="agent profile image" />
</a>
<div class="showcase-container res-sale">
<div class="showcase-image-slider">
<!--<div class="image-slider-top-shadow"></div>-->
<div class="orbit" data-orbit data-auto-play="false">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><svg class="icon left-arrow">
<use xlink:href="#left-arrow-icon" />
</svg>
</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><svg class="icon right-arrow">
<use xlink:href="#right-arrow-icon" />
</svg>
</button>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player1.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player2.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player3.jpg"/>
</li>
</ul>
</div>
</div>
<div class="showcase-fill-tile-overlay">
<div class="row">
<div class="small-12 column">
<h4 class="showcase-price">Featured Tile Title, it may cont...</h4>
<p>
Description of the property, Description of the property. Description of the property, Description of the property. Description of the property, Description of the property.
</p>
</div>
</div>
<div class="pricing-block">
<h4 class="showcase-price">Asking Price $10m including GST</h4>
</div>
<div class="info-block">
<span class="bedrooms-text">3 <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg></span>
<span class="bathrooms-text">2 <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg></span>
<a class="showcase-agency-logo">
<img src="/images/agency-logo-hz.jpg" alt="Agency Logo" />
</a>
</div>
</div>
<div class="showcase-ui-panel">
<div class="showcase-overlap">
<h4 class="showcase-title">65 Guant Street, Westhaven</h4>
<svg class="icon up-arrow">
<use xlink:href="#up-arrow-icon" />
</svg> <svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg> </div><!-- showcase-top-bar -->
</div><!-- showcase-ui-panel -->
</div><!-- showcase-container -->
</div>
<div class="showcase-tile">
<a class="agent-photo">
<img src="/images/agent-profile.jpg" alt="agent profile image" />
</a>
<div class="showcase-container res-sale">
<div class="showcase-image-slider">
<!--<div class="image-slider-top-shadow"></div>-->
<div class="orbit" data-orbit data-auto-play="false">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><svg class="icon left-arrow">
<use xlink:href="#left-arrow-icon" />
</svg>
</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><svg class="icon right-arrow">
<use xlink:href="#right-arrow-icon" />
</svg>
</button>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player1.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player2.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player3.jpg"/>
</li>
</ul>
</div>
</div>
<div class="showcase-fill-tile-overlay">
<div class="row">
<div class="small-12 column">
<h4 class="showcase-price">Featured Tile Title, it may cont...</h4>
<p>
Description of the property, Description of the property. Description of the property, Description of the property. Description of the property, Description of the property.
</p>
</div>
</div>
<div class="pricing-block">
<h4 class="showcase-price">Asking Price $10m including GST</h4>
</div>
<div class="info-block">
<span class="bedrooms-text">3 <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg></span>
<span class="bathrooms-text">2 <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg></span>
<a class="showcase-agency-logo">
<img src="/images/agency-logo-hz.jpg" alt="Agency Logo" />
</a>
</div>
</div>
<div class="showcase-ui-panel">
<div class="showcase-overlap">
<h4 class="showcase-title">65 Guant Street, Westhaven</h4>
<svg class="icon up-arrow">
<use xlink:href="#up-arrow-icon" />
</svg> <svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg> </div><!-- showcase-top-bar -->
</div><!-- showcase-ui-panel -->
</div><!-- showcase-container -->
</div>
<div class="showcase-tile">
<a class="agent-photo">
<img src="/images/agent-profile.jpg" alt="agent profile image" />
</a>
<div class="showcase-container res-sale">
<div class="showcase-image-slider">
<!--<div class="image-slider-top-shadow"></div>-->
<div class="orbit" data-orbit data-auto-play="false">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><svg class="icon left-arrow">
<use xlink:href="#left-arrow-icon" />
</svg>
</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><svg class="icon right-arrow">
<use xlink:href="#right-arrow-icon" />
</svg>
</button>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player1.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player2.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player3.jpg"/>
</li>
</ul>
</div>
</div>
<div class="showcase-fill-tile-overlay">
<div class="row">
<div class="small-12 column">
<h4 class="showcase-price">Featured Tile Title, it may cont...</h4>
<p>
Description of the property, Description of the property. Description of the property, Description of the property. Description of the property, Description of the property.
</p>
</div>
</div>
<div class="pricing-block">
<h4 class="showcase-price">Asking Price $10m including GST</h4>
</div>
<div class="info-block">
<span class="bedrooms-text">3 <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg></span>
<span class="bathrooms-text">2 <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg></span>
<a class="showcase-agency-logo">
<img src="/images/agency-logo-hz.jpg" alt="Agency Logo" />
</a>
</div>
</div>
<div class="showcase-ui-panel">
<div class="showcase-overlap">
<h4 class="showcase-title">65 Guant Street, Westhaven</h4>
<svg class="icon up-arrow">
<use xlink:href="#up-arrow-icon" />
</svg> <svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg> </div><!-- showcase-top-bar -->
</div><!-- showcase-ui-panel -->
</div><!-- showcase-container -->
</div>
<div class="showcase-tile">
<a class="agent-photo">
<img src="/images/agent-profile.jpg" alt="agent profile image" />
</a>
<div class="showcase-container res-sale">
<div class="showcase-image-slider">
<!--<div class="image-slider-top-shadow"></div>-->
<div class="orbit" data-orbit data-auto-play="false">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><svg class="icon left-arrow">
<use xlink:href="#left-arrow-icon" />
</svg>
</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><svg class="icon right-arrow">
<use xlink:href="#right-arrow-icon" />
</svg>
</button>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player1.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player2.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player3.jpg"/>
</li>
</ul>
</div>
</div>
<div class="showcase-fill-tile-overlay">
<div class="row">
<div class="small-12 column">
<h4 class="showcase-price">Featured Tile Title, it may cont...</h4>
<p>
Description of the property, Description of the property. Description of the property, Description of the property. Description of the property, Description of the property.
</p>
</div>
</div>
<div class="pricing-block">
<h4 class="showcase-price">Asking Price $10m including GST</h4>
</div>
<div class="info-block">
<span class="bedrooms-text">3 <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg></span>
<span class="bathrooms-text">2 <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg></span>
<a class="showcase-agency-logo">
<img src="/images/agency-logo-hz.jpg" alt="Agency Logo" />
</a>
</div>
</div>
<div class="showcase-ui-panel">
<div class="showcase-overlap">
<h4 class="showcase-title">65 Guant Street, Westhaven</h4>
<svg class="icon up-arrow">
<use xlink:href="#up-arrow-icon" />
</svg> <svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg> </div><!-- showcase-top-bar -->
</div><!-- showcase-ui-panel -->
</div><!-- showcase-container -->
</div>
<div class="showcase-tile">
<a class="agent-photo">
<img src="/images/agent-profile.jpg" alt="agent profile image" />
</a>
<div class="showcase-container res-sale">
<div class="showcase-image-slider">
<!--<div class="image-slider-top-shadow"></div>-->
<div class="orbit" data-orbit data-auto-play="false">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><svg class="icon left-arrow">
<use xlink:href="#left-arrow-icon" />
</svg>
</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><svg class="icon right-arrow">
<use xlink:href="#right-arrow-icon" />
</svg>
</button>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player1.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player2.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player3.jpg"/>
</li>
</ul>
</div>
</div>
<div class="showcase-fill-tile-overlay">
<div class="row">
<div class="small-12 column">
<h4 class="showcase-price">Featured Tile Title, it may cont...</h4>
<p>
Description of the property, Description of the property. Description of the property, Description of the property. Description of the property, Description of the property.
</p>
</div>
</div>
<div class="pricing-block">
<h4 class="showcase-price">Asking Price $10m including GST</h4>
</div>
<div class="info-block">
<span class="bedrooms-text">3 <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg></span>
<span class="bathrooms-text">2 <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg></span>
<a class="showcase-agency-logo">
<img src="/images/agency-logo-hz.jpg" alt="Agency Logo" />
</a>
</div>
</div>
<div class="showcase-ui-panel">
<div class="showcase-overlap">
<h4 class="showcase-title">65 Guant Street, Westhaven</h4>
<svg class="icon up-arrow">
<use xlink:href="#up-arrow-icon" />
</svg> <svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg> </div><!-- showcase-top-bar -->
</div><!-- showcase-ui-panel -->
</div><!-- showcase-container -->
</div>
<div class="showcase-tile">
<a class="agent-photo">
<img src="/images/agent-profile.jpg" alt="agent profile image" />
</a>
<div class="showcase-container res-sale">
<div class="showcase-image-slider">
<!--<div class="image-slider-top-shadow"></div>-->
<div class="orbit" data-orbit data-auto-play="false">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><svg class="icon left-arrow">
<use xlink:href="#left-arrow-icon" />
</svg>
</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><svg class="icon right-arrow">
<use xlink:href="#right-arrow-icon" />
</svg>
</button>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player1.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player2.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player3.jpg"/>
</li>
</ul>
</div>
</div>
<div class="showcase-fill-tile-overlay">
<div class="row">
<div class="small-12 column">
<h4 class="showcase-price">Featured Tile Title, it may cont...</h4>
<p>
Description of the property, Description of the property. Description of the property, Description of the property. Description of the property, Description of the property.
</p>
</div>
</div>
<div class="pricing-block">
<h4 class="showcase-price">Asking Price $10m including GST</h4>
</div>
<div class="info-block">
<span class="bedrooms-text">3 <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg></span>
<span class="bathrooms-text">2 <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg></span>
<a class="showcase-agency-logo">
<img src="/images/agency-logo-hz.jpg" alt="Agency Logo" />
</a>
</div>
</div>
<div class="showcase-ui-panel">
<div class="showcase-overlap">
<h4 class="showcase-title">65 Guant Street, Westhaven</h4>
<svg class="icon up-arrow">
<use xlink:href="#up-arrow-icon" />
</svg> <svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg> </div><!-- showcase-top-bar -->
</div><!-- showcase-ui-panel -->
</div><!-- showcase-container -->
</div>
<div class="showcase-tile">
<a class="agent-photo">
<img src="/images/agent-profile.jpg" alt="agent profile image" />
</a>
<div class="showcase-container res-sale">
<div class="showcase-image-slider">
<!--<div class="image-slider-top-shadow"></div>-->
<div class="orbit" data-orbit data-auto-play="false">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><svg class="icon left-arrow">
<use xlink:href="#left-arrow-icon" />
</svg>
</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><svg class="icon right-arrow">
<use xlink:href="#right-arrow-icon" />
</svg>
</button>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player1.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player2.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player3.jpg"/>
</li>
</ul>
</div>
</div>
<div class="showcase-fill-tile-overlay">
<div class="row">
<div class="small-12 column">
<h4 class="showcase-price">Featured Tile Title, it may cont...</h4>
<p>
Description of the property, Description of the property. Description of the property, Description of the property. Description of the property, Description of the property.
</p>
</div>
</div>
<div class="pricing-block">
<h4 class="showcase-price">Asking Price $10m including GST</h4>
</div>
<div class="info-block">
<span class="bedrooms-text">3 <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg></span>
<span class="bathrooms-text">2 <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg></span>
<a class="showcase-agency-logo">
<img src="/images/agency-logo-hz.jpg" alt="Agency Logo" />
</a>
</div>
</div>
<div class="showcase-ui-panel">
<div class="showcase-overlap">
<h4 class="showcase-title">65 Guant Street, Westhaven</h4>
<svg class="icon up-arrow">
<use xlink:href="#up-arrow-icon" />
</svg> <svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg> </div><!-- showcase-top-bar -->
</div><!-- showcase-ui-panel -->
</div><!-- showcase-container -->
</div>
<div class="showcase-tile">
<a class="agent-photo">
<img src="/images/agent-profile.jpg" alt="agent profile image" />
</a>
<div class="showcase-container res-sale">
<div class="showcase-image-slider">
<!--<div class="image-slider-top-shadow"></div>-->
<div class="orbit" data-orbit data-auto-play="false">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><svg class="icon left-arrow">
<use xlink:href="#left-arrow-icon" />
</svg>
</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><svg class="icon right-arrow">
<use xlink:href="#right-arrow-icon" />
</svg>
</button>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player1.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player2.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player3.jpg"/>
</li>
</ul>
</div>
</div>
<div class="showcase-fill-tile-overlay">
<div class="row">
<div class="small-12 column">
<h4 class="showcase-price">Featured Tile Title, it may cont...</h4>
<p>
Description of the property, Description of the property. Description of the property, Description of the property. Description of the property, Description of the property.
</p>
</div>
</div>
<div class="pricing-block">
<h4 class="showcase-price">Asking Price $10m including GST</h4>
</div>
<div class="info-block">
<span class="bedrooms-text">3 <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg></span>
<span class="bathrooms-text">2 <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg></span>
<a class="showcase-agency-logo">
<img src="/images/agency-logo-hz.jpg" alt="Agency Logo" />
</a>
</div>
</div>
<div class="showcase-ui-panel">
<div class="showcase-overlap">
<h4 class="showcase-title">65 Guant Street, Westhaven</h4>
<svg class="icon up-arrow">
<use xlink:href="#up-arrow-icon" />
</svg> <svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg> </div><!-- showcase-top-bar -->
</div><!-- showcase-ui-panel -->
</div><!-- showcase-container -->
</div>
<div class="showcase-tile">
<a class="agent-photo">
<img src="/images/agent-profile.jpg" alt="agent profile image" />
</a>
<div class="showcase-container res-sale">
<div class="showcase-image-slider">
<!--<div class="image-slider-top-shadow"></div>-->
<div class="orbit" data-orbit data-auto-play="false">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><svg class="icon left-arrow">
<use xlink:href="#left-arrow-icon" />
</svg>
</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><svg class="icon right-arrow">
<use xlink:href="#right-arrow-icon" />
</svg>
</button>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player1.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player2.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player3.jpg"/>
</li>
</ul>
</div>
</div>
<div class="showcase-fill-tile-overlay">
<div class="row">
<div class="small-12 column">
<h4 class="showcase-price">Featured Tile Title, it may cont...</h4>
<p>
Description of the property, Description of the property. Description of the property, Description of the property. Description of the property, Description of the property.
</p>
</div>
</div>
<div class="pricing-block">
<h4 class="showcase-price">Asking Price $10m including GST</h4>
</div>
<div class="info-block">
<span class="bedrooms-text">3 <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg></span>
<span class="bathrooms-text">2 <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg></span>
<a class="showcase-agency-logo">
<img src="/images/agency-logo-hz.jpg" alt="Agency Logo" />
</a>
</div>
</div>
<div class="showcase-ui-panel">
<div class="showcase-overlap">
<h4 class="showcase-title">65 Guant Street, Westhaven</h4>
<svg class="icon up-arrow">
<use xlink:href="#up-arrow-icon" />
</svg> <svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg> </div><!-- showcase-top-bar -->
</div><!-- showcase-ui-panel -->
</div><!-- showcase-container -->
</div>
<div class="showcase-tile">
<a class="agent-photo">
<img src="/images/agent-profile.jpg" alt="agent profile image" />
</a>
<div class="showcase-container res-sale">
<div class="showcase-image-slider">
<!--<div class="image-slider-top-shadow"></div>-->
<div class="orbit" data-orbit data-auto-play="false">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><svg class="icon left-arrow">
<use xlink:href="#left-arrow-icon" />
</svg>
</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><svg class="icon right-arrow">
<use xlink:href="#right-arrow-icon" />
</svg>
</button>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player1.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player2.jpg"/>
</li>
<li class="orbit-slide">
<img class="orbit-image img-responsive featured-listing-tile-photo" src="/images/media-player/player3.jpg"/>
</li>
</ul>
</div>
</div>
<div class="showcase-fill-tile-overlay">
<div class="row">
<div class="small-12 column">
<h4 class="showcase-price">Featured Tile Title, it may cont...</h4>
<p>
Description of the property, Description of the property. Description of the property, Description of the property. Description of the property, Description of the property.
</p>
</div>
</div>
<div class="pricing-block">
<h4 class="showcase-price">Asking Price $10m including GST</h4>
</div>
<div class="info-block">
<span class="bedrooms-text">3 <svg class="icon bedroom">
<use xlink:href="#bedroom-icon" />
</svg></span>
<span class="bathrooms-text">2 <svg class="icon bathroom">
<use xlink:href="#bathroom-icon" />
</svg></span>
<a class="showcase-agency-logo">
<img src="/images/agency-logo-hz.jpg" alt="Agency Logo" />
</a>
</div>
</div>
<div class="showcase-ui-panel">
<div class="showcase-overlap">
<h4 class="showcase-title">65 Guant Street, Westhaven</h4>
<svg class="icon up-arrow">
<use xlink:href="#up-arrow-icon" />
</svg> <svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon" />
</svg> </div><!-- showcase-top-bar -->
</div><!-- showcase-ui-panel -->
</div><!-- showcase-container -->
</div>
</div>
<div class="controls-next">
<span></span>
</div>
<div class="controls-prev">
<span></span>
</div>
</section><!-- showcase-player -->
</div>
</div>
Maecenas id neque est. Nulla vestibulum ac ligula vel dignissim. Aliquam feugiat enim tristique, malesuada odio in.
<section class="homepage-featured-article-organism">
<a class="featured-img-link" href="#" title="Featured Article">
<img src="/images/featured-article-sample.jpg" alt="Featured Article Sample" />
</a>
<article class="homepage-feature-article">
<h2 class="article-headline"><a href="#" title="Homepage Article Headline">Article Headline</a></h2>
<p class="article-preview">Maecenas id neque est. Nulla vestibulum ac ligula vel dignissim.
Aliquam feugiat enim tristique, malesuada odio in.</p>
<p class="article-link"><a class="read-more-link" href="#" title="Read More »">Read More »</a></p>
</article><!-- homepage molecule ends -->
<div class="clear-fix">
</div>
</section>
Maecenas id neque est. Nulla vestibulum ac ligula vel dignissim. Aliquam feugiat enim tristique, malesuada odio in, eleifend eros. Aliquam placerat feugiat dolor, vitae volutpat risus consectetur ac. Nulla non cursus urna. Donec ex nisl, condimentum a aliquam sit amet, lacinia vitae sapien.
<article class="homepage-article-organism">
<h2 class="article-headline">Homepage Article Headline</h2>
<h4 class="article-sub-headline"><a href="#" title="Homepage Article Link">This is the sub-headline for the article</a></h4>
<p class="article-preview">Maecenas id neque est. Nulla vestibulum ac ligula vel dignissim.
Aliquam feugiat enim tristique, malesuada odio in, eleifend eros.
Aliquam placerat feugiat dolor, vitae volutpat risus consectetur ac.
Nulla non cursus urna. Donec ex nisl, condimentum a aliquam sit amet,
lacinia vitae sapien.</p>
<p><a class="read-more-link" href="#" title="Read More »">Read More »</a></p>
</article><!-- homepage molecule ends -->
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
“ Aliquaam in diam vitae— Smarty McQuotemouth
nisl psuere malesuada. ”
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
<div class="sponsored-article">
<div class="sponsored-article-header">
<svg class="icon news">
<use xlink:href="#news-icon" />
</svg>
<div class="sponsored-container">
<div class="sponsored-box">
<h6 class="sponsored-text">Sponsored Content</h6>
</div>
<a class="sponsor-link" href="#" title="Sponsor Link"><img src="/images/blog/sponsor-logo.jpg" />
<h6 class="sponsor-title">NZ Design & Build</h6></a>
</div>
<h2 class="article-title">Cras consequat non mauris posuere finibus</h2>
<div class="article-info-container">
<h5 class="article-meta-info">
<span class="article-author">Writey McWritesStuff </span>
<span class="article-published-date">: 07 December 2016</span>
</h5>
<div class="blog-articles-share-bar">
<h6>Share</h6>
<ul class="inline-list">
<li>
<a class="sharer clickable"
data-sharer="facebook"
data-app_id='Facebook App Id'
data-url="#"
data-description="This is description text">
<svg class="icon facebook">
<use xlink:href="#facebook-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="twitter"
data-url="#"
data-title="This is description text">
<svg class="icon twitter">
<use xlink:href="#twitter-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="googleplus"
data-url="#"
data-title="This is description text">
<svg class="icon google-plus">
<use xlink:href="#google-plus-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="pinterest"
data-url="#"
data-media="http://styleguide.staging.realestate.co.nz/images/media-player/player1.jpg"
data-description="This is description text">
<svg class="icon pinterest">
<use xlink:href="#pinterest-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="email"
data-url="#"
data-description="This is description text">
<svg class="icon email">
<use xlink:href="#email-icon" />
</svg> </a>
</li>
</ul>
</div>
</div>
<img src="/images/blog/800-232-article-header.jpg" alt="Article Header Image" />
</div>
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
<div class="blog-blockquote">
<blockquote cite="#">
“ Aliquaam in diam vitae <br />
nisl psuere malesuada. ”
</blockquote>
<cite class="quote-author">— Smarty McQuotemouth</cite>
<br />
</div>
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
</div>
molecules-block-blog-articles-share-bar
atoms-articles-header-image
<div class="sponsored-article-header">
<svg class="icon news">
<use xlink:href="#news-icon" />
</svg>
<div class="sponsored-container">
<div class="sponsored-box">
<h6 class="sponsored-text">Sponsored Content</h6>
</div>
<a class="sponsor-link" href="#" title="Sponsor Link"><img src="/images/blog/sponsor-logo.jpg" />
<h6 class="sponsor-title">NZ Design & Build</h6></a>
</div>
<h2 class="article-title">Cras consequat non mauris posuere finibus</h2>
<div class="article-info-container">
<h5 class="article-meta-info">
<span class="article-author">Writey McWritesStuff </span>
<span class="article-published-date">: 07 December 2016</span>
</h5>
<div class="blog-articles-share-bar">
<h6>Share</h6>
<ul class="inline-list">
<li>
<a class="sharer clickable"
data-sharer="facebook"
data-app_id='Facebook App Id'
data-url="#"
data-description="This is description text">
<svg class="icon facebook">
<use xlink:href="#facebook-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="twitter"
data-url="#"
data-title="This is description text">
<svg class="icon twitter">
<use xlink:href="#twitter-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="googleplus"
data-url="#"
data-title="This is description text">
<svg class="icon google-plus">
<use xlink:href="#google-plus-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="pinterest"
data-url="#"
data-media="http://styleguide.staging.realestate.co.nz/images/media-player/player1.jpg"
data-description="This is description text">
<svg class="icon pinterest">
<use xlink:href="#pinterest-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="email"
data-url="#"
data-description="This is description text">
<svg class="icon email">
<use xlink:href="#email-icon" />
</svg> </a>
</li>
</ul>
</div>
</div>
<img src="/images/blog/800-232-article-header.jpg" alt="Article Header Image" />
</div>
<div class="article-slider">
<img src="/images/blog/slider-holder.jpg" />
</div>
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
“ Aliquaam in diam vitae— Smarty McQuotemouth
nisl psuere malesuada. ”
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
<div class="partnered-article">
<div class="partnered-article-header">
<svg class="icon inspiration">
<use xlink:href="#inspiration-icon" />
</svg>
<div class="partnered-container">
<div class="partnered-box">
<h6 class="partnered-text">Partnered Content</h6>
</div>
</div>
<h2 class="article-title">Cras consequat non mauris posuere finibus</h2>
<div class="article-info-container">
<h5 class="article-meta-info">
<span class="article-author">Writey McWritesStuff </span>
<span class="article-published-date">: 07 December 2016</span>
</h5>
<div class="blog-articles-share-bar">
<h6>Share</h6>
<ul class="inline-list">
<li>
<a class="sharer clickable"
data-sharer="facebook"
data-app_id='Facebook App Id'
data-url="#"
data-description="This is description text">
<svg class="icon facebook">
<use xlink:href="#facebook-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="twitter"
data-url="#"
data-title="This is description text">
<svg class="icon twitter">
<use xlink:href="#twitter-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="googleplus"
data-url="#"
data-title="This is description text">
<svg class="icon google-plus">
<use xlink:href="#google-plus-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="pinterest"
data-url="#"
data-media="http://styleguide.staging.realestate.co.nz/images/media-player/player1.jpg"
data-description="This is description text">
<svg class="icon pinterest">
<use xlink:href="#pinterest-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="email"
data-url="#"
data-description="This is description text">
<svg class="icon email">
<use xlink:href="#email-icon" />
</svg> </a>
</li>
</ul>
</div>
</div>
<img src="/images/blog/800-232-article-header.jpg" alt="Article Header Image" />
</div>
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
<div class="blog-blockquote">
<blockquote cite="#">
“ Aliquaam in diam vitae <br />
nisl psuere malesuada. ”
</blockquote>
<cite class="quote-author">— Smarty McQuotemouth</cite>
<br />
</div>
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
</div>
molecules-block-blog-articles-share-bar
atoms-articles-header-image
<div class="partnered-article-header">
<svg class="icon inspiration">
<use xlink:href="#inspiration-icon" />
</svg>
<div class="partnered-container">
<div class="partnered-box">
<h6 class="partnered-text">Partnered Content</h6>
</div>
</div>
<h2 class="article-title">Cras consequat non mauris posuere finibus</h2>
<div class="article-info-container">
<h5 class="article-meta-info">
<span class="article-author">Writey McWritesStuff </span>
<span class="article-published-date">: 07 December 2016</span>
</h5>
<div class="blog-articles-share-bar">
<h6>Share</h6>
<ul class="inline-list">
<li>
<a class="sharer clickable"
data-sharer="facebook"
data-app_id='Facebook App Id'
data-url="#"
data-description="This is description text">
<svg class="icon facebook">
<use xlink:href="#facebook-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="twitter"
data-url="#"
data-title="This is description text">
<svg class="icon twitter">
<use xlink:href="#twitter-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="googleplus"
data-url="#"
data-title="This is description text">
<svg class="icon google-plus">
<use xlink:href="#google-plus-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="pinterest"
data-url="#"
data-media="http://styleguide.staging.realestate.co.nz/images/media-player/player1.jpg"
data-description="This is description text">
<svg class="icon pinterest">
<use xlink:href="#pinterest-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="email"
data-url="#"
data-description="This is description text">
<svg class="icon email">
<use xlink:href="#email-icon" />
</svg> </a>
</li>
</ul>
</div>
</div>
<img src="/images/blog/800-232-article-header.jpg" alt="Article Header Image" />
</div>
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
“ Aliquaam in diam vitae— Smarty McQuotemouth
nisl psuere malesuada. ”
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
<div class="article">
<div class="article-header">
<h2 class="article-title">Cras consequat non mauris posuere finibus</h2>
<svg class="icon tips">
<use xlink:href="#tips-icon" />
</svg>
<div class="article-info-container">
<h5 class="article-meta-info">
<span class="article-author">Writey McWritesStuff </span>
<span class="article-published-date">: 07 December 2016</span>
</h5>
<div class="blog-articles-share-bar">
<h6>Share</h6>
<ul class="inline-list">
<li>
<a class="sharer clickable"
data-sharer="facebook"
data-app_id='Facebook App Id'
data-url="#"
data-description="This is description text">
<svg class="icon facebook">
<use xlink:href="#facebook-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="twitter"
data-url="#"
data-title="This is description text">
<svg class="icon twitter">
<use xlink:href="#twitter-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="googleplus"
data-url="#"
data-title="This is description text">
<svg class="icon google-plus">
<use xlink:href="#google-plus-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="pinterest"
data-url="#"
data-media="http://styleguide.staging.realestate.co.nz/images/media-player/player1.jpg"
data-description="This is description text">
<svg class="icon pinterest">
<use xlink:href="#pinterest-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="email"
data-url="#"
data-description="This is description text">
<svg class="icon email">
<use xlink:href="#email-icon" />
</svg> </a>
</li>
</ul>
</div>
</div>
<img src="/images/blog/800-232-article-header.jpg" alt="Article Header Image" />
</div>
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
<div class="blog-blockquote">
<blockquote cite="#">
“ Aliquaam in diam vitae <br />
nisl psuere malesuada. ”
</blockquote>
<cite class="quote-author">— Smarty McQuotemouth</cite>
<br />
</div>
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
</div>
molecules-block-blog-articles-share-bar
atoms-articles-header-image
<div class="article-header">
<h2 class="article-title">Cras consequat non mauris posuere finibus</h2>
<svg class="icon tips">
<use xlink:href="#tips-icon" />
</svg>
<div class="article-info-container">
<h5 class="article-meta-info">
<span class="article-author">Writey McWritesStuff </span>
<span class="article-published-date">: 07 December 2016</span>
</h5>
<div class="blog-articles-share-bar">
<h6>Share</h6>
<ul class="inline-list">
<li>
<a class="sharer clickable"
data-sharer="facebook"
data-app_id='Facebook App Id'
data-url="#"
data-description="This is description text">
<svg class="icon facebook">
<use xlink:href="#facebook-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="twitter"
data-url="#"
data-title="This is description text">
<svg class="icon twitter">
<use xlink:href="#twitter-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="googleplus"
data-url="#"
data-title="This is description text">
<svg class="icon google-plus">
<use xlink:href="#google-plus-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="pinterest"
data-url="#"
data-media="http://styleguide.staging.realestate.co.nz/images/media-player/player1.jpg"
data-description="This is description text">
<svg class="icon pinterest">
<use xlink:href="#pinterest-icon" />
</svg> </a>
</li>
<li>
<a class="sharer clickable"
data-sharer="email"
data-url="#"
data-description="This is description text">
<svg class="icon email">
<use xlink:href="#email-icon" />
</svg> </a>
</li>
</ul>
</div>
</div>
<img src="/images/blog/800-232-article-header.jpg" alt="Article Header Image" />
</div>