Colors

#040707
#433f3e
#747874
#c9332b
#f7ea0c
#e2e7e1

HTML

									
										<ul class="sg-colors">
	<li>
		<span class="sg-swatch" style="background: #040707;"></span>
		<span class="sg-label">#040707</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #433f3e;"></span>
		<span class="sg-label">#433f3e</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #747874;"></span>
		<span class="sg-label">#747874</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #c9332b;"></span>
		<span class="sg-label">#c9332b</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #f7ea0c;"></span>
		<span class="sg-label">#f7ea0c</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #e2e7e1;"></span>
		<span class="sg-label">#e2e7e1</span>
	</li>
</ul>

Fonts

Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Secondary font: Georgia, Times, "Times New Roman", serif;

Secondary font italic: Georgia, Times, "Times New Roman", serif;

Secondary font bold; Georgia, Times, "Times New Roman", serif;

HTML

									
										<p>Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;</p>
<p><em>Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;</em></p>
<p><strong>Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;</strong></p>
<p class="font-secondary">Secondary font: Georgia, Times, "Times New Roman", serif;</p>
<p class="font-secondary"><em>Secondary font italic: Georgia, Times, "Times New Roman", serif;</em></p>
<p class="font-secondary"><strong>Secondary font bold; Georgia, Times, "Times New Roman", serif;</strong></p>

Animations

Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)

Movement: Duration: 0.8s Easing: ease-in-out; (Hover to see effect)

HTML

									
										<div class="demo-animate animate-fade"><strong>Fade:</strong> Duration: 0.3s Easing: ease-out (Hover to see effect)</div>

<div class="demo-animate animate-move"><div class="demo-shape"></div><strong>Movement:</strong> Duration: 0.8s  Easing: ease-in-out; (Hover to see effect)</div>

Visibility

This text is hidden on smaller screens

This text is only visible on smaller screens

This text is hidden on medium screens only

This text is only visible on medium screens

This text is hidden on large screens

This text is only visible on large screens

HTML

									
										<p class="hide-small">This text is hidden on smaller screens</p>

<p class="hide-med hide-large"><em>This text is only visible on smaller screens</em></p>

<p class="hide-med">This text is hidden on medium screens only</p>

<p class="hide-small hide-large"><em>This text is only visible on medium screens</em></p>

<p class="hide-large">This text is hidden on large screens</p>

<p class="hide-small hide-med"><em>This text is only visible on large screens</em></p>

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

HTML

									
										<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>  
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5> 
<h6>Heading Level 6</h6>

Subheading Level 1

Subheading Level 2

Subheading Level 3

Subheading Level 4

Subheading Level 5

Subheading Level 6

HTML

									
										<h1 class="subheading">Subheading Level 1</h1>
<h2 class="subheading">Subheading Level 2</h2>
<h3 class="subheading">Subheading Level 3</h3>  
<h4 class="subheading">Subheading Level 4</h4>
<h5 class="subheading">Subheading Level 5</h5> 
<h6 class="subheading">Subheading Level 6</h6>

Heading 1 with link

Heading 2 with link

HTML

									
										<h1><a href="#">Heading 1 with link</a></h1>
<h2><a href="#">Heading 2 with link</a></h2>
<h3><a href="#">Heading 3 with link</a></h3>  
<h4><a href="#">Heading 4 with link</a></h4>
<h5><a href="#">Heading 5 with link</a></h5> 
<h6><a href="#">Heading 6 with link</a></h6>

So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

HTML

									
										<p>So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.</p>

Blockquote

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

HTML

									
										<blockquote>
	<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
</blockquote>

Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

~~This text is deleted~~ and This text is inserted

~~This text has a strikethrough~~

Superscript^®

Subscript for things like H₂O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variarble element, such as x = y

HTML

									
										<div class="text">
	<p><a href="#">This is a text link</a></p>

	<p><strong>Strong is used to indicate strong importance</strong></p>

	<p><em>This text has added emphasis</em></p>

	<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>

	<p>The <i>i element</i> is text that is set off from the normal text</p>

	<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>

	<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>

	<p><s>This text has a strikethrough</s></p>

	<p>Superscript<sup>®</sup></p>

	<p>Subscript for things like H<sub>2</sub>O</p>

	<p><small>This small text is small for for fine print, etc.</small></p>

	<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>

	<p>Keybord input: <kbd>Cmd</kbd></p>

	<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>

	<p><cite>This is a citation</cite>

	</p><p>The <dfn>dfn element</dfn> indicates a definition.</p>

	<p>The <mark>mark element</mark> indicates a highlight</p>

	<p><code>This is what inline code looks like.</code></p>

	<p><samp>This is sample output from a computer program</samp></p>

	<p>The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p>
