Colors

$color-primary
$color-primary-dark
$color-primary-darkest
$color-secondary
$color-bg
$color-bg-alt

HTML

									
										<ul class="sg-colors">
	<li>
		<span class="sg-swatch" style="background: #898d86;"></span>
		<span class="sg-label">$color-primary</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #5A5F55;"></span>
		<span class="sg-label">$color-primary-dark</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #35332E;"></span>
		<span class="sg-label">$color-primary-darkest</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #29313D;"></span>
		<span class="sg-label">$color-secondary</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #fbf7e5;"></span>
		<span class="sg-label">$color-bg</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #efedda;"></span>
		<span class="sg-label">$color-bg-alt</span>
	</li>
</ul>

Fonts

Primary font: "Foundry Sterling", "HelveticaNeue", "Helvetica", "Arial", sans-serif

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

Primary font bold: "Foundry Sterling", "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: "Foundry Sterling", "HelveticaNeue", "Helvetica", "Arial", sans-serif</p>
<p><em>Primary font italic: "Foundry Sterling", "HelveticaNeue", "Helvetica", "Arial", sans-serif</em></p>
<p><strong>Primary font bold: "Foundry Sterling", "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>

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>

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>

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>

Hr

HTML

									
										<hr />

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 variable 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>variable element</var>, such as <var>x</var> = <var>y</var></p>
</div><!--end .text-->

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

HTML

									
										<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>

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>

Tag

Item

HTML

									
										<div class="tag">Item</div>

Time

2 weeks ago

HTML

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

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>

Icon List

hello@basecreative.co.uk
0207 359 0005

Studio 209
Business Design Centre
London
N1 DQH
View in Google Maps

HTML

									
										<ul class="iconed-list">
	<li class="icon--email"><a href="mailto:hello@basecreative.co.uk">hello@basecreative.co.uk</a></li></li>
	<li class="icon--phone">0207 359 0005<br/><br/>
		Studio 209<br/>
		Business Design Centre<br/>
		London<br/>
		N1 DQH
	</li>
	<li class="icon--map"><a href="mailto:hello@basecreative.co.uk">View in Google Maps</a></li>
</ul>

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>

Titled List

List title

Item of list
Item of list
Item of list
Item of list
Item of list
Item of list
Item of list
Item of list

HTML

									
										<div class="titled-list">
	<h3 class="titled-list__title">List title</h3>
	<ul class="titled-list__list">
		<li>Item of list</li>
		<li>Item of list</li>
		<li>Item of list</li>
		<li>Item of list</li>
		<li>Item of list</li>
		<li>Item of list</li>
		<li>Item of list</li>
		<li>Item of list</li>
	</ul>
</div>

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>

Client Logo

HTML

									
										<div class="client-logo">
	<picture>
		<source srcset="../../images/clients/.svg" type="image/svg+xml" />
		<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="../../images/clients/.png 250w, ../../images/clients/@1-5x.png 375w, ../../images/clients/@2x.png 500w" alt="client logo" />
	</picture>
</div>

Favicon

HTML

									
										<img src="../../images/favicon_16x16.jpg" />
<img src="../../images/favicon_32x32.jpg" />

Icons

HTML

									
										<ul class="icons inline-list">
	<li class="icon icon--twitter"></li>
	<li class="icon icon--facebook"></li>
	<li class="icon icon--stumbleupon"></li>
	<li class="icon icon--linkedin"></li>
	<li class="icon icon--pinterest"></li>
	<li class="icon icon--google-plus"></li>
	<li class="icon icon--youtube"></li>
	<li class="icon icon--feed"></li>
	<li class="icon icon--search"></li>
	<li class="icon icon--play"></li>
</ul>

Loading Icon

HTML

									
										<img src="../../images/ajax-loader.gif" alt="Loading" />

Logo Alt

HTML

									
										<div class="logo logo--alt logo--header">
	<picture>
		<!--[if IE 9]><video style="display: none;"><![endif]-->
		<source srcset="../../images/logo_alt.svg" type="image/svg+xml" />
		<!--[if IE 9]></video><![endif]-->
		<img sizes="(min-width: 40em) 30vw, 50vw" src="../../images/logo_alt.png" srcset="../../images/logo_alt.png 490w, ../../images/logo_alt--big.png 760w" alt="Base Creative" />
	</picture>
</div>

Logo

HTML

									
										<div class="logo logo--header">
	<a href="../../patterns/04-pages-homepage/04-pages-homepage.html">
		<picture>
			<!--[if IE 9]><video style="display: none;"><![endif]-->
			<source srcset="../../images/logo.svg" type="image/svg+xml" />
			<!--[if IE 9]></video><![endif]-->
			<img sizes="(min-width: 40em) 30vw, 50vw" src="../../images/logo.png" srcset="../../images/logo.png 490w, ../../images/logo--big.png 760w" alt="Base Creative" />
		</picture>
	</a>
</div>

Member Photo

HTML

									
										<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="//placehold.it/260x260/ffffff.jpg 260w, //placehold.it/320x300/ffffff.jpg 320w, //placehold.it/520x520/ffffff.jpg 520w" alt="" />

Post Cover

HTML

									
										<picture>
	<source media="(min-width: 40em)" sizes="(min-width: 60em) 320px, 48vw" srcset="//placehold.it/320x320/fff.jpg 320w, //placehold.it/640x640/fff.jpg 640w, //placehold.it/1280x1280/fff.jpg 1280w">
	<img sizes="100vw"  alt="post cover" srcset="//placehold.it/320x160/fff.jpg 320w, //placehold.it/640x320/fff.jpg 640w" />
</picture>

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>

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>

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>

Select Menu

HTML

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

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="number">Number Input <abbr title="Required">*</abbr></label>
        <input id="number" 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>

Buttons

HTML

									
										<p><button>button tag</button></p>
<p><input type="submit" value="Input submit" /></p>
<p><a href="#" class="button">Button</a></p>
<p><a href="#" class="button button--alt">Alternate Button</a></p>
<p><a href="#" class="button button--action">Action Button</a></p>
<p><a href="#" class="button button--more">More Button</a></p>
<p><a href="#" class="button button--disabled">Disabled Button</a></p>
<p><a href="#" class="button button--text">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>

