Pattern Lab

Logo

HTML

									
										<a href="#"><img src="../../images/logo.svg" class="logo" alt="Seven Heads Design" onerror="this.onerror=null; this.src='../../images/logo.png'" /></a>

Landscape 4x3

HTML

									
										<img src="../../images/fpo_4x3.png" alt="4x3 Image" />

Landscape 16x9

HTML

									
										<img src="../../images/fpo_16x9.png" alt="16x9 Image" />

Square

HTML

									
										<img src="../../images/fpo_square.png" alt="Square Thumbnail" />

People

HTML

									
										<img src="../../images/people-lg.jpg" alt="People" />

Icons

HTML

									
										<ul class="icons inline-list">
	<li class="icon-twitter"></li>
	<li class="icon-facebook"></li>
	<li class="icon-stumbleupon"></li>
	<li class="icon-linkedin"></li>
	<li class="icon-pinterest"></li>
	<li class="icon-google-plus"></li>
	<li class="icon-youtube"></li>
	<li class="icon-feed"></li>
	<li class="icon-search"></li>
	<li class="icon-play"></li>
</ul>

Loading Icon

HTML

									
										<img src="../../images/ajax-loader.gif" alt="Loading" />

Favicon

HTML

									
										<img src="../../images/favicon_16x16.jpg" />
<img src="../../images/favicon_32x32.jpg" />

Story Image

HTML

									
										<span data-picture data-alt="This is a bridge.">
	<span data-src="../../images/story-image-sm.jpg"></span>
	<span data-src="../../images/story-image-med.jpg"     data-media="(min-width: 33.75em)"></span>
	<span data-src="../../images/story-image.jpg"      data-media="(min-width: 60em)"></span>

	<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
	<noscript>
	<img src="../../images/story-image-sm.jpg" alt="This is a bridge.">
	</noscript>
</span>

Author Image

HTML

									
										<img src="../../images/author-pic.jpg" alt="Kevin Motherflippin Hoffman" />

Hero Image

HTML

									
										<img src="../../images/kevin-hero.png" alt="Kevin Motherflippin Hoffman" />