</div><!--end .text-->

Time

2 weeks ago

HTML

									
										<time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>

Preformatted Text

  	
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

HTML

									
										<pre>  	
P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 
</pre>

Emphasis Colors

This is what error text looks like

This is what valid text looks like

This is what warning text looks like

This is what information text looks like.

HTML

									
										<p class="error">This is what error text looks like</p>
<p class="valid">This is what valid text looks like</p>
<p class="warning">This is what warning text looks like</p>
<p class="information">This is what information text looks like.</p>

Hr

HTML

									
										<hr />

Caption

A caption can be applied to an image, quote, form field, etc.

HTML

									
										<p class="caption">A caption can be applied to an image, quote, form field, etc.</p>

Unordered

This is a list item in an unordered list
An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
This is the last list item

HTML

									
										<div class="text">
	<ul>
		<li>This is a list item in an unordered list</li>
		<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
		<li>
			Lists can be nested inside of each other
			<ul>
				<li>This is a nested list item</li>
				<li>This is another nested list item in an unordered list</li>
			</ul>
		</li>
		<li>This is the last list item</li>
	</ul>
</div>

Ordered

This is a list item in an ordered list
An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
Lists can be nested inside of each other
1. This is a nested list item
2. This is another nested list item in an ordered list
This is the last list item

HTML

									
										<div class="text">
	<ol>
		<li>This is a list item in an ordered list</li>
		<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
		<li>
			Lists can be nested inside of each other
			<ol>
				<li>This is a nested list item</li>
				<li>This is another nested list item in an ordered list</li>
			</ol>
		</li>
		<li>This is the last list item</li>
	</ol>
</div>

Definition

Definition List: A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.: This is the definition of that term, which both live in a dl.
Here is another term.: And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.: And it gets a definition too, which is this line.

HTML

									
										<dl>
	<dt>Definition List</dt>
	<dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
    <dt>This is a term.</dt>
    <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
    <dt>Here is another term.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
    <dt>Here is term that shares a definition with the term below.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
</dl>

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" />

Text Fields

Text Input *

Password

Web Address

Email Address

Search

Number Input *

Textarea

Error Input

Valid

HTML

									
										<fieldset>
    <div class="field-container">
        <label for="text">Text Input <abbr title="Required">*</abbr></label>
        <input id="text" type="text" placeholder="Text Input">
    </div>
    <div class="field-container">
        <label for="password">Password</label>
        <input id="password" type="password" placeholder="Type your Password">
    </div>
    <div class="field-container">
        <label for="webaddress">Web Address</label>
        <input id="webaddress" type="url" placeholder="http://yoursite.com">
    </div>
    <div class="field-container">
        <label for="emailaddress">Email Address</label>
        <input id="emailaddress" type="email" placeholder="name@email.com">
    </div>
    <div class="field-container">
        <label for="search">Search</label>
        <input id="search" type="search" placeholder="Enter Search Term">
    </div>
    <div class="field-container">
        <label for="text">Number Input <abbr title="Required">*</abbr></label>
        <input id="text" type="number" placeholder="Enter a Number" pattern="[0-9]*">
    </div>
    <div class="field-container">
        <label for="textarea">Textarea</label>
        <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
    </div>
    <div class="field-container">
        <label class="error">Error Input</label>
        <input class="is-error" type="text" placeholder="Text Input">
    </div>
    <div class="field-container">
        <label  class="valid">Valid</label>
        <input  class="is-valid" type="text" placeholder="Text Input">
    </div>
</fieldset>

Select Menu

Select

HTML

									
										<fieldset>
    <div class="field-container">
        <label for="select">Select</label>
        <select id="select">
            <optgroup label="Option Group">
                <option>Option One</option>
                <option>Option Two</option>
                <option>Option Three</option>
            </optgroup>
        </select>
    </div>
</fieldset>

Checkbox

