Style Guide

Title

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

				
<h1 class="title">Title</h1>
<h1> Heading 1</h1>
<h2> Heading 2</h2>
<h3> Heading 3</h3>
<h4> Heading 4</h4>
<h5> Heading 5</h5>
<h6> Heading 6</h6>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.This is a link. Ut cumque minus esse debitis, id nostrum tempora pariatur inventore repellat ex, voluptate voluptatum veniam mollitia velit laudantium omnis doloremque facilis rerum.Read more...

				
					
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<a href="#">This is a link</a>. Ut cumque minus esse debitis, id nostrum tempora pariatur inventore repellat ex, voluptate voluptatum veniam mollitia velit laudantium omnis doloremque facilis rerum.<a href="#">Read more...</a></p>

Who's brave enough to fly into something we all keep calling a death sphere? Yes. You gave me a dollar and some candy. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.

				
					
[blockquote]
	Who's brave enough to fly into something we all keep calling a death sphere? Yes. You gave me a dollar and some candy. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.
[/blockqoute]

list item 1
list item 2
list item 3
list item 4

				
<ul>
	<li>list item 1</li>
	<li>list item 2</li>
	<li>list item 3</li>
	<li>list item 4</li>
</ul>

list item 1
list item 2
list item 3
list item 4

				
<ol>
	<li>list item 1</li>
	<li>list item 2</li>
	<li>list item 3</li>
	<li>list item 4</li>
</ol>

Term 1: Description 1
Term 2: Description 2
Term 3: Description 3

				
<dl>
	<dt>Term 1</dt>
	<dd>Description 1</dd>
	<dt>Term 2</dt>
	<dd>Description 2</dd>
	<dt>Term 3</dt>
	<dd>Description 3</dd>
</dl>

1/2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nesciunt, fugit facere veniam, illum commodi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nesciunt, fugit facere veniam, illum commodi.

				
					
[row space="gutters"]
[half] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nesciunt, fugit facere veniam, illum commodi. [/half]
[half] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nesciunt, fugit facere veniam, illum commodi. [/half]
[/row]

1/3

				
					
[row space="gutters"]
[half width="1/3"] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nesciunt, fugit facere veniam, illum commodi. [/half]
[half width="1/3"] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nesciunt, fugit facere veniam, illum commodi. [/half]
[half width="1/3"] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nesciunt, fugit facere veniam, illum commodi. [/half]
[/row]

2/3

1/3

				
					
[row space="gutters"]
[half width="2/3"] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nesciunt, fugit facere veniam, illum commodi. [/half]
[half width="1/3"] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nesciunt, fugit facere veniam, illum commodi. [/half]
[/row]

1/2

				
					
<div class="row align-center">
	<div class="col col-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nesciunt, fugit facere veniam, illum commodi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nesciunt, fugit facere veniam, illum commodi.</div>
</div>

Link

				
[button link="#" name=" primary small"] Link [/button]
[button link="#" name=" primary big"] Link [/button]
[button link="#" name=" primary large"] Link [/button]

Link Link

				
[button link="#" name=" upper"] Link [/button]
[button link="#" name=" secondary upper"] Button [/button]
[button link="#" name=" upper outline"] Link [/button]
[button link="#" name=" secondary upper outline"] Button [/button]

Link Link

				
[button link="#" name=" round"] Link [/button]
[button link="#" name=" secondary round"] Button [/button]
[button link="#" name=" round outline"] Link [/button]
[button link="#" name=" secondary round outline"] Button [/button]

				
[button link="#" name=" kube-calendar"][/button]
[button link="#" name=" secondary kube-calendar"] Change [/button]
[button link="#" name=" outline kube-search"][/button]
[button link="#" name=" secondary outline kube-search"] Search [/button]

First Name	Last Name	points
Jill	Smith	50
Eve	Jackson	94

				
<div class="row">
	<table class="bordered striped">
		<tr><td class="w40">First Name</td>
			<td class="w40">Last Name</td>
			<td class="w20">points</td>
		</tr>
		<tr><td class="w40">Jill</td>
			<td class="w40">Smith</td>
			<td class="w20">50</td>
		</tr>
		<tr><td class="w40">Eve</td>
			<td class="w40">Jackson</td>
			<td class="w20">94</td>
		</tr>
	</table>
</div>

First Name	Last Name	points
Jill	Smith	50
Eve	Jackson	94

				
<div class="row">
	<table class="unstyled">
		<tr><td class="w40">First Name</td>
			<td class="w40">Last Name</td>
			<td class="w20">points</td>
		</tr>
		<tr><td class="w40">Jill</td>
			<td class="w40">Smith</td>
			<td class="w20">50</td>
		</tr>
		<tr><td class="w40">Eve</td>
			<td class="w40">Jackson</td>
			<td class="w20">94</td>
		</tr>
	</table>
</div>

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.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

				
					
<div class="row">
	<nav class="tabs" data-component="tabs">
		<ul>
			<li class="active"><a href="#tab1">Tab 1</a></li>
			<li><a href="#tab2">Tab 2</a></li>
			<li><a href="#tab2">Tab 3</a></li>
		</ul>
	</nav>

	<div id="tab1">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. </div>
	<div id="tab2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
	<div id="tab3">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. </div>

</div>

				
					
<div class="row">
	<button data-component="dropdown" data-target="#my-dropdown">Show Dropdown
	<span class="caret down"></span></button>
	<div class="dropdown hide" id="my-dropdown">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, consequatur! Distinctio eum non quasi ratione, dignissimos, id nemo ab, quam ducimus nesciunt dolorum accusantium temporibus, quidem itaque error similique vitae!</p>
	<a href="#" data-action="dropdown-close">Close</a>
</div>

				
					
<div class="row">
	<nav class="breadcrumbs">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Shop</a></li>
			<li><a href="#">Brand</a></li>
			<li><span>...</span></li>
		</ul>
	</nav>
</div>

				
					
<div class="row">
	<nav class="pagination">
		<ul>
			<li class="prev"><a href="">&larr;</a></li>
			<li>
				<ul>
					<li><span>1</span></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>
				</ul>
			</li>
				<li class="next"><a href="">&rarr;</a></li>
		</ul>
	</nav>
</div>

				
					
<div class="row">
	<nav class="pagination align-center upper strong">
		<ul>
			<li class="prev"><a href="">&lt; Prev</a></li>
			<li class="w100">
				<ul>
					<li><a href="">BACK TO CATALOG</a></li>
				</ul>
			</li>
			<li class="next"><a href="">Next &gt;</a></li>
		</ul>
	</nav>
</div>