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

“You’ve never done that before? You should probably do that then.”

A brief tale in which Kevin learns that what you tell your friends and colleagues matters, even in the most offhand conversations. Read it.

This pattern contains: atoms-hero-image

HTML

									
										<div class="block block-hero">
	<div class="lc">
		<a href="#" class="inner">
			<img src="../../images/kevin-hero.png" alt="Kevin Motherflippin Hoffman" />			<div class="b-text">
				<p class="intro">“You’ve never done that before? You should probably do that then.”</p>
				<p>A brief tale in which Kevin learns that what you tell your friends and colleagues matters, even in the most offhand conversations. <a class="inception" href="#">Read it.</a></p>
			</div>
		</a>
	</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>

People Block

Brad Frost

@brad_frost

Expertise

Front End Development
Usability Studies
Workshops

This pattern contains: atoms-people

HTML

									
										<div class="block block-people">
	<header class="person">
	    <h3>Brad Frost</h3>
		<a href="#">@brad_frost</a>
	</header>
	<div class="expertise">
		<h3>Expertise</h3>
		<ul class="skills">
			<li>Front End Development</li>
			<li>Usability Studies</li>
			<li>Workshops</li>
		</ul>
	</div>
    <img src="../../images/people-lg.jpg" alt="People" /></div>

Block Hero Temporary

Make · Collaborate · Celebrate

About

HTML

									
										<div class="block block-hero block-hero-temporary">
	<div class="lc">
		<div class="temporary-wrapper">
			<div class="inner-block">
				<p class="alpha align-center">Make <span>&#183;</span> Collaborate <span>&#183;</span> Celebrate</p>
				<a class="btn btn-transparent" href="#">About</a>
			</div>
		</div>
	</a>
</div>