HTML

									
										<form action="#">
    <fieldset class="options">
        <legend>Checkbox <abbr title="Required">*</abbr></legend>
        <ul>
            <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
            <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
            <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
        </ul>
    </fieldset>
</form>

Radio Buttons

HTML

									
										<form action="#">
    <fieldset class="options">
        <legend>Radio</legend>
        <ul>
            <li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
            <li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
            <li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
        </ul>
    </fieldset>
</form>

Html5 Inputs

Color input

Number input

Range input

Date input

Month input

Week input

Datetime input

Datetime-local input

HTML

									
											<fieldset>
    <div class="field-container"><label for="ic">Color input</label> <input type="color" id="ic" value="#000000"></div>
    <div class="field-container"><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></div>
    <div class="field-container"><label for="ir">Range input</label> <input type="range" id="ir" value="10"></div>
    <div class="field-container"><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></div>
    <div class="field-container"><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></div>
    <div class="field-container"><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></div>
    <div class="field-container"><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></div>
    <div class="field-container"><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></div>
</fieldset>

Inline Form Fields

Hello, Your name .

HTML

									
										<p>Hello, <label class="is-vishidden" for="name">Your name</label>
        <input class="inline" id="name" type="text" placeholder="Your name">.</p>

Buttons

HTML

									
										<p><a href="#" class="btn btn-large">Large Button</a></p>
<p><a href="#" class="btn btn-med">Medium Button</a></p>
<p><a href="#" class="btn">Small Button</a></p>
<p><a href="#" class="text-btn">Text Button</a></p>

Table

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

HTML

									
										<table>
	<thead>
		<tr>
			<th>Table Heading 1</th>
			<th>Table Heading 2</th>
			<th>Table Heading 3</th>
			<th>Table Heading 4</th>
			<th>Table Heading 5</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Table Footer 1</th>
			<th>Table Footer 2</th>
			<th>Table Footer 3</th>
			<th>Table Footer 4</th>
			<th>Table Footer 5</th>
		</tr>
	</tfoot>
	<tbody>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	</tbody>
</table>

Byline Author Only

A story by: Author Name Read more by Kevin

This pattern contains: atoms-author-image

HTML

									
										<div class="byline">
	<img src="../../images/author-pic.jpg" alt="Kevin Motherflippin Hoffman" />	<em>A story by:</em> Author Name
	<a class="more-by" href="#">Read more by Kevin</a>
</div>

Byline Author Time

by Author Name on June 3rd

HTML

									
										<div class="byline">by Author Name on <time datetime="2013-04-06T12:32+00:00">June 3rd</time></div>

Address

Company Name

1234 Main St.

Anywhere, 101010, CA

U.S.A

+1.888.123.4567

HTML

									
										<div class="vcard">
	<div class="org">Company Name</div>
	<div class="adr">
		<div class="street-address">1234 Main St.</div>
		<span class="locality">Anywhere</span>,
		<span class="postal-code">101010</span>,
		<abbr class="region" title="California">CA</abbr>
		<div class="country-name">U.S.A</div>
	</div>
	<div class="tel">+1.888.123.4567</div>
</div>

Heading Group

This is the heading group's main heading

This is the heading group's subheading

HTML

									
										<div class="hgroup">
   	<h2>This is the heading group's main heading</h2>
   	<h3>This is the heading group's subheading</h3>
</div>

Blockquote With Citation

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.
Quote Source

HTML

									
										<blockquote>
   	<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation. </p>
	<cite class="citation">Quote Source</cite>
</blockquote>

Intro Text

The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.

HTML

									
										<p class="intro">The intro text may be a <strong>lead-in</strong> to the passage of text, or it may just be used to create a visual distinction between the <strong>rest of the passage</strong> of text.</p>

Pullquote

A pull quote is a quotation or excerpt from an article. 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.

HTML

									
										<p><span class="pullquote-right" data-pullquote="A pull quote is a quotation or excerpt from an article.">A pull quote is a quotation or excerpt from an article.</span> 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.</p>

Twitter Link

Follow Seven Heads Design on Twitter

HTML

									
										<p><a class="twitter" href="http://twitter.com/7headsdesign">Follow Seven Heads Design on Twitter</a></p>

One Up

1/1