Map

HTML

									
										<div class="map map--responsive" data-mq="640" data-zoom="15" data-latlng="51.535584,-0.106154">
	<a href="http://www.google.co.uk/maps/@51.535584,-0.106154,16z" target="_blank">
	    <picture class="map__placeholder">
			<!--[if IE 9]><video style="display: none;"><![endif]-->
	 		<source 
	 		media="(min-width: 60em)"
	 		sizes="800px"
	 		srcset="
	 			https://maps.googleapis.com/maps/api/staticmap?center=51.535584,-0.106154&amp;zoom=15&amp;size=640x260&amp;markers=color:0x898D86|51.535584,-0.106154&amp;sensor=false&amp;style=feature:landscape|element:geometry|color:0xF7F2DE&amp;style=feature:road|element:geometry.fill|lightness:100&amp;style=feature:road|element:geometry.stroke|color:0xEEEBB8&amp;style=feature:all|element:labels|hue:0x898D86|saturation:-100|lightness:25&amp;style=feature:poi|element:geometry|color:0xDEE5CF&amp;style=feature:water|element:geometry|color:0xC9DFE6 640w, 
	 			https://maps.googleapis.com/maps/api/staticmap?center=51.535584,-0.106154&amp;zoom=15&amp;size=640x260&amp;&amp;markers=color:0x898D86|51.535584,-0.106154&amp;sensor=false&amp;style=feature:landscape|element:geometry|color:0xF7F2DE&amp;style=feature:road|element:geometry.fill|lightness:100&amp;style=feature:road|element:geometry.stroke|color:0xEEEBB8&amp;style=feature:all|element:labels|hue:0x898D86|saturation:-100|lightness:25&amp;style=feature:poi|element:geometry|color:0xDEE5CF&amp;style=feature:water|element:geometry|color:0xC9DFE6&amp;scale=2 1280w
	 		"/>

	 		<source 
	 		media="(min-width: 40em)"
	 		sizes="70vw"
	 		srcset="
	 			https://maps.googleapis.com/maps/api/staticmap?center=51.535584,-0.106154&amp;zoom=15&amp;size=500x320&amp;&amp;markers=color:0x898D86|51.535584,-0.106154&amp;sensor=false&amp;style=feature:landscape|element:geometry|color:0xF7F2DE&amp;style=feature:road|element:geometry.fill|lightness:100&amp;style=feature:road|element:geometry.stroke|color:0xEEEBB8&amp;style=feature:all|element:labels|hue:0x898D86|saturation:-100|lightness:25&amp;style=feature:poi|element:geometry|color:0xDEE5CF&amp;style=feature:water|element:geometry|color:0xC9DFE6 500w, 
	 			https://maps.googleapis.com/maps/api/staticmap?center=51.535584,-0.106154&amp;zoom=15&amp;size=500x320&amp;markers=color:0x898D86|51.535584,-0.106154&amp;sensor=false&amp;style=feature:landscape|element:geometry|color:0xF7F2DE&amp;style=feature:road|element:geometry.fill|lightness:100&amp;style=feature:road|element:geometry.stroke|color:0xEEEBB8&amp;style=feature:all|element:labels|hue:0x898D86|saturation:-100|lightness:25&amp;style=feature:poi|element:geometry|color:0xDEE5CF&amp;style=feature:water|element:geometry|color:0xC9DFE6&amp;scale=2 1000w
	 		"/>
			<!--[if IE 9]></video><![endif]-->

	 		<img 
	 		srcset="https://maps.googleapis.com/maps/api/staticmap?center=51.535584,-0.106154&amp;zoom=15&amp;size=320x320&amp;markers=color:0x898D86|51.535584,-0.106154&amp;sensor=false&amp;style=feature:landscape|element:geometry|color:0xF7F2DE&amp;style=feature:road|element:geometry.fill|lightness:100&amp;style=feature:road|element:geometry.stroke|color:0xEEEBB8&amp;style=feature:all|element:labels|hue:0x898D86|saturation:-100|lightness:25&amp;style=feature:poi|element:geometry|color:0xDEE5CF&amp;style=feature:water|element:geometry|color:0xC9DFE6 320w, 
	 		https://maps.googleapis.com/maps/api/staticmap?center=51.535584,-0.106154&amp;zoom=15&amp;size=320x320&amp;markers=color:0x898D86|51.535584,-0.106154&amp;sensor=false&amp;style=feature:landscape|element:geometry|color:0xF7F2DE&amp;style=feature:road|element:geometry.fill|lightness:100&amp;style=feature:road|element:geometry.stroke|color:0xEEEBB8&amp;style=feature:all|element:labels|hue:0x898D86|saturation:-100|lightness:25&amp;style=feature:poi|element:geometry|color:0xDEE5CF&amp;style=feature:water|element:geometry|color:0xC9DFE6&amp;scale=2 640w
	 		" alt="map"/>
		</picture>
	</a>
</div>

Portfolio Cover

HTML

									
										<img sizes="(min-width: 60em) 300px, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="//placehold.it/250x175/fff 250w, //placehold.it/400x300/fff 400w, //placehold.it/600x400/fff 600w" alt="portfolio item" />

Portfolio Primary

HTML

									
										<picture>
	<source media="(min-width: 40em)" srcset="//placehold.it/250x100/fff 250w, //placehold.it/400x166/fff 400w, //placehold.it/600x250/fff 600w, //placehold.it/1000x400/fff 1000w" alt="portfolio thing" />
	<img sizes="(min-width: 40em) 90vw, 100vw" srcset="//placehold.it/250x125/fff 250w, //placehold.it/400x200/fff 400w, //placehold.it/600x300/fff 600w" alt="portfolio thing" />
</picture>

Portfolio Related

HTML

									
										<img sizes="(min-width: 60em) 200px, (min-width: 40em) 20vw, (min-width: 20em) 33vw, 100vw" srcset="//placehold.it/250x125 250w, //placehold.it/400x200 400w, //placehold.it/600x300 600w" alt="portfolio item" />

