Header

This pattern contains: molecules-top-bar molecules-search

HTML

									
										<!-- 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">&nbsp;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 -->

Footer

This pattern contains: molecules-footer-nav

HTML

									
										<!-- 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 -->

Media Player

1

2

3

4

5

6

7

8

9
10

11

12

HTML

									
										<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>&times;</b></a>
        </div>
    </div>
</div>

Offers Over $325,000

Prestigious Gordon Place

15 Gordon Place Levin

Listing # LU51606 Listed 13 Sep 2016

Residential House

Auction Wednesday 5 Oct 6:30pm

View Map

Email me similar

Barfoot & Thompson Ltd Mt Albert

Licensed: REAA 2008

HTML

									
										<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 &amp; Thompson Ltd Mt Albert</h5>
        <p>Licensed: REAA 2008</p>

    </div>    

</section>

About This Property

About this property

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.

									
										<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>

Next Open Homes

Next Open Homes +

Click to view Open Home Planner

19 Commodore Court Gulf Harbour Rodney Saturday 24 Sep 1:30pm - 2:00pm +
19 Commodore Court Gulf Harbour Rodney Sunday 25 Sep 1:30pm - 2:00pm +

Download in iCalendar or vCalendar format

HTML

									
										<section class="collapse-container">
    <div class="title-container">
        <a href="#" class="accordion-title"><span>Next Open Homes</span> <i class="collapse-trigger">&#43;</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">&#43;</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>

Key Property Feature

Key Property Features +

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

HTML

									
										<section class="collapse-container">
    <div class="title-container">
        <a href="#" class="accordion-title">Key Property Features <i class="collapse-trigger">&#43;</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>

Auction Info

Auction Info +

Auction Saturday 8 Oct 11:30am

HTML

									
										<section class="collapse-container">
    <div class="title-container">
        <a href="#" class="accordion-title"><span>Auction Info</span> <i class="collapse-trigger">&#43;</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>

Nearby Schools

Nearby Schools +

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

HTML

									
										<section class="collapse-container">
    <div class="title-container">
        <a href="#" class="accordion-title"><span>Nearby Schools</span> <i class="collapse-trigger">&#43;</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>

Agent Details

Agent Details +

Wayne Marmont

M 027 477 2342
W 09 486 1029
View My Profile

Wayne Marmont

M 027 477 2342
W 09 486 1029
View My Profile

HTML

									
										<section class="collapse-container">
    <div class="title-container">
        <a href="#" class="accordion-title"><span>Agent Details</span> <i class="collapse-trigger">&#43;</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>

Broadband Avaliability

Broadband Avaliability +

	Planned	Fibre
	Avaliable	VDSL
	Avaliable	ADSL
	Unavaliable	Wireless

* Data provided by National Broadband Map

HTML

									
										<section class="collapse-container">
    <div class="title-container">
        <a href="#" class="accordion-title">Broadband Avaliability <i class="collapse-trigger">&#43;</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>

Metrics

Reach +

HTML

									
										<section class="collapse-container">
    <div class="title-container">
        <a href="#" class="accordion-title"><span>Reach</span> <i class="collapse-trigger">&#43;</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>

Locale Love

Locale Love +

Palco Cafe

♥ 10

+ Follow

"I've been paleo new for six mon..."

loved by
Kylie B.

⋆

The Frence Cafe

♥ 10

+ Follow

"for people who like real coffee"

loved by
Toni K.

⋆

HTML

									
										<section class="collapse-container">
    <div class="title-container">
        <a href="#" class="accordion-title">Locale Love <i class="collapse-trigger">&#43;</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">&hearts;</span> 10</p>
                        </div>
                        <img class="img-responsive" src="/images/media-player/thumbs/thumbs-proto4.jpg">
                        <div class="brief">
                            <p class="follow">
                                &#43; Follow
                            </p>
                            <p class="blockquote">&quot;I&#39;ve been paleo new for six mon...&quot;</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">&#8902;</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">&hearts;</span> 10</p>
                        </div>
                        <img class="img-responsive" src="/images/media-player/thumbs/thumbs-proto3.jpg">
                        <div class="brief">
                            <p class="follow">&#43; Follow</p>
                            <p class="blockquote">&quot;for people who like real coffee&quot;</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">&#8902;</p>
                        </div>
                    </div>
                </div>

                <div class="show-for-large-up large-4 medium-6 small-6 columns"></div>
            </div>

        </div>
    </div>
</section>

Tools

Calculate your costs with Westpac +

HTML

									
										<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">&#43;</i></a>
    </div>
    <div class="accordion-content" data-tab-content>
    
    <img class="img-responsive" src="/images/mortgage-calculator-tool.png"/>

    </div>
</section>

Enquire About Property

Ask [AGENT NAME/S] about this property +

HTML

									
										<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">&#43;</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>

Similar Properties

Similar Properties Nearby +

Instantly Appealing!

34F Forest Hill Road
Auction

Ready for a revamp - Hot location

36 Waitaki Street
Negotiation

Prestige Section With Building Consent

124 San Valentino Drive
Negotiation

SECURE YOUR FUTURE

Henderson
$629,000

More nearby properties

HTML

									
										<section class="collapse-container">
    <div class="title-container">
        <a href="#" class="accordion-title"><span>Similar Properties Nearby</span> <i class="collapse-trigger">&#43;</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="{
                &quot;id&quot;: &quot;2907176&quot;,
                &quot;name&quot;: &quot;579546&quot;,
                &quot;brand&quot;: &quot;14968&quot;,
                &quot;price&quot;: 0,
                &quot;category&quot;: &quot;residential&quot;,
                &quot;list&quot; : &quot;similar&quot;,
                &quot;variant&quot;: &quot;buy&quot;
                }">
                <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="{
                &quot;id&quot;: &quot;2906282&quot;,
                &quot;name&quot;: &quot;TET24585&quot;,
                &quot;brand&quot;: &quot;14639&quot;,
                &quot;price&quot;: 0,
                &quot;category&quot;: &quot;residential&quot;,
                    &quot;list&quot; : &quot;similar&quot;,
                        &quot;variant&quot;: &quot;buy&quot;
                }">

                <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="{
                &quot;id&quot;: &quot;2904059&quot;,
                &quot;name&quot;: &quot;580451&quot;,
                &quot;brand&quot;: &quot;15004&quot;,
                &quot;price&quot;: 0,
                &quot;category&quot;: &quot;residential&quot;,
                    &quot;list&quot; : &quot;similar&quot;,
                        &quot;variant&quot;: &quot;buy&quot;
                }">
                <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="{
                &quot;id&quot;: &quot;2901810&quot;,
                &quot;name&quot;: &quot;TG005753&quot;,
                &quot;brand&quot;: &quot;196478&quot;,
                &quot;price&quot;: 0,
                &quot;category&quot;: &quot;residential&quot;,
                    &quot;list&quot; : &quot;similar&quot;,
                        &quot;variant&quot;: &quot;buy&quot;
                }">
                <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>

Native Ad

HTML

									
										<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>

Showcase Player