HTML

									
										<div class="demo">
	<!--Grid 1up-->
	<div class="g g-1up">
		<div class="gi">1/1</div>
	</div>
	<!--End Grid 1up-->		
</div><!--end .demo-->

Two Up

1/2

HTML

									
										<div class="demo">
	<!--Grid 2up-->
	<div class="g g-2up">
		<div class="gi">1/2</div>
		<div class="gi">1/2</div>
	</div>
</div>

Three Up

1/3

HTML

									
										<div class="demo">
	<!--Grid 3up-->
	<div class="g g-3up">
		<div class="gi">1/3</div>
		<div class="gi">1/3</div>
		<div class="gi">1/3</div>
	</div>
</div>

Four Up

1/4

HTML

									
										<div class="demo">
	<!--Grid 4up-->
	<div class="g g-4up">
		<div class="gi">1/4</div>
		<div class="gi">1/4</div>
		<div class="gi">1/4</div>
		<div class="gi">1/4</div>
	</div>
</div>

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>

Figure With Caption

This pattern contains: atoms-landscape-4x3

HTML

									
										<figure>
	<img src="../../images/fpo_4x3.png" alt="4x3 Image" />	<figcaption>This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.</figcaption>
</figure>

Story Image Credits

Image courtesy of wikimedia commons

This pattern contains: atoms-story-image

HTML

									
										<figure>
	<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>	<figcaption class="lc">
		<small>Image courtesy of <a href="#">wikimedia commons</a></small>
	</figcaption>
</figure>

Search

HTML

									
										<form action="#" method="post" class="inline-form search-form">           
    <fieldset>
	    <legend class="is-vishidden">Search</legend>
	    <label for="search-field" class="is-vishidden">Search</label>
	    <input type="search" placeholder="Search" id="search-field" class="search-field" />
	    <button class="search-submit">
	    	<span class="icon-search" aria-hidden="true"></span>
	    	<span class="is-vishidden">Search</span>
	    </button>
    </fieldset>
</form>

Comment Form

HTML

									
										<form method="post" action="#" class="comment-form">
	<fieldset>
		<div class="field-container">
			<label for="comment-name">Name</label>
			<input id="comment-name" type="text" placeholder="Enter Your Name" />
		</div>
		<div class="field-container">
			<label for="comment-email">Email</label>
			<input id="comment-email" type="email" placeholder="Your email address" />
		</div>
		<div class="field-container">
			<label for="comment-url">URL</label>
			<input id="comment-url" type="url" placeholder="Website if you got one" />
		</div>
		<div class="field-container">
			<label for="comment-field">Comment</label>
			<textarea id="comment-field" rows="5" placeholder="Write you comment here"></textarea>
		</div>
	</fieldset>
</form>

Newsletter

HTML

									
										<form action="#" method="post" class="inline-form newsletter-form">           
    <fieldset>
	    <legend>Sign up for our newsletter</legend>
	    <label for="newsletter-scope">Sign up for our newsletter</label>
	    <div class="inline-container">
	   		<input type="newsletter" placeholder="E-mail address" id="newsletter-field" class="newsletter-field" />
	    	<button class="btn newsletter-submit">Sign Me Up</button>
		</div>
    </fieldset>
</form>

Primary Nav

HTML

									
										<nav id="nav" class="nav">
	<ul>
		<li><a class="curPage" href="#">About</a></li>
		<li><a href="#">People &amp; Partners</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav><!--end .nav-->

Footer Nav

HTML

									
										<ul class="nav-footer">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Contact</a></li>
</ul>

Breadcrumbs

HTML

									
										<ul class="breadcrumbs">
	<li><a href="#">Grandparent</a></li>
	<li><a href="#">Parent</a></li>
	<li><a href="#">Child</a></li>
	<li><a href="#">Grandchild</a></li>
	<li><a href="#">Great-Grandchild</a></li>
</ul>

Pagination

1
2
3
4
5
6
7

HTML

									
										<ol class="pagination">
	<li class="current"><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">6</a></li>
	<li><a href="#">7</a></li>
</ol>

Tabs

HTML

									
										<div class="tabs">
	<ul class="tab-list">
		<li><a href="#" class="active">Tab 1</a></li>
		<li><a href="#">Tab 2</a></li>
		<li><a href="#">Tab 3</a></li>
	</ul>
</div>

Social Share

