Pattern Lab

This pattern contains: atoms-time

HTML

									
										<div class="block block-headline">
	<a href="#" class="b-inner">
		<h2 class="b-title">Lorem ipsum dolor sit (37 characters)</h2>
		<time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>	</a>
</div>

Block Hero

This is a content section.

Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.

Next Page →

HTML

									
										<div class="row">
	<div class="large-12 columns">
		<p><img src="//placehold.it/1000x400&amp;text=[banner img]"></p>
	</div>
</div>
<div class="row">
	<div class="large-8 columns">
	<h4>This is a content section.</h4>
	<p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
	<p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
	<p><a href="#" class="secondary small button">Next Page →</a></p>
	</div>
	<div class="large-4 columns">
		<ul class="small-block-grid-3">
			<li><a href="#"><img src="//placehold.it/120x120"></a></li>
			<li><a href="#"><img src="//placehold.it/120x120"></a></li>
			<li><a href="#"><img src="//placehold.it/120x120"></a></li>
			<li><a href="#"><img src="//placehold.it/120x120"></a></li>
			<li><a href="#"><img src="//placehold.it/120x120"></a></li>
			<li><a href="#"><img src="//placehold.it/120x120"></a></li>
		</ul>
	</div>
</div>

Block Thumb Headline

Header

Risus ligula, aliquam nec fermentum vitae, sollicitudin eget urna. Donec dignissim nibh fermentum odio ornare sagittis.

99 items in your cart

HTML

									
										<div class="row">
 
	<div class="small-12 columns">
		<img src="//placehold.it/500x500&amp;text=Logo">
		<div class="hide-for-small panel">
			<h3>Header</h3>
			<h5 class="subheader">Risus ligula, aliquam nec fermentum vitae, sollicitudin eget urna. Donec dignissim nibh fermentum odio ornare sagittis.</h5>
			</div>
			<a href="#">
			<div class="panel callout radius">
			<h6>99&nbsp; items in your cart</h6></a>
		</div>
	</div> 
</div>

Block Grid

HTML

									
										<ul class="small-block-grid-3">
  <li><img class="th" src="//placehold.it/600x300"></li>
  <li><img class="th" src="//placehold.it/600x300"></li>
  <li><img class="th" src="//placehold.it/600x300"></li>
</ul>

Block Share Bar

HTML

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

Block Blog Articles Share Bar

HTML

									
										<div class="blog-articles-share-bar">
    <h6>Share</h6>
    <ul class="inline-list">

        <li>
            <a class="sharer clickable"
               data-sharer="facebook"
               data-app_id='Facebook App Id'
               data-url="#"
               data-description="This is description text">
               
               <svg class="icon facebook">
                   <use xlink:href="#facebook-icon" />
               </svg>            </a>
        </li>
        <li>
            <a class="sharer clickable"
               data-sharer="twitter"
               data-url="#"
               data-title="This is description text">
               
               <svg class="icon twitter">
                   <use xlink:href="#twitter-icon" />
               </svg>               </a>
        </li>
        <li>
            <a class="sharer clickable"
               data-sharer="googleplus"
               data-url="#"
               data-title="This is description text">
               
               <svg class="icon google-plus">
                   <use xlink:href="#google-plus-icon" />
               </svg>               </a>
        </li>
        <li>
            <a class="sharer clickable"
               data-sharer="pinterest"
               data-url="#"
               data-media="http://styleguide.staging.realestate.co.nz/images/media-player/player1.jpg"
               data-description="This is description text">
               
               <svg class="icon pinterest">
                   <use xlink:href="#pinterest-icon" />
               </svg>               </a>
        </li>
        <li>
            <a class="sharer clickable"
               data-sharer="email"
               data-url="#"
               data-description="This is description text">
               
               <svg class="icon email">
                   <use xlink:href="#email-icon" />
               </svg>               </a>
        </li>

    </ul>
</div>

Block Thinking Stats

There are currenlty 53 properties on the market in the Eden Terrace with and average asking price of $890,844

HTML

									
										<p>
    There are currenlty 53 properties on the market in the Eden Terrace with and average asking price of $890,844
</p>

Block Thinking Stats Graph

HTML

									
										<div class="thinking-of-selling-graph">
    <canvas id="myChart" height="200"></canvas>
    <div id="chartLegend">

    </div>
</div>

Block Thinking Stats Table

Agents		Currently	Last 12 Months	Average asking price
Sally Potgieter		45 Currently	31 Last 12 Months	$1,959,543 avg asking

HTML

									
										<div class="thinking-of-selling-table">
    <table role="grid">
        <thead>
            <tr>
                <th colspan="2">
                    Agents
                </th>
                <th>
                    Currently
                </th>
                <th>
                    Last 12 Months
                </th>
                <th>
                    Average asking price
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <img class="agent-pic hide-for-small-only" src="/images/featured-agent-photo.jpg" alt="" />
                    <span>Sally Potgieter</span>
                </td>
                <td>
                    <img src="/images/agency-logo-hz.jpg" alt="" />
                </td>
                <td>
                    45 Currently
                </td>
                <td>
                    31 Last 12 Months
                </td>
                <td>
                    $1,959,543 avg asking
                </td>
            </tr>
        </tbody>
    </table>
</div>