Base Creative Pattern Lab

Figure With Caption

This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.

HTML

									
										<figure>
	<figcaption>This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.</figcaption>
</figure>

Share Widget

HTML

									
										<div class="share-widget">
	<ul>
		<li><a href="javascript:window.print()" class="icon icon--print"><span class="icon__text">Print</span></a></li>
		<li><a href="https://twitter.com/home?status=fbvsbsdvsdvsdv" class="icon icon--twitter"><span class="icon__text">Twitter</span></a></li>
		<li><a href="mailto:?&subject=Job&body=sdpobvsopdv" class="icon icon--email"><span class="icon__text">Email</span></a></li>
		<li><a href="https://www.facebook.com/sharer/sharer.php?u=http://test/com" class="icon icon--facebook"><span class="icon__text">Facebook</span></a></li>
		<li><a href="https://plus.google.com/share?url=http://test/com" class="icon icon--google-plus"><span class="icon__text">Google+</span></a></li>
		<li><a href="https://www.linkedin.com/shareArticle?mini=true&url=https://plus.google.com/share?url=http://test/com&title=svsdvsdv&summary=&source=" class="icon icon--linkedin"><span class="icon__text">LinkedIn</span></a></li>
	</ul>
	<div class="share-widget__text">
		84 Shares
	</div>
</div>

Square Instagram

@basecreative

HTML

									
										<div class="square square--image">
	<img src="http://scontent-a.cdninstagram.com/hphotos-xaf1/t51.2885-15/10899547_787639221314730_580056612_n.jpg" alt="instagram">

	<a href="http://instagram.com" target="_blank" class="square__link icon icon--instagram">@basecreative</a>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, velit molestiae, quo voluptate suscipit, facere rem at porro cupiditate pariatur aspernatur eius aliquam. Error aspernatur, consequuntur. Quia voluptate, soluta odit.

Jobs

HTML

									
										<div class="square">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, velit molestiae, quo voluptate suscipit, facere rem at porro cupiditate pariatur aspernatur eius aliquam. Error aspernatur, consequuntur. Quia voluptate, soluta odit.</p>

	<a href="http://twitter.com" target="_blank" class="square__link icon icon--info">Jobs</a>
</div>

Square Twitter

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, velit molestiae, quo voluptate suscipit, facere rem at porro cupiditate pariatur aspernatur eius aliquam. Error aspernatur, consequuntur. Quia voluptate, soluta odit.

Twitter

HTML

									
										<div class="square">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, velit molestiae, quo voluptate suscipit, facere rem at porro cupiditate pariatur aspernatur eius aliquam. Error aspernatur, consequuntur. Quia voluptate, soluta odit.</p>

	<a href="http://twitter.com" target="_blank" class="square__link icon icon--twitter">Twitter</a>
</div>

Figure With Caption

HTML

Share Widget

HTML

Square Instagram

HTML

Square Job

HTML

Square Twitter

HTML