HTML

									
										<div class="social-share">
	<ul class="social-share-list">
		<li><a href="#">Like</a></li>
		<li><a href="#">Tweet</a></li>
		<li><a href="#">Email</a></li>
		<li><a href="#">Comment</a></li>
	</ul>
</div>

Accordion

HTML

									
										<div class="accordion">
	<ul>
		<li>
			<a href="#" class="acc-handle">Accordion 1</a>
			<div class="acc-panel">
			</div>
		</li>
		<li>
			<a href="#" class="acc-handle">Accordion 2</a>
			<div class="acc-panel">
			</div>
		</li>
		<li>
			<a href="#" class="acc-handle">Accordion 3</a>
			<div class="acc-panel">
			</div>
		</li>
	</ul>
</div>

Single Comment

Lacy Way

So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

HTML

									
										<li class="comment-container">
	<div class="comment-meta">
		<h4 class="comment-name"><a href="#">Lacy Way</a></h4>
	</div>
	<div class="comment-text">
		<p>So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.</p>
	</div>
</li>

Header

This pattern contains: atoms-logo molecules-primary-nav

HTML

									
										<!-- Begin .header -->
<header class="header cf" role="banner" id="top">
	<a href="#"><img src="../../images/logo.svg" class="logo" alt="Seven Heads Design" onerror="this.onerror=null; this.src='../../images/logo.png'" /></a>
	<nav id="nav" class="nav">
		<ul>
			<li><a class="curPage" href="#">About</a></li>
			<li><a href="#">People &amp; Partners</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav><!--end .nav-->
	<a id="toggle" href="#nav"><span><b class="is-vishidden">Menu</b></span></a>
</header>
<!-- End .header -->

Footer

This pattern contains: molecules-twitter-link

HTML

									
										<!-- Begin Footer -->
<footer class="footer" role="contentinfo">
	<div class="lc">
		<p><a class="twitter" href="http://twitter.com/7headsdesign">Follow Seven Heads Design on Twitter</a></p>
		<div class="copyright">
			<p>All content &copy;2013-2014 Seven Heads Design unless otherwise noted.</p>
			<p>Site by <a href="http://kevinsharon.com/">Kevin</a>, <a href="http://timkadlec.com/">Tim</a>, <a href="http://kevinmhoffman.com/">Kevin</a>, and <a href="http://danielmall.com/">Dan</a>.</p>
		</div>
	</div>
</footer>
<!-- End Footer -->

Article Body

Aliquam erat volutpat. Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.

Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.

This is a list item in an unordered list
An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
This is the last list item

This is a list item in an ordered list
An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
Lists can be nested inside of each other
1. This is a nested list item
2. This is another nested list item in an ordered list
This is the last list item

Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus.

A pull quote is a quotation or excerpt from an article. 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.

Donec venenatis imperdiet tortor, vitae blandit odio interdum ut. Integer orci metus, lobortis id lacinia eget, rutrum vitae justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In pretium fermentum justo nec pharetra. Maecenas eget dapibus justo. Ut quis est risus. Nullam et eros at odio commodo venenatis quis et augue. Sed sed augue at tortor porttitor hendrerit nec ut nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sollicitudin enim consectetur mi commodo quis cursus ante pretium. Nunc gravida cursus nisi in gravida. Suspendisse eget tortor sed urna consequat tincidunt. Etiam eget convallis lectus. Suspendisse cursus rutrum massa ac faucibus.

H4 Headline

Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus.

H3 Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?

This pattern contains: atoms-landscape-16x9 atoms-blockquote atoms-unordered atoms-ordered molecules-pullquote

HTML

									
										<div class="entry-content">
<p><a href="#">Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.</p>

<img src="../../images/fpo_16x9.png" alt="16x9 Image" />
<p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.
</p>

<blockquote>
	<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
</blockquote>
<p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.
</p>

<div class="text">
	<ul>
		<li>This is a list item in an unordered list</li>
		<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
		<li>
			Lists can be nested inside of each other
			<ul>
				<li>This is a nested list item</li>
				<li>This is another nested list item in an unordered list</li>
			</ul>
		</li>
		<li>This is the last list item</li>
	</ul>