Portfolio Secondary

HTML

									
										<img sizes="(min-width: 60em) 300px, (min-width: 48em) 33vw, (min-width: 40em) 50vw, 100vw" srcset="//placehold.it/250x150/fff 250w, //placehold.it/400x250/fff 400w, //placehold.it/600x375/fff 600w" />

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>

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>

Byline

Author Author Name

HTML

									
										<div class="byline">Author <span>Author Name</span></div>

Heading Group

This is a big statement.

You can write an extended definition of the previous statement here. Even with multiple phrases.

Introduce the following element here.

HTML

									
										<div class="hgroup lc--tight ">
   	<h1>This is a big statement.</h1>
   	<h2>You can write an extended definition of the previous statement here. Even with multiple phrases.</h2>
   	<h3>Introduce the following element here.</h3>
</div>

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>

Portfolio Item Heading

Swap once

Responsive website for a ground breaking application website.

HTML

									
										<div class="job__hgroup">
	<h1 class="job__title">Swap once</h1>
	<div class="job__description">Responsive website for a ground breaking application website.</div>
</div>

Visit Site

HTML

									
										<a href="#" rel="external" class="bg--darker context-widget context-widget--visit">
	<div class="text">
		Visit the site
		<span class="context-widget--visit__url">domain.com</span>
	</div>
</a>

Block Headline Byline

Lorem ipsum dolor sit (37 characters)

2 weeks ago

This pattern contains: atoms-time

HTML

									
										<div class="block block-headline">
	<a href="#" class="b-inner">
		<h2 class="b-title">Lorem ipsum dolor sit (37 characters)</h2>
		<time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>	</a>
</div>

Block Headline

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>

Member

This pattern contains: atoms-member-photo

HTML

									
										<figure class="member">
	<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="//placehold.it/260x260/ffffff.jpg 260w, //placehold.it/320x300/ffffff.jpg 320w, //placehold.it/520x520/ffffff.jpg 520w" alt="" />	<figcaption class="member__data">
		<h3 class="member__name">Jaime Caballero</h3>
		<p class="member__role">Frontend architect</p>
	</figcaption>
	<div class="member__social">
			<a href="http://twitter.com/jaicab_" class="member__link icon icon--twitter"><span class="icon__text">twitter</span></a>
			<a href="http://facebook.com/jaicab" class="member__link icon icon--facebook"><span class="icon__text">facebook</span></a>
	</div>
</figure>

Portfolio Item

Base Creative Pattern Lab

HTML

									
										<div class="project  project--">
    <a class="project__link" href="../../patterns/04-pages-portfolio-inner/04-pages-portfolio-inner.html">
		<div class="project__cover">
			<img src="" alt=""/>
		</div>
		<div class="project__data">
			<h3 class="project__title">Base Creative Pattern Lab </h3>
		</div>
	</a>
</div>

Post Summary

5th January 2015

Back to basics with twitter

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos amet sequi eum. Eius nostrum omnis, accusantium corrupti...

View article

This pattern contains: atoms-post-cover

HTML

									
										<article class="news">
	<div class="news__image">
		<picture>
			<source media="(min-width: 40em)" sizes="(min-width: 60em) 320px, 48vw" srcset="//placehold.it/320x320/fff.jpg 320w, //placehold.it/640x640/fff.jpg 640w, //placehold.it/1280x1280/fff.jpg 1280w">
			<img sizes="100vw"  alt="post cover" srcset="//placehold.it/320x160/fff.jpg 320w, //placehold.it/640x320/fff.jpg 640w" />
		</picture>	</div>
	<div class="news__content">
		<time class="news__time">5th January 2015</time>
		<h2 class="news__title">Back to basics with twitter</h2>
		<p class="news__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos amet sequi eum. Eius nostrum omnis, accusantium corrupti...</p>
		<a href="#" class="button button--more news__more">View article</a>
	</div>
</article>

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

Share Widget

HTML

									
										<div class="share-widget">
	<ul>
		<li><a href="javascript:window.print()" class="icon icon--print"><span class="icon__text">Print</span></a></li>
		<li><a href="https://twitter.com/home?status=fbvsbsdvsdvsdv" class="icon icon--twitter"><span class="icon__text">Twitter</span></a></li>
		<li><a href="mailto:?&subject=Job&body=sdpobvsopdv" class="icon icon--email"><span class="icon__text">Email</span></a></li>
		<li><a href="https://www.facebook.com/sharer/sharer.php?u=http://test/com" class="icon icon--facebook"><span class="icon__text">Facebook</span></a></li>
		<li><a href="https://plus.google.com/share?url=http://test/com" class="icon icon--google-plus"><span class="icon__text">Google+</span></a></li>
		<li><a href="https://www.linkedin.com/shareArticle?mini=true&url=https://plus.google.com/share?url=http://test/com&title=svsdvsdv&summary=&source=" class="icon icon--linkedin"><span class="icon__text">LinkedIn</span></a></li>
	</ul>
	<div class="share-widget__text">
		84 Shares
	</div>
</div>

Square Instagram

@basecreative

HTML

									
										<div class="square square--image">
	<img src="http://scontent-a.cdninstagram.com/hphotos-xaf1/t51.2885-15/10899547_787639221314730_580056612_n.jpg" alt="instagram">

	<a href="http://instagram.com" target="_blank" class="square__link icon icon--instagram">@basecreative</a>
</div>

Square Job

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, velit molestiae, quo voluptate suscipit, facere rem at porro cupiditate pariatur aspernatur eius aliquam. Error aspernatur, consequuntur. Quia voluptate, soluta odit.

Jobs

HTML

									
										<div class="square">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, velit molestiae, quo voluptate suscipit, facere rem at porro cupiditate pariatur aspernatur eius aliquam. Error aspernatur, consequuntur. Quia voluptate, soluta odit.</p>

	<a href="http://twitter.com" target="_blank" class="square__link icon icon--info">Jobs</a>
</div>

