Pattern Lab

Primary Nav

HTML

									
										<nav id="nav" class="nav">
	<ul class="nav-list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav><!--end .nav-->

Footer Nav

HTML

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

Breadcrumbs

HTML

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

Pagination

1
2
3
4
5
6
7

HTML

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

Tabs

HTML

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