</div>
<div class="text">
	<ol>
		<li>This is a list item in an ordered list</li>
		<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
		<li>
			Lists can be nested inside of each other
			<ol>
				<li>This is a nested list item</li>
				<li>This is another nested list item in an ordered list</li>
			</ol>
		</li>
		<li>This is the last list item</li>
	</ol>
</div>
<p>Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus.
</p>

<p><span class="pullquote-right" data-pullquote="A pull quote is a quotation or excerpt from an article.">A pull quote is a quotation or excerpt from an article.</span> 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.</p>

<p>Donec venenatis imperdiet tortor, vitae blandit odio interdum ut. Integer orci metus, lobortis id lacinia eget, rutrum vitae justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In pretium fermentum justo nec pharetra. Maecenas eget dapibus justo. Ut quis est risus. Nullam et eros at odio commodo venenatis quis et augue. Sed sed augue at tortor porttitor hendrerit nec ut nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sollicitudin enim consectetur mi commodo quis cursus ante pretium. Nunc gravida cursus nisi in gravida. Suspendisse eget tortor sed urna consequat tincidunt. Etiam eget convallis lectus. Suspendisse cursus rutrum massa ac faucibus.
</p>
<h4>H4 Headline</h4>
<p>Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus.
</p>
<h3>H3 Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?</p>
</div>

Comment Thread

59 Comments

Plinius Sloane

The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!
Matthias Macguinness

Sugar plum wafer soufflé ice cream. Wafer topping biscuit pie gummi bears topping. Gummies toffee powder applicake oat cake cookie. Bear claw candy tootsie roll fruitcake danish applicake candy canes macaroon. Liquorice tiramisu danish cotton candy gummies. Tiramisu dessert gummi bears macaroon sweet roll jelly-o gummi bears marzipan.
Siguror Hanigan

Mung bean squash sorrel taro coriander collard greens gumbo bitterleaf tomato. Taro water chestnut celtuce turnip yarrow celery endive scallion black-eyed pea onion. Aubergine dulse turnip greens mustard salsify garlic soybean parsley bitterleaf desert raisin courgette.
Aquila Achterkamp

Queso caerphilly cheesecake. Parmesan chalk and cheese port-salut port-salut babybel cottage cheese cheesy grin pepper jack. Croque monsieur paneer st. agur blue cheese emmental airedale monterey jack bavarian bergkase cheese triangles. Halloumi parmesan.
Fergus Althuis

Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.

1
2
3
4
5
6
7

This pattern contains: molecules-comment-form molecules-single-comment molecules-pagination

HTML

									
										<section class="comments section">
	<div class="comments-container" id="comments-container">
		<h2 class="section-title">59 Comments</h2>
		<form method="post" action="#" class="comment-form">
			<fieldset>
				<div class="field-container">
					<label for="comment-name">Name</label>
					<input id="comment-name" type="text" placeholder="Enter Your Name" />
				</div>
				<div class="field-container">
					<label for="comment-email">Email</label>
					<input id="comment-email" type="email" placeholder="Your email address" />
				</div>
				<div class="field-container">
					<label for="comment-url">URL</label>
					<input id="comment-url" type="url" placeholder="Website if you got one" />
				</div>
				<div class="field-container">
					<label for="comment-field">Comment</label>
					<textarea id="comment-field" rows="5" placeholder="Write you comment here"></textarea>
				</div>
			</fieldset>
		</form>		<ul class="comment-list">
				<li class="comment-container">
					<div class="comment-meta">
						<h4 class="comment-name"><a href="#">Plinius Sloane</a></h4>
					</div>
					<div class="comment-text">
						<p>The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!</p>
					</div>
				</li>				<li class="comment-container">
					<div class="comment-meta">
						<h4 class="comment-name"><a href="#">Matthias Macguinness</a></h4>
					</div>
					<div class="comment-text">
						<p>Sugar plum wafer soufflé ice cream. Wafer topping biscuit pie gummi bears topping. Gummies toffee powder applicake oat cake cookie. Bear claw candy tootsie roll fruitcake danish applicake candy canes macaroon. Liquorice tiramisu danish cotton candy gummies. Tiramisu dessert gummi bears macaroon sweet roll jelly-o gummi bears marzipan.</p>
					</div>
				</li>				<li class="comment-container">
					<div class="comment-meta">
						<h4 class="comment-name"><a href="#">Siguror Hanigan</a></h4>
					</div>
					<div class="comment-text">
						<p>Mung bean squash sorrel taro coriander collard greens gumbo bitterleaf tomato. Taro water chestnut celtuce turnip yarrow celery endive scallion black-eyed pea onion. Aubergine dulse turnip greens mustard salsify garlic soybean parsley bitterleaf desert raisin courgette.</p>
					</div>
				</li>				<li class="comment-container">
					<div class="comment-meta">
						<h4 class="comment-name"><a href="#">Aquila Achterkamp</a></h4>
					</div>
					<div class="comment-text">
						<p>Queso caerphilly cheesecake. Parmesan chalk and cheese port-salut port-salut babybel cottage cheese cheesy grin pepper jack. Croque monsieur paneer st. agur blue cheese emmental airedale monterey jack bavarian bergkase cheese triangles. Halloumi parmesan.</p>
					</div>
				</li>				<li class="comment-container">
					<div class="comment-meta">
						<h4 class="comment-name"><a href="#">Fergus Althuis</a></h4>
					</div>
					<div class="comment-text">
						<p>Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.</p>
					</div>
				</li>		</ul>
	</div>
	<ol class="pagination">
		<li class="current"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">6</a></li>
		<li><a href="#">7</a></li>
	</ol></section>