Square Twitter

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, velit molestiae, quo voluptate suscipit, facere rem at porro cupiditate pariatur aspernatur eius aliquam. Error aspernatur, consequuntur. Quia voluptate, soluta odit.

Twitter

HTML

									
										<div class="square">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, velit molestiae, quo voluptate suscipit, facere rem at porro cupiditate pariatur aspernatur eius aliquam. Error aspernatur, consequuntur. Quia voluptate, soluta odit.</p>

	<a href="http://twitter.com" target="_blank" class="square__link icon icon--twitter">Twitter</a>
</div>

Contact

HTML

									
										<form method="post" action="#" class="contact-form">
	<fieldset>
		<div class="field field--break">
			<input type="text" placeholder="Name" />
		</div>
		<div class="field field--break">
			<input type="text" placeholder="Enquiry title" />
		</div>
		<div class="field field--break">
			<input type="email" placeholder="Email address" />
		</div>
		<div class="field field--break">
			<input type="text" pattern="[0-9]*" placeholder="Phone no." />
		</div>
		<div class="field-container">
			<textarea rows="7" placeholder="Message"></textarea>
		</div>
	</fieldset>
	<input type="submit" value="Send">
</form>

Footer Nav

HTML

									
										<ul class="nav--footer">
	<li><a class="icon icon--facebook" href="#">
		<span class="icon__text">Facebook</span>
	</a></li>
	<li><a class="icon icon--twitter" href="#">
		<span class="icon__text">Twitter</span>
	</a></li>
	<li><a class="icon icon--linkedin" href="#">
		<span class="icon__text">LinkeIn</span>
	</a></li>
	<li><a class="icon icon--google-plus" href="#">
		<span class="icon__text">Google+</span>
	</a></li>
	<li><a class="icon icon--pinterest" href="#">
		<span class="icon__text">Pinterest</span>
	</a></li>
	<li><a class="icon icon--instagram" href="#">
		<span class="icon__text">Instagram</span>
	</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>

Portfolio Nav

HTML

									
										<div class="nav nav--category">
	<ul class="nav-list">
		<li><a href="#" data-filter="*">All</a></li>
		<li><a href="#" data-filter="app">Apps</a></li>
		<li><a href="#" data-filter="brand">Brands</a></li>
		<li><a href="#" data-filter="print">Print</a></li>
		<li><a href="#" data-filter="website">Websites</a></li>
	</ul>
</div>

Portfolio Prevnext

1 / 37 projects

HTML

									
										<div class="nav nav--prevnext">
	1 / 37 projects
	<ul class="nav-list">
		<li><a class="nav--prevnext__prev icon icon--leftarrow" href="#" ><span class="icon__text">Previous</span></a></li>
		<li><a class="nav--prevnext__next icon icon--rightarrow" href="#" ><span class="icon__text">Next</span></a></li>
	</ul>
</div>

Primary Nav

HTML

									
										<nav id="nav" class="nav nav--main">
	<ul class="nav-list">
		<li class="active"><a href="../../patterns/04-pages-homepage/04-pages-homepage.html">Home</a></li>
		<li><a href="../../patterns/04-pages-work/04-pages-work.html">Work</a></li>
		<li><a href="../../patterns/04-pages-services/04-pages-services.html">Services</a></li>
		<li><a href="../../patterns/04-pages-team/04-pages-team.html">Team</a></li>
		<li><a href="../../patterns/04-pages-clients/04-pages-clients.html">Clients</a></li>
		<li><a href="../../patterns/04-pages-contact/04-pages-contact.html">Contact</a></li>
	</ul>
</nav><!--end .nav-->

Contact Us

HTML

									
										<div class="bg--darker context-widget">
	<div class="text">
		<h3>Would you like to work with us?</h3>
		<p>Talk to Iain Scott to get a picture of how we could work together.</p>
	</div>
	<a href="../../patterns/04-pages-contact/04-pages-contact.html" class="button">Get in touch</a>
</div>

Filter

Subjects
Authors
- Item
- Item
- Item
- Item
- Item
- Item
Dates
- Item
- Item
- Item
- Item
- Item
- Item

HTML

									
										<div class="filter">
	<span class="filter__title">Filter</span>
	<ul class="filter__panels">
		<li class="filter__default">
			<a href="#" class="filter__handle">Subjects</a>
			<div class="fpanel">
				<ul>
					<li><a class="active" data-count="120" href="#">All</a></li>
					<li><a data-count="27" href="#">Content Strategy</a></li>
					<li><a data-count="8" href="#">Design</a></li>
					<li><a data-count="5" href="#">Life &amp; culture</a></li>
					<li><a data-count="10" href="#">Mobile</a></li>
					<li><a data-count="72" href="#">Online marketing</a></li>
				</ul>
			</div>
		</li>
		<li>
			<a href="#" class="filter__handle">Authors</a>
			<div class="fpanel">
				<ul>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
				</ul>
			</div>
		</li>
		<li>
			<a href="#" class="filter__handle">Dates</a>
			<div class="fpanel">
				<ul>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
					<li><a data-count="120" href="#">Item</a></li>
				</ul>
			</div>
		</li>
	</ul>
</div>

Share Pinterest

Share on Pinterest

HTML

									
										<a class="icon icon--pinterest square__link" target="_blank" href="//es.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&amp;media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&amp;description=Next%20stop%3A%20Pinterest" data-pin-do="buttonBookmark"  data-pin-color="red" data-pin-height="28">
	<span class="icon__text">Share on Pinterest</span>
</a>

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>

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>

Footer

HTML

									
										<!-- Begin Footer -->
<footer class="footer" role="contentinfo">
	<div class="lc lc--pad">
		<div class="footer__contact">
			<p><b>Can we help your business?</b></p>
			<a href="../../patterns/04-pages-contact/04-pages-contact.html" class="button button--action">Get in touch</a>
		</div>
		<div class="footer__social">
			<ul class="nav--footer">
				<li><a class="icon icon--facebook" href="#">
					<span class="icon__text">Facebook</span>
				</a></li>
				<li><a class="icon icon--twitter" href="#">
					<span class="icon__text">Twitter</span>
				</a></li>
				<li><a class="icon icon--linkedin" href="#">
					<span class="icon__text">LinkeIn</span>
				</a></li>
				<li><a class="icon icon--google-plus" href="#">
					<span class="icon__text">Google+</span>
				</a></li>
				<li><a class="icon icon--pinterest" href="#">
					<span class="icon__text">Pinterest</span>
				</a></li>
				<li><a class="icon icon--instagram" href="#">
					<span class="icon__text">Instagram</span>
				</a></li>
			</ul>			<p class="copyright">&copy; 2015 Base Creative. All rights reserved.</p>
		</div>
	</div>
