Base Creative Pattern Lab

Contact Us

HTML

									
										<div class="bg--darker context-widget">
	<div class="text">
		<h3>Would you like to work with us?</h3>
		<p>Talk to Iain Scott to get a picture of how we could work together.</p>
	</div>
	<a href="../../patterns/04-pages-contact/04-pages-contact.html" class="button">Get in touch</a>
</div>

Filter

Subjects
Authors
- Item
- Item
- Item
- Item
- Item
- Item
Dates
- Item
- Item
- Item
- Item
- Item
- Item

HTML

									
										<div class="filter">
	<span class="filter__title">Filter</span>
	<ul class="filter__panels">
		<li class="filter__default">
			<a href="#" class="filter__handle">Subjects</a>
			<div class="fpanel">
				<ul>
					<li><a class="active" data-count="120" href="#">All</a></li>
					<li><a data-count="27" href="#">Content Strategy</a></li>
					<li><a data-count="8" href="#">Design</a></li>
					<li><a data-count="5" href="#">Life &amp; culture</a></li>
					<li><a data-count="10" href="#">Mobile</a></li>
					<li><a data-count="72" href="#">Online marketing</a></li>
				</ul>
			</div>
		</li>
		<li>
			<a href="#" class="filter__handle">Authors</a>
			<div class="fpanel">
				<ul>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
				</ul>
			</div>
		</li>
		<li>
			<a href="#" class="filter__handle">Dates</a>
			<div class="fpanel">
				<ul>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
				</ul>
			</div>
		</li>
	</ul>
</div>

Share Pinterest

Share on Pinterest

HTML

									
										<a class="icon icon--pinterest square__link" target="_blank" href="//es.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&amp;media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&amp;description=Next%20stop%3A%20Pinterest" data-pin-do="buttonBookmark"  data-pin-color="red" data-pin-height="28">
	<span class="icon__text">Share on Pinterest</span>
</a>

Social Share

HTML

									
										<div class="social-share">
	<ul class="social-share-list">
		<li><a href="#">Like</a></li>
		<li><a href="#">Tweet</a></li>
		<li><a href="#">Email</a></li>
		<li><a href="#">Comment</a></li>
	</ul>
</div>