Base Creative Pattern Lab

Client Logo

HTML

									
										<div class="client-logo">
	<picture>
		<source srcset="../../images/clients/.svg" type="image/svg+xml" />
		<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="../../images/clients/.png 250w, ../../images/clients/@1-5x.png 375w, ../../images/clients/@2x.png 500w" alt="client logo" />
	</picture>
</div>

Favicon

HTML

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

Icons

HTML

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

Loading Icon

HTML

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

Logo Alt

HTML

									
										<div class="logo logo--alt logo--header">
	<picture>
		<!--[if IE 9]><video style="display: none;"><![endif]-->
		<source srcset="../../images/logo_alt.svg" type="image/svg+xml" />
		<!--[if IE 9]></video><![endif]-->
		<img sizes="(min-width: 40em) 30vw, 50vw" src="../../images/logo_alt.png" srcset="../../images/logo_alt.png 490w, ../../images/logo_alt--big.png 760w" alt="Base Creative" />
	</picture>
</div>

Logo

HTML

									
										<div class="logo logo--header">
	<a href="../../patterns/04-pages-homepage/04-pages-homepage.html">
		<picture>
			<!--[if IE 9]><video style="display: none;"><![endif]-->
			<source srcset="../../images/logo.svg" type="image/svg+xml" />
			<!--[if IE 9]></video><![endif]-->
			<img sizes="(min-width: 40em) 30vw, 50vw" src="../../images/logo.png" srcset="../../images/logo.png 490w, ../../images/logo--big.png 760w" alt="Base Creative" />
		</picture>
	</a>
</div>

Member Photo

HTML

									
										<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="//placehold.it/260x260/ffffff.jpg 260w, //placehold.it/320x300/ffffff.jpg 320w, //placehold.it/520x520/ffffff.jpg 520w" alt="" />

Post Cover

HTML

									
										<picture>
	<source media="(min-width: 40em)" sizes="(min-width: 60em) 320px, 48vw" srcset="//placehold.it/320x320/fff.jpg 320w, //placehold.it/640x640/fff.jpg 640w, //placehold.it/1280x1280/fff.jpg 1280w">
	<img sizes="100vw"  alt="post cover" srcset="//placehold.it/320x160/fff.jpg 320w, //placehold.it/640x320/fff.jpg 640w" />
</picture>