</footer>
<!-- End Footer -->

Header Home

This pattern contains: organisms-off-canvas atoms-logo-alt

HTML

									
										<!-- Begin .header -->
<header class="header header--alt cf" role="banner">
	<div class="off-canvas">
	<nav id="nav" class="nav nav--main">
		<ul class="nav-list">
			<li class="active"><a href="../../patterns/04-pages-homepage/04-pages-homepage.html">Home</a></li>
			<li><a href="../../patterns/04-pages-work/04-pages-work.html">Work</a></li>
			<li><a href="../../patterns/04-pages-services/04-pages-services.html">Services</a></li>
			<li><a href="../../patterns/04-pages-team/04-pages-team.html">Team</a></li>
			<li><a href="../../patterns/04-pages-clients/04-pages-clients.html">Clients</a></li>
			<li><a href="../../patterns/04-pages-contact/04-pages-contact.html">Contact</a></li>
		</ul>
	</nav><!--end .nav-->
	</div>	<div class="logo logo--alt logo--header">
		<picture>
			<!--[if IE 9]><video style="display: none;"><![endif]-->
			<source srcset="../../images/logo_alt.svg" type="image/svg+xml" />
			<!--[if IE 9]></video><![endif]-->
			<img sizes="(min-width: 40em) 30vw, 50vw" src="../../images/logo_alt.png" srcset="../../images/logo_alt.png 490w, ../../images/logo_alt--big.png 760w" alt="Base Creative" />
		</picture>
	</div>	<a href="#nav" class="nav-toggle nav-toggle-menu icon icon--hamburger"><span class="is-vishidden">Menu</span></a>
</header>
<!-- End .header -->

Header

This pattern contains: organisms-off-canvas atoms-logo atoms-logo-alt

HTML

									
										<!-- Begin .header -->
<header class="header cf" role="banner">
	<div class="off-canvas">
	<nav id="nav" class="nav nav--main">
		<ul class="nav-list">
			<li class="active"><a href="../../patterns/04-pages-homepage/04-pages-homepage.html">Home</a></li>
			<li><a href="../../patterns/04-pages-work/04-pages-work.html">Work</a></li>
			<li><a href="../../patterns/04-pages-services/04-pages-services.html">Services</a></li>
			<li><a href="../../patterns/04-pages-team/04-pages-team.html">Team</a></li>
			<li><a href="../../patterns/04-pages-clients/04-pages-clients.html">Clients</a></li>
			<li><a href="../../patterns/04-pages-contact/04-pages-contact.html">Contact</a></li>
		</ul>
	</nav><!--end .nav-->
	</div>		<div class="logo logo--header">
			<a href="../../patterns/04-pages-homepage/04-pages-homepage.html">
				<picture>
					<!--[if IE 9]><video style="display: none;"><![endif]-->
					<source srcset="../../images/logo.svg" type="image/svg+xml" />
					<!--[if IE 9]></video><![endif]-->
					<img sizes="(min-width: 40em) 30vw, 50vw" src="../../images/logo.png" srcset="../../images/logo.png 490w, ../../images/logo--big.png 760w" alt="Base Creative" />
				</picture>
			</a>
		</div>	<a href="#nav" class="nav-toggle nav-toggle-menu icon icon--hamburger"><span class="is-vishidden">Menu</span></a>
</header>
<!-- End .header -->

Off Canvas

This pattern contains: molecules-primary-nav

HTML

									
										<div class="off-canvas">
	<nav id="nav" class="nav nav--main">
		<ul class="nav-list">
			<li class="active"><a href="../../patterns/04-pages-homepage/04-pages-homepage.html">Home</a></li>
			<li><a href="../../patterns/04-pages-work/04-pages-work.html">Work</a></li>
			<li><a href="../../patterns/04-pages-services/04-pages-services.html">Services</a></li>
			<li><a href="../../patterns/04-pages-team/04-pages-team.html">Team</a></li>
			<li><a href="../../patterns/04-pages-clients/04-pages-clients.html">Clients</a></li>
			<li><a href="../../patterns/04-pages-contact/04-pages-contact.html">Contact</a></li>
		</ul>
	</nav><!--end .nav-->
</div>

Article Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis.

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.

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

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

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-unordered atoms-blockquote atoms-ordered

HTML

									
										<p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. </p>

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

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

Portfolio Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed cupiditate alias eum molestias explicabo non odio praesentium commodi debitis, unde vel impedit, eligendi. Quasi corporis esse velit aut, sequi rerum!

Our role

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum eveniet porro, aut recusandae, earum, pariatur quis qui laborum a, perspiciatis minus nihil! Vitae reiciendis commodi quasi blanditiis perspiciatis, ab modi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam blanditiis repudiandae dolore, dicta eum est cupiditate commodi mollitia voluptates, ullam hic quam perspiciatis illum. Aut deleniti quasi voluptate tenetur reiciendis!

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.
James Garnham, Creative Director

HTML

									
										<div class="text">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed cupiditate alias eum molestias explicabo non odio praesentium commodi debitis, unde vel impedit, eligendi. Quasi corporis esse velit aut, sequi rerum!</p>

	<h3>Our role</h3>
	<p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing elit</a>. Ipsum eveniet porro, aut recusandae, earum, pariatur quis qui laborum a, perspiciatis minus nihil! Vitae reiciendis commodi quasi blanditiis perspiciatis, ab modi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam blanditiis repudiandae dolore, dicta eum est cupiditate commodi mollitia voluptates, ullam hic quam perspiciatis illum. Aut deleniti quasi voluptate tenetur reiciendis!</p>

	<blockquote class="quote--client">
	   	<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 byline">James Garnham, <span class="quote--client__role">Creative Director</span></cite>
	</blockquote>
