Pattern Lab

Media Block

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This pattern contains: atoms-square

HTML

									
										<div class="block block-thumb">
    <a href="#" class="b-inner">
		<div class="b-thumb">
			<img src="../../images/fpo_square.png" alt="Square Thumbnail" />		</div>
		<div class="b-text">
			<h2 class="headline">Lorem ipsum dolor sit (37 characters)</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>
	</a>
</div>

Headline Byline

Headline: Lorem Ipsum Dolor Amet Sit

2 weeks ago

This pattern contains: atoms-time

HTML

									
										<div class="block block-headline">
	<a href="#">
		<h2 class="headline">Headline: Lorem Ipsum Dolor Amet Sit</h2>
		<time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>	</a>
</div>

Block Hero

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

This pattern contains: atoms-landscape-16x9

HTML

									
										<div class="block block-hero">
	<a href="#" class="inner">
		<div class="b-thumb">
			<img src="../../images/fpo_16x9.png" alt="16x9 Image" />		</div>
		<div class="b-text">
			<h2 class="headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
		</div>
	</a>
</div>

Block Thumb Headline

Pattern Lab

This pattern contains: atoms-square

HTML

									
										<div class="block block-thumb">
	<a href="#" class="b-inner">
		<div class="b-thumb">
			<img src="../../images/fpo_square.png" alt="Square Thumbnail" />		</div>
		<div class="b-text">
			<h2 class="headline">Pattern Lab</h2>
		</div>
	</a>
</div>

Headline Only

Headline: Lorem ipsum dolor sit amet, consectetur adipiscing elit

HTML

									
										<div class="block block-headline">
	<a href="#">
		<h2 class="headline">Headline: Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
	</a>
</div>

Inset Block

Lorem ipsum dolor sit (37 characters)

This pattern contains: atoms-landscape-4x3

HTML

									
										<div class="block block-inset">
    <a href="#" class="inner">
		<div class="b-thumb">
			<img src="../../images/fpo_4x3.png" alt="4x3 Image" />		</div>
		<div class="b-text">
			<h2 class="headline">Lorem ipsum dolor sit (37 characters)</h2>
		</div>
	</a>
</div>

Tainan Block

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This pattern contains: atoms-square

HTML

									
										<div class="block block-thumb">
    <a href="#" class="b-inner">
		<div class="b-thumb">
			<img src="../../images/fpo_square.png" alt="Square Thumbnail" />		</div>
		<div class="b-text">
			<h2 class="headline">Lorem ipsum dolor sit (37 characters)</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>
	</a>
</div>