## Byline Author Only

by Author Name

### HTML

                        <div class="byline">by Author Name</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 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.</p>

## Pullquote

> A pull quote is a quotation or excerpt from an article

### HTML

                        <blockquote class="pullquote">
       	<p>A pull quote is a quotation or excerpt from an article</p>
    </blockquote>

## 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
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
1/3
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
1/4
1/4
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.

### HTML

                        <div class="block block-thumb">
        <a href="#" class="b-inner">
    		<div class="b-thumb">
    			<img src="..&#x2F;..&#x2F;images&#x2F;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

### 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)

### HTML

                        <div class="block block-hero">
    	<a href="#" class="inner">
    		<div class="b-thumb">
    			<img src="..&#x2F;..&#x2F;images&#x2F;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

### HTML

                        <div class="block block-thumb">
    	<a href="#" class="b-inner">
    		<div class="b-thumb">
    			<img src="..&#x2F;..&#x2F;images&#x2F;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)

### HTML

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

## Figure With Caption

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.

### HTML

                        <figure>
    	<img src="..&#x2F;..&#x2F;images&#x2F;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>

## Search

Search 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

Name
Email
URL
Comment

### HTML

                        <form 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

Sign up for our newsletter Sign up for our 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="newsletter-submit">Sign Me Up</button>
    		</div>
        </fieldset>
    </form>

## Primary Nav

### HTML

                        <nav id="nav" class="nav">
    	<ul>
    		<li><a href="&#x2F;patterns&#x2F;04-pages-00-homepage&#x2F;04-pages-00-homepage.html">Home</a></li>
    		<li><a href="#">About</a></li>
    		<li><a href="&#x2F;patterns&#x2F;04-pages-01-blog&#x2F;04-pages-01-blog.html">Blog</a></li>
    		<li><a href="#">Contact</a></li>
    	</ul>
    </nav><!--end .nav-->

## Footer Nav

### HTML

                        <ul class="nav-footer">
    	<li><a href="&#x2F;patterns&#x2F;04-pages-00-homepage&#x2F;04-pages-00-homepage.html">Home</a></li>
    	<li><a href="#">About</a></li>
    	<li><a href="&#x2F;patterns&#x2F;04-pages-01-blog&#x2F;04-pages-01-blog.html">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. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 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

- Tab 1
- Tab 2
- Tab 3

### 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

- Like
- Tweet
- Email
- Comment

### 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

- Accordion 1
- Accordion 2
- Accordion 3

### 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">
    		<img src="..&#x2F;..&#x2F;images&#x2F;fpo_avatar.png" alt="Avatar" />
    		<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&#39; 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>

## Alert

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

### HTML

                        <div class="alert alert-">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    </div>