</div>

Portfolio List

This pattern contains: molecules-portfolio-item

HTML

									
										<div class="project-list">
</div>

Portfolio Navigation

1 / 37 projects

This pattern contains: molecules-portfolio-prevnext molecules-portfolio-nav

HTML

									
										<div class="nav--project">
	<div class="nav nav--prevnext">
		1 / 37 projects
		<ul class="nav-list">
			<li><a class="nav--prevnext__prev icon icon--leftarrow" href="#" ><span class="icon__text">Previous</span></a></li>
			<li><a class="nav--prevnext__next icon icon--rightarrow" href="#" ><span class="icon__text">Next</span></a></li>
		</ul>
	</div>	<div class="nav nav--category">
		<ul class="nav-list">
			<li><a href="#" data-filter="*">All</a></li>
			<li><a href="#" data-filter="app">Apps</a></li>
			<li><a href="#" data-filter="brand">Brands</a></li>
			<li><a href="#" data-filter="print">Print</a></li>
			<li><a href="#" data-filter="website">Websites</a></li>
		</ul>
	</div></div>

Tag List

HTML

									
										<div class="tag-list">
	<h3>Other disciplines for this client</h3>
	<div class="button">App</div>
	<div class="button">Brand</div>
	<div class="button">Website</div>
</div>

Clients

This pattern contains: atoms-client-logo

HTML

									
										<div class="client-list">
	<div class="client-logo">
		<picture>
			<source srcset="../../images/clients/.svg" type="image/svg+xml" />
			<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="../../images/clients/.png 250w, ../../images/clients/@1-5x.png 375w, ../../images/clients/@2x.png 500w" alt="client logo" />
		</picture>
	</div>	<div class="client-logo">
		<picture>
			<source srcset="../../images/clients/.svg" type="image/svg+xml" />
			<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="../../images/clients/.png 250w, ../../images/clients/@1-5x.png 375w, ../../images/clients/@2x.png 500w" alt="client logo" />
		</picture>
	</div>	<div class="client-logo">
		<picture>
			<source srcset="../../images/clients/.svg" type="image/svg+xml" />
			<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="../../images/clients/.png 250w, ../../images/clients/@1-5x.png 375w, ../../images/clients/@2x.png 500w" alt="client logo" />
		</picture>
	</div>	<div class="client-logo">
		<picture>
			<source srcset="../../images/clients/.svg" type="image/svg+xml" />
			<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="../../images/clients/.png 250w, ../../images/clients/@1-5x.png 375w, ../../images/clients/@2x.png 500w" alt="client logo" />
		</picture>
	</div>	<div class="client-logo">
		<picture>
			<source srcset="../../images/clients/.svg" type="image/svg+xml" />
			<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="../../images/clients/.png 250w, ../../images/clients/@1-5x.png 375w, ../../images/clients/@2x.png 500w" alt="client logo" />
		</picture>
	</div>	<div class="client-logo">
		<picture>
			<source srcset="../../images/clients/.svg" type="image/svg+xml" />
			<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="../../images/clients/.png 250w, ../../images/clients/@1-5x.png 375w, ../../images/clients/@2x.png 500w" alt="client logo" />
		</picture>
	</div>	<div class="client-logo">
		<picture>
			<source srcset="../../images/clients/.svg" type="image/svg+xml" />
			<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="../../images/clients/.png 250w, ../../images/clients/@1-5x.png 375w, ../../images/clients/@2x.png 500w" alt="client logo" />
		</picture>
	</div>	<div class="client-logo">
		<picture>
			<source srcset="../../images/clients/.svg" type="image/svg+xml" />
			<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="../../images/clients/.png 250w, ../../images/clients/@1-5x.png 375w, ../../images/clients/@2x.png 500w" alt="client logo" />
		</picture>
	</div>	<div class="client-logo">
		<picture>
			<source srcset="../../images/clients/.svg" type="image/svg+xml" />
			<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="../../images/clients/.png 250w, ../../images/clients/@1-5x.png 375w, ../../images/clients/@2x.png 500w" alt="client logo" />
		</picture>
	</div>	<div class="client-logo">
		<picture>
			<source srcset="../../images/clients/.svg" type="image/svg+xml" />
			<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="../../images/clients/.png 250w, ../../images/clients/@1-5x.png 375w, ../../images/clients/@2x.png 500w" alt="client logo" />
		</picture>
	</div>	<div class="client-logo">
		<picture>
			<source srcset="../../images/clients/.svg" type="image/svg+xml" />
			<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="../../images/clients/.png 250w, ../../images/clients/@1-5x.png 375w, ../../images/clients/@2x.png 500w" alt="client logo" />
		</picture>
	</div>	<div class="client-logo">
		<picture>
			<source srcset="../../images/clients/.svg" type="image/svg+xml" />
			<img sizes="(min-width: 60em) 200px, (min-width: 40em) 25vw, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="../../images/clients/.png 250w, ../../images/clients/@1-5x.png 375w, ../../images/clients/@2x.png 500w" alt="client logo" />
		</picture>
	</div></div>

Fluixd

HTML

									
										<div class="fluixd fluixd--right">
	<div class="fluixd__img fluixd__fixed">
		<img sizes="(min-width: 47em) 40vw, 100vw" srcset="../../images/homepage/owl.gif 300w" alt="">
	</div>
	<div class="fluixd__img fluixd__fluid">
		<picture>
			<source media="(min-width: 47em)" sizes="70vw" srcset="//placehold.it/500x400/d16830/fff 500w, ../../images/homepage/own.jpg 900w" />
			<img srcset="//placehold.it/400x400/d16830/fff 400w" alt="project">		
		</picture>
	</div>