Carousel

Lorem ipsum dolor sit (37 characters)

←

1/5

→

This pattern contains: molecules-inset-block

HTML

									
										<div class="carousel-list-carousel">
	<div class="carousel-container">
		<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>	<div>
	<div class="carousel-controls">
		<a href="#" class="carousel-prev">&larr;</a>
		<div class="carousel-pagination">1/5</div>
		<a href="#" class="carousel-next">&rarr;</a>
	</div>
</div>

Work Form

HTML

									
										<form action="#" method="post" class="para-form">  
	<p>Hello. How’s it going <label class="is-vishidden" for="name">your name</label>
	<input required="true" class="inline" id="name" name="name" type="text" placeholder="your name">? I know things have never been more exciting than they are now at <label class="is-vishidden" for="company">your company</label>
	<input class="inline" id="company" name="company" type="text" placeholder="your company">. You know I’m really happy to see you stopped by to tell us about <label class="is-vishidden" for="reason">your reason for contacting</label> <select id="reason" class="inline" name="reason">
		<option selected="" disabled="" value="">your reason for contacting</option>
		<option value="Scheduling a workshop">scheduling a workshop</option>
		<option value="Design consulting">design consulting</option>
		<option value="Just saying hello!">what you’re up to :)</option>
	</select>. I’ll send you an e-mail at <input class="inline" required="true" id="email" name="email" type="email" placeholder="your e-mail"> so we can talk it over.</p>


	<label for="more-information">If you have time, tell us more about that:</label>
	<textarea name="more-information" id="more-information"></textarea>
	<input type="submit" class="btn btn-large" name="Contact" value="Fire Away">
</form>

Latest Posts

View more posts

This pattern contains: molecules-media-block molecules-media-block molecules-media-block molecules-media-block molecules-media-block

HTML

									
										<section class="section latest-posts">
	<h2 class="section-title">Latest Posts</h2>
	<ul class="post-list">
		<li><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></li>
		<li><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></li>
		<li><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></li>
		<li><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></li>
		<li><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></li>
	</ul>
	<a href="#" class="text-btn">View more posts</a>
</section>

Recent Tweets

This pattern contains: atoms-time atoms-time atoms-time atoms-time atoms-time

HTML

									
										<section class="section related-posts">
	<h3 class="section-title">Recent Tweets</h3>
	<ul class="headline-list">
		<li><h4><a href="#">Headline Lorem ipsum dolor sit amet</a></h4> <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></li>
		<li><h4><a href="#">Laborum, molestiae, rerum, dolores eveniet </a></h4> <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></li>
		<li><h4><a href="#">quae est fugit distinctio iure odit minus non ipsum </a></h4> <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></li>
		<li><h4><a href="#">dolorum deserunt omnis voluptates voluptatum</a></h4> <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></li>
		<li><h4><a href="#">nventore dignissimos vel molestiae, rerum, dolore</a></h4> <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></li>
		<li><h4><a href="#"></a></h4></li>
	</ul>
	<a href="#" class="text-btn">Follow us on Twitter</a>
</section>