Top Bar
HTML
<div class="row collapse header-nav">
<div class="small-12 columns">
<nav class="top-bar">
<div class="small-5 columns text-left logo-btn">
<a class="logo" href="/">
<svg class="sprite-logo show-for-medium">
<use xlink:href="#re-logo-hz-v2" />
</svg>
<svg class="logo symbol-mobile show-for-small-only">
<use xlink:href="#re-symbol" />
</svg>
</a>
</div>
<div class="small-7 columns">
<div class="row">
<div class="small-4 columns">
<div class="lock-box search-btn">
<a class="search-icon" href="#">
<svg class="icon property-search">
<use xlink:href="#property-search-icon">
</svg>
</a>
<a class="text-below show-for-medium" href="#"><span class="show-for-medium">Search</span>
<svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon">
</svg>
</a>
</div>
</div>
<div class="small-4 columns">
<div class="lock-box content-btn float-right" data-toggle="blog-dropmenu" aria-controls="blog-dropmenu" aria-expanded="false">
<a class="content-icon" href="#">
<svg class="icon agency">
<use xlink:href="#agency-icon">
</svg>
</a>
<a class="text-below show-for-medium" href="#">Our Blog
<svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon">
</svg>
</a>
</div>
<ul id="blog-dropmenu" class="dropdown-pane small bottom" data-dropdown data-hover="true" data-hover-pane="true" aria-hidden="true" tabindex="-1">
<li><a href="#">Blog</a></li>
<li><a href="#">Finance Tips</a></li>
<li><a href="#">Buyer's Guide</a></li>
<li><a href="#">Sellers Guide</a></li>
</ul>
</div>
<div class="small-4 columns">
<div class="lock-box user-btn float-right" data-toggle="user-dropmenu" aria-controls="user-dropmenu" aria-expanded="false">
<a class="user-icon" href="#">
<svg class="icon user">
<use xlink:href="#user-icon" />
</svg>
</a>
<a class="text-below show-for-medium" href="#">
My property
<svg class="icon down-arrow">
<use xlink:href="#down-arrow-icon">
</svg>
</a>
</div>
<ul id="user-dropmenu" class="dropdown-pane small bottom" data-dropdown data-hover="true" data-hover-pane="true" aria-hidden="true" tabindex="-1">
<li><a href="#">Login</a></li>
<li><a href="#">Sign Up</a></li>
<li>
<a href="#">My Property</a>
<ul class="sub-menu">
<li><a href="#">Saved Properties</a></li>
<li><a href="#">Saved Searches and Alerts</a></li>
<li><a href="#">Open Home Planner</a></li>
<li><a href="#">My Account</a></li>
</ul>
</li>
<li><a href="#">Seller's Tool</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="channel-bar">
<div class="title-bar" data-responsive-toggle="categories-menu" data-hide-for="medium">
<button type="button" data-toggle="example-menu">Browse Categories</button>
</div>
<ul id="categories-menu" class="vertical medium-horizontal menu expanded" data-responsive-menu="drilldown medium-dropdown">
<li class="residential">
<a href="#">Residential</a>
<ul class="vertical menu">
<li><a href="#">For Sale</a></li>
<li><a href="#">For Rental</a></li>
</ul>
</li>
<li class="commercial">
<a href="#">Commercial</a>
<ul class="vertical menu">
<li><a href="#">For Sale</a></li>
<li><a href="#">For Lease</a></li>
</ul>
</li>
<li class="rural"><a href="#">Rural</a></li>
<li class="business"><a href="#">Business</a></li>
</ul>
</div>
</div>
</div>
Footer Nav
Explore
My Property
About Realestate.co.nz
Our related sites
HTML
<!-- 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 -->
Breadcrumbs
HTML
<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>
Pagination
HTML
<ul class="pagination">
<li class="arrow unavailable"><a href="">«</a></li>
<li class="current"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li class="unavailable"><a href="">…</a></li>
<li><a href="">12</a></li>
<li><a href="">13</a></li>
<li class="arrow"><a href="">»</a></li>
</ul>
Tabs
HTML
<dl class="tabs" data-tab role="tablist">
<dd class="tab-title active"><a href="#panel1" role="tab">Login</a></dd>
<dd><a href="#panel2">Content</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel1">
<ul class="no-bullet multi-menu">
<li><a href="#">Login</a></li>
<li><a href="#">Sign Up</a></li>
<li class="nested">
<a class="submenu-trigger" href="#">My Properties ></a>
<ul class="sub-menu">
<li class="back-to-parent"><h5>Back</h5></li>
<li><a href="#">Saved Properties</a></li>
<li><a href="#">Saved Searches and Alerts</a></li>
<li><a href="#">Open Home Planner</a></li>
<li><a href="#">My Account</a></li>
</ul>
</li>
<li><a href="#">Seller's Tool</a></li>
</ul>
</div>
<div class="content" id="panel2">
<ul class="no-bullet">
<li>
<a href="#">Blog ></a>
</li>
<li><a href="#">Finance Tips</a></li>
<li><a href="#">Buyer's Guide</a></li>
<li><a href="#">Sellers Guide</a></li>
</ul>
</div>
</div>
Save Search
This pattern contains:
atoms-email-plus-icon
HTML
<!-- save this search -->
<ul class="saveFeedBTNS">
<li class="hide">
<form id="save_search" method="post" class="hidden" action="/account/save-search">
<fieldset>
<input type="hidden" class="uri" name="uri" value="eyJMaXN0aW5nVHlwZXMiOlsxXSwiRGlzcGxheSI6eyJTdGFydCI6MCwiTGltaXQiOjIwLCJTb3J0IjoibGF0ZXN0IiwiTW9kZSI6Imxpc3QiLCJCcmVha0Rvd24iOlsic3VidXJiIiwiZGlzdHJpY3QiLCJyZWdpb24iXSwiVHlwZSI6InN0YW5kYXJkIn19" />
</fieldset>
</form>
</li>
<li class="save">
<a class="saved saveSearchBTN " href="/account/my-searches">
<svg class="icon share-with-email">
<use xlink:href="#share-with-email-icon" />
</svg><span class="save-search-text">Search saved</span></a>
</li>
</ul>
<!-- / save this search -->
Results Display Controls
Save search to get updates
HTML
<div class="results-display-container">
<ul class="menu simple results-display-control">
<li>
<ul class="button-group radius">
<li><a class="button trigger"><input type="radio" name="display_mode" value="list"><svg class="icon list-view">
<use xlink:href="#list-view-icon" />
</svg></a></li>
<li><a class="button trigger active"><input type="radio" name="display_mode" value="grid" checked="checked"><svg class="icon grid-view">
<use xlink:href="#grid-icon" />
</svg></a></li>
<li><a class="button trigger"><input type="radio" name="display_mode" value="map"><svg class="icon map-view">
<use xlink:href="#map-icon" />
</svg>
</a></li>
</ul>
</li>
<li>
<select id="sort-trigger" name="sort_order" class="clickable trigger">
<option value="latest">Latest</option>
<option value="lowest">Lowest Price</option>
<option value="highest">Highest</option>
<option value="featured">Featured First</option>
<option value="popular">Most Popular</option>
</select>
</li>
<li>
<select id="perpage-trigger" name="listings_per_page" class="clickable trigger">
<option value="20">20 per page</option>
<option value="40">40 per page</option>
<option value="80">80 per page</option>
</select>
</li>
<li>
<b id="save-search-trigger" class="clickable save-search-button trigger"><img src="/images/save-search-icon.png" alt="Saved Search Icon"/> Save search to get updates</b>
</li>
</ul>
</div>
Blog Navbar
HTML
<div class="expanded row">
<div class="hide-for-small columns blog-nav">
<!-- Mobile Nav starts -->
<nav class="hide-for-medium-up mobile-blog-bar">
<ul class="mobile-blog-navigation">
<li class="news-blog">
<a class="news-blog-link" href="/">
News
</a>
</li>
<li class="tips-blog">
<a class="tips-blog-link" href="/">
Tips & Guides
</a>
</li>
<li class="inspiration-blog">
<a class="inspiration-blog-link" href="/">
Inspiration
</a>
</li>
<li class="agents-blog">
<a class="agents-blog-link" href="/">
Agents
</a>
</li>
</ul>
</nav>
<!-- Mobile Nav ends -->
<nav class="show-for-medium-up desktop-blog-bar">
<ul class="desktop-blog-navigation">
<li class="news-blog">
<a class="news-blog-link" href="/">
<svg class="icon show-for-medium-up">
<use xlink:href="#news-icon" />
</svg>
<span class="nav-text">News</span>
</a>
</li>
<li class="tips-blog">
<a class="tips-blog-link" href="/">
<svg class="icon show-for-medium-up">
<use xlink:href="#tips-icon" />
</svg>
<span class="nav-text">Tips & Guides</span>
</a>
</li>
<li class="inspiration-blog">
<a class="inspiration-blog-link" href="/">
<svg class="icon show-for-medium-up">
<use xlink:href="#inspiration-icon" />
</svg>
<span class="nav-text">Inspiration</span>
</a>
</li>
<li class="keyword-search-blog show-for-large-up">
<input placeholder="Search Articles" type="text">
<button class="search-icon-box-button">
<svg class="icon">
<use xlink:href="#search-magnify-icon" />
</svg>
</button>
</li>
<li class="agents-blog">
<a class="agents-blog-link" href="/">
<svg class="icon show-for-medium-up">
<use xlink:href="#max-tenants-icon" />
</svg>
<span class="nav-text">Agents</span>
</a>
</li>
</ul>
</div>
</div>