</div>
<div class="fluixd fluixd--left">
	<div class="fluixd__img fluixd__fixed">
		<img sizes="(min-width: 47em) 40vw, 100vw" srcset="../../images/homepage/crafted.jpg 300w" alt="">
	</div>
	<div class="fluixd__img fluixd__fluid">
		<picture>
			<source media="(min-width: 47em)" sizes="70vw" srcset="//placehold.it/500x400/000/fff 500w, ../../images/homepage/clarisford.jpg 900w" />
			<img srcset="//placehold.it/400x400/000/fff 200w" alt="project">		
		</picture>
	</div>
</div>

Job Inner Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam ullam delectus deleniti dicta repellendus voluptate consectetur sed, inventore, temporibus ea libero atque voluptates. Illum veniam sunt nisi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis voluptates asperiores et ipsum. Voluptas eum incidunt, ullam sint modi et voluptatibus atque quidem nostrum illum, illo soluta corporis nihil perferendis.

Your role

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio magni magnam exercitationem velit quasi consequuntur ducimus libero sed fugiat, temporibus unde labore nihil vero, ipsum natus deserunt enim voluptatem ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque cupiditate provident nobis officia sint voluptatem minus ex possimus sapiente rem harum repellat, aspernatur iste quis sit, quibusdam ut nesciunt repudiandae.

Responsibilities and Tasks

Creative - In charge of direction and lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non modi facilis vitae veritatis neque consequuntur explicabo, distinctio tenetur. Nihil repellendus harum id vero nam doloribus excepturi, aut aperiam sint maiores.

HTML

									
										<p class="position__intro">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam ullam delectus deleniti dicta repellendus voluptate consectetur sed, inventore, temporibus ea libero atque voluptates. Illum veniam sunt nisi.
</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis voluptates asperiores et ipsum. Voluptas eum incidunt, ullam sint modi et voluptatibus atque quidem nostrum illum, illo soluta corporis nihil perferendis.</p>

<h3>Your role</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio magni magnam exercitationem velit quasi consequuntur ducimus libero sed fugiat, temporibus unde labore nihil vero, ipsum natus deserunt enim voluptatem ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque cupiditate provident nobis officia sint voluptatem minus ex possimus sapiente rem harum repellat, aspernatur iste quis sit, quibusdam ut nesciunt repudiandae.</p>

<h3>Responsibilities and Tasks</h3>
<ul>
	<li>Creative - In charge of direction and lorem ipsum</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non modi facilis vitae veritatis neque consequuntur explicabo, distinctio tenetur. Nihil repellendus harum id vero nam doloribus excepturi, aut aperiam sint maiores.</li>
</ul>

Member List

twitter instagram

twitter facebook

instagram facebook

twitter facebook

twitter facebook

twitter facebook

twitter facebook

twitter facebook

HTML

									
										<div class="member-list" id="slider">
	<div class="swipe__wrap">
		<div class="member">
				<figure>
					<img src="../../images/team/iain.jpg" alt="Iain Scott">
					<figcaption class="member__data">
						<h3 class="member__name">Iain Scott</h3>
						<p class="member__role">Managing director</p>
					</figcaption>
				</figure>
				<div class="member__social">
						<a href="http://twitter.com/jaicab_" class="member__link icon icon--twitter"><span class="icon__text">twitter</span></a>
						<a href="http://facebook.com/jaicab" class="member__link icon icon--instagram"><span class="icon__text">instagram</span></a>
				</div>
			</div><div class="member">
				<figure>
					<img src="../../images/team/james.jpg" alt="James Garnham">
					<figcaption class="member__data">
						<h3 class="member__name">James Garnham</h3>
						<p class="member__role">Creative director</p>
					</figcaption>
				</figure>
				<div class="member__social">
						<a href="http://twitter.com/jaicab_" class="member__link icon icon--twitter"><span class="icon__text">twitter</span></a>
						<a href="http://facebook.com/jaicab" class="member__link icon icon--facebook"><span class="icon__text">facebook</span></a>
				</div>
			</div><div class="member">
				<figure>
					<img src="../../images/team/anna.jpg" alt="Anna Corbett">
					<figcaption class="member__data">
						<h3 class="member__name">Anna Corbett</h3>
						<p class="member__role">Account manager</p>
					</figcaption>
				</figure>
				<div class="member__social">
						<a href="http://instagram.com/jaicab_" class="member__link icon icon--instagram"><span class="icon__text">instagram</span></a>
						<a href="http://facebook.com/jaicab" class="member__link icon icon--facebook"><span class="icon__text">facebook</span></a>
				</div>
			</div><div class="member">
				<figure>
					<img src="../../images/team/greg.jpg" alt="Greg Mileham">
					<figcaption class="member__data">
						<h3 class="member__name">Greg Mileham</h3>
						<p class="member__role">Account manager</p>
					</figcaption>
				</figure>
				<div class="member__social">
						<a href="http://twitter.com/jaicab_" class="member__link icon icon--twitter"><span class="icon__text">twitter</span></a>
						<a href="http://facebook.com/jaicab" class="member__link icon icon--facebook"><span class="icon__text">facebook</span></a>
				</div>
			</div><div class="member">
				<figure>
					<img src="../../images/team/jason.jpg" alt="Jason Cianfrone">
					<figcaption class="member__data">
						<h3 class="member__name">Jason Cianfrone</h3>
						<p class="member__role">Senior designer</p>
					</figcaption>
				</figure>
				<div class="member__social">
						<a href="http://twitter.com/jaicab_" class="member__link icon icon--twitter"><span class="icon__text">twitter</span></a>
						<a href="http://facebook.com/jaicab" class="member__link icon icon--facebook"><span class="icon__text">facebook</span></a>
				</div>
			</div><div class="member">
				<figure>
					<img src="../../images/team/niall.jpg" alt="Niall Moran">
					<figcaption class="member__data">
						<h3 class="member__name">Niall Moran</h3>
						<p class="member__role">Web designer</p>
					</figcaption>
				</figure>
				<div class="member__social">
						<a href="http://twitter.com/jaicab_" class="member__link icon icon--twitter"><span class="icon__text">twitter</span></a>
						<a href="http://facebook.com/jaicab" class="member__link icon icon--facebook"><span class="icon__text">facebook</span></a>
				</div>
			</div><div class="member">
				<figure>
					<img src="../../images/team/sean.jpg" alt="Sean Ellingham">
					<figcaption class="member__data">
						<h3 class="member__name">Sean Ellingham</h3>
						<p class="member__role">Web developer</p>
					</figcaption>
				</figure>
				<div class="member__social">
						<a href="http://twitter.com/jaicab_" class="member__link icon icon--twitter"><span class="icon__text">twitter</span></a>
						<a href="http://facebook.com/jaicab" class="member__link icon icon--facebook"><span class="icon__text">facebook</span></a>
				</div>
			</div><div class="member">
				<figure>
					<img src="../../images/team/iain.jpg" alt="Jaime Caballero">
					<figcaption class="member__data">
						<h3 class="member__name">Jaime Caballero</h3>
						<p class="member__role">Frontend architect</p>
					</figcaption>
				</figure>
				<div class="member__social">
						<a href="http://twitter.com/jaicab_" class="member__link icon icon--twitter"><span class="icon__text">twitter</span></a>
						<a href="http://facebook.com/jaicab" class="member__link icon icon--facebook"><span class="icon__text">facebook</span></a>
				</div>
			</div>
	</div>
