Pattern Lab

Block objects

block

block--large

block--small

HTML

									
										<h2>Block objects</h2>


<div class="block bc-grey--light" style="margin-bottom: 1.5em">
	block
</div>

<div class="block--large bc-grey--light" style="margin-bottom: 1.5em">
	block--large
</div>

<div class="block--small bc-grey--light" style="margin-bottom: 1.5em">
	block--small
</div>

Box objects

box

box--large

box--small

HTML

									
										<h2>Box objects</h2>


<div class="box bc-grey--light" style="margin-bottom: 1.5em">
	box
</div>

<div class="box--large bc-grey--light" style="margin-bottom: 1.5em">
	box--large
</div>

<div class="box--small bc-grey--light" style="margin-bottom: 1.5em">
	box--small
</div>

Color Objects

c-base

c-base--dark

c-base--light

c-base--lightest

c-comp

c-comp--dark

c-comp--light

c-comp--lightest

dark

c-grey

c-grey--light

c-grey--lightest

HTML

									
										
<p class="c-base">c-base</p>
<p class="c-base--dark">c-base--dark</p>
<p class="c-base--light">c-base--light</p>
<p class="c-base--lightest">c-base--lightest</p>


<p class="c-comp">c-comp</p>
<p class="c-comp--dark">c-comp--dark</p>
<p class="c-comp--light">c-comp--light</p>
<p class="c-comp--lightest">c-comp--lightest</p>

<p class="c-dark">dark</p>
<p class="c-grey">c-grey</p>
<p class="c-grey--light">c-grey--light</p>
<p class="c-grey--lightest">c-grey--lightest</p>


<p class="bc-base" style="height: 50px; width: 50px"></p>
<p class="bc-comp" style="height: 50px; width: 50px"></p>
<p class="bc-grey" style="height: 50px; width: 50px"></p>

Heading Level 2 - Lorem ipsum dolor sit amet, consectetuer adi piscing elit - OG Title 95 chars

Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Dus autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel - Article OG Description 297 chars.

HTML

									
										<div class="media">
	<figure class="media__img--rev">
 		<img class="img--round" src="http://placeimg.com/60/60/tech" alt="Square Thumbnail" />
    </figure>
    <div class="media__body">
		<h2>Heading Level 2 - Lorem ipsum dolor sit amet, consectetuer adi piscing elit - OG Title 95 chars</h2>
   		<p>Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Dus autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel - Article OG Description 297 chars.</p>
   </div>
</div>

Media

Heading Level 2 - Lorem ipsum dolor sit amet, consectetuer adi piscing elit - OG Title 95 chars

Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Dus autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel - Article OG Description 297 chars.

HTML

									
										<div class="media">
	<figure class="media__img">
 		<img class="img--round" src="http://placeimg.com/60/60/tech" alt="Square Thumbnail" />
    </figure>
    <div class="media__body">
		<h2>Heading Level 2 - Lorem ipsum dolor sit amet, consectetuer adi piscing elit - OG Title 95 chars</h2>
   		<p>Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Dus autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel - Article OG Description 297 chars.</p>
   </div>
</div>

Block

Block objects

HTML

Box

Box objects

HTML

Color Objects

HTML

Media Reverted

Heading Level 2 - Lorem ipsum dolor sit amet, consectetuer adi piscing elit - OG Title 95 chars

HTML

Media

Heading Level 2 - Lorem ipsum dolor sit amet, consectetuer adi piscing elit - OG Title 95 chars

HTML