</div>

News List

5th January 2015

Back to basics with twitter

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos amet sequi eum. Eius nostrum omnis, accusantium corrupti...

View article

5th January 2015

Back to basics with twitter

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos amet sequi eum. Eius nostrum omnis, accusantium corrupti...

View article

5th January 2015

Back to basics with twitter

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos amet sequi eum. Eius nostrum omnis, accusantium corrupti...

View article

5th January 2015

Back to basics with twitter

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos amet sequi eum. Eius nostrum omnis, accusantium corrupti...

View article

5th January 2015

Back to basics with twitter

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos amet sequi eum. Eius nostrum omnis, accusantium corrupti...

View article

This pattern contains: molecules-post-summary

HTML

									
										<div class="news-list">
	<article class="news">
		<div class="news__image">
		<picture>
			<source media="(min-width: 40em)" sizes="(min-width: 60em) 320px, 48vw" srcset="//placehold.it/320x320/fff.jpg 320w, //placehold.it/640x640/fff.jpg 640w, //placehold.it/1280x1280/fff.jpg 1280w">
			<img sizes="100vw"  alt="post cover" srcset="//placehold.it/320x160/fff.jpg 320w, //placehold.it/640x320/fff.jpg 640w" />
		</picture>		</div>
		<div class="news__content">
			<time class="news__time">5th January 2015</time>
			<h2 class="news__title">Back to basics with twitter</h2>
			<p class="news__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos amet sequi eum. Eius nostrum omnis, accusantium corrupti...</p>
			<a href="#" class="button button--more news__more">View article</a>
		</div>
	</article>	<article class="news">
		<div class="news__image">
		<picture>
			<source media="(min-width: 40em)" sizes="(min-width: 60em) 320px, 48vw" srcset="//placehold.it/320x320/fff.jpg 320w, //placehold.it/640x640/fff.jpg 640w, //placehold.it/1280x1280/fff.jpg 1280w">
			<img sizes="100vw"  alt="post cover" srcset="//placehold.it/320x160/fff.jpg 320w, //placehold.it/640x320/fff.jpg 640w" />
		</picture>		</div>
		<div class="news__content">
			<time class="news__time">5th January 2015</time>
			<h2 class="news__title">Back to basics with twitter</h2>
			<p class="news__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos amet sequi eum. Eius nostrum omnis, accusantium corrupti...</p>
			<a href="#" class="button button--more news__more">View article</a>
		</div>
	</article>	<article class="news">
		<div class="news__image">
		<picture>
			<source media="(min-width: 40em)" sizes="(min-width: 60em) 320px, 48vw" srcset="//placehold.it/320x320/fff.jpg 320w, //placehold.it/640x640/fff.jpg 640w, //placehold.it/1280x1280/fff.jpg 1280w">
			<img sizes="100vw"  alt="post cover" srcset="//placehold.it/320x160/fff.jpg 320w, //placehold.it/640x320/fff.jpg 640w" />
		</picture>		</div>
		<div class="news__content">
			<time class="news__time">5th January 2015</time>
			<h2 class="news__title">Back to basics with twitter</h2>
			<p class="news__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos amet sequi eum. Eius nostrum omnis, accusantium corrupti...</p>
			<a href="#" class="button button--more news__more">View article</a>
		</div>
	</article>	<article class="news">
		<div class="news__image">
		<picture>
			<source media="(min-width: 40em)" sizes="(min-width: 60em) 320px, 48vw" srcset="//placehold.it/320x320/fff.jpg 320w, //placehold.it/640x640/fff.jpg 640w, //placehold.it/1280x1280/fff.jpg 1280w">
			<img sizes="100vw"  alt="post cover" srcset="//placehold.it/320x160/fff.jpg 320w, //placehold.it/640x320/fff.jpg 640w" />
		</picture>		</div>
		<div class="news__content">
			<time class="news__time">5th January 2015</time>
			<h2 class="news__title">Back to basics with twitter</h2>
			<p class="news__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos amet sequi eum. Eius nostrum omnis, accusantium corrupti...</p>
			<a href="#" class="button button--more news__more">View article</a>
		</div>
	</article>	<article class="news">
		<div class="news__image">
		<picture>
			<source media="(min-width: 40em)" sizes="(min-width: 60em) 320px, 48vw" srcset="//placehold.it/320x320/fff.jpg 320w, //placehold.it/640x640/fff.jpg 640w, //placehold.it/1280x1280/fff.jpg 1280w">
			<img sizes="100vw"  alt="post cover" srcset="//placehold.it/320x160/fff.jpg 320w, //placehold.it/640x320/fff.jpg 640w" />
		</picture>		</div>
		<div class="news__content">
			<time class="news__time">5th January 2015</time>
			<h2 class="news__title">Back to basics with twitter</h2>
			<p class="news__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos amet sequi eum. Eius nostrum omnis, accusantium corrupti...</p>
			<a href="#" class="button button--more news__more">View article</a>
		</